diff --git a/cSpell.json b/cSpell.json index 09916acac..26550c527 100644 --- a/cSpell.json +++ b/cSpell.json @@ -6,6 +6,7 @@ "adamiecki", "alois", "antiscript", + "appli", "applitools", "asciidoctor", "ashish", diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index 5213f634a..533cca499 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -2,7 +2,7 @@ const utf8ToB64 = (str) => { return window.btoa(unescape(encodeURIComponent(str))); }; -const batchId = 'mermid-batch' + new Date().getTime(); +const batchId = 'mermaid-batch' + new Date().getTime(); export const mermaidUrl = (graphStr, options, api) => { const obj = { @@ -46,8 +46,22 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => if (!options.fontSize) { options.fontSize = '16px'; } + const url = mermaidUrl(graphStr, options, api); + openURLAndVerifyRendering(url, options, validation); +}; + +export const urlSnapshotTest = (url, _options, api = false, validation) => { + const options = Object.assign(_options); + openURLAndVerifyRendering(url, options, validation); +}; + +export const renderGraph = (graphStr, options, api) => { + const url = mermaidUrl(graphStr, options, api); + openURLAndVerifyRendering(url, options); +}; + +const openURLAndVerifyRendering = (url, options, validation = undefined) => { const useAppli = Cypress.env('useAppli'); - cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); if (useAppli) { @@ -60,82 +74,20 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => }); } - const url = mermaidUrl(graphStr, options, api); - cy.visit(url); + cy.window().should('have.property', 'rendered', true); + cy.get('svg').should('be.visible'); + if (validation) { cy.get('svg').should(validation); } - cy.get('svg'); - // Default name to test title if (useAppli) { cy.log('Check eyes' + Cypress.spec.name); cy.eyesCheckWindow('Click!'); - cy.log('Closing eyes: ' + Cypress.spec.name); + cy.log('Closing eyes' + Cypress.spec.name); cy.eyesClose(); } else { cy.matchImageSnapshot(name); } }; - -export const urlSnapshotTest = (url, _options, api = false, validation) => { - cy.log(_options); - const options = Object.assign(_options); - if (!options.fontFamily) { - options.fontFamily = 'courier'; - } - if (!options.sequence) { - options.sequence = {}; - } - if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) { - options.sequence.actorFontFamily = 'courier'; - } - if (options.sequence && !options.sequence.noteFontFamily) { - options.sequence.noteFontFamily = 'courier'; - } - options.sequence.actorFontFamily = 'courier'; - options.sequence.noteFontFamily = 'courier'; - options.sequence.messageFontFamily = 'courier'; - if (options.sequence && !options.sequence.actorFontFamily) { - options.sequence.actorFontFamily = 'courier'; - } - if (!options.fontSize) { - options.fontSize = '16px'; - } - const useAppli = Cypress.env('useAppli'); - cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); - const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); - - if (useAppli) { - cy.log('Opening eyes 2' + Cypress.spec.name); - cy.eyesOpen({ - appName: 'Mermaid', - testName: name, - batchName: Cypress.spec.name, - batchId: batchId + Cypress.spec.name, - }); - } - - cy.visit(url); - if (validation) { - cy.get('svg').should(validation); - } - cy.get('body'); - // Default name to test title - - if (useAppli) { - cy.log('Check eyes 2' + Cypress.spec.name); - cy.eyesCheckWindow('Click!'); - cy.log('Closing eyes 2' + Cypress.spec.name); - cy.eyesClose(); - } else { - cy.matchImageSnapshot(name); - } -}; - -export const renderGraph = (graphStr, options, api) => { - const url = mermaidUrl(graphStr, options, api); - - cy.visit(url); -}; diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index 62c7e785b..4663f6225 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.js'; /** * Check whether the SVG Element has a Mindmap root @@ -158,7 +158,6 @@ mindmap undefined, shouldHaveRoot ); - cy.get('svg'); }); it('rounded rect shape', () => { imgSnapshotTest( @@ -172,7 +171,6 @@ mindmap undefined, shouldHaveRoot ); - cy.get('svg'); }); it('circle shape', () => { imgSnapshotTest( @@ -186,7 +184,6 @@ mindmap undefined, shouldHaveRoot ); - cy.get('svg'); }); it('default shape', () => { imgSnapshotTest( @@ -198,7 +195,6 @@ mindmap undefined, shouldHaveRoot ); - cy.get('svg'); }); it('adding children', () => { imgSnapshotTest( @@ -212,7 +208,6 @@ mindmap undefined, shouldHaveRoot ); - cy.get('svg'); }); it('adding grand children', () => { imgSnapshotTest( @@ -227,7 +222,6 @@ mindmap undefined, shouldHaveRoot ); - cy.get('svg'); }); /* The end */ }); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index c06976e97..c10ae73b1 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -5,6 +5,13 @@ function b64ToUtf8(str) { return decodeURIComponent(escape(window.atob(str))); } +// Adds a rendered flag to window when rendering is done, so cypress can wait for it. +function markRendered() { + if (window.Cypress) { + window.rendered = true; + } +} + /** * ##contentLoaded Callback function that is called when page is loaded. This functions fetches * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the @@ -39,7 +46,8 @@ const contentLoaded = async function () { await mermaid2.registerExternalDiagrams([mindmap]); mermaid2.initialize(graphObj.mermaid); - mermaid2.init(); + await mermaid2.init(); + markRendered(); } }; @@ -128,6 +136,7 @@ const contentLoadedApi = function () { ); } } + markRendered(); }; if (typeof document !== 'undefined') { diff --git a/docs/config/theming.md b/docs/config/theming.md index 9b81be1b9..014ac1374 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -214,13 +214,10 @@ The theming engine will only recognize hex colors and not color names. So, the v | fontFamily | trebuchet ms, verdana, arial | | | fontSize | 16px | Font size in pixels | | primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | | secondaryColor | calculated from primaryColor | | | primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | | tertiaryColor | calculated from primaryColor | | | tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | diff --git a/package.json b/package.json index 6f1ba534c..7698837cf 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "9.3.0-rc1", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@7.18.2", + "packageManager": "pnpm@7.24.3", "keywords": [ "diagram", "markdown", @@ -69,8 +69,8 @@ "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^5.42.1", "@typescript-eslint/parser": "^5.42.1", - "@vitest/coverage-c8": "^0.25.1", - "@vitest/ui": "^0.25.1", + "@vitest/coverage-c8": "^0.27.0", + "@vitest/ui": "^0.27.0", "concurrently": "^7.5.0", "coveralls": "^3.1.1", "cypress": "^10.11.0", @@ -109,6 +109,6 @@ "vitest": "^0.27.1" }, "volta": { - "node": "18.12.1" + "node": "18.13.0" } } diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index fb3026fec..da021f7f8 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -136,13 +136,10 @@ The theming engine will only recognize hex colors and not color names. So, the v | fontFamily | trebuchet ms, verdana, arial | | | fontSize | 16px | Font size in pixels | | primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | | secondaryColor | calculated from primaryColor | | | primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | | tertiaryColor | calculated from primaryColor | | | tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 61d22ced5..56ed03873 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,11 +50,11 @@ importers: specifier: ^5.42.1 version: 5.42.1_rmayb2veg2btbq6mbmnyivgasy '@vitest/coverage-c8': - specifier: ^0.25.1 - version: 0.25.1_oullksb5ic6y72oh2wekoaiuii + specifier: ^0.27.0 + version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce '@vitest/ui': - specifier: ^0.25.1 - version: 0.25.1 + specifier: ^0.27.0 + version: 0.27.1 concurrently: specifier: ^7.5.0 version: 7.5.0 @@ -162,7 +162,7 @@ importers: version: 3.2.3_@types+node@18.11.9 vitest: specifier: ^0.27.1 - version: 0.27.1_oullksb5ic6y72oh2wekoaiuii + version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce packages/mermaid: dependencies: @@ -3078,11 +3078,11 @@ packages: vue: 3.2.45 dev: true - /@vitest/coverage-c8/0.25.1_oullksb5ic6y72oh2wekoaiuii: - resolution: {integrity: sha512-gpl5QNaNeIN0mfRiosCqBFoZcizb5GA458TDnOQXkGDc4kklazxn70u9evGfV62wiiAUfGGebgRhxlBkAa6m6g==} + /@vitest/coverage-c8/0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce: + resolution: {integrity: sha512-/9VTGDIAp4hv8PBawfyijxhkiyucfOxFRRP+7kzy3Dj0wONy1Mc2MBoPmiH4aZVc0LViQqecrQLs8JVGt42keA==} dependencies: c8: 7.12.0 - vitest: 0.25.1_oullksb5ic6y72oh2wekoaiuii + vitest: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce transitivePeerDependencies: - '@edge-runtime/vm' - '@vitest/browser' @@ -3097,9 +3097,11 @@ packages: - terser dev: true - /@vitest/ui/0.25.1: - resolution: {integrity: sha512-VjzyfLjNS5Zc7XCCFJW3cM2iVW305D65NG0PIWefA4A8mwOH/QJJ4nFj/4cwXzwL0/VT3/ppvpv3UDNZoh/YOQ==} + /@vitest/ui/0.27.1: + resolution: {integrity: sha512-o9LmWY/XyWt5Pqb+bLLK+N3Vk+PP2jqrdDDMEAY43dB6vtZ+gYuOt5IutUfB7gXeJ6xeIlzUZ/OabrR3leldCA==} dependencies: + fast-glob: 3.2.12 + flatted: 3.2.7 sirv: 2.0.2 dev: true @@ -4090,19 +4092,6 @@ packages: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} dev: true - /chai/4.3.6: - resolution: {integrity: sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==} - engines: {node: '>=4'} - dependencies: - assertion-error: 1.1.0 - check-error: 1.0.2 - deep-eql: 3.0.1 - get-func-name: 2.0.0 - loupe: 2.3.4 - pathval: 1.1.1 - type-detect: 4.0.8 - dev: true - /chai/4.3.7: resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==} engines: {node: '>=4'} @@ -5380,13 +5369,6 @@ packages: resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==} dev: true - /deep-eql/3.0.1: - resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==} - engines: {node: '>=0.12'} - dependencies: - type-detect: 4.0.8 - dev: true - /deep-eql/4.1.3: resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==} engines: {node: '>=6'} @@ -10754,12 +10736,6 @@ packages: engines: {node: '>=8'} dev: true - /strip-literal/0.4.2: - resolution: {integrity: sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==} - dependencies: - acorn: 8.8.0 - dev: true - /strip-literal/1.0.0: resolution: {integrity: sha512-5o4LsH1lzBzO9UFH63AJ2ad2/S2AVx6NtjOcaz+VTT2h1RiRvbipW72z8M/lxEhcPHDBQwpDrnTF7sXy/7OwCQ==} dependencies: @@ -11586,54 +11562,7 @@ packages: - terser dev: true - /vitest/0.25.1_oullksb5ic6y72oh2wekoaiuii: - resolution: {integrity: sha512-eH74h6MkuEgsqR4mAQZeMK9O0PROiKY+i+1GMz/fBi5A3L2ml5U7JQs7LfPU7+uWUziZyLHagl+rkyfR8SLhlA==} - engines: {node: '>=v14.16.0'} - hasBin: true - peerDependencies: - '@edge-runtime/vm': '*' - '@vitest/browser': '*' - '@vitest/ui': '*' - happy-dom: '*' - jsdom: '*' - peerDependenciesMeta: - '@edge-runtime/vm': - optional: true - '@vitest/browser': - optional: true - '@vitest/ui': - optional: true - happy-dom: - optional: true - jsdom: - optional: true - dependencies: - '@types/chai': 4.3.3 - '@types/chai-subset': 1.3.3 - '@types/node': 18.11.9 - '@vitest/ui': 0.25.1 - acorn: 8.8.0 - acorn-walk: 8.2.0 - chai: 4.3.6 - debug: 4.3.4 - jsdom: 20.0.2 - local-pkg: 0.4.2 - source-map: 0.6.1 - strip-literal: 0.4.2 - tinybench: 2.3.1 - tinypool: 0.3.0 - tinyspy: 1.0.2 - vite: 3.2.3_@types+node@18.11.9 - transitivePeerDependencies: - - less - - sass - - stylus - - sugarss - - supports-color - - terser - dev: true - - /vitest/0.27.1_oullksb5ic6y72oh2wekoaiuii: + /vitest/0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce: resolution: {integrity: sha512-1sIpQ1DVFTEn7c1ici1XHcVfdU4nKiBmPtPAtGKJJJLuJjojTv/OHGgcf69P57alM4ty8V4NMv+7Yoi5Cxqx9g==} engines: {node: '>=v14.16.0'} hasBin: true @@ -11658,7 +11587,7 @@ packages: '@types/chai': 4.3.4 '@types/chai-subset': 1.3.3 '@types/node': 18.11.9 - '@vitest/ui': 0.25.1 + '@vitest/ui': 0.27.1 acorn: 8.8.1 acorn-walk: 8.2.0 cac: 6.7.14