From 21622f575bfa8ccfcdfb37e0ce6ebe84f4410a0c Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 18 Sep 2019 18:25:06 +0200 Subject: [PATCH] Updating cypress tests --- cypress/helpers/util.js | 26 ++--- .../integration/other/webpackUsage.spec.js | 11 ++ cypress/integration/other/xss.spec.js | 16 +++ .../{e2e => rendering}/classDiagram.spec.js | 14 ++- .../{e2e => rendering}/flowchart.spec.js | 109 +++++++++++------- .../{e2e => rendering}/gantt.spec.js | 12 +- .../{e2e => rendering}/gitGraph.spec.js | 12 +- .../{e2e => rendering}/info.spec.js | 12 +- .../{e2e => rendering}/pie.spec.js | 12 +- .../sequencediagram.spec.js | 51 +++++--- e2e/spec/webpackUsage.spec.js | 16 --- 11 files changed, 175 insertions(+), 116 deletions(-) create mode 100644 cypress/integration/other/webpackUsage.spec.js create mode 100644 cypress/integration/other/xss.spec.js rename cypress/integration/{e2e => rendering}/classDiagram.spec.js (80%) rename cypress/integration/{e2e => rendering}/flowchart.spec.js (94%) rename cypress/integration/{e2e => rendering}/gantt.spec.js (92%) rename cypress/integration/{e2e => rendering}/gitGraph.spec.js (77%) rename cypress/integration/{e2e => rendering}/info.spec.js (56%) rename cypress/integration/{e2e => rendering}/pie.spec.js (65%) rename cypress/integration/{e2e => rendering}/sequencediagram.spec.js (87%) delete mode 100644 e2e/spec/webpackUsage.spec.js diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index a7e6d47c7..143fc7ed7 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -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(); +}; diff --git a/cypress/integration/other/webpackUsage.spec.js b/cypress/integration/other/webpackUsage.spec.js new file mode 100644 index 000000000..af93bdd50 --- /dev/null +++ b/cypress/integration/other/webpackUsage.spec.js @@ -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); + }); +}); diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js new file mode 100644 index 000000000..a550b6783 --- /dev/null +++ b/cypress/integration/other/xss.spec.js @@ -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() + + }) +}) diff --git a/cypress/integration/e2e/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js similarity index 80% rename from cypress/integration/e2e/classDiagram.spec.js rename to cypress/integration/rendering/classDiagram.spec.js index 3f94589b3..b80f5d23c 100644 --- a/cypress/integration/e2e/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -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'); + }); +}); diff --git a/cypress/integration/e2e/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js similarity index 94% rename from cypress/integration/e2e/flowchart.spec.js rename to cypress/integration/rendering/flowchart.spec.js index 775f96393..89ec06d76 100644 --- a/cypress/integration/e2e/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -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
ssssssssssssssssssssss
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 + } + ); + }); +}); diff --git a/cypress/integration/e2e/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js similarity index 92% rename from cypress/integration/e2e/gantt.spec.js rename to cypress/integration/rendering/gantt.spec.js index 63b4911a6..faba97d9c 100644 --- a/cypress/integration/e2e/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -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 `, - {}) - }) -}) + {} + ); + }); +}); diff --git a/cypress/integration/e2e/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js similarity index 77% rename from cypress/integration/e2e/gitGraph.spec.js rename to cypress/integration/rendering/gitGraph.spec.js index 4bdfa0bfc..c36f635b4 100644 --- a/cypress/integration/e2e/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -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 `, - {}) - }) -}) + {} + ); + }); +}); diff --git a/cypress/integration/e2e/info.spec.js b/cypress/integration/rendering/info.spec.js similarity index 56% rename from cypress/integration/e2e/info.spec.js rename to cypress/integration/rendering/info.spec.js index b9a5e270a..943f2357e 100644 --- a/cypress/integration/e2e/info.spec.js +++ b/cypress/integration/rendering/info.spec.js @@ -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 `, - {}) - }) -}) + {} + ); + }); +}); diff --git a/cypress/integration/e2e/pie.spec.js b/cypress/integration/rendering/pie.spec.js similarity index 65% rename from cypress/integration/e2e/pie.spec.js rename to cypress/integration/rendering/pie.spec.js index 8450b252e..f930ac246 100644 --- a/cypress/integration/e2e/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -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 `, - {}) - }) -}) + {} + ); + }); +}); diff --git a/cypress/integration/e2e/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js similarity index 87% rename from cypress/integration/e2e/sequencediagram.spec.js rename to cypress/integration/rendering/sequencediagram.spec.js index 59671e0e0..e1912a307 100644 --- a/cypress/integration/e2e/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -1,10 +1,11 @@ /// -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 - `, {}) - }) - }) -}) + `, + {} + ); + }); + }); +}); diff --git a/e2e/spec/webpackUsage.spec.js b/e2e/spec/webpackUsage.spec.js deleted file mode 100644 index 88aafc9f2..000000000 --- a/e2e/spec/webpackUsage.spec.js +++ /dev/null @@ -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() - }) -})