diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index aed5d7973c4..4228c48ff4b 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -14,30 +14,42 @@ interface CodeObject { mermaid: CypressMermaidConfig; } -const utf8ToB64 = (str: string): string => { - return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); -}; - const batchId: string = 'mermaid-batch-' + (Cypress.env('useAppli') ? Date.now().toString() : Cypress.env('CYPRESS_COMMIT') || Date.now().toString()); -export const mermaidUrl = ( - graphStr: string | string[], - options: CypressMermaidConfig, - api: boolean +/** + * encodes, then decodes, then converts the `utf-8` {@link str} into `base64`. + * + * @param str - + * @returns converted `utf-8` into `base64`. + */ +const convertUtf8ToBase64 = (str: string): string => { + return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); +}; + +/** + * + * @param diagramStr - + * @param options - + * @param api - + * @returns url + */ +export const createMermaidUrl = ( + diagramStr: string, + options: CypressMermaidConfig = {}, + api: boolean = false ): string => { const codeObject: CodeObject = { - code: graphStr, + code: diagramStr, mermaid: options, }; const objStr: string = JSON.stringify(codeObject); - let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; - if (api) { - url = `http://localhost:9000/xss.html?graph=${graphStr}`; - } + const url = `http://localhost:9000/${api ? 'xss' : 'e2e'}.html?graph=${convertUtf8ToBase64( + objStr + )}`; if (options.listUrl) { cy.log(options.listId, ' ', url); @@ -46,57 +58,23 @@ export const mermaidUrl = ( return url; }; -export const imgSnapshotTest = ( - graphStr: string, - _options: CypressMermaidConfig = {}, - api = false, - validation?: any -): void => { - const options: CypressMermaidConfig = { - ..._options, - fontFamily: _options.fontFamily || 'courier', - // @ts-ignore TODO: Fix type of fontSize - fontSize: _options.fontSize || '16px', - sequence: { - ...(_options.sequence || {}), - actorFontFamily: 'courier', - noteFontFamily: - _options.sequence && _options.sequence.noteFontFamily - ? _options.sequence.noteFontFamily - : 'courier', - messageFontFamily: 'courier', - }, - }; - - const url: string = mermaidUrl(graphStr, options, api); - openURLAndVerifyRendering(url, options, validation); -}; - -export const urlSnapshotTest = ( +/** + * opens the {@link url}, then verifies that the `window` is rendered, + * and the `svg` is visible. + * + * @param url - + * @param options - + * @param validation - + */ +export const openUrlAndVerifyRendering = ( url: string, - options: CypressMermaidConfig, - _api = false, - validation?: any -): void => { - openURLAndVerifyRendering(url, options, validation); -}; - -export const renderGraph = ( - graphStr: string | string[], options: CypressMermaidConfig = {}, - api = false -): void => { - const url: string = mermaidUrl(graphStr, options, api); - openURLAndVerifyRendering(url, options); -}; - -export const openURLAndVerifyRendering = ( - url: string, - options: CypressMermaidConfig, validation?: any ): void => { const useAppli: boolean = Cypress.env('useAppli'); - const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); + const name: string = ( + options && options.name ? options.name : cy.state('runnable').fullTitle() + ).replace(/\s+/g, '-'); if (useAppli) { cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`); @@ -104,7 +82,7 @@ export const openURLAndVerifyRendering = ( appName: 'Mermaid', testName: name, batchName: Cypress.spec.name, - batchId: batchId + Cypress.spec.name, + batchId: `${batchId}-${Cypress.spec.name}`, }); } @@ -112,7 +90,7 @@ export const openURLAndVerifyRendering = ( cy.window().should('have.property', 'rendered', true); cy.get('svg').should('be.visible'); - if (validation) { + if (validation !== undefined) { cy.get('svg').should(validation); } @@ -125,3 +103,52 @@ export const openURLAndVerifyRendering = ( cy.matchImageSnapshot(name); } }; + +/** + * + * @param diagramStr - + * @param _options - + * @param api - + * @param validation - + */ +export const imgSnapshotTest = ( + diagramStr: string, + _options: CypressMermaidConfig = {}, + api: boolean = false, + validation?: any +): void => { + cy.log(JSON.stringify(_options)); + const options: CypressMermaidConfig = { + ..._options, + fontFamily: _options && _options.fontFamily ? _options.fontFamily : 'courier', + fontSize: _options && _options.fontSize ? _options.fontSize : 16, + sequence: { + actorFontFamily: 'courier', + noteFontFamily: + _options && _options.sequence && _options.sequence.noteFontFamily + ? _options?.sequence?.noteFontFamily + : 'courier', + messageFontFamily: 'courier', + }, + }; + + const url: string = createMermaidUrl(diagramStr, options, api); + openUrlAndVerifyRendering(url, options, validation); +}; + +/** + * + * @param url - + * @param _options - + * @param _api - + * @param validation - + */ +export const urlSnapshotTest = ( + url: string, + _options: CypressMermaidConfig = {}, + _api: boolean = false, + validation?: any +): void => { + const options: CypressMermaidConfig = Object.assign(_options); + openUrlAndVerifyRendering(url, options, validation); +}; diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 23338271f58..7f135287e48 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -1,16 +1,15 @@ -import { renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Configuration', () => { describe('arrowMarkerAbsolute', () => { it('should handle default value false of arrowMarkerAbsolute', () => { - renderGraph( + imgSnapshotTest( `graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] - `, - {} + ` ); // Check the marker-end property to make sure it is properly set to @@ -24,15 +23,14 @@ describe('Configuration', () => { }); }); it('should handle default value false of arrowMarkerAbsolute', () => { - renderGraph( + imgSnapshotTest( `graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] - `, - {} + ` ); // Check the marker-end property to make sure it is properly set to @@ -46,7 +44,7 @@ describe('Configuration', () => { }); }); it('should handle arrowMarkerAbsolute explicitly set to false', () => { - renderGraph( + imgSnapshotTest( `graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -70,7 +68,7 @@ describe('Configuration', () => { }); }); it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => { - renderGraph( + imgSnapshotTest( `graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -94,7 +92,7 @@ describe('Configuration', () => { }); }); it('should handle arrowMarkerAbsolute set to true', () => { - renderGraph( + imgSnapshotTest( `flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 704222f2fbc..2c18d30c2cc 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -4,7 +4,7 @@ describe('mermaid', () => { describe('registerDiagram', () => { it('should work on @mermaid-js/mermaid-example-diagram', () => { const url = 'http://localhost:9000/external-diagrams-example-diagram.html'; - urlSnapshotTest(url, {}, false, false); + urlSnapshotTest(url); }); }); }); diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 48eb57a9166..f40e400cc6c 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts'; +import { urlSnapshotTest, openUrlAndVerifyRendering } from '../../helpers/util.ts'; describe('CSS injections', () => { it('should not allow CSS injections outside of the diagram', () => { @@ -14,7 +14,7 @@ describe('CSS injections', () => { }); }); it('should not allow manipulating styletags using arrowheads', () => { - openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', { + openUrlAndVerifyRendering('http://localhost:9000/xss23-css.html', { logLevel: 1, arrowMarkerAbsolute: false, flowchart: { htmlLabels: true }, diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index 678040f98a0..29100bec952 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -1,10 +1,10 @@ -import { mermaidUrl } from '../../helpers/util.ts'; +import { createMermaidUrl } from '../../helpers/util.ts'; describe('XSS', () => { it('should handle xss in tags', () => { const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19'; - const url = mermaidUrl(str, {}, true); + const url = createMermaidUrl(str, {}, true); cy.visit(url); cy.wait(1000).then(() => { @@ -17,7 +17,7 @@ describe('XSS', () => { const str = 'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU+PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9'; - const url = mermaidUrl( + const url = createMermaidUrl( str, { theme: 'default', @@ -38,7 +38,7 @@ describe('XSS', () => { const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19'; - const url = mermaidUrl( + const url = createMermaidUrl( str, { theme: 'default', diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js index 5def9681577..9b71a1161d2 100644 --- a/cypress/integration/rendering/appli.spec.js +++ b/cypress/integration/rendering/appli.spec.js @@ -7,8 +7,7 @@ describe('Git Graph diagram', () => { commit id: "1" commit id: "2" commit id: "3" - `, - {} + ` ); }); // it(`ultraFastTest`, function () { diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js index 59af6504b93..e619c6c7751 100644 --- a/cypress/integration/rendering/c4.spec.js +++ b/cypress/integration/rendering/c4.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('C4 diagram', () => { it('should render a simple C4Context diagram', () => { @@ -27,10 +27,8 @@ describe('C4 diagram', () => { UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") - `, - {} + ` ); - cy.get('svg'); }); it('should render a simple C4Container diagram', () => { imgSnapshotTest( @@ -47,10 +45,8 @@ describe('C4 diagram', () => { Rel(customer, spa, "Uses", "HTTPS") Rel(email_system, customer, "Sends e-mails to") - `, - {} + ` ); - cy.get('svg'); }); it('should render a simple C4Component diagram', () => { imgSnapshotTest( @@ -66,10 +62,8 @@ describe('C4 diagram', () => { Rel_Back(spa, sign, "Uses", "JSON/HTTPS") UpdateRelStyle(spa, sign, $offsetY="-40") - `, - {} + ` ); - cy.get('svg'); }); it('should render a simple C4Dynamic diagram', () => { imgSnapshotTest( @@ -90,10 +84,8 @@ describe('C4 diagram', () => { UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40") UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60") UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10") - `, - {} + ` ); - cy.get('svg'); }); it('should render a simple C4Deployment diagram', () => { imgSnapshotTest( @@ -114,9 +106,7 @@ describe('C4 diagram', () => { } Rel(mobile, api, "Makes API calls to", "json/HTTPS") - `, - {} + ` ); - cy.get('svg'); }); }); diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index cab3649df43..0de1183f1b3 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Class diagram', () => { it('1: should render a simple class diagram', () => { @@ -32,7 +32,6 @@ describe('Class diagram', () => { `, { logLevel: 1 } ); - cy.get('svg'); }); it('2: should render a simple class diagrams with cardinality', () => { @@ -58,10 +57,8 @@ describe('Class diagram', () => { int id test() } - `, - {} + ` ); - cy.get('svg'); }); it('3: should render a simple class diagram with different visibilities', () => { @@ -76,10 +73,8 @@ describe('Class diagram', () => { Class01 : -int privateChimp Class01 : +int publicGorilla Class01 : #int protectedMarmoset - `, - {} + ` ); - cy.get('svg'); }); it('4: should render a simple class diagram with comments', () => { @@ -106,10 +101,8 @@ describe('Class diagram', () => { int id test() } - `, - {} + ` ); - cy.get('svg'); }); it('5: should render a simple class diagram with abstract method', () => { @@ -118,10 +111,8 @@ describe('Class diagram', () => { classDiagram Class01 <|-- AveryLongClass : Cool Class01 : someMethod()* - `, - {} + ` ); - cy.get('svg'); }); it('6: should render a simple class diagram with static method', () => { @@ -130,10 +121,8 @@ describe('Class diagram', () => { classDiagram Class01 <|-- AveryLongClass : Cool Class01 : someMethod()$ - `, - {} + ` ); - cy.get('svg'); }); it('7: should render a simple class diagram with Generic class', () => { @@ -150,10 +139,8 @@ describe('Class diagram', () => { int id test() } - `, - {} + ` ); - cy.get('svg'); }); it('8: should render a simple class diagram with Generic class and relations', () => { @@ -171,10 +158,8 @@ describe('Class diagram', () => { int id test() } - `, - {} + ` ); - cy.get('svg'); }); it('9: should render a simple class diagram with clickable link', () => { @@ -193,10 +178,8 @@ describe('Class diagram', () => { test() } link Class01 "google.com" "A Tooltip" - `, - {} + ` ); - cy.get('svg'); }); it('10: should render a simple class diagram with clickable callback', () => { @@ -215,10 +198,8 @@ describe('Class diagram', () => { test() } callback Class01 "functionCall" "A Tooltip" - `, - {} + ` ); - cy.get('svg'); }); it('11: should render a simple class diagram with return type on method', () => { @@ -230,10 +211,8 @@ describe('Class diagram', () => { test(int[] ids) bool testArray() bool[] } - `, - {} + ` ); - cy.get('svg'); }); it('12: should render a simple class diagram with generic types', () => { @@ -246,10 +225,8 @@ describe('Class diagram', () => { test(List~int~ ids) List~bool~ testArray() bool[] } - `, - {} + ` ); - cy.get('svg'); }); it('13: should render a simple class diagram with css classes applied', () => { @@ -264,10 +241,8 @@ describe('Class diagram', () => { } class Class10:::exClass2 - `, - {} + ` ); - cy.get('svg'); }); it('14: should render a simple class diagram with css classes applied directly', () => { @@ -280,10 +255,8 @@ describe('Class diagram', () => { test(List~int~ ids) List~bool~ testArray() bool[] } - `, - {} + ` ); - cy.get('svg'); }); it('15: should render a simple class diagram with css classes applied to multiple classes', () => { @@ -295,16 +268,13 @@ describe('Class diagram', () => { cssClass "Class10, Class20" exClass2 class Class20:::exClass2 - `, - {} + ` ); - cy.get('svg'); }); it('16: should render multiple class diagrams', () => { - imgSnapshotTest( - [ - ` + imgSnapshotTest([ + ` classDiagram Class01 "1" <|--|> "*" AveryLongClass : Cool <<interface>> Class01 @@ -326,7 +296,7 @@ describe('Class diagram', () => { test() } `, - ` + ` classDiagram Class01 "1" <|--|> "*" AveryLongClass : Cool <<interface>> Class01 @@ -348,14 +318,11 @@ describe('Class diagram', () => { test() } `, - ], - {} - ); - cy.get('svg'); + ]); }); // it('17: should render a class diagram when useMaxWidth is true (default)', () => { - // renderGraph( + // imgSnapshotTest( // ` // classDiagram // Class01 <|-- AveryLongClass : Cool @@ -383,7 +350,7 @@ describe('Class diagram', () => { // }); // it('18: should render a class diagram when useMaxWidth is false', () => { - // renderGraph( + // imgSnapshotTest( // ` // classDiagram // Class01 <|-- AveryLongClass : Cool @@ -421,7 +388,6 @@ describe('Class diagram', () => { `, { logLevel: 1 } ); - cy.get('svg'); }); it('should render class diagram with newlines in title', () => { @@ -439,7 +405,6 @@ describe('Class diagram', () => { +quack() } `); - cy.get('svg'); }); it('should render class diagram with many newlines in title', () => { @@ -467,7 +432,7 @@ describe('Class diagram', () => { -Many() #Methods() } - <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` `); }); @@ -503,7 +468,7 @@ describe('Class diagram', () => { }); it('should handle notes with anchor tag having target attribute', () => { - renderGraph( + imgSnapshotTest( `classDiagram class test { } note for test "note about mermaid"` diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js index d447ea99370..51c3fe3c8d0 100644 --- a/cypress/integration/rendering/conf-and-directives.spec.js +++ b/cypress/integration/rendering/conf-and-directives.spec.js @@ -11,8 +11,7 @@ describe('Configuration and directives - nodes should be light blue', () => { B C end - `, - {} + ` ); }); it('Settings from initialize - nodes should be green', () => { @@ -56,8 +55,7 @@ graph TD B C end - `, - {} + ` ); }); it('Settings from frontmatter - nodes should be grey', () => { @@ -74,8 +72,7 @@ graph TD B C end - `, - {} + ` ); }); @@ -90,8 +87,7 @@ graph TD B C end - `, - {} + ` ); }); it('Settings from initialize and directive - nodes should be grey', () => { diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 578f5a3984b..2e6fb884e3b 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Entity Relationship Diagram', () => { it('should render a simple ER diagram', () => { @@ -95,7 +95,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render an ER diagrams when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( ` erDiagram CUSTOMER ||--o{ ORDER : places @@ -115,7 +115,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render an ER when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( ` erDiagram CUSTOMER ||--o{ ORDER : places @@ -133,7 +133,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities that have no relationships', () => { - renderGraph( + imgSnapshotTest( ` erDiagram DEAD_PARROT @@ -147,7 +147,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities with and without attributes', () => { - renderGraph( + imgSnapshotTest( ` erDiagram BOOK { string title } @@ -159,7 +159,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities with generic and array attributes', () => { - renderGraph( + imgSnapshotTest( ` erDiagram BOOK { @@ -173,7 +173,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities with length in attributes type', () => { - renderGraph( + imgSnapshotTest( ` erDiagram CLUSTER { @@ -186,7 +186,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities and attributes with big and small entity names', () => { - renderGraph( + imgSnapshotTest( ` erDiagram PRIVATE_FINANCIAL_INSTITUTION { @@ -218,11 +218,10 @@ describe('Entity Relationship Diagram', () => { `, { loglevel: 1 } ); - cy.get('svg'); }); it('should render entities with keys', () => { - renderGraph( + imgSnapshotTest( ` erDiagram AUTHOR_WITH_LONG_ENTITY_NAME { @@ -240,7 +239,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities with comments', () => { - renderGraph( + imgSnapshotTest( ` erDiagram AUTHOR_WITH_LONG_ENTITY_NAME { @@ -258,7 +257,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities with keys and comments', () => { - renderGraph( + imgSnapshotTest( ` erDiagram AUTHOR_WITH_LONG_ENTITY_NAME { @@ -277,7 +276,7 @@ describe('Entity Relationship Diagram', () => { }); it('should render entities with aliases', () => { - renderGraph( + imgSnapshotTest( ` erDiagram T1 one or zero to one or more T2 : test @@ -301,8 +300,7 @@ title: simple ER diagram erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains -`, - {} +` ); }); diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 221806b073d..d0584fd5e5b 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe.skip('Flowchart ELK', () => { it('1-elk: should render a simple flowchart', () => { @@ -9,8 +9,7 @@ describe.skip('Flowchart ELK', () => { C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] - `, - {} + ` ); imgSnapshotTest( `flowchart TD @@ -51,8 +50,7 @@ describe.skip('Flowchart ELK', () => { P2 --> P4 P3 --> P6 P1.5 --> P5 - `, - {} + ` ); }); @@ -69,8 +67,7 @@ describe.skip('Flowchart ELK', () => { C ----> E3 C <-...-> E4 C ======> E5 - `, - {} + ` ); }); it('5-elk: should render escaped without html labels', () => { @@ -90,7 +87,7 @@ describe.skip('Flowchart ELK', () => { ); }); it('7-elk: should render a flowchart when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( `flowchart-elk TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -113,7 +110,7 @@ describe.skip('Flowchart ELK', () => { }); }); it('8-elk: should render a flowchart when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( `flowchart-elk TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -685,11 +682,10 @@ A --> B ); }); it('elk: should include classes on the edges', () => { - renderGraph( + imgSnapshotTest( `flowchart-elk TD A --> B --> C --> D - `, - {} + ` ); cy.get('svg').should((svg) => { const edges = svg.querySelectorAll('.edges > path'); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 857d395be7b..dc8616dd9ad 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Flowchart v2', () => { it('1: should render a simple flowchart', () => { @@ -9,8 +9,7 @@ describe('Flowchart v2', () => { C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] - `, - {} + ` ); }); @@ -41,8 +40,7 @@ describe('Flowchart v2', () => { P2 --> P4 P3 --> P6 P1.5 --> P5 - `, - {} + ` ); }); @@ -59,8 +57,7 @@ describe('Flowchart v2', () => { C ----> E3 C <-...-> E4 C ======> E5 - `, - {} + ` ); }); it('5: should render escaped without html labels', () => { @@ -80,7 +77,7 @@ describe('Flowchart v2', () => { ); }); it('7: should render a flowchart when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( `flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -103,7 +100,7 @@ describe('Flowchart v2', () => { }); }); it('8: should render a flowchart when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( `flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -716,8 +713,7 @@ A ~~~ B B[] B-->C[ more text ] B-->D( some text) - B-->E(plain)`, - {} + B-->E(plain)` ); }); @@ -725,8 +721,7 @@ A ~~~ B imgSnapshotTest( `flowchart TD B[] - B-->C[]`, - {} + B-->C[]` ); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index e4766e7923b..0b996e8f86d 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Graph', () => { it('1: should render a simple flowchart no htmlLabels', () => { @@ -693,8 +693,7 @@ describe('Graph', () => { imgSnapshotTest( `graph TD A[Christmas] - `, - {} + ` ); }); @@ -711,8 +710,7 @@ describe('Graph', () => { C ----> E3 C -----> E4 C ======> E5 - `, - {} + ` ); }); it('36: should render escaped without html labels', () => { @@ -732,7 +730,7 @@ describe('Graph', () => { ); }); it('38: should render a flowchart when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( `graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -755,7 +753,7 @@ describe('Graph', () => { }); }); it('39: should render a flowchart when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( `graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index a0c2dbcb9e7..68276f90814 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Gantt diagram', () => { beforeEach(() => { @@ -36,8 +36,7 @@ describe('Gantt diagram', () => { Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h - `, - {} + ` ); }); it('Handle multiline section titles with different line breaks', () => { @@ -72,8 +71,7 @@ describe('Gantt diagram', () => { Describe gantt syntax : after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h - `, - {} + ` ); }); it('Multiple dependencies syntax', () => { @@ -88,8 +86,7 @@ describe('Gantt diagram', () => { apple :a, 2017-07-20, 1w banana :crit, b, 2017-07-23, 1d cherry :active, c, after b a, 1d - `, - {} + ` ); }); it('should handle multiple dependencies syntax with after and until', () => { @@ -153,8 +150,7 @@ describe('Gantt diagram', () => { Plasma call 26 :pc26, 2019-08-21, 1d Plasma call 27 :pc27, 2019-09-03, 1d Plasma call 28 :pc28, 2019-09-17, 1d - `, - {} + ` ); }); @@ -171,8 +167,7 @@ describe('Gantt diagram', () => { section Section1 Yesterday: 1010-10-09, 1d Today: 1010-10-10, 1d - `, - {} + ` ); }); @@ -187,8 +182,7 @@ describe('Gantt diagram', () => { section Section1 Yesterday: 1010-10-09, 1d Today: 1010-10-10, 1d - `, - {} + ` ); }); @@ -203,8 +197,7 @@ describe('Gantt diagram', () => { section Section1 Yesterday: 1010-10-09, 1d Today: 1010-10-10, 1d - `, - {} + ` ); }); @@ -221,13 +214,12 @@ describe('Gantt diagram', () => { section Another Another another task :b1, 20, 12ms Another another another task :after b1, 0.024s - `, - {} + ` ); }); it('should render a gantt diagram when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( ` gantt dateFormat YYYY-MM-DD @@ -278,7 +270,7 @@ describe('Gantt diagram', () => { }); it('should render a gantt diagram when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( ` gantt dateFormat YYYY-MM-DD @@ -416,8 +408,7 @@ describe('Gantt diagram', () => { section Another Task in sec : 2022-10-03, 3h another task : 3h - `, - {} + ` ); }); @@ -437,8 +428,7 @@ describe('Gantt diagram', () => { section Another Task in sec : 2022-10-04, 2d another task : 2d - `, - {} + ` ); }); @@ -458,8 +448,7 @@ describe('Gantt diagram', () => { section Another Task in sec : 2022-10-20, 12d another task : 24d - `, - {} + ` ); }); @@ -479,8 +468,7 @@ describe('Gantt diagram', () => { section Another Task in sec : 2022-10-20, 12d another task : 24d - `, - {} + ` ); }); @@ -501,8 +489,7 @@ describe('Gantt diagram', () => { section Another Task in sec : 2022-10-20, 12d another task : 24d - `, - {} + ` ); }); @@ -522,8 +509,7 @@ describe('Gantt diagram', () => { section Another Task in sec : 2022-10-20, 12d another task : 24d - `, - {} + ` ); }); @@ -625,8 +611,7 @@ describe('Gantt diagram', () => { G: 13:32:00, 18m H: 13:50:00, 20m I: 14:10:00, 10m - `, - {} + ` ); }); diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 2184fecf88a..f84466ec5a5 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -7,8 +7,7 @@ describe('Git Graph diagram', () => { commit id: "1" commit id: "2" commit id: "3" - `, - {} + ` ); }); it('2: should render a simple gitgraph with commit on main branch with Id', () => { @@ -17,8 +16,7 @@ describe('Git Graph diagram', () => { commit id: "One" commit id: "Two" commit id: "Three" - `, - {} + ` ); }); it('3: should render a simple gitgraph with different commitTypes on main branch ', () => { @@ -26,9 +24,8 @@ describe('Git Graph diagram', () => { `gitGraph commit id: "Normal Commit" commit id: "Reverse Commit" type: REVERSE - commit id: "Highlight Commit" type: HIGHLIGHT - `, - {} + commit id: "Hightlight Commit" type: HIGHLIGHT + ` ); }); it('4: should render a simple gitgraph with tags commitTypes on main branch ', () => { @@ -36,9 +33,8 @@ describe('Git Graph diagram', () => { `gitGraph commit id: "Normal Commit with tag" tag: "v1.0.0" commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" - commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4" - `, - {} + commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + ` ); }); it('5: should render a simple gitgraph with two branches', () => { @@ -53,8 +49,7 @@ describe('Git Graph diagram', () => { checkout main commit id: "5" commit id: "6" - `, - {} + ` ); }); it('6: should render a simple gitgraph with two branches and merge commit', () => { @@ -70,8 +65,7 @@ describe('Git Graph diagram', () => { merge develop commit id: "5" commit id: "6" - `, - {} + ` ); }); it('7: should render a simple gitgraph with three branches and tagged merge commit', () => { @@ -98,8 +92,7 @@ describe('Git Graph diagram', () => { commit id: "8" checkout main commit id: "9" - `, - {} + ` ); }); it('8: should render a simple gitgraph with more than 8 branches & overriding variables', () => { @@ -127,8 +120,7 @@ describe('Git Graph diagram', () => { branch branch9 checkout branch1 commit id: "1" - `, - {} + ` ); }); it('9: should render a simple gitgraph with rotated labels', () => { @@ -141,8 +133,7 @@ describe('Git Graph diagram', () => { commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e" commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e" commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d" - `, - {} + ` ); }); it('10: should render a simple gitgraph with horizontal labels', () => { @@ -155,8 +146,7 @@ describe('Git Graph diagram', () => { commit id: "Beta" commit id: "Gamma" commit id: "Delta" - `, - {} + ` ); }); it('11: should render a simple gitgraph with cherry pick commit', () => { @@ -176,8 +166,7 @@ describe('Git Graph diagram', () => { commit id:"THREE" checkout develop commit id:"C" - `, - {} + ` ); }); it('11: should render a gitgraph with cherry pick commit with custom tag', () => { @@ -197,8 +186,7 @@ describe('Git Graph diagram', () => { commit id:"THREE" checkout develop commit id:"C" - `, - {} + ` ); }); it('11: should render a gitgraph with cherry pick commit with no tag', () => { @@ -218,8 +206,7 @@ describe('Git Graph diagram', () => { commit id:"THREE" checkout develop commit id:"C" - `, - {} + ` ); }); it('11: should render a simple gitgraph with two cherry pick commit', () => { @@ -244,8 +231,7 @@ describe('Git Graph diagram', () => { checkout develop commit id:"C" merge featureA - `, - {} + ` ); }); it('12: should render commits for more than 8 branches', () => { @@ -290,8 +276,7 @@ describe('Git Graph diagram', () => { merge branch8 branch branch9 commit id: "10-abcdefg" - `, - {} + ` ); }); it('13: should render a simple gitgraph with three branches,custom merge commit id,tag,type', () => { @@ -318,8 +303,7 @@ describe('Git Graph diagram', () => { commit id: "8" checkout main commit id: "9" - `, - {} + ` ); }); it('1433: should render a simple gitgraph with a title', () => { @@ -329,8 +313,7 @@ title: simple gitGraph --- gitGraph commit id: "1-abcdefg" -`, - {} +` ); }); it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => { diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index d8bef6d1b9d..66ecc4ff8dc 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('User journey diagram', () => { it('Simple test', () => { @@ -6,8 +6,7 @@ describe('User journey diagram', () => { `journey title Adding journey diagram functionality to mermaid section Order from website - `, - {} + ` ); }); @@ -23,13 +22,12 @@ section Order from website section Go home Go downstairs: 5: Me Sit down: 3: Me - `, - {} + ` ); }); it('should render a user journey diagram when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( `journey title E-Commerce section Order from website diff --git a/cypress/integration/rendering/pie.spec.ts b/cypress/integration/rendering/pie.spec.ts index 4a1d774c0ab..0f695a9cd2b 100644 --- a/cypress/integration/rendering/pie.spec.ts +++ b/cypress/integration/rendering/pie.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('pie chart', () => { it('should render a simple pie diagram', () => { @@ -31,7 +31,7 @@ describe('pie chart', () => { }); it('should render a pie diagram when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( `pie title Sports in Sweden "Bandy": 40 "Ice-Hockey": 80 @@ -49,7 +49,7 @@ describe('pie chart', () => { }); it('should render a pie diagram when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( `pie title Sports in Sweden "Bandy": 40 "Ice-Hockey": 80 diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 1be1f7deffb..62719f1a2e7 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -1,14 +1,12 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Quadrant Chart', () => { it('should render if only chart type is provided', () => { imgSnapshotTest( ` quadrantChart - `, - {} + ` ); - cy.get('svg'); }); it('should render a complete quadrant chart', () => { imgSnapshotTest( @@ -27,10 +25,8 @@ describe('Quadrant Chart', () => { Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] - `, - {} + ` ); - cy.get('svg'); }); it('should render without points', () => { imgSnapshotTest( @@ -43,10 +39,8 @@ describe('Quadrant Chart', () => { quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved - `, - {} + ` ); - cy.get('svg'); }); it('should able to render y-axix on right side', () => { imgSnapshotTest( @@ -60,10 +54,8 @@ describe('Quadrant Chart', () => { quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved - `, - {} + ` ); - cy.get('svg'); }); it('should able to render x-axix on bottom', () => { imgSnapshotTest( @@ -77,10 +69,8 @@ describe('Quadrant Chart', () => { quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved - `, - {} + ` ); - cy.get('svg'); }); it('should able to render x-axix on bottom and y-axis on right', () => { imgSnapshotTest( @@ -94,10 +84,8 @@ describe('Quadrant Chart', () => { quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved - `, - {} + ` ); - cy.get('svg'); }); it('should render without title', () => { imgSnapshotTest( @@ -109,10 +97,8 @@ describe('Quadrant Chart', () => { quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved - `, - {} + ` ); - cy.get('svg'); }); it('should use all the config', () => { imgSnapshotTest( @@ -132,10 +118,8 @@ describe('Quadrant Chart', () => { Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] - `, - {} + ` ); - cy.get('svg'); }); it('should use all the theme variable', () => { imgSnapshotTest( @@ -155,10 +139,8 @@ describe('Quadrant Chart', () => { Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] - `, - {} + ` ); - cy.get('svg'); }); it('should render x-axis labels in the center, if x-axis has two labels', () => { imgSnapshotTest( diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index f33ae7a0cba..91ccad1b176 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Requirement diagram', () => { it('sample', () => { @@ -41,9 +41,7 @@ describe('Requirement diagram', () => { test_req - traces -> test_req2 test_req - contains -> test_req3 test_req <- copies - test_entity2 - `, - {} + ` ); - cy.get('svg'); }); }); diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index ad0d75f187c..15fb4fe9285 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/cypress/integration/rendering/sankey.spec.ts @@ -1,14 +1,13 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Sankey Diagram', () => { it('should render a simple example', () => { imgSnapshotTest( ` sankey-beta - + sourceNode,targetNode,10 - `, - {} + ` ); }); @@ -22,7 +21,7 @@ describe('Sankey Diagram', () => { }); it('links should use hex color', function () { - renderGraph(this.graph, { sankey: { linkColor: '#636465' } }); + imgSnapshotTest(this.graph, { sankey: { linkColor: '#636465' } }); cy.get('.link path').should((link) => { expect(link.attr('stroke')).to.equal('#636465'); @@ -30,7 +29,7 @@ describe('Sankey Diagram', () => { }); it('links should be the same color as source node', function () { - renderGraph(this.graph, { sankey: { linkColor: 'source' } }); + imgSnapshotTest(this.graph, { sankey: { linkColor: 'source' } }); cy.get('.link path').then((link) => { cy.get('.node[id="node-1"] rect').should((node) => @@ -40,7 +39,7 @@ describe('Sankey Diagram', () => { }); it('links should be the same color as target node', function () { - renderGraph(this.graph, { sankey: { linkColor: 'target' } }); + imgSnapshotTest(this.graph, { sankey: { linkColor: 'target' } }); cy.get('.link path').then((link) => { cy.get('.node[id="node-2"] rect').should((node) => @@ -50,7 +49,7 @@ describe('Sankey Diagram', () => { }); it('links must be gradient', function () { - renderGraph(this.graph, { sankey: { linkColor: 'gradient' } }); + imgSnapshotTest(this.graph, { sankey: { linkColor: 'gradient' } }); cy.get('.link path').should((link) => { expect(link.attr('stroke')).to.equal('url(#linearGradient-3)'); @@ -63,14 +62,14 @@ describe('Sankey Diagram', () => { cy.wrap( ` sankey-beta - + a,b,8 b,c,8 c,d,8 d,e,8 - + x,c,4 - c,y,4 + c,y,4 ` ).as('graph'); }); @@ -94,7 +93,7 @@ describe('Sankey Diagram', () => { }); it('should justify nodes', function () { - renderGraph(this.graph, { + imgSnapshotTest(this.graph, { sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false }, }); cy.get('.node[id="node-6"]').should((node) => { @@ -106,7 +105,7 @@ describe('Sankey Diagram', () => { }); it('should align nodes left', function () { - renderGraph(this.graph, { + imgSnapshotTest(this.graph, { sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false }, }); cy.get('.node[id="node-6"]').should((node) => { @@ -118,7 +117,7 @@ describe('Sankey Diagram', () => { }); it('should align nodes right', function () { - renderGraph(this.graph, { + imgSnapshotTest(this.graph, { sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false }, }); cy.get('.node[id="node-6"]').should((node) => { @@ -130,7 +129,7 @@ describe('Sankey Diagram', () => { }); it('should center nodes', function () { - renderGraph(this.graph, { + imgSnapshotTest(this.graph, { sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false }, }); cy.get('.node[id="node-6"]').should((node) => { diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index a81f18a2d53..1a9ea83c519 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -1,10 +1,8 @@ -/// - -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; context('Sequence diagram', () => { it('should render a sequence diagram with boxes', () => { - renderGraph( + imgSnapshotTest( ` sequenceDiagram box LightGrey Alice and Bob @@ -84,8 +82,7 @@ context('Sequence diagram', () => { note right of 4: multiline
using #lt;br /#gt; 4->>1: multiline
using #lt;br /#gt; note right of 1: multiline
using #lt;br \t/#gt; - `, - {} + ` ); }); it('should handle empty lines', () => { @@ -94,8 +91,7 @@ context('Sequence diagram', () => { sequenceDiagram Alice->>John: Hello John
John-->>Alice: Great

day! - `, - {} + ` ); }); it('should handle line breaks and wrap annotations', () => { @@ -114,8 +110,7 @@ context('Sequence diagram', () => { Note over John:nowrap: John's trying hard not to break his train of thought. Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take?? Note over John: After a few more moments, John
finally snaps out of it. - `, - {} + ` ); }); it('should render loops with a slight margin', () => { @@ -359,8 +354,7 @@ context('Sequence diagram', () => { participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be A->>Bob: Hola Bob-->A: Pasten ! - `, - {} + ` ); }); it('should be possible to use actor symbols instead of boxes', () => { @@ -371,8 +365,7 @@ context('Sequence diagram', () => { actor Bob Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice - `, - {} + ` ); }); it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => { @@ -405,8 +398,7 @@ context('Sequence diagram', () => { Alice->>Bob: Hola Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long notes wrapped (inline) left of actor', () => { @@ -416,8 +408,7 @@ context('Sequence diagram', () => { Alice->>Bob: Hola Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long notes right of actor', () => { @@ -427,8 +418,7 @@ context('Sequence diagram', () => { Alice->>Bob: Hola Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long notes wrapped (inline) right of actor', () => { @@ -438,8 +428,7 @@ context('Sequence diagram', () => { Alice->>Bob: Hola Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long notes over actor', () => { @@ -449,8 +438,7 @@ context('Sequence diagram', () => { Alice->>Bob: Hola Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long notes wrapped (inline) over actor', () => { @@ -460,8 +448,7 @@ context('Sequence diagram', () => { Alice->>Bob: Hola Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long messages from an actor to the left to one to the right', () => { @@ -470,8 +457,7 @@ context('Sequence diagram', () => { sequenceDiagram Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long messages wrapped (inline) from an actor to the left to one to the right', () => { @@ -480,8 +466,7 @@ context('Sequence diagram', () => { sequenceDiagram Alice->>Bob:wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though - `, - {} + ` ); }); it('should render long messages from an actor to the right to one to the left', () => { @@ -490,8 +475,7 @@ context('Sequence diagram', () => { sequenceDiagram Alice->>Bob: I'm short Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be - `, - {} + ` ); }); it('should render long messages wrapped (inline) from an actor to the right to one to the left', () => { @@ -500,8 +484,7 @@ context('Sequence diagram', () => { sequenceDiagram Alice->>Bob: I'm short Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be - `, - {} + ` ); }); }); @@ -533,8 +516,7 @@ context('Sequence diagram', () => { E ->> E: Task 6 end D -->> A: Complete - `, - {} + ` ); }); it('should render a single and nested opt with long test overflowing', () => { @@ -564,8 +546,7 @@ context('Sequence diagram', () => { E ->> E: Task 6 end D -->> A: Complete - `, - {} + ` ); }); it('should render a single and nested opt with long test wrapping', () => { @@ -596,8 +577,7 @@ context('Sequence diagram', () => { E ->> E: Task 6 end D -->> A: Complete - `, - {} + ` ); }); it('should render rect around and inside loops', () => { @@ -618,8 +598,7 @@ context('Sequence diagram', () => { D --> C: 4 end end - `, - {} + ` ); }); it('should render rect around and inside alts', () => { @@ -637,8 +616,7 @@ context('Sequence diagram', () => { end end B ->> A: Return - `, - {} + ` ); }); it('should render rect around and inside opts', () => { @@ -661,8 +639,7 @@ context('Sequence diagram', () => { end end B ->> A: Return - `, - {} + ` ); }); it('should render rect around and inside criticals', () => { @@ -680,8 +657,7 @@ context('Sequence diagram', () => { end end B ->> A: Return - `, - {} + ` ); }); it('should render rect around and inside breaks', () => { @@ -697,8 +673,7 @@ context('Sequence diagram', () => { end end B ->> A: Return - `, - {} + ` ); }); it('should render autonumber when configured with such', () => { @@ -730,8 +705,7 @@ context('Sequence diagram', () => { John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! - `, - {} + ` ); }); it('should render autonumber with different line breaks', () => { @@ -743,8 +717,7 @@ context('Sequence diagram', () => { Alice->>John: John,
can you hear me? John-->>Alice: Hi Alice,
I can hear you! John-->>Alice: I feel great! - `, - {} + ` ); }); it('should render dark theme from init directive and configure font size 24 font', () => { @@ -756,8 +729,7 @@ context('Sequence diagram', () => { Alice->>John: John, can you hear me? John-->>Alice: Hi Alice, I can hear you! John-->>Alice: I feel great! - `, - {} + ` ); }); it('should render with wrapping enabled', () => { @@ -770,8 +742,7 @@ context('Sequence diagram', () => { A->>John: John, can you hear me? If you are not available, we can talk later. John-->>A: Hi Alice, I can hear you! I was finishing up an important meeting. John-->>A: I feel great! I was not ignoring you. I am sorry you had to wait for a response. - `, - {} + ` ); }); it('should render with an init directive', () => { @@ -780,8 +751,7 @@ context('Sequence diagram', () => { sequenceDiagram Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can! Note left of Alice: Bob thinks - Bob->>Alice: Fine!`, - {} + Bob->>Alice: Fine!` ); }); }); @@ -816,7 +786,7 @@ context('Sequence diagram', () => { }); context('links', () => { it('should support actor links', () => { - renderGraph( + imgSnapshotTest( ` sequenceDiagram link Alice: Dashboard @ https://dashboard.contoso.com/alice @@ -904,7 +874,7 @@ context('Sequence diagram', () => { }); context('svg size', () => { it('should render a sequence diagram when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( ` sequenceDiagram participant Alice @@ -944,7 +914,7 @@ context('Sequence diagram', () => { }); }); it('should render a sequence diagram when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( ` sequenceDiagram participant Alice @@ -987,7 +957,7 @@ context('Sequence diagram', () => { return false; }); - renderGraph([ + imgSnapshotTest([ `sequenceDiagram Alice->>Bob: Hello Bob, how are you ? Bob->>Alice: Fine, thank you. And you? diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index 9a1a27abe55..41dd0782e77 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('State diagram', () => { it('v2 should render a simple info', () => { @@ -8,7 +8,6 @@ describe('State diagram', () => { `, { logLevel: 1, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a simple state diagrams', () => { imgSnapshotTest( @@ -20,7 +19,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a long descriptions instead of id when available', () => { imgSnapshotTest( @@ -32,7 +30,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a long descriptions with additional descriptions', () => { imgSnapshotTest( @@ -44,7 +41,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a single state with short descriptions', () => { imgSnapshotTest( @@ -55,7 +51,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a transition descriptions with new lines', () => { imgSnapshotTest( @@ -69,7 +64,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a state with a note', () => { imgSnapshotTest( @@ -83,7 +77,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a state with on the left side when so specified', () => { imgSnapshotTest( @@ -97,7 +90,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a state with a note together with another state', () => { imgSnapshotTest( @@ -113,7 +105,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a note with multiple lines in it', () => { imgSnapshotTest( @@ -156,7 +147,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a simple state diagrams 2', () => { imgSnapshotTest( @@ -169,7 +159,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a simple state diagrams with labels', () => { imgSnapshotTest( @@ -185,7 +174,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render state descriptions', () => { imgSnapshotTest( @@ -198,7 +186,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render composite states', () => { imgSnapshotTest( @@ -217,7 +204,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render multiple composite states', () => { imgSnapshotTest( @@ -287,7 +273,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render concurrency states', () => { imgSnapshotTest( @@ -311,7 +296,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('v2 should render a state with states in it', () => { imgSnapshotTest( @@ -469,7 +453,7 @@ stateDiagram-v2 ); }); it('v2 should render a state diagram when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( ` stateDiagram-v2 @@ -491,7 +475,7 @@ stateDiagram-v2 }); }); it('v2 should render a state diagram when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( ` stateDiagram-v2 @@ -567,8 +551,7 @@ title: simple state diagram stateDiagram-v2 [*] --> State1 State1 --> [*] -`, - {} +` ); }); }); diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 01e7a2b44eb..c4f8afb5a23 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('State diagram', () => { it('should render a simple state diagrams', () => { @@ -10,7 +10,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a long descriptions instead of id when available', () => { imgSnapshotTest( @@ -22,7 +21,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a long descriptions with additional descriptions', () => { imgSnapshotTest( @@ -34,7 +32,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a single state with short descriptions', () => { imgSnapshotTest( @@ -45,7 +42,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a transition descriptions with new lines', () => { imgSnapshotTest( @@ -59,7 +55,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a state with a note', () => { imgSnapshotTest( @@ -73,7 +68,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a state with on the left side when so specified', () => { imgSnapshotTest( @@ -87,7 +81,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a state with a note together with another state', () => { imgSnapshotTest( @@ -103,7 +96,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a note with multiple lines in it', () => { imgSnapshotTest( @@ -146,7 +138,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a simple state diagrams 2', () => { imgSnapshotTest( @@ -159,7 +150,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a simple state diagrams with labels', () => { imgSnapshotTest( @@ -175,7 +165,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render state descriptions', () => { imgSnapshotTest( @@ -188,7 +177,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render composite states', () => { imgSnapshotTest( @@ -207,7 +195,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render multiple composit states', () => { imgSnapshotTest( @@ -277,7 +264,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render concurrency states', () => { imgSnapshotTest( @@ -301,7 +287,6 @@ describe('State diagram', () => { `, { logLevel: 0, fontFamily: 'courier' } ); - cy.get('svg'); }); it('should render a state with states in it', () => { imgSnapshotTest( @@ -347,7 +332,7 @@ describe('State diagram', () => { ); }); it('should render a state diagram when useMaxWidth is true (default)', () => { - renderGraph( + imgSnapshotTest( ` stateDiagram [*] --> State1 @@ -370,7 +355,7 @@ describe('State diagram', () => { }); }); it('should render a state diagram when useMaxWidth is false', () => { - renderGraph( + imgSnapshotTest( ` stateDiagram [*] --> State1 diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index c84ad0c4b7a..373555a164f 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -7,10 +7,8 @@ describe('themeCSS balancing, it', () => { %%{init: { 'themeCSS': '} * { background: red }' } }%% flowchart TD a --> b - `, - {} + ` ); - cy.get('svg'); }); it('should not allow unbalanced CSS definitions 2', () => { imgSnapshotTest( @@ -18,19 +16,13 @@ describe('themeCSS balancing, it', () => { %%{init: { 'themeCSS': '\u007D * { background: red }' } }%% flowchart TD a2 --> b2 - `, - {} + ` ); - cy.get('svg'); }); }); // TODO: Delete/Rename this describe, keeping the inner contents. describe('Pie Chart', () => { - // beforeEach(()=>{ - // cy.clock((new Date('2014-06-09')).getTime()); - // }); - ['default', 'forest', 'dark', 'neutral'].forEach((theme) => { describe(theme, () => { it('should render a pie diagram', () => { @@ -45,7 +37,6 @@ describe('Pie Chart', () => { `, { theme } ); - cy.get('svg'); }); it('should render a flowchart diagram', () => { imgSnapshotTest( @@ -70,7 +61,6 @@ describe('Pie Chart', () => { `, { theme } ); - cy.get('svg'); }); it('should render a new flowchart diagram', () => { imgSnapshotTest( @@ -96,7 +86,6 @@ describe('Pie Chart', () => { `, { theme } ); - cy.get('svg'); }); it('should render a sequence diagram', () => { imgSnapshotTest( @@ -120,12 +109,9 @@ describe('Pie Chart', () => { loop Every minute John-->Alice: Great! end - - `, { theme } ); - cy.get('svg'); }); it('should render a class diagram', () => { @@ -175,7 +161,6 @@ describe('Pie Chart', () => { `, { theme } ); - cy.get('svg'); }); it('should render a state diagram', () => { imgSnapshotTest( @@ -210,7 +195,6 @@ stateDiagram `, { theme } ); - cy.get('svg'); }); it('should render a state diagram (v2)', () => { imgSnapshotTest( @@ -245,7 +229,6 @@ stateDiagram-v2 `, { theme } ); - cy.get('svg'); }); it('should render a er diagram', () => { imgSnapshotTest( @@ -266,7 +249,6 @@ erDiagram `, { theme } ); - cy.get('svg'); }); it('should render a user journey diagram', () => { imgSnapshotTest( @@ -287,7 +269,6 @@ erDiagram `, { theme } ); - cy.get('svg'); }); it('should render a gantt diagram', () => { cy.clock(new Date('2014-01-06').getTime()); @@ -326,7 +307,6 @@ erDiagram `, { theme } ); - cy.get('svg'); }); }); }); diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index c748b54d3ca..3852b227228 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -9,8 +9,7 @@ describe('Timeline diagram', () => { 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - `, - {} + ` ); }); it('2: should render a timeline diagram with sections', () => { @@ -24,8 +23,7 @@ describe('Timeline diagram', () => { section 21st century Industry 4.0 : Internet, Robotics, Internet of Things Industry 5.0 : Artificial intelligence, Big data,3D printing - `, - {} + ` ); }); it('3: should render a complex timeline with sections, and long events text with
', () => { @@ -40,8 +38,7 @@ describe('Timeline diagram', () => { : New styles of pottery and ways of burying the dead appear. 2200 BC : The last major building works are completed at Stonehenge.
People now bury their dead in stone circles. : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive. - `, - {} + ` ); }); it('4: should render a simple timeline with directives and disableMultiColor:true ', () => { @@ -53,8 +50,7 @@ describe('Timeline diagram', () => { 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - `, - {} + ` ); }); it('5: should render a simple timeline with directive overridden colors', () => { @@ -73,8 +69,7 @@ describe('Timeline diagram', () => { 2007 : Tumblr 2008 : Instagram 2010 : Pinterest - `, - {} + ` ); }); it('6: should render a simple timeline in base theme', () => { @@ -89,8 +84,7 @@ describe('Timeline diagram', () => { 2007 : Tumblr 2008 : Instagram 2010 : Pinterest - `, - {} + ` ); }); @@ -106,8 +100,7 @@ describe('Timeline diagram', () => { 2007 : Tumblr 2008 : Instagram 2010 : Pinterest - `, - {} + ` ); }); @@ -123,8 +116,7 @@ describe('Timeline diagram', () => { 2007 : Tumblr 2008 : Instagram 2010 : Pinterest - `, - {} + ` ); }); @@ -140,8 +132,7 @@ describe('Timeline diagram', () => { 2007 : Tumblr 2008 : Instagram 2010 : Pinterest - `, - {} + ` ); }); @@ -157,8 +148,7 @@ describe('Timeline diagram', () => { 2007 : Tumblr 2008 : Instagram 2010 : Pinterest - `, - {} + ` ); }); }); diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 85d998c50b8..4470a25c118 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('XY Chart', () => { it('should render the simplest possible chart', () => { diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js index 53d8ae3469d..2d178a40d45 100644 --- a/cypress/integration/rendering/zenuml.spec.js +++ b/cypress/integration/rendering/zenuml.spec.js @@ -12,8 +12,7 @@ describe('Zen UML', () => { } } } - `, - {} + ` ); }); });