marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'sidv/properlyWaitTests' into sidv/internalFCV3

Browse Source 
* sidv/properlyWaitTests:
  feat: Wait for rendering to finish before taking image snapshots
  Update docs
  chore(deps): update all non-major dependencies
  Fix: Too many `primaryBorderColor`
This commit is contained in:
Sidharth Vinod
2023-01-16 02:11:59 +05:30
parent 8f8ae64ced 4d3f151cf0
commit 1c8c69f8db
8 changed files with 50 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cSpell.json
View File

@@ -6,6 +6,7 @@
"adamiecki",
"alois",
"antiscript",
"appli",
"applitools",
"asciidoctor",
"ashish",

88
cypress/helpers/util.js
View File

@@ -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);
};

8
cypress/integration/rendering/mindmap.spec.ts
View File

@@ -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 */
});

11
cypress/platform/viewer.js
View File

@@ -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') {

3
docs/config/theming.md
View File

@@ -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` |

8
package.json
View File

@@ -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"
}
}

3
packages/mermaid/src/docs/config/theming.md
View File

@@ -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` |

99
pnpm-lock.yaml generated
View File

@@ -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