convert cypress/helpers/util.js into ts

- add types for parameter and returned value and variables
- change the deperated `unescape` into `decodeURIComponent`
- create `CypressConfig` and `CypressMermaidConfig` and `CodeObject` types
- add default value for some parameter

cypress/helpers/util.ts

@@ -1,18 +1,36 @@
-const utf8ToB64 = (str) => {
+import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
-  return window.btoa(unescape(encodeURIComponent(str)));
+
+type CypressConfig = {
+  listUrl?: boolean;
+  listId?: string;
+  name?: string;
+};
+type CypressMermaidConfig = MermaidConfig & CypressConfig;
+
+interface CodeObject {
+  code: string;
+  mermaid: CypressMermaidConfig;
+}
+
+const utf8ToB64 = (str: string): string => {
+  return window.btoa(decodeURIComponent(encodeURIComponent(str)));
 };
 
-const batchId = 'mermaid-batch' + new Date().getTime();
+const batchId: string = 'mermaid-batch' + new Date().getTime();
 
-export const mermaidUrl = (graphStr, options, api) => {
+export const mermaidUrl = (
-  const obj = {
+  graphStr: string,
+  options: CypressMermaidConfig,
+  api: boolean
+): string => {
+  const codeObject: CodeObject = {
     code: graphStr,
     mermaid: options,
   };
-  const objStr = JSON.stringify(obj);
+  const objStr: string = JSON.stringify(codeObject);
-  let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
+  let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
   if (api) {
-    url = 'http://localhost:9000/xss.html?graph=' + graphStr;
+    url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
   if (options.listUrl) {
@@ -22,9 +40,14 @@ export const mermaidUrl = (graphStr, options, api) => {
   return url;
 };
 
-export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
+export const imgSnapshotTest = (
-  cy.log(_options);
+  graphStr: string,
-  const options = Object.assign(_options);
+  _options: CypressMermaidConfig = {},
+  api: boolean = false,
+  validation?: any
+): void => {
+  cy.log(JSON.stringify(_options));
+  const options: CypressMermaidConfig = Object.assign(_options);
   if (!options.fontFamily) {
     options.fontFamily = 'courier';
   }
@@ -44,28 +67,42 @@ export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation
     options.sequence.actorFontFamily = 'courier';
   }
   if (!options.fontSize) {
-    options.fontSize = '16px';
+    options.fontSize = 16;
   }
-  const url = mermaidUrl(graphStr, options, api);
+
+  const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options, validation);
 };
 
-export const urlSnapshotTest = (url, _options, api = false, validation) => {
+export const urlSnapshotTest = (
-  const options = Object.assign(_options);
+  url: string,
+  _options: CypressMermaidConfig,
+  _api: boolean = false,
+  validation?: any
+): void => {
+  const options: CypressMermaidConfig = Object.assign(_options);
   openURLAndVerifyRendering(url, options, validation);
 };
 
-export const renderGraph = (graphStr, options, api) => {
+export const renderGraph = (
-  const url = mermaidUrl(graphStr, options, api);
+  graphStr: string,
+  options: CypressMermaidConfig = {},
+  api: boolean = false
+): void => {
+  const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options);
 };
 
-export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
+export const openURLAndVerifyRendering = (
-  const useAppli = Cypress.env('useAppli');
+  url: string,
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+  options: CypressMermaidConfig,
+  validation?: any
+): void => {
+  const useAppli: boolean = Cypress.env('useAppli');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
+    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
@@ -83,9 +120,9 @@ export const openURLAndVerifyRendering = (url, options, validation = undefined)
   }
 
   if (useAppli) {
-    cy.log('Check eyes' + Cypress.spec.name);
+    cy.log(`Check eyes ${Cypress.spec.name}`);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes' + Cypress.spec.name);
+    cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);