refactor cypress/helper/util.ts

cypress/helpers/util.ts

@@ -14,26 +14,38 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-const utf8ToB64 = (str: string): string => {
+const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
+
+/**
+ * encodes, then decodes, then converts the `utf-8` {@link str} into `base64`.
+ *
+ * @param str -
+ * @returns converted `utf-8` into `base64`.
+ */
+const convertUtf8ToBase64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
-const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
-
-export const mermaidUrl = (
-  graphStr: string,
-  options: CypressMermaidConfig,
-  api: boolean
+/**
+ *
+ * @param diagramStr -
+ * @param options -
+ * @param api -
+ * @returns url
+ */
+export const createMermaidUrl = (
+  diagramStr: string,
+  options?: CypressMermaidConfig,
+  api?: boolean
 ): string => {
   const codeObject: CodeObject = {
-    code: graphStr,
-    mermaid: options,
+    code: diagramStr,
+    mermaid: options || {},
   };
   const objStr: string = JSON.stringify(codeObject);
-  let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
-  if (api) {
-    url = `http://localhost:9000/xss.html?graph=${graphStr}`;
-  }
+  const url = `http://localhost:9000/${api ? 'xss' : 'e2e'}.html?graph=${convertUtf8ToBase64(
+    objStr
+  )}`;
 
   if (options.listUrl) {
     cy.log(options.listId, ' ', url);
@@ -42,62 +54,17 @@ export const mermaidUrl = (
   return url;
 };
 
-export const imgSnapshotTest = (
-  graphStr: string,
-  _options: CypressMermaidConfig = {},
-  api = false,
-  validation?: any
-): void => {
-  cy.log(JSON.stringify(_options));
-  const options: CypressMermaidConfig = 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 = 16;
-  }
-
-  const url: string = mermaidUrl(graphStr, options, api);
-  openURLAndVerifyRendering(url, options, validation);
-};
-
-export const urlSnapshotTest = (
-  url: string,
-  _options: CypressMermaidConfig,
-  _api = false,
-  validation?: any
-): void => {
-  const options: CypressMermaidConfig = Object.assign(_options);
-  openURLAndVerifyRendering(url, options, validation);
-};
-
-export const renderGraph = (
-  graphStr: string,
-  options: CypressMermaidConfig = {},
-  api = false
-): void => {
-  const url: string = mermaidUrl(graphStr, options, api);
-  openURLAndVerifyRendering(url, options);
-};
-
-export const openURLAndVerifyRendering = (
+/**
+ * opens the {@link url}, then verifies that the `window` is rendered,
+ * and the `svg` is visible.
+ *
+ * @param url -
+ * @param options -
+ * @param validation -
+ */
+export const openUrlAndVerifyRendering = (
   url: string,
-  options: CypressMermaidConfig,
+  options?: CypressMermaidConfig,
   validation?: any
 ): void => {
   const useAppli: boolean = Cypress.env('useAppli');
@@ -109,15 +76,15 @@ export const openURLAndVerifyRendering = (
       appName: 'Mermaid',
       testName: name,
       batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
+      batchId: `${batchId}-${Cypress.spec.name}`,
     });
   }
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
   cy.get('svg').should('be.visible');
 
-  if (validation) {
+  if (validation !== undefined) {
     cy.get('svg').should(validation);
   }
 
@@ -130,3 +97,49 @@ export const openURLAndVerifyRendering = (
     cy.matchImageSnapshot(name);
   }
 };
+
+/**
+ *
+ * @param diagramStr -
+ * @param _options -
+ * @param api -
+ * @param validation -
+ */
+export const imgSnapshotTest = (
+  diagramStr: string,
+  _options?: CypressMermaidConfig,
+  api?: boolean,
+  validation?: any
+): void => {
+  cy.log(JSON.stringify(_options));
+  const options: CypressMermaidConfig = {
+    ..._options,
+    fontFamily: _options.fontFamily || 'courier',
+    fontSize: _options.fontSize || 16,
+    sequence: {
+      actorFontFamily: 'courier',
+      noteFontFamily: 'courier',
+      messageFontFamily: 'courier',
+    },
+  };
+
+  const url: string = createMermaidUrl(diagramStr, options, api);
+  openUrlAndVerifyRendering(url, options, validation);
+};
+
+/**
+ *
+ * @param url -
+ * @param _options -
+ * @param _api -
+ * @param validation -
+ */
+export const urlSnapshotTest = (
+  url: string,
+  _options?: CypressMermaidConfig,
+  _api?: boolean,
+  validation?: any
+): void => {
+  const options: CypressMermaidConfig = Object.assign(_options);
+  openUrlAndVerifyRendering(url, options, validation);
+};

cypress/integration/other/configuration.spec.js

@@ -1,16 +1,15 @@
-import { renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
-      renderGraph(
+      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]
-        `,
-        {}
+        `
       );
 
       // Check the marker-end property to make sure it is properly set to
@@ -24,15 +23,14 @@ describe('Configuration', () => {
       });
     });
     it('should handle default value false of arrowMarkerAbsolute', () => {
-      renderGraph(
+      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]
-        `,
-        {}
+        `
       );
 
       // Check the marker-end property to make sure it is properly set to
@@ -46,7 +44,7 @@ describe('Configuration', () => {
       });
     });
     it('should handle arrowMarkerAbsolute explicitly set to false', () => {
-      renderGraph(
+      imgSnapshotTest(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
         B --> C{Let me think}
@@ -70,7 +68,7 @@ describe('Configuration', () => {
       });
     });
     it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
-      renderGraph(
+      imgSnapshotTest(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
         B --> C{Let me think}
@@ -94,7 +92,7 @@ describe('Configuration', () => {
       });
     });
     it('should handle arrowMarkerAbsolute set to true', () => {
-      renderGraph(
+      imgSnapshotTest(
         `flowchart TD
         A[Christmas] -->|Get money| B(Go shopping)
         B --> C{Let me think}

cypress/integration/other/external-diagrams.spec.js

@@ -4,7 +4,7 @@ describe('mermaid', () => {
   describe('registerDiagram', () => {
     it('should work on @mermaid-js/mermaid-example-diagram', () => {
       const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
-      urlSnapshotTest(url, {}, false, false);
+      urlSnapshotTest(url);
     });
   });
 });

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
+import { urlSnapshotTest, openUrlAndVerifyRendering } from '../../helpers/util.ts';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {
@@ -14,7 +14,7 @@ describe('CSS injections', () => {
     });
   });
   it('should not allow manipulating styletags using arrowheads', () => {
-    openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', {
+    openUrlAndVerifyRendering('http://localhost:9000/xss23-css.html', {
       logLevel: 1,
       arrowMarkerAbsolute: false,
       flowchart: { htmlLabels: true },

cypress/integration/other/xss.spec.js

@@ -1,10 +1,10 @@
-import { mermaidUrl } from '../../helpers/util.ts';
+import { createMermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
       'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
 
-    const url = mermaidUrl(str, {}, true);
+    const url = createMermaidUrl(str, {}, true);
 
     cy.visit(url);
     cy.wait(1000).then(() => {
@@ -17,7 +17,7 @@ describe('XSS', () => {
     const str =
       'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU+PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
 
-    const url = mermaidUrl(
+    const url = createMermaidUrl(
       str,
       {
         theme: 'default',
@@ -38,7 +38,7 @@ describe('XSS', () => {
     const str =
       'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
 
-    const url = mermaidUrl(
+    const url = createMermaidUrl(
       str,
       {
         theme: 'default',

cypress/integration/rendering/appli.spec.js

@@ -7,8 +7,7 @@ describe('Git Graph diagram', () => {
        commit id: "1"
        commit id: "2"
        commit id: "3"
-      `,
-      {}
+      `
     );
   });
   // it(`ultraFastTest`, function () {

cypress/integration/rendering/c4.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
   it('should render a simple C4Context diagram', () => {
@@ -27,10 +27,8 @@ describe('C4 diagram', () => {
       UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
       UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
       UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      `,
-      {}
+      `
     );
-    cy.get('svg');
   });
   it('should render a simple C4Container diagram', () => {
     imgSnapshotTest(
@@ -47,10 +45,8 @@ describe('C4 diagram', () => {
 
       Rel(customer, spa, "Uses", "HTTPS")
       Rel(email_system, customer, "Sends e-mails to")
-      `,
-      {}
+      `
     );
-    cy.get('svg');
   });
   it('should render a simple C4Component diagram', () => {
     imgSnapshotTest(
@@ -66,10 +62,8 @@ describe('C4 diagram', () => {
 
       Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
       UpdateRelStyle(spa, sign, $offsetY="-40")
-      `,
-      {}
+      `
     );
-    cy.get('svg');
   });
   it('should render a simple C4Dynamic diagram', () => {
     imgSnapshotTest(
@@ -90,10 +84,8 @@ describe('C4 diagram', () => {
       UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
       UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
       UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
-      `,
-      {}
+      `
     );
-    cy.get('svg');
   });
   it('should render a simple C4Deployment diagram', () => {
     imgSnapshotTest(
@@ -114,9 +106,7 @@ describe('C4 diagram', () => {
       }
 
       Rel(mobile, api, "Makes API calls to", "json/HTTPS")
-      `,
-      {}
+      `
     );
-    cy.get('svg');
   });
 });