Updating cypress tests

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)
+  const objStr = JSON.stringify(obj);
-  let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr)
+  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) => {
+export const imgSnapshotTest = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api)
+  const url = mermaidUrl(graphStr, options, api);
 
   cy.visit(url);
-  cy.get('svg')
+  cy.get('svg');
-  cy.percySnapshot()
+  cy.percySnapshot();
-}
+};

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

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()
+
+  })
+})

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');
-})
+  });
+});

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<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,
+        listUrl: false,
-      listId: 'color styling',
+        listId: 'color styling',
-      logLevel: 0
+        logLevel: 0
-    })
+      }
-  })
+    );
-})
+  });
+});

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
       `,
-    {})
+      {}
-  })
+    );
-})
+  });
+});

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
       `,
-    {})
+      {}
-  })
+    );
-})
+  });
+});

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
       `,
-    {})
+      {}
-  })
+    );
-})
+  });
+});

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
       `,
-    {})
+      {}
-  })
+    );
-})
+  });
+});

cypress/integration/rendering/sequencediagram.spec.js

@@ -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
-      `, {})
+      `,
-    })
+        {}
-  })
+      );
-})
+    });
+  });
+});

e2e/spec/webpackUsage.spec.js

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