diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts index f9aa427d5b..45e51a09b6 100644 --- a/cypress/integration/rendering/newShapes.spec.ts +++ b/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); -// }); -// }); -// });