GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Updating cypress tests

Browse Source
This commit is contained in:
Knut Sveidqvist 2019-09-18 18:25:06 +02:00
parent 23e6df04d4
commit 21622f575b
11 changed files with 175 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
cypress/helpers/util.js
View File

@ -1,28 +1,28 @@
/* eslint-env jest */
import { Base64 } from 'js-base64'
import { Base64 } from 'js-base64';
export const mermaidUrl = (graphStr, options, api) => {
const obj = {
code: graphStr,
mermaid: options
}
const objStr = JSON.stringify(obj)
let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr)
};
const objStr = JSON.stringify(obj);
let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr);
if (api) {
url = 'http://localhost:9000/xss.html?graph=' + graphStr
url = 'http://localhost:9000/xss.html?graph=' + graphStr;
}
if (options.listUrl) {
cy.log(options.listId, ' ', url)
cy.log(options.listId, ' ', url);
}
return url
}
return url;
};
export const imgSnapshotTest = (graphStr, options, api) => {
const url = mermaidUrl(graphStr, options, api)
export const imgSnapshotTest = (graphStr, options, api) => {
const url = mermaidUrl(graphStr, options, api);
cy.visit(url);
cy.get('svg')
cy.percySnapshot()
}
cy.get('svg');
cy.percySnapshot();
};

11
cypress/integration/other/webpackUsage.spec.js Normal file
View File

@ -0,0 +1,11 @@
/* eslint-env jest */
describe('Sequencediagram', () => {
it('should render a simple sequence diagrams', () => {
const url = 'http://localhost:9000/webpackUsage.html';
cy.visit(url);
cy.get('body')
.find('svg')
.should('have.length', 2);
});
});

16
cypress/integration/other/xss.spec.js Normal file
View File

@ -0,0 +1,16 @@
/* eslint-env jest */
import { mermaidUrl } from '../../helpers/util.js';
/* eslint-disable */
describe('XSS', () => {
it('should handle xss in tags', () => {
const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
const url = mermaidUrl(str,{}, true);
cy.visit(url);
cy.get('svg')
cy.percySnapshot()
})
})

14
cypress/integration/e2e/classDiagram.spec.js → cypress/integration/rendering/classDiagram.spec.js
View File

@ -1,9 +1,10 @@
/* eslint-env jest */
import { imgSnapshotTest} from '../../helpers/util'
import { imgSnapshotTest } from '../../helpers/util';
describe('Sequencediagram', () => {
it('should render a simple class diagrams', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
@ -19,7 +20,8 @@ describe('Sequencediagram', () => {
Class01 : int gorilla
Class08 <--> C2: Cool label
`,
{})
cy.get('svg')
})
})
{}
);
cy.get('svg');
});
});

109
cypress/integration/e2e/flowchart.spec.js → cypress/integration/rendering/flowchart.spec.js
View File

@ -1,20 +1,22 @@
/* eslint-env jest */
import { imgSnapshotTest} from '../../helpers/util'
import { imgSnapshotTest } from '../../helpers/util';
describe('Flowcart', () => {
it('should render a simple flowchart', () => {
imgSnapshotTest(`graph TD
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]
`,
{})
})
{}
);
});
it('should render a simple flowchart with line breaks', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
@ -22,11 +24,13 @@ describe('Flowcart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[Car]
`,
{})
})
{}
);
});
it('should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TD
A[/Christmas\\]
A -->|Get money| B[\\Go shopping/]
@ -35,11 +39,13 @@ describe('Flowcart', () => {
C -->|Two| E[\\iPhone\\]
C -->|Three| F[Car]
`,
{})
})
{}
);
});
it('should style nodes via a class.', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TD
1A --> 1B
1B --> 1C
@ -49,11 +55,13 @@ describe('Flowcart', () => {
classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
class 1A,1B,D,E processHead
`,
{})
})
{}
);
});
it('should render a flowchart full of circles', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@ -76,10 +84,12 @@ describe('Flowcart', () => {
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
{})
})
{}
);
});
it('should render a flowchart full of icons', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@ -144,37 +154,45 @@ describe('Flowcart', () => {
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
`,
{})
})
{}
);
});
it('should render labels with numbers at the start', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TB;subgraph "number as labels";1;end;
`,
{})
})
{}
);
});
it('should render subgraphs', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TB
subgraph One
a1-->a2
end
`,
{})
})
{}
);
});
it('should render subgraphs with a title startign with a digit', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TB
subgraph 2Two
a1-->a2
end
`,
{})
})
{}
);
});
it('should render styled subgraphs', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph TB
A
B
@ -203,11 +221,13 @@ describe('Flowcart', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F
style bar fill:#999,stroke-width:10px,stroke:#0F0
`,
{})
})
{}
);
});
it('should render a flowchart with ling sames and class definitoins', () => {
imgSnapshotTest(`graph LR
imgSnapshotTest(
`graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
提交申请
@ -303,11 +323,13 @@ describe('Flowcart', () => {
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
`,
{})
})
{}
);
});
it('should render color of styled nodes', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
graph LR
foo-->bar
@ -315,10 +337,11 @@ describe('Flowcart', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F
style bar fill:#999,color: #00ff00, stroke-width:10px,stroke:#0F0
`,
{
listUrl: false,
listId: 'color styling',
logLevel: 0
})
})
})
{
listUrl: false,
listId: 'color styling',
logLevel: 0
}
);
});
});

12
cypress/integration/e2e/gantt.spec.js → cypress/integration/rendering/gantt.spec.js
View File

@ -1,9 +1,10 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js'
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
it('should render a gantt chart', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
@ -34,6 +35,7 @@ describe('Sequencediagram', () => {
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
`,
{})
})
})
{}
);
});
});

12
cypress/integration/e2e/gitGraph.spec.js → cypress/integration/rendering/gitGraph.spec.js
View File

@ -1,9 +1,10 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js'
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
it('should render a simple git graph', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
gitGraph:
options
{
@ -21,6 +22,7 @@ describe('Sequencediagram', () => {
commit
merge newbranch
`,
{})
})
})
{}
);
});
});

12
cypress/integration/e2e/info.spec.js → cypress/integration/rendering/info.spec.js
View File

@ -1,12 +1,14 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js'
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
it('should render a simple info diagrams', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
info
showInfo
`,
{})
})
})
{}
);
});
});

12
cypress/integration/e2e/pie.spec.js → cypress/integration/rendering/pie.spec.js
View File

@ -1,14 +1,16 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js'
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Pie Chart', () => {
it('should render a simple pie diagram', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`,
{})
})
})
{}
);
});
});

51
cypress/integration/e2e/sequencediagram.spec.js → cypress/integration/rendering/sequencediagram.spec.js
View File

@ -1,10 +1,11 @@
/// <reference types="Cypress" />
import { imgSnapshotTest} from '../../helpers/util';
import { imgSnapshotTest } from '../../helpers/util';
context('Aliasing', () => {
it('should render a simple sequence diagrams', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
sequenceDiagram
participant Alice
participant Bob
@ -27,11 +28,14 @@ context('Aliasing', () => {
and
Alice -->> John: Parallel message 2
end
`, {})
})
`,
{}
);
});
context('background rects', () => {
it('should render a single and nested rects', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
sequenceDiagram
participant A
participant B
@ -56,10 +60,13 @@ context('Aliasing', () => {
E ->> E: Task 6
end
D -->> A: Complete
`, {})
})
`,
{}
);
});
it('should render rect around and inside loops', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
sequenceDiagram
A ->> B: 1
rect rgb(204, 0, 102)
@ -75,10 +82,13 @@ context('Aliasing', () => {
D --> C: 4
end
end
`, {})
})
`,
{}
);
});
it('should render rect around and inside alts', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
sequenceDiagram
A ->> B: 1
rect rgb(204, 0, 102)
@ -91,10 +101,13 @@ context('Aliasing', () => {
end
end
B ->> A: Return
`, {})
})
`,
{}
);
});
it('should render rect around and inside opts', () => {
imgSnapshotTest(`
imgSnapshotTest(
`
sequenceDiagram
A ->> B: 1
rect rgb(204, 0, 102)
@ -112,7 +125,9 @@ context('Aliasing', () => {
end
end
B ->> A: Return
`, {})
})
})
})
`,
{}
);
});
});
});

16
e2e/spec/webpackUsage.spec.js
View File

@ -1,16 +0,0 @@
/* eslint-env jest */
const { toMatchImageSnapshot } = require('jest-image-snapshot')
expect.extend({ toMatchImageSnapshot })
describe('Sequencediagram', () => {
it('should render a simple sequence diagrams', async () => {
const url = 'http://localhost:9000/webpackUsage.html'
await page.goto(url)
const image = await page.screenshot()
expect(image).toMatchImageSnapshot()
})
})