Added multi-edge test

cypress/integration/rendering/newShapes.spec.ts

@@ -1,6 +1,5 @@
 import { imgSnapshotTest } from '../../helpers/util.ts';
 
-// Define the looks and shape sets using readonly tuples to ensure type safety
 const looks = ['classic', 'handDrawn'] as const;
 const directions = ['TB', 'BT', 'LR', 'RL'] as const;
 const newShapesSet1 = [
@@ -34,7 +33,13 @@ const newShapesSet4 = [
   'multiWaveEdgedRectangle',
 ] as const;
 
-const newShapesSet5 = ['linedWaveEdgedRect', 'taggedWaveEdgedRectangle'];
+const newShapesSet5 = [
+  'linedWaveEdgedRect',
+  'taggedWaveEdgedRectangle',
+  'text',
+  'card',
+  'shadedProcess',
+] as const;
 
 // Aggregate all shape sets into a single array
 const newShapesSets = [
@@ -65,6 +70,19 @@ looks.forEach((look) => {
           imgSnapshotTest(flowchartCode, { look });
         });
 
+        it(`connect all shapes with each other`, () => {
+          let flowchartCode = `flowchart ${direction}\n`;
+          newShapesSet.forEach((newShape, index) => {
+            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`;
+          });
+          for (let i = 0; i < newShapesSet.length; i++) {
+            for (let j = i + 1; j < newShapesSet.length; j++) {
+              flowchartCode += `  n${i}${i} --> n${j}${j}\n`;
+            }
+          }
+          imgSnapshotTest(flowchartCode, { look });
+        });
+
         it(`with very long label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
@@ -115,128 +133,3 @@ looks.forEach((look) => {
     });
   });
 });
-
-// describe('Test for new shape set 1', () => {
-//   it('1: should render new shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           A --> A1@{ shape: triangle, label:"This is Sample Label" }@
-//         `
-//     );
-//   });
-
-//   it('2: should render new slopedRect shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           GS --> AQ@{ shape: slopedRect, label:"This is Final Label" }@
-//           RE --> AQ
-//         `,
-//       {}
-//     );
-//   });
-// });
-
-// describe('newShapes', () => {
-//   it('1: should render new triangle shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           BTF --> ADT@{ shape: triangle, label:"This is Sample Label" }@
-//         `
-//     );
-//   });
-
-//   it('2: should render new slopedRect shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           GS --> AQ@{ shape: slopedRect, label:"This is Final Label" }@
-//           RE --> AQ
-//         `,
-//       {}
-//     );
-//   });
-//   it('3: should render new tiltedCylinder shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           KS --> AC@{ shape: tiltedCylinder, label:"This is Final Label" }@
-//           RE --> AC
-//         `,
-//       {}
-//     );
-//   });
-//   it('4: should render new flippedTriangle shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           FS --> AD@{ shape: flippedTriangle, label:"This is Final Label" }@
-//           FE --> AD
-//         `,
-//       {}
-//     );
-//   });
-//   it('5: should render new hourGlass shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           MS --> AE@{ shape: hourglass, label:"This is Final Label" }@
-//           ME --> AE
-//         `,
-//       {}
-//     );
-//   });
-//   it('6: should render new taggedRect shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           KS --> AC@{ shape: taggedRect, label:"This is Final Label" }@
-//           RE --> AC
-//         `,
-//       {}
-//     );
-//   });
-//   it('7: should render new multiRect shape', () => {
-//     imgSnapshotTest(
-//       `flowchart
-//           DS --> AF@{ shape: multiRect, label:"This is Final Label" }@
-//           DE --> AF
-//         `,
-//       {}
-//     );
-//   });
-//   it('8: should render new FlowChart for New Shapes', () => {
-//     renderGraph(
-//       `
-//     flowchart
-//     A@{ shape: stateStart }@
-//     B@{ shape: crossedCircle, label: "Start Defining Test Case" }@
-//     C@{ shape: tiltedCylinder, label: "write your Test Case"}@
-//     D@{ shape: flippedTriangle, label: "new Test Case"}@
-//     E@{ shape: waveRectangle, label: "Execute Test Case" }@
-//     F@{ shape: hourglass , label: "add test case"}@
-//     G@{ shape: taggedRect, label: "execute new test case"}@
-//     H@{ shape: slopedRect, label: "Test Passed?" }@
-//     I@{ shape: bowTieRect, label: "Pass" }@
-//     J@{ shape: dividedRect, label: "Log Defect" }@
-//     K@{ shape: curvedTrapezoid, label: "End" }@
-//     L@{ shape: multiRect, label: "coming soon"}@
-
-//     A --> B
-//     B --> C
-//     C --> D
-//     D --> E
-//     E --> F
-//     F -->|Yes| G
-//     G -->|No| H
-//     H --> I
-//     I --> J
-//     J --> K
-//     K --> L
-//       `,
-//       { flowchart: { useMaxWidth: true } }
-//     );
-//     cy.get('svg').should((svg) => {
-//       const style = svg.attr('style');
-//       expect(svg).to.have.attr('width', '100%');
-//       // use within because the absolute value can be slightly different depending on the environment ±5%
-//       expect(style).to.match(/^max-width: [\d.]+px;$/);
-//       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-//       expect(maxWidthValue).to.be.within(250 * 0.95 - 1, 250 * 1.05);
-//     });
-//   });
-// });