marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 14:29:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3459 from aloisklink/chore/update-cypress

Browse Source 
Update Cypress to v10 and fix E2E errors
This commit is contained in:
Alois Klink
2022-09-16 17:32:10 +01:00
committed by GitHub
parent 37eb0454fd 20d22a6468
commit e8eb2ab03f
17 changed files with 134 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
.github/workflows/e2e vendored
View File

@@ -1,44 +0,0 @@
name: E2E
on: [push, pull_request]
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
cache: yarn
node-version: ${{ matrix.node-version }}
- name: Install Yarn
run: npm i yarn --global
- name: Install Packages
run: |
yarn install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Run Build
run: yarn build
- name: Run E2E Tests
run: yarn e2e
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Upload Coverage to Coveralls
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
flag-name: e2e

38
.github/workflows/e2e.yml vendored Normal file
View File

@@ -0,0 +1,38 @@
name: E2E
on: [push, pull_request]
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
cache: yarn
node-version: ${{ matrix.node-version }}
- name: Install Yarn
run: npm i yarn --global
- name: Install Packages
run: |
yarn install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Run Build
run: yarn build
- name: Run E2E Tests
run: yarn e2e
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress

16
applitools.cnfig.js
View File

@@ -1,16 +0,0 @@
module.exports = {
testConcurrency: 1,
// browser: [
// // Add browsers with different viewports
// { width: 800, height: 600, name: 'chrome' },
// { width: 700, height: 500, name: 'firefox' },
// { width: 1600, height: 1200, name: 'ie11' },
// { width: 1024, height: 768, name: 'edgechromium' },
// { width: 800, height: 600, name: 'safari' },
// // Add mobile emulation devices in Portrait mode
// { deviceName: 'iPhone X', screenOrientation: 'portrait' },
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
// ],
// // set batch name to the configuration
// batchName: 'Ultrafast Batch',
};

19
applitools.config.js Normal file
View File

@@ -0,0 +1,19 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { defineConfig } = require('cypress');
module.exports = defineConfig({
testConcurrency: 1,
browser: [
// Add browsers with different viewports
// { width: 800, height: 600, name: 'chrome' },
// { width: 700, height: 500, name: 'firefox' },
// { width: 1600, height: 1200, name: 'ie11' },
// { width: 1024, height: 768, name: 'edgechromium' },
// { width: 800, height: 600, name: 'safari' },
// // Add mobile emulation devices in Portrait mode
// { deviceName: 'iPhone X', screenOrientation: 'portrait' },
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
],
// set batch name to the configuration
batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
});

7
cypress.config.js
View File

@@ -2,21 +2,20 @@
const { defineConfig } = require('cypress');
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
require('@applitools/eyes-cypress')(module);
module.exports = defineConfig({
e2e: {
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
setupNodeEvents(on, config) {
addMatchImageSnapshotPlugin(on, config);
// copy any needed variables from process.env to config.env
config.env.useAppli = process.env.USE_APPLI ? true : false;
config.env.codeBranch = process.env.APPLI_BRANCH;
// do not forget to return the changed config object!
return config;
},
supportFile: 'cypress/support/index.js',
},
video: false,
});
require('@applitools/eyes-cypress')(module);

1
cypress/downloads/downloads.html
View File

@@ -1 +0,0 @@
Cr24

8
cypress/helpers/util.js
View File

@@ -44,15 +44,13 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
}
const useAppli = Cypress.env('useAppli');
//const useAppli = false;
const branch = Cypress.env('codeBranch');
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
if (useAppli) {
cy.eyesOpen({
appName: 'Mermaid-' + branch,
appName: 'Mermaid',
testName: name,
batchName: branch,
});
}
@@ -96,15 +94,13 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
options.fontSize = '16px';
}
const useAppli = Cypress.env('useAppli');
const branch = Cypress.env('codeBranch');
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
if (useAppli) {
cy.eyesOpen({
appName: 'Mermaid-' + branch,
appName: 'Mermaid',
testName: name,
batchName: branch,
});
}

62
cypress/integration/other/configuration.spec.js
View File

@@ -15,11 +15,13 @@ describe('Configuration', () => {
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
cy.get('.edgePaths').within(() => {
cy.get('path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
});
it('should handle default value false of arrowMarkerAbsolute', () => {
renderGraph(
@@ -35,11 +37,13 @@ describe('Configuration', () => {
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
cy.get('.edgePaths').within(() => {
cy.get('path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
});
it('should handle arrowMarkerAbsolute explicitly set to false', () => {
renderGraph(
@@ -57,11 +61,13 @@ describe('Configuration', () => {
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
cy.get('.edgePaths').within(() => {
cy.get('path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
});
it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
renderGraph(
@@ -79,15 +85,17 @@ describe('Configuration', () => {
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
cy.get('.edgePaths').within(() => {
cy.get('path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
});
it('should handle arrowMarkerAbsolute set to true', () => {
renderGraph(
`graph TD
`flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
@@ -99,11 +107,13 @@ describe('Configuration', () => {
}
);
cy.get('.edgePath path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(http://localhost');
cy.get('.edgePaths').within(() => {
cy.get('path')
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(http://localhost');
});
});
it('should not taint the initial configuration when using multiple directives', () => {
const url = 'http://localhost:9000/regression/issue-1874.html';

3
cypress/integration/other/xss.spec.js
View File

@@ -81,6 +81,9 @@ describe('XSS', () => {
cy.get('#the-malware').should('not.exist');
});
it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
cy.on('uncaught:exception', (_err, _runnable) => {
return false; // continue rendering even if there if mermaid throws an error
});
cy.visit('http://localhost:9000/xss9.html');
cy.wait(1000);
cy.get('#the-malware').should('not.exist');

8
cypress/integration/rendering/flowchart.spec.js
View File

@@ -745,13 +745,13 @@ describe('Graph', () => {
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
// expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
// use within because the absolute value can be slightly different depending on the environment ±10%
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(300 * 0.95, 300 * 1.05);
expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
});
});
it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -768,9 +768,9 @@ describe('Graph', () => {
cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// use within because the absolute value can be slightly different depending on the environment ±10%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(300 * 0.95, 300 * 1.05);
expect(width).to.be.within(300 * 0.9, 300 * 1.1);
expect(svg).to.not.have.attr('style');
});
});

21
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -213,42 +213,43 @@ describe('Git Graph diagram', () => {
`
gitGraph
checkout main
commit
%% Make sure to manually set the ID of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
commit
commit id: "2-abcdefg"
checkout main
merge branch1
branch branch2
commit
commit id: "3-abcdefg"
checkout main
merge branch2
branch branch3
commit
commit id: "4-abcdefg"
checkout main
merge branch3
branch branch4
commit
commit id: "5-abcdefg"
checkout main
merge branch4
branch branch5
commit
commit id: "6-abcdefg"
checkout main
merge branch5
branch branch6
commit
commit id: "7-abcdefg"
checkout main
merge branch6
branch branch7
commit
commit id: "8-abcdefg"
checkout main
merge branch7
branch branch8
commit
commit id: "9-abcdefg"
checkout main
merge branch8
branch branch9
commit
commit id: "10-abcdefg"
`,
{}
);

33
cypress/plugins/index.js
View File

@@ -1,33 +0,0 @@
/* eslint-disable @typescript-eslint/no-var-requires */
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
// module.exports = (on, config) => {
// // `on` is used to hook into various events Cypress emits
// // `config` is the resolved Cypress config
// }
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
require('@applitools/eyes-cypress')(module);
module.exports = (on, config) => {
addMatchImageSnapshotPlugin(on, config);
// copy any needed variables from process.env to config.env
config.env.useAppli = process.env.USE_APPLI ? true : false;
config.env.codeBranch = process.env.APPLI_BRANCH;
// do not forget to return the changed config object!
return config;
};
require('@applitools/eyes-cypress')(module);

2
cypress/support/index.js → cypress/support/e2e.js
View File

@@ -17,8 +17,6 @@ import '@applitools/eyes-cypress/commands';
// Import commands.js using ES2015 syntax:
import './commands';
// import '@percy/cypress';
import '@applitools/eyes-cypress/commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')

2
package.json
View File

@@ -98,7 +98,7 @@
"babel-loader": "^8.2.2",
"concurrently": "^7.4.0",
"css-to-string-loader": "^0.1.3",
"cypress": "9.7.0",
"cypress": "^10.0.0",
"cypress-image-snapshot": "^4.0.1",
"documentation": "13.2.0",
"esbuild": "^0.15.6",

3
src/dagre-wrapper/edges.js
View File

@@ -472,7 +472,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
// });
let url = '';
if (getConfig().state.arrowMarkerAbsolute) {
// // TODO: Can we load this config only from the rendered graph type?
if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
url =
window.location.protocol +
'//' +

8
src/diagram-api/diagram-orchestration.ts
View File

@@ -96,6 +96,7 @@ import { journeyDetector } from '../diagrams/user-journey/journeyDetector';
import journeyDb from '../diagrams/user-journey/journeyDb';
import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
import journeyStyles from '../diagrams/user-journey/styles';
import { getConfig, setConfig } from '../config';
import errorRenderer from '../diagrams/error/errorRenderer';
import errorStyles from '../diagrams/error/styles';
@@ -301,11 +302,12 @@ export const addDiagrams = () => {
renderer: flowRendererV2,
styles: flowStyles,
init: (cnf) => {
flowRenderer.setConf(cnf.flowchart);
if (!cnf.flowchart) {
cnf.flowchart = {};
}
// TODO, broken as of 2022-09-14 (13809b50251845475e6dca65cc395761be38fbd2)
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowRenderer.setConf(cnf.flowchart);
flowDb.clear();
flowDb.setGen('gen-1');
},
@@ -320,11 +322,13 @@ export const addDiagrams = () => {
renderer: flowRendererV2,
styles: flowStyles,
init: (cnf) => {
flowRendererV2.setConf(cnf.flowchart);
if (!cnf.flowchart) {
cnf.flowchart = {};
}
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
// flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
flowRendererV2.setConf(cnf.flowchart);
flowDb.clear();
flowDb.setGen('gen-2');
},

18
yarn.lock
View File

@@ -4859,10 +4859,10 @@ cypress-image-snapshot@^4.0.1:
pkg-dir "^3.0.0"
term-img "^4.0.0"
cypress@9.7.0:
version "9.7.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.7.0.tgz#bf55b2afd481f7a113ef5604aa8b693564b5e744"
integrity sha512-+1EE1nuuuwIt/N1KXRR2iWHU+OiIt7H28jJDyyI4tiUftId/DrXYEwoDa5+kH2pki1zxnA0r6HrUGHV5eLbF5Q==
cypress@^10.0.0:
version "10.8.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.8.0.tgz#12a681f2642b6f13d636bab65d5b71abdb1497a5"
integrity sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==
dependencies:
"@cypress/request" "^2.88.10"
"@cypress/xvfb" "^1.2.4"
@@ -4883,7 +4883,7 @@ cypress@9.7.0:
dayjs "^1.10.4"
debug "^4.3.2"
enquirer "^2.3.6"
eventemitter2 "^6.4.3"
eventemitter2 "6.4.7"
execa "4.1.0"
executable "^4.1.1"
extract-zip "2.0.1"
@@ -6280,10 +6280,10 @@ event-target-shim@^5.0.0:
resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
eventemitter2@^6.4.3:
version "6.4.5"
resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.5.tgz#97380f758ae24ac15df8353e0cc27f8b95644655"
integrity sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==
eventemitter2@6.4.7:
version "6.4.7"
resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
eventemitter3@^4.0.0:
version "4.0.7"