diff --git a/cSpell.json b/cSpell.json index c6660c4dc..d6c23defc 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') {