Merge branch 'master' into develop

2646 Removes a possible way for a diagram author to trigger a JavaScript using in diagram code.

.commitlintrc.json

@@ -0,0 +1,5 @@
+{
+    "extends": [
+        "@commitlint/config-conventional"
+    ]
+}

.eslintignore

@@ -1 +1,2 @@
-**/*.spec.js
+dist/**
+.github/**

.eslintrc.json

@@ -2,19 +2,37 @@
   "env": {
     "browser": true,
     "es6": true,
+    "jest/globals": true,
     "node": true
   },
   "parser": "@babel/eslint-parser",
   "parserOptions": {
-      "ecmaFeatures": {
-          "experimentalObjectRestSpread": true,
-          "jsx": true
-      },
-      "sourceType": "module"
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
   },
-  "extends": ["prettier", "eslint:recommended"],
-  "plugins": ["prettier"],
+  "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:markdown/recommended", "plugin:prettier/recommended"],
+  "plugins": ["html", "jest", "jsdoc", "prettier"],
   "rules": {
-    "prettier/prettier": ["error"]
-  }
+    "no-prototype-builtins": 0,
+    "no-unused-vars": 0,
+    "jsdoc/check-indentation": 0,
+    "jsdoc/check-alignment": 0,
+    "jsdoc/check-line-alignment": 0,
+    "jsdoc/multiline-blocks": 0,
+    "jsdoc/newline-after-description": 0,
+    "jsdoc/tag-lines": 0,
+    "no-empty": ["error", { "allowEmptyCatch": true }]
+  },
+  "overrides": [
+    {
+      "files": "./**/*.html",
+      "rules": {
+        "no-undef": "off",
+        "jsdoc/require-jsdoc": "off"
+      }
+    }
+  ]
 }

.github/workflows/lock-closed-issue.yml

@@ -1,13 +0,0 @@
-name: Lock closed issue
-
-on: 
-  issues:
-    types: [closed]
-
-jobs:
-  triage:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Dunning-Kruger/lock-issues@v1.1
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/pr-labeler-config-validator.yml

@@ -0,0 +1,13 @@
+name: Validate PR Labeler Configuration
+on: [push, pull_request]
+
+jobs:
+  pr-labeler:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2.3.4
+      - name: Validate Configuration
+        uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
+        with:
+          configuration-path: .github/pr-labeler.yml

.github/workflows/update-browserlist.yml

@@ -0,0 +1,18 @@
+name: Update Browserslist
+on:
+  schedule:
+    - cron: '0 7 * * 1'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npx browserslist@latest --update-db
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'chore: update browsers list'

.gitignore

@@ -4,8 +4,7 @@ node_modules/
 coverage/
 .idea/
 
-dist/*.js
-dist/*.map
+dist
 
 yarn-error.log
 .npmrc
@@ -13,10 +12,6 @@ token
 
 package-lock.json
 
-dist/classTest.html
-
-dist/sequenceTest.html
-
 .vscode/
 cypress/platform/current.html
 cypress/platform/experimental.html

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-commit

.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "*.{js,html,md}": [
+      "yarn lint:fix" 
+   ]
+}

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true,
-  "endOfLine": "auto"
-}

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "endOfLine": "auto",
+  "plugins": [
+    "prettier-plugin-jsdoc"
+  ],
+  "printWidth": 100,
+  "singleQuote": true
+}

.webpack/loaders/jison.js

@@ -0,0 +1,25 @@
+const { Generator } = require('jison');
+const validate = require('schema-utils');
+
+const schema = {
+  title: 'Jison Parser options',
+  type: 'object',
+  properties: {
+    'token-stack': {
+      type: 'boolean',
+    },
+    debug: {
+      type: 'boolean',
+    },
+  },
+  additionalProperties: false,
+};
+
+module.exports = function jisonLoader(source) {
+  const options = this.getOptions();
+  (validate.validate || validate)(schema, options, {
+    name: 'Jison Loader',
+    baseDataPath: 'options',
+  });
+  return new Generator(source, options).generate();
+};

.webpack/webpack.config.babel.js

@@ -0,0 +1,45 @@
+import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
+import nodeExternals from 'webpack-node-externals';
+import baseConfig from './webpack.config.base';
+
+export default (_env, args) => {
+  switch (args.mode) {
+    case 'development':
+      return [
+        baseConfig,
+        merge(baseConfig, {
+          externals: [nodeExternals()],
+          output: {
+            filename: '[name].core.js',
+          },
+        }),
+      ];
+    case 'production':
+      return [
+        // umd
+        merge(baseConfig, {
+          output: {
+            filename: '[name].min.js',
+          },
+        }),
+        // esm
+        mergeWithCustomize({
+          customizeObject: customizeObject({
+            'output.library': 'replace',
+          }),
+        })(baseConfig, {
+          experiments: {
+            outputModule: true,
+          },
+          output: {
+            library: {
+              type: 'module',
+            },
+            filename: '[name].esm.min.mjs',
+          },
+        }),
+      ];
+    default:
+      throw new Error('No matching configuration was found!');
+  }
+};

.webpack/webpack.config.base.js

@@ -0,0 +1,54 @@
+import path from 'path';
+
+export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
+
+export default {
+  amd: false, // https://github.com/lodash/lodash/issues/3052
+  target: 'web',
+  entry: {
+    mermaid: './src/mermaid.js',
+  },
+  resolve: {
+    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+    fallback: {
+      fs: false, // jison generated code requires 'fs'
+      path: require.resolve('path-browserify'),
+    },
+  },
+  output: {
+    path: resolveRoot('./dist'),
+    filename: '[name].js',
+    library: {
+      name: 'mermaid',
+      type: 'umd',
+      export: 'default',
+    },
+    globalObject: 'typeof self !== "undefined" ? self : this',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        // load scss to string
+        test: /\.scss$/,
+        use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.jison$/,
+        use: {
+          loader: path.resolve(__dirname, './loaders/jison.js'),
+          options: {
+            'token-stack': true,
+          },
+        },
+      },
+    ],
+  },
+  devtool: 'source-map',
+};

.webpack/webpack.config.e2e.babel.js

@@ -0,0 +1,37 @@
+import baseConfig, { resolveRoot } from './webpack.config.base';
+import { merge } from 'webpack-merge';
+
+export default merge(baseConfig, {
+  mode: 'development',
+  entry: {
+    mermaid: './src/mermaid.js',
+    e2e: './cypress/platform/viewer.js',
+    'bundle-test': './cypress/platform/bundle-test.js',
+  },
+  output: {
+    globalObject: 'window',
+  },
+  devServer: {
+    compress: true,
+    port: 9000,
+    static: [
+      { directory: resolveRoot('cypress', 'platform') },
+      { directory: resolveRoot('dist') },
+      { directory: resolveRoot('demos') },
+    ],
+  },
+  externals: {
+    mermaid: 'mermaid',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+});

README.md

@@ -43,7 +43,7 @@ __The following are some examples of the diagrams, charts and graphs that can be
 </td></tr>
 <tr>
     <td><pre>
-graph TD
+flowchart TD
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
@@ -204,12 +204,15 @@ pie
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)
 
-## Contributors [![Help wanted](https://img.shields.io/github/labels/mermaid-js/mermaid/Help%20wanted!)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
 
 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
 
 Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
 
+## Reporting vulnerabilities
+To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
+
 ## Appreciation
 A quick note from Knut Sveidqvist:
 >*Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*

README.zh-CN.md

@@ -201,7 +201,7 @@ pie
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)
 
-## 贡献者 [![Help wanted](https://img.shields.io/github/labels/mermaid-js/mermaid/Help%20wanted!)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## 贡献者 [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
 
 Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。
 

Renfay.md

@@ -1,3 +0,0 @@
-# Renfay project
-
-A note system!

__mocks__/MERMAID.js

@@ -1,3 +1,3 @@
-export const curveBasis = 'basis'
-export const curveLinear = 'linear'
-export const curveCardinal = 'cardinal'
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';

__mocks__/d3.js

@@ -1,11 +1,10 @@
-/* eslint-env jest */
 let NewD3 = function () {
-  function returnThis () {
-    return this
+  function returnThis() {
+    return this;
   }
   return {
     append: function () {
-      return NewD3()
+      return NewD3();
     },
     lower: returnThis,
     attr: returnThis,
@@ -16,41 +15,47 @@ let NewD3 = function () {
         getBBox: function () {
           return {
             height: 10,
-            width: 20
-          }
-        }
-      }
-    }
-  }
-}
+            width: 20,
+          };
+        },
+      },
+    },
+  };
+};
 
 export const select = function () {
-  return new NewD3()
-}
+  return new NewD3();
+};
 
 export const selectAll = function () {
-  return new NewD3()
-}
+  return new NewD3();
+};
 
-export const curveBasis = 'basis'
-export const curveLinear = 'linear'
-export const curveCardinal = 'cardinal'
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';
 
 export const MockD3 = (name, parent) => {
-  const children = []
+  const children = [];
   const elem = {
-    get __children () { return children },
-    get __name () { return name },
-    get __parent () { return parent }
-  }
+    get __children() {
+      return children;
+    },
+    get __name() {
+      return name;
+    },
+    get __parent() {
+      return parent;
+    },
+  };
   elem.append = (name) => {
-    const mockElem = MockD3(name, elem)
-    children.push(mockElem)
-    return mockElem
-  }
-  elem.lower = jest.fn(() => elem)
-  elem.attr = jest.fn(() => elem)
-  elem.text = jest.fn(() => elem)
-  elem.style = jest.fn(() => elem)
-  return elem
-}
+    const mockElem = MockD3(name, elem);
+    children.push(mockElem);
+    return mockElem;
+  };
+  elem.lower = jest.fn(() => elem);
+  elem.attr = jest.fn(() => elem);
+  elem.text = jest.fn(() => elem);
+  elem.style = jest.fn(() => elem);
+  return elem;
+};

cypress.json

@@ -1 +1,3 @@
-{ "video": false }
+{
+    "video": false
+}

cypress/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+	"env": {
+		"cypress/globals": true
+	},
+	"extends": ["plugin:cypress/recommended"],
+	"plugins": ["cypress"],
+	"rules":{
+		"cypress/no-unnecessary-waiting": 0 
+	}
+}

cypress/examples/actions.spec.js

@@ -2,15 +2,16 @@
 
 context('Actions', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/actions')
-  })
+    cy.visit('https://example.cypress.io/commands/actions');
+  });
 
   // https://on.cypress.io/interacting-with-elements
 
   it('.type() - type into a DOM element', () => {
     // https://on.cypress.io/type
     cy.get('.action-email')
-      .type('fake@email.com').should('have.value', 'fake@email.com')
+      .type('fake@email.com')
+      .should('have.value', 'fake@email.com')
 
       // .type() with special character sequences
       .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
@@ -24,48 +25,52 @@ context('Actions', () => {
 
       // Delay each keypress by 0.1 sec
       .type('slow.typing@email.com', { delay: 100 })
-      .should('have.value', 'slow.typing@email.com')
+      .should('have.value', 'slow.typing@email.com');
 
     cy.get('.action-disabled')
       // Ignore error checking prior to type
       // like whether the input is visible or disabled
       .type('disabled error checking', { force: true })
-      .should('have.value', 'disabled error checking')
-  })
+      .should('have.value', 'disabled error checking');
+  });
 
   it('.focus() - focus on a DOM element', () => {
     // https://on.cypress.io/focus
-    cy.get('.action-focus').focus()
+    cy.get('.action-focus')
+      .focus()
       .should('have.class', 'focus')
-      .prev().should('have.attr', 'style', 'color: orange;')
-  })
+      .prev()
+      .should('have.attr', 'style', 'color: orange;');
+  });
 
   it('.blur() - blur off a DOM element', () => {
     // https://on.cypress.io/blur
-    cy.get('.action-blur').type('About to blur').blur()
+    cy.get('.action-blur')
+      .type('About to blur')
+      .blur()
       .should('have.class', 'error')
-      .prev().should('have.attr', 'style', 'color: red;')
-  })
+      .prev()
+      .should('have.attr', 'style', 'color: red;');
+  });
 
   it('.clear() - clears an input or textarea element', () => {
     // https://on.cypress.io/clear
-    cy.get('.action-clear').type('Clear this text')
+    cy.get('.action-clear')
+      .type('Clear this text')
       .should('have.value', 'Clear this text')
       .clear()
-      .should('have.value', '')
-  })
+      .should('have.value', '');
+  });
 
   it('.submit() - submit a form', () => {
     // https://on.cypress.io/submit
-    cy.get('.action-form')
-      .find('[type="text"]').type('HALFOFF')
-    cy.get('.action-form').submit()
-      .next().should('contain', 'Your form has been submitted!')
-  })
+    cy.get('.action-form').find('[type="text"]').type('HALFOFF');
+    cy.get('.action-form').submit().next().should('contain', 'Your form has been submitted!');
+  });
 
   it('.click() - click on a DOM element', () => {
     // https://on.cypress.io/click
-    cy.get('.action-btn').click()
+    cy.get('.action-btn').click();
 
     // You can click on 9 specific positions of an element:
     //  -----------------------------------
@@ -81,16 +86,16 @@ context('Actions', () => {
     //  -----------------------------------
 
     // clicking in the center of the element is the default
-    cy.get('#action-canvas').click()
+    cy.get('#action-canvas').click();
 
-    cy.get('#action-canvas').click('topLeft')
-    cy.get('#action-canvas').click('top')
-    cy.get('#action-canvas').click('topRight')
-    cy.get('#action-canvas').click('left')
-    cy.get('#action-canvas').click('right')
-    cy.get('#action-canvas').click('bottomLeft')
-    cy.get('#action-canvas').click('bottom')
-    cy.get('#action-canvas').click('bottomRight')
+    cy.get('#action-canvas').click('topLeft');
+    cy.get('#action-canvas').click('top');
+    cy.get('#action-canvas').click('topRight');
+    cy.get('#action-canvas').click('left');
+    cy.get('#action-canvas').click('right');
+    cy.get('#action-canvas').click('bottomLeft');
+    cy.get('#action-canvas').click('bottom');
+    cy.get('#action-canvas').click('bottomRight');
 
     // .click() accepts an x and y coordinate
     // that controls where the click occurs :)
@@ -102,90 +107,83 @@ context('Actions', () => {
       .click(100, 185)
       .click(125, 190)
       .click(150, 185)
-      .click(170, 165)
+      .click(170, 165);
 
     // click multiple elements by passing multiple: true
-    cy.get('.action-labels>.label').click({ multiple: true })
+    cy.get('.action-labels>.label').click({ multiple: true });
 
     // Ignore error checking prior to clicking
-    cy.get('.action-opacity>.btn').click({ force: true })
-  })
+    cy.get('.action-opacity>.btn').click({ force: true });
+  });
 
   it('.dblclick() - double click on a DOM element', () => {
     // https://on.cypress.io/dblclick
 
     // Our app has a listener on 'dblclick' event in our 'scripts.js'
     // that hides the div and shows an input on double click
-    cy.get('.action-div').dblclick().should('not.be.visible')
-    cy.get('.action-input-hidden').should('be.visible')
-  })
+    cy.get('.action-div').dblclick().should('not.be.visible');
+    cy.get('.action-input-hidden').should('be.visible');
+  });
 
   it('.check() - check a checkbox or radio element', () => {
     // https://on.cypress.io/check
 
     // By default, .check() will check all
     // matching checkbox or radio elements in succession, one after another
-    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
-      .check().should('be.checked')
+    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked');
 
-    cy.get('.action-radios [type="radio"]').not('[disabled]')
-      .check().should('be.checked')
+    cy.get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked');
 
     // .check() accepts a value argument
-    cy.get('.action-radios [type="radio"]')
-      .check('radio1').should('be.checked')
+    cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked');
 
     // .check() accepts an array of values
     cy.get('.action-multiple-checkboxes [type="checkbox"]')
-      .check(['checkbox1', 'checkbox2']).should('be.checked')
+      .check(['checkbox1', 'checkbox2'])
+      .should('be.checked');
 
     // Ignore error checking prior to checking
-    cy.get('.action-checkboxes [disabled]')
-      .check({ force: true }).should('be.checked')
+    cy.get('.action-checkboxes [disabled]').check({ force: true }).should('be.checked');
 
-    cy.get('.action-radios [type="radio"]')
-      .check('radio3', { force: true }).should('be.checked')
-  })
+    cy.get('.action-radios [type="radio"]').check('radio3', { force: true }).should('be.checked');
+  });
 
   it('.uncheck() - uncheck a checkbox element', () => {
     // https://on.cypress.io/uncheck
 
     // By default, .uncheck() will uncheck all matching
     // checkbox elements in succession, one after another
-    cy.get('.action-check [type="checkbox"]')
-      .not('[disabled]')
-      .uncheck().should('not.be.checked')
+    cy.get('.action-check [type="checkbox"]').not('[disabled]').uncheck().should('not.be.checked');
 
     // .uncheck() accepts a value argument
     cy.get('.action-check [type="checkbox"]')
       .check('checkbox1')
-      .uncheck('checkbox1').should('not.be.checked')
+      .uncheck('checkbox1')
+      .should('not.be.checked');
 
     // .uncheck() accepts an array of values
     cy.get('.action-check [type="checkbox"]')
       .check(['checkbox1', 'checkbox3'])
-      .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
+      .uncheck(['checkbox1', 'checkbox3'])
+      .should('not.be.checked');
 
     // Ignore error checking prior to unchecking
-    cy.get('.action-check [disabled]')
-      .uncheck({ force: true }).should('not.be.checked')
-  })
+    cy.get('.action-check [disabled]').uncheck({ force: true }).should('not.be.checked');
+  });
 
   it('.select() - select an option in a <select> element', () => {
     // https://on.cypress.io/select
 
     // Select option(s) with matching text content
-    cy.get('.action-select').select('apples')
+    cy.get('.action-select').select('apples');
 
-    cy.get('.action-select-multiple')
-    .select(['apples', 'oranges', 'bananas'])
+    cy.get('.action-select-multiple').select(['apples', 'oranges', 'bananas']);
 
     // Select option(s) with matching value
-    cy.get('.action-select').select('fr-bananas')
+    cy.get('.action-select').select('fr-bananas');
 
-    cy.get('.action-select-multiple')
-      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
-  })
+    cy.get('.action-select-multiple').select(['fr-apples', 'fr-oranges', 'fr-bananas']);
+  });
 
   it('.scrollIntoView() - scroll an element into view', () => {
     // https://on.cypress.io/scrollintoview
@@ -194,27 +192,21 @@ context('Actions', () => {
     // because they're not within
     // the viewable area of their parent
     // (we need to scroll to see them)
-    cy.get('#scroll-horizontal button')
-      .should('not.be.visible')
+    cy.get('#scroll-horizontal button').should('not.be.visible');
 
     // scroll the button into view, as if the user had scrolled
-    cy.get('#scroll-horizontal button').scrollIntoView()
-      .should('be.visible')
+    cy.get('#scroll-horizontal button').scrollIntoView().should('be.visible');
 
-    cy.get('#scroll-vertical button')
-      .should('not.be.visible')
+    cy.get('#scroll-vertical button').should('not.be.visible');
 
     // Cypress handles the scroll direction needed
-    cy.get('#scroll-vertical button').scrollIntoView()
-      .should('be.visible')
+    cy.get('#scroll-vertical button').scrollIntoView().should('be.visible');
 
-    cy.get('#scroll-both button')
-      .should('not.be.visible')
+    cy.get('#scroll-both button').should('not.be.visible');
 
     // Cypress knows to scroll to the right and down
-    cy.get('#scroll-both button').scrollIntoView()
-      .should('be.visible')
-  })
+    cy.get('#scroll-both button').scrollIntoView().should('be.visible');
+  });
 
   it('.trigger() - trigger an event on a DOM element', () => {
     // https://on.cypress.io/trigger
@@ -228,12 +220,12 @@ context('Actions', () => {
     cy.get('.trigger-input-range')
       .invoke('val', 25)
       .trigger('change')
-      .get('input[type=range]').siblings('p')
-      .should('have.text', '25')
-  })
+      .get('input[type=range]')
+      .siblings('p')
+      .should('have.text', '25');
+  });
 
   it('cy.scrollTo() - scroll the window or element to a position', () => {
-
     // https://on.cypress.io/scrollTo
 
     // You can scroll to 9 specific positions of an element:
@@ -251,22 +243,22 @@ context('Actions', () => {
 
     // if you chain .scrollTo() off of cy, we will
     // scroll the entire window
-    cy.scrollTo('bottom')
+    cy.scrollTo('bottom');
 
-    cy.get('#scrollable-horizontal').scrollTo('right')
+    cy.get('#scrollable-horizontal').scrollTo('right');
 
     // or you can scroll to a specific coordinate:
     // (x axis, y axis) in pixels
-    cy.get('#scrollable-vertical').scrollTo(250, 250)
+    cy.get('#scrollable-vertical').scrollTo(250, 250);
 
     // or you can scroll to a specific percentage
     // of the (width, height) of the element
-    cy.get('#scrollable-both').scrollTo('75%', '25%')
+    cy.get('#scrollable-both').scrollTo('75%', '25%');
 
     // control the easing of the scroll (default is 'swing')
-    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' });
 
     // control the duration of the scroll (in ms)
-    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
-  })
-})
+    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 });
+  });
+});

cypress/examples/aliasing.spec.js

@@ -2,8 +2,8 @@
 
 context('Aliasing', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/aliasing')
-  })
+    cy.visit('https://example.cypress.io/commands/aliasing');
+  });
 
   it('.as() - alias a DOM element for later use', () => {
     // https://on.cypress.io/as
@@ -12,31 +12,25 @@ context('Aliasing', () => {
     // We don't have to traverse to the element
     // later in our code, we reference it with @
 
-    cy.get('.as-table').find('tbody>tr')
-      .first().find('td').first()
-      .find('button').as('firstBtn')
+    cy.get('.as-table').find('tbody>tr').first().find('td').first().find('button').as('firstBtn');
 
     // when we reference the alias, we place an
     // @ in front of its name
-    cy.get('@firstBtn').click()
+    cy.get('@firstBtn').click();
 
-    cy.get('@firstBtn')
-      .should('have.class', 'btn-success')
-      .and('contain', 'Changed')
-  })
+    cy.get('@firstBtn').should('have.class', 'btn-success').and('contain', 'Changed');
+  });
 
   it('.as() - alias a route for later use', () => {
-
     // Alias the route to wait for its response
-    cy.server()
-    cy.route('GET', 'comments/*').as('getComment')
+    cy.server();
+    cy.route('GET', 'comments/*').as('getComment');
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-btn').click()
+    cy.get('.network-btn').click();
 
     // https://on.cypress.io/wait
-    cy.wait('@getComment').its('status').should('eq', 200)
-
-  })
-})
+    cy.wait('@getComment').its('status').should('eq', 200);
+  });
+});

cypress/examples/assertions.spec.js

@@ -2,8 +2,8 @@
 
 context('Assertions', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/assertions')
-  })
+    cy.visit('https://example.cypress.io/commands/assertions');
+  });
 
   describe('Implicit Assertions', () => {
     it('.should() - make an assertion about the current subject', () => {
@@ -23,7 +23,7 @@ context('Assertions', () => {
         // first need to invoke jQuery method text()
         // and then match using regular expression
         .invoke('text')
-        .should('match', /column content/i)
+        .should('match', /column content/i);
 
       // a better way to check element's text content against a regular expression
       // is to use "cy.contains"
@@ -32,33 +32,33 @@ context('Assertions', () => {
         .find('tbody tr:last')
         // finds first <td> element with text content matching regular expression
         .contains('td', /column content/i)
-        .should('be.visible')
+        .should('be.visible');
 
       // for more information about asserting element's text
       // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
-    })
+    });
 
     it('.and() - chain multiple assertions together', () => {
       // https://on.cypress.io/and
       cy.get('.assertions-link')
         .should('have.class', 'active')
         .and('have.attr', 'href')
-        .and('include', 'cypress.io')
-    })
-  })
+        .and('include', 'cypress.io');
+    });
+  });
 
   describe('Explicit Assertions', () => {
     // https://on.cypress.io/assertions
     it('expect - make an assertion about a specified subject', () => {
       // We can use Chai's BDD style assertions
-      expect(true).to.be.true
-      const o = { foo: 'bar' }
+      expect(true).to.be.true;
+      const o = { foo: 'bar' };
 
-      expect(o).to.equal(o)
-      expect(o).to.deep.equal({ foo: 'bar' })
+      expect(o).to.equal(o);
+      expect(o).to.deep.equal({ foo: 'bar' });
       // matching text using regular expression
-      expect('FooBar').to.match(/bar$/i)
-    })
+      expect('FooBar').to.match(/bar$/i);
+    });
 
     it('pass your own callback function to should()', () => {
       // Pass a function to should that can have any number
@@ -71,14 +71,14 @@ context('Assertions', () => {
           // https://on.cypress.io/$
           // return an array of texts from all of the p's
           // @ts-ignore TS6133 unused variable
-          const texts = $p.map((i, el) => Cypress.$(el).text())
+          const texts = $p.map((i, el) => Cypress.$(el).text());
 
           // jquery map returns jquery object
           // and .get() convert this to simple array
-          const paragraphs = texts.get()
+          const paragraphs = texts.get();
 
           // array should have length of 3
-          expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+          expect(paragraphs, 'has 3 paragraphs').to.have.length(3);
 
           // use second argument to expect(...) to provide clear
           // message with each assertion
@@ -86,27 +86,27 @@ context('Assertions', () => {
             'Some text from first p',
             'More text from second p',
             'And even more text from third p',
-          ])
-        })
-    })
+          ]);
+        });
+    });
 
     it('finds element by class name regex', () => {
       cy.get('.docs-header')
         .find('div')
         // .should(cb) callback function will be retried
         .should(($div) => {
-          expect($div).to.have.length(1)
+          expect($div).to.have.length(1);
 
-          const className = $div[0].className
+          const className = $div[0].className;
 
-          expect(className).to.match(/heading-/)
+          expect(className).to.match(/heading-/);
         })
         // .then(cb) callback is not retried,
         // it either passes or fails
         .then(($div) => {
-          expect($div, 'text content').to.have.text('Introduction')
-        })
-    })
+          expect($div, 'text content').to.have.text('Introduction');
+        });
+    });
 
     it('can throw any error', () => {
       cy.get('.docs-header')
@@ -114,55 +114,56 @@ context('Assertions', () => {
         .should(($div) => {
           if ($div.length !== 1) {
             // you can throw your own errors
-            throw new Error('Did not find 1 element')
+            throw new Error('Did not find 1 element');
           }
 
-          const className = $div[0].className
+          const className = $div[0].className;
 
           if (!className.match(/heading-/)) {
-            throw new Error(`Could not find class "heading-" in ${className}`)
+            throw new Error(`Could not find class "heading-" in ${className}`);
           }
-        })
-    })
+        });
+    });
 
     it('matches unknown text between two elements', () => {
       /**
        * Text from the first element.
+       *
        * @type {string}
-      */
-      let text
+       */
+      let text;
 
       /**
-       * Normalizes passed text,
-       * useful before comparing text with spaces and different capitalization.
+       * Normalizes passed text, useful before comparing text with spaces and different capitalization.
+       *
        * @param {string} s Text to normalize
-      */
-      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+       */
+      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase();
 
       cy.get('.two-elements')
         .find('.first')
         .then(($first) => {
           // save text from the first element
-          text = normalizeText($first.text())
-        })
+          text = normalizeText($first.text());
+        });
 
       cy.get('.two-elements')
         .find('.second')
         .should(($div) => {
           // we can massage text before comparing
-          const secondText = normalizeText($div.text())
+          const secondText = normalizeText($div.text());
 
-          expect(secondText, 'second text').to.equal(text)
-        })
-    })
+          expect(secondText, 'second text').to.equal(text);
+        });
+    });
 
     it('assert - assert shape of an object', () => {
       const person = {
         name: 'Joe',
         age: 20,
-      }
+      };
 
-      assert.isObject(person, 'value is object')
-    })
-  })
-})
+      assert.isObject(person, 'value is object');
+    });
+  });
+});

cypress/examples/connectors.spec.js

@@ -2,55 +2,54 @@
 
 context('Connectors', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/connectors')
-  })
+    cy.visit('https://example.cypress.io/commands/connectors');
+  });
 
   it('.each() - iterate over an array of elements', () => {
     // https://on.cypress.io/each
-    cy.get('.connectors-each-ul>li')
-      .each(($el, index, $list) => {
-        console.log($el, index, $list)
-      })
-  })
+    cy.get('.connectors-each-ul>li').each(($el, index, $list) => {
+      console.log($el, index, $list);
+    });
+  });
 
   it('.its() - get properties on the current subject', () => {
     // https://on.cypress.io/its
     cy.get('.connectors-its-ul>li')
       // calls the 'length' property yielding that value
       .its('length')
-      .should('be.gt', 2)
-  })
+      .should('be.gt', 2);
+  });
 
   it('.invoke() - invoke a function on the current subject', () => {
     // our div is hidden in our script.js
     // $('.connectors-div').hide()
 
     // https://on.cypress.io/invoke
-    cy.get('.connectors-div').should('be.hidden')
+    cy.get('.connectors-div')
+      .should('be.hidden')
       // call the jquery method 'show' on the 'div.container'
       .invoke('show')
-      .should('be.visible')
-  })
+      .should('be.visible');
+  });
 
   it('.spread() - spread an array as individual args to callback function', () => {
     // https://on.cypress.io/spread
-    const arr = ['foo', 'bar', 'baz']
+    const arr = ['foo', 'bar', 'baz'];
 
     cy.wrap(arr).spread((foo, bar, baz) => {
-      expect(foo).to.eq('foo')
-      expect(bar).to.eq('bar')
-      expect(baz).to.eq('baz')
-    })
-  })
+      expect(foo).to.eq('foo');
+      expect(bar).to.eq('bar');
+      expect(baz).to.eq('baz');
+    });
+  });
 
   it('.then() - invoke a callback function with the current subject', () => {
     // https://on.cypress.io/then
-    cy.get('.connectors-list > li')
-      .then(($lis) => {
-        expect($lis, '3 items').to.have.length(3)
-        expect($lis.eq(0), 'first item').to.contain('Walk the dog')
-        expect($lis.eq(1), 'second item').to.contain('Feed the cat')
-        expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
-      })
-  })
-})
+    cy.get('.connectors-list > li').then(($lis) => {
+      expect($lis, '3 items').to.have.length(3);
+      expect($lis.eq(0), 'first item').to.contain('Walk the dog');
+      expect($lis.eq(1), 'second item').to.contain('Feed the cat');
+      expect($lis.eq(2), 'third item').to.contain('Write JavaScript');
+    });
+  });
+});

cypress/examples/cookies.spec.js

@@ -2,77 +2,78 @@
 
 context('Cookies', () => {
   beforeEach(() => {
-    Cypress.Cookies.debug(true)
+    Cypress.Cookies.debug(true);
 
-    cy.visit('https://example.cypress.io/commands/cookies')
+    cy.visit('https://example.cypress.io/commands/cookies');
 
     // clear cookies again after visiting to remove
     // any 3rd party cookies picked up such as cloudflare
-    cy.clearCookies()
-  })
+    cy.clearCookies();
+  });
 
   it('cy.getCookie() - get a browser cookie', () => {
     // https://on.cypress.io/getcookie
-    cy.get('#getCookie .set-a-cookie').click()
+    cy.get('#getCookie .set-a-cookie').click();
 
     // cy.getCookie() yields a cookie object
-    cy.getCookie('token').should('have.property', 'value', '123ABC')
-  })
+    cy.getCookie('token').should('have.property', 'value', '123ABC');
+  });
 
   it('cy.getCookies() - get browser cookies', () => {
     // https://on.cypress.io/getcookies
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should('be.empty');
 
-    cy.get('#getCookies .set-a-cookie').click()
+    cy.get('#getCookies .set-a-cookie').click();
 
     // cy.getCookies() yields an array of cookies
-    cy.getCookies().should('have.length', 1).should((cookies) => {
-
-      // each cookie has these properties
-      expect(cookies[0]).to.have.property('name', 'token')
-      expect(cookies[0]).to.have.property('value', '123ABC')
-      expect(cookies[0]).to.have.property('httpOnly', false)
-      expect(cookies[0]).to.have.property('secure', false)
-      expect(cookies[0]).to.have.property('domain')
-      expect(cookies[0]).to.have.property('path')
-    })
-  })
+    cy.getCookies()
+      .should('have.length', 1)
+      .should((cookies) => {
+        // each cookie has these properties
+        expect(cookies[0]).to.have.property('name', 'token');
+        expect(cookies[0]).to.have.property('value', '123ABC');
+        expect(cookies[0]).to.have.property('httpOnly', false);
+        expect(cookies[0]).to.have.property('secure', false);
+        expect(cookies[0]).to.have.property('domain');
+        expect(cookies[0]).to.have.property('path');
+      });
+  });
 
   it('cy.setCookie() - set a browser cookie', () => {
     // https://on.cypress.io/setcookie
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should('be.empty');
 
-    cy.setCookie('foo', 'bar')
+    cy.setCookie('foo', 'bar');
 
     // cy.getCookie() yields a cookie object
-    cy.getCookie('foo').should('have.property', 'value', 'bar')
-  })
+    cy.getCookie('foo').should('have.property', 'value', 'bar');
+  });
 
   it('cy.clearCookie() - clear a browser cookie', () => {
     // https://on.cypress.io/clearcookie
-    cy.getCookie('token').should('be.null')
+    cy.getCookie('token').should('be.null');
 
-    cy.get('#clearCookie .set-a-cookie').click()
+    cy.get('#clearCookie .set-a-cookie').click();
 
-    cy.getCookie('token').should('have.property', 'value', '123ABC')
+    cy.getCookie('token').should('have.property', 'value', '123ABC');
 
     // cy.clearCookies() yields null
-    cy.clearCookie('token').should('be.null')
+    cy.clearCookie('token').should('be.null');
 
-    cy.getCookie('token').should('be.null')
-  })
+    cy.getCookie('token').should('be.null');
+  });
 
   it('cy.clearCookies() - clear browser cookies', () => {
     // https://on.cypress.io/clearcookies
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should('be.empty');
 
-    cy.get('#clearCookies .set-a-cookie').click()
+    cy.get('#clearCookies .set-a-cookie').click();
 
-    cy.getCookies().should('have.length', 1)
+    cy.getCookies().should('have.length', 1);
 
     // cy.clearCookies() yields null
-    cy.clearCookies()
+    cy.clearCookies();
 
-    cy.getCookies().should('be.empty')
-  })
-})
+    cy.getCookies().should('be.empty');
+  });
+});

cypress/examples/cypress_api.spec.js

@@ -2,81 +2,85 @@
 
 context('Cypress.Commands', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   // https://on.cypress.io/custom-commands
 
   it('.add() - create a custom command', () => {
-    Cypress.Commands.add('console', {
-      prevSubject: true,
-    }, (subject, method) => {
-      // the previous subject is automatically received
-      // and the commands arguments are shifted
+    Cypress.Commands.add(
+      'console',
+      {
+        prevSubject: true,
+      },
+      (subject, method) => {
+        // the previous subject is automatically received
+        // and the commands arguments are shifted
 
-      // allow us to change the console method used
-      method = method || 'log'
+        // allow us to change the console method used
+        method = method || 'log';
 
-      // log the subject to the console
-      // @ts-ignore TS7017
-      console[method]('The subject is', subject)
+        // log the subject to the console
+        // @ts-ignore TS7017
+        console[method]('The subject is', subject);
 
-      // whatever we return becomes the new subject
-      // we don't want to change the subject so
-      // we return whatever was passed in
-      return subject
-    })
+        // whatever we return becomes the new subject
+        // we don't want to change the subject so
+        // we return whatever was passed in
+        return subject;
+      }
+    );
 
     // @ts-ignore TS2339
-    cy.get('button').console('info').then(($button) => {
-      // subject is still $button
-    })
-  })
-})
-
+    cy.get('button')
+      .console('info')
+      .then(($button) => {
+        // subject is still $button
+      });
+  });
+});
 
 context('Cypress.Cookies', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   // https://on.cypress.io/cookies
   it('.debug() - enable or disable debugging', () => {
-    Cypress.Cookies.debug(true)
+    Cypress.Cookies.debug(true);
 
     // Cypress will now log in the console when
     // cookies are set or cleared
-    cy.setCookie('fakeCookie', '123ABC')
-    cy.clearCookie('fakeCookie')
-    cy.setCookie('fakeCookie', '123ABC')
-    cy.clearCookie('fakeCookie')
-    cy.setCookie('fakeCookie', '123ABC')
-  })
+    cy.setCookie('fakeCookie', '123ABC');
+    cy.clearCookie('fakeCookie');
+    cy.setCookie('fakeCookie', '123ABC');
+    cy.clearCookie('fakeCookie');
+    cy.setCookie('fakeCookie', '123ABC');
+  });
 
   it('.preserveOnce() - preserve cookies by key', () => {
     // normally cookies are reset after each test
-    cy.getCookie('fakeCookie').should('not.be.ok')
+    cy.getCookie('fakeCookie').should('not.be.ok');
 
     // preserving a cookie will not clear it when
     // the next test starts
-    cy.setCookie('lastCookie', '789XYZ')
-    Cypress.Cookies.preserveOnce('lastCookie')
-  })
+    cy.setCookie('lastCookie', '789XYZ');
+    Cypress.Cookies.preserveOnce('lastCookie');
+  });
 
   it('.defaults() - set defaults for all cookies', () => {
     // now any cookie with the name 'session_id' will
     // not be cleared before each new test runs
     Cypress.Cookies.defaults({
       whitelist: 'session_id',
-    })
-  })
-})
-
+    });
+  });
+});
 
 context('Cypress.Server', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   // Permanently override server options for
   // all instances of cy.server()
@@ -86,71 +90,71 @@ context('Cypress.Server', () => {
     Cypress.Server.defaults({
       delay: 0,
       force404: false,
-    })
-  })
-})
+    });
+  });
+});
 
 context('Cypress.arch', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   it('Get CPU architecture name of underlying OS', () => {
     // https://on.cypress.io/arch
-    expect(Cypress.arch).to.exist
-  })
-})
+    expect(Cypress.arch).to.exist;
+  });
+});
 
 context('Cypress.config()', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   it('Get and set configuration options', () => {
     // https://on.cypress.io/config
-    let myConfig = Cypress.config()
+    let myConfig = Cypress.config();
 
-    expect(myConfig).to.have.property('animationDistanceThreshold', 5)
-    expect(myConfig).to.have.property('baseUrl', null)
-    expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
-    expect(myConfig).to.have.property('requestTimeout', 5000)
-    expect(myConfig).to.have.property('responseTimeout', 30000)
-    expect(myConfig).to.have.property('viewportHeight', 660)
-    expect(myConfig).to.have.property('viewportWidth', 1000)
-    expect(myConfig).to.have.property('pageLoadTimeout', 60000)
-    expect(myConfig).to.have.property('waitForAnimations', true)
+    expect(myConfig).to.have.property('animationDistanceThreshold', 5);
+    expect(myConfig).to.have.property('baseUrl', null);
+    expect(myConfig).to.have.property('defaultCommandTimeout', 4000);
+    expect(myConfig).to.have.property('requestTimeout', 5000);
+    expect(myConfig).to.have.property('responseTimeout', 30000);
+    expect(myConfig).to.have.property('viewportHeight', 660);
+    expect(myConfig).to.have.property('viewportWidth', 1000);
+    expect(myConfig).to.have.property('pageLoadTimeout', 60000);
+    expect(myConfig).to.have.property('waitForAnimations', true);
 
-    expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
+    expect(Cypress.config('pageLoadTimeout')).to.eq(60000);
 
     // this will change the config for the rest of your tests!
-    Cypress.config('pageLoadTimeout', 20000)
+    Cypress.config('pageLoadTimeout', 20000);
 
-    expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
+    expect(Cypress.config('pageLoadTimeout')).to.eq(20000);
 
-    Cypress.config('pageLoadTimeout', 60000)
-  })
-})
+    Cypress.config('pageLoadTimeout', 60000);
+  });
+});
 
 context('Cypress.dom', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   // https://on.cypress.io/dom
   it('.isHidden() - determine if a DOM element is hidden', () => {
-    let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
-    let visibleP = Cypress.$('.dom-p p.visible').get(0)
+    let hiddenP = Cypress.$('.dom-p p.hidden').get(0);
+    let visibleP = Cypress.$('.dom-p p.visible').get(0);
 
     // our first paragraph has css class 'hidden'
-    expect(Cypress.dom.isHidden(hiddenP)).to.be.true
-    expect(Cypress.dom.isHidden(visibleP)).to.be.false
-  })
-})
+    expect(Cypress.dom.isHidden(hiddenP)).to.be.true;
+    expect(Cypress.dom.isHidden(visibleP)).to.be.false;
+  });
+});
 
 context('Cypress.env()', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   // We can set environment variables for highly dynamic values
 
@@ -161,62 +165,61 @@ context('Cypress.env()', () => {
     Cypress.env({
       host: 'veronica.dev.local',
       api_server: 'http://localhost:8888/v1/',
-    })
+    });
 
     // get environment variable
-    expect(Cypress.env('host')).to.eq('veronica.dev.local')
+    expect(Cypress.env('host')).to.eq('veronica.dev.local');
 
     // set environment variable
-    Cypress.env('api_server', 'http://localhost:8888/v2/')
-    expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
+    Cypress.env('api_server', 'http://localhost:8888/v2/');
+    expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/');
 
     // get all environment variable
-    expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
-    expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
-  })
-})
+    expect(Cypress.env()).to.have.property('host', 'veronica.dev.local');
+    expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/');
+  });
+});
 
 context('Cypress.log', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   it('Control what is printed to the Command Log', () => {
     // https://on.cypress.io/cypress-log
-  })
-})
-
+  });
+});
 
 context('Cypress.platform', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   it('Get underlying OS name', () => {
     // https://on.cypress.io/platform
-    expect(Cypress.platform).to.be.exist
-  })
-})
+    expect(Cypress.platform).to.be.exist;
+  });
+});
 
 context('Cypress.version', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   it('Get current version of Cypress being run', () => {
     // https://on.cypress.io/version
-    expect(Cypress.version).to.be.exist
-  })
-})
+    expect(Cypress.version).to.be.exist;
+  });
+});
 
 context('Cypress.spec', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api')
-  })
+    cy.visit('https://example.cypress.io/cypress-api');
+  });
 
   it('Get current spec information', () => {
     // https://on.cypress.io/spec
     // wrap the object so we can inspect it easily by clicking in the command log
-    cy.wrap(Cypress.spec).should('have.keys', ['name', 'relative', 'absolute'])
-  })
-})
+    cy.wrap(Cypress.spec).should('have.keys', ['name', 'relative', 'absolute']);
+  });
+});

cypress/examples/files.spec.js

@@ -3,18 +3,18 @@
 /// JSON fixture file can be loaded directly using
 // the built-in JavaScript bundler
 // @ts-ignore
-const requiredExample = require('../../fixtures/example')
+const requiredExample = require('../../fixtures/example');
 
 context('Files', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/files')
-  })
+    cy.visit('https://example.cypress.io/commands/files');
+  });
 
   beforeEach(() => {
     // load example.json fixture file and store
     // in the test context object
-    cy.fixture('example.json').as('example')
-  })
+    cy.fixture('example.json').as('example');
+  });
 
   it('cy.fixture() - load a fixture', () => {
     // https://on.cypress.io/fixture
@@ -22,57 +22,58 @@ context('Files', () => {
     // Instead of writing a response inline you can
     // use a fixture file's content.
 
-    cy.server()
-    cy.fixture('example.json').as('comment')
+    cy.server();
+    cy.fixture('example.json').as('comment');
     // when application makes an Ajax request matching "GET comments/*"
     // Cypress will intercept it and reply with object
     // from the "comment" alias
-    cy.route('GET', 'comments/*', '@comment').as('getComment')
+    cy.route('GET', 'comments/*', '@comment').as('getComment');
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click()
+    cy.get('.fixture-btn').click();
 
-    cy.wait('@getComment').its('responseBody')
+    cy.wait('@getComment')
+      .its('responseBody')
       .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data')
+      .and('include', 'Using fixtures to represent data');
 
     // you can also just write the fixture in the route
-    cy.route('GET', 'comments/*', 'fixture:example.json').as('getComment')
+    cy.route('GET', 'comments/*', 'fixture:example.json').as('getComment');
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click()
+    cy.get('.fixture-btn').click();
 
-    cy.wait('@getComment').its('responseBody')
+    cy.wait('@getComment')
+      .its('responseBody')
       .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data')
+      .and('include', 'Using fixtures to represent data');
 
     // or write fx to represent fixture
     // by default it assumes it's .json
-    cy.route('GET', 'comments/*', 'fx:example').as('getComment')
+    cy.route('GET', 'comments/*', 'fx:example').as('getComment');
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click()
+    cy.get('.fixture-btn').click();
 
-    cy.wait('@getComment').its('responseBody')
+    cy.wait('@getComment')
+      .its('responseBody')
       .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data')
-  })
+      .and('include', 'Using fixtures to represent data');
+  });
 
   it('cy.fixture() or require - load a fixture', function () {
     // we are inside the "function () { ... }"
     // callback and can use test context object "this"
     // "this.example" was loaded in "beforeEach" function callback
-    expect(this.example, 'fixture in the test context')
-      .to.deep.equal(requiredExample)
+    expect(this.example, 'fixture in the test context').to.deep.equal(requiredExample);
 
     // or use "cy.wrap" and "should('deep.equal', ...)" assertion
     // @ts-ignore
-    cy.wrap(this.example, 'fixture vs require')
-      .should('deep.equal', requiredExample)
-  })
+    cy.wrap(this.example, 'fixture vs require').should('deep.equal', requiredExample);
+  });
 
   it('cy.readFile() - read a files contents', () => {
     // https://on.cypress.io/readfile
@@ -80,9 +81,9 @@ context('Files', () => {
     // You can read a file and yield its contents
     // The filePath is relative to your project's root.
     cy.readFile('cypress.json').then((json) => {
-      expect(json).to.be.an('object')
-    })
-  })
+      expect(json).to.be.an('object');
+    });
+  });
 
   it('cy.writeFile() - write to a file', () => {
     // https://on.cypress.io/writefile
@@ -91,13 +92,12 @@ context('Files', () => {
 
     // Use a response from a request to automatically
     // generate a fixture file for use later
-    cy.request('https://jsonplaceholder.cypress.io/users')
-      .then((response) => {
-        cy.writeFile('cypress/fixtures/users.json', response.body)
-      })
+    cy.request('https://jsonplaceholder.cypress.io/users').then((response) => {
+      cy.writeFile('cypress/fixtures/users.json', response.body);
+    });
     cy.fixture('users').should((users) => {
-      expect(users[0].name).to.exist
-    })
+      expect(users[0].name).to.exist;
+    });
 
     // JavaScript arrays and objects are stringified
     // and formatted into text.
@@ -105,10 +105,10 @@ context('Files', () => {
       id: 8739,
       name: 'Jane',
       email: 'jane@example.com',
-    })
+    });
 
     cy.fixture('profile').should((profile) => {
-      expect(profile.name).to.eq('Jane')
-    })
-  })
-})
+      expect(profile.name).to.eq('Jane');
+    });
+  });
+});

cypress/examples/local_storage.spec.js

@@ -2,51 +2,57 @@
 
 context('Local Storage', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/local-storage')
-  })
+    cy.visit('https://example.cypress.io/commands/local-storage');
+  });
   // Although local storage is automatically cleared
   // in between tests to maintain a clean state
   // sometimes we need to clear the local storage manually
 
   it('cy.clearLocalStorage() - clear all data in local storage', () => {
     // https://on.cypress.io/clearlocalstorage
-    cy.get('.ls-btn').click().should(() => {
-      expect(localStorage.getItem('prop1')).to.eq('red')
-      expect(localStorage.getItem('prop2')).to.eq('blue')
-      expect(localStorage.getItem('prop3')).to.eq('magenta')
-    })
+    cy.get('.ls-btn')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('prop1')).to.eq('red');
+        expect(localStorage.getItem('prop2')).to.eq('blue');
+        expect(localStorage.getItem('prop3')).to.eq('magenta');
+      });
 
     // clearLocalStorage() yields the localStorage object
     cy.clearLocalStorage().should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null
-      expect(ls.getItem('prop2')).to.be.null
-      expect(ls.getItem('prop3')).to.be.null
-    })
+      expect(ls.getItem('prop1')).to.be.null;
+      expect(ls.getItem('prop2')).to.be.null;
+      expect(ls.getItem('prop3')).to.be.null;
+    });
 
     // Clear key matching string in Local Storage
-    cy.get('.ls-btn').click().should(() => {
-      expect(localStorage.getItem('prop1')).to.eq('red')
-      expect(localStorage.getItem('prop2')).to.eq('blue')
-      expect(localStorage.getItem('prop3')).to.eq('magenta')
-    })
+    cy.get('.ls-btn')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('prop1')).to.eq('red');
+        expect(localStorage.getItem('prop2')).to.eq('blue');
+        expect(localStorage.getItem('prop3')).to.eq('magenta');
+      });
 
     cy.clearLocalStorage('prop1').should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null
-      expect(ls.getItem('prop2')).to.eq('blue')
-      expect(ls.getItem('prop3')).to.eq('magenta')
-    })
+      expect(ls.getItem('prop1')).to.be.null;
+      expect(ls.getItem('prop2')).to.eq('blue');
+      expect(ls.getItem('prop3')).to.eq('magenta');
+    });
 
     // Clear keys matching regex in Local Storage
-    cy.get('.ls-btn').click().should(() => {
-      expect(localStorage.getItem('prop1')).to.eq('red')
-      expect(localStorage.getItem('prop2')).to.eq('blue')
-      expect(localStorage.getItem('prop3')).to.eq('magenta')
-    })
+    cy.get('.ls-btn')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('prop1')).to.eq('red');
+        expect(localStorage.getItem('prop2')).to.eq('blue');
+        expect(localStorage.getItem('prop3')).to.eq('magenta');
+      });
 
     cy.clearLocalStorage(/prop1|2/).should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null
-      expect(ls.getItem('prop2')).to.be.null
-      expect(ls.getItem('prop3')).to.eq('magenta')
-    })
-  })
-})
+      expect(ls.getItem('prop1')).to.be.null;
+      expect(ls.getItem('prop2')).to.be.null;
+      expect(ls.getItem('prop3')).to.eq('magenta');
+    });
+  });
+});

cypress/examples/location.spec.js

@@ -2,31 +2,31 @@
 
 context('Location', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/location')
-  })
+    cy.visit('https://example.cypress.io/commands/location');
+  });
 
   it('cy.hash() - get the current URL hash', () => {
     // https://on.cypress.io/hash
-    cy.hash().should('be.empty')
-  })
+    cy.hash().should('be.empty');
+  });
 
   it('cy.location() - get window.location', () => {
     // https://on.cypress.io/location
     cy.location().should((location) => {
-      expect(location.hash).to.be.empty
-      expect(location.href).to.eq('https://example.cypress.io/commands/location')
-      expect(location.host).to.eq('example.cypress.io')
-      expect(location.hostname).to.eq('example.cypress.io')
-      expect(location.origin).to.eq('https://example.cypress.io')
-      expect(location.pathname).to.eq('/commands/location')
-      expect(location.port).to.eq('')
-      expect(location.protocol).to.eq('https:')
-      expect(location.search).to.be.empty
-    })
-  })
+      expect(location.hash).to.be.empty;
+      expect(location.href).to.eq('https://example.cypress.io/commands/location');
+      expect(location.host).to.eq('example.cypress.io');
+      expect(location.hostname).to.eq('example.cypress.io');
+      expect(location.origin).to.eq('https://example.cypress.io');
+      expect(location.pathname).to.eq('/commands/location');
+      expect(location.port).to.eq('');
+      expect(location.protocol).to.eq('https:');
+      expect(location.search).to.be.empty;
+    });
+  });
 
   it('cy.url() - get the current URL', () => {
     // https://on.cypress.io/url
-    cy.url().should('eq', 'https://example.cypress.io/commands/location')
-  })
-})
+    cy.url().should('eq', 'https://example.cypress.io/commands/location');
+  });
+});

cypress/examples/misc.spec.js

@@ -2,8 +2,8 @@
 
 context('Misc', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/misc')
-  })
+    cy.visit('https://example.cypress.io/commands/misc');
+  });
 
   it('.end() - end the command chain', () => {
     // https://on.cypress.io/end
@@ -12,12 +12,12 @@ context('Misc', () => {
     // and force Cypress to re-query from the root element
     cy.get('.misc-table').within(() => {
       // ends the current chain and yields null
-      cy.contains('Cheryl').click().end()
+      cy.contains('Cheryl').click().end();
 
       // queries the entire table again
-      cy.contains('Charles').click()
-    })
-  })
+      cy.contains('Charles').click();
+    });
+  });
 
   it('cy.exec() - execute a system command', () => {
     // https://on.cypress.io/exec
@@ -25,40 +25,36 @@ context('Misc', () => {
     // execute a system command.
     // so you can take actions necessary for
     // your test outside the scope of Cypress.
-    cy.exec('echo Jane Lane')
-      .its('stdout').should('contain', 'Jane Lane')
+    cy.exec('echo Jane Lane').its('stdout').should('contain', 'Jane Lane');
 
     // we can use Cypress.platform string to
     // select appropriate command
     // https://on.cypress/io/platform
-    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
+    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`);
 
     if (Cypress.platform === 'win32') {
-      cy.exec('print cypress.json')
-        .its('stderr').should('be.empty')
+      cy.exec('print cypress.json').its('stderr').should('be.empty');
     } else {
-      cy.exec('cat cypress.json')
-        .its('stderr').should('be.empty')
+      cy.exec('cat cypress.json').its('stderr').should('be.empty');
 
-      cy.exec('pwd')
-        .its('code').should('eq', 0)
+      cy.exec('pwd').its('code').should('eq', 0);
     }
-  })
+  });
 
   it('cy.focused() - get the DOM element that has focus', () => {
     // https://on.cypress.io/focused
-    cy.get('.misc-form').find('#name').click()
-    cy.focused().should('have.id', 'name')
+    cy.get('.misc-form').find('#name').click();
+    cy.focused().should('have.id', 'name');
 
-    cy.get('.misc-form').find('#description').click()
-    cy.focused().should('have.id', 'description')
-  })
+    cy.get('.misc-form').find('#description').click();
+    cy.focused().should('have.id', 'description');
+  });
 
   context('Cypress.Screenshot', function () {
     it('cy.screenshot() - take a screenshot', () => {
       // https://on.cypress.io/screenshot
-      cy.screenshot('my-image')
-    })
+      cy.screenshot('my-image');
+    });
 
     it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
       Cypress.Screenshot.defaults({
@@ -68,16 +64,14 @@ context('Misc', () => {
         scale: false,
         disableTimersAndAnimations: true,
         screenshotOnRunFailure: true,
-        beforeScreenshot () { },
-        afterScreenshot () { },
-      })
-    })
-  })
+        beforeScreenshot() {},
+        afterScreenshot() {},
+      });
+    });
+  });
 
   it('cy.wrap() - wrap an object', () => {
     // https://on.cypress.io/wrap
-    cy.wrap({ foo: 'bar' })
-      .should('have.property', 'foo')
-      .and('include', 'bar')
-  })
-})
+    cy.wrap({ foo: 'bar' }).should('have.property', 'foo').and('include', 'bar');
+  });
+});

cypress/examples/navigation.spec.js

@@ -2,38 +2,38 @@
 
 context('Navigation', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io')
-    cy.get('.navbar-nav').contains('Commands').click()
-    cy.get('.dropdown-menu').contains('Navigation').click()
-  })
+    cy.visit('https://example.cypress.io');
+    cy.get('.navbar-nav').contains('Commands').click();
+    cy.get('.dropdown-menu').contains('Navigation').click();
+  });
 
-  it('cy.go() - go back or forward in the browser\'s history', () => {
+  it("cy.go() - go back or forward in the browser's history", () => {
     // https://on.cypress.io/go
 
-    cy.location('pathname').should('include', 'navigation')
+    cy.location('pathname').should('include', 'navigation');
 
-    cy.go('back')
-    cy.location('pathname').should('not.include', 'navigation')
+    cy.go('back');
+    cy.location('pathname').should('not.include', 'navigation');
 
-    cy.go('forward')
-    cy.location('pathname').should('include', 'navigation')
+    cy.go('forward');
+    cy.location('pathname').should('include', 'navigation');
 
     // clicking back
-    cy.go(-1)
-    cy.location('pathname').should('not.include', 'navigation')
+    cy.go(-1);
+    cy.location('pathname').should('not.include', 'navigation');
 
     // clicking forward
-    cy.go(1)
-    cy.location('pathname').should('include', 'navigation')
-  })
+    cy.go(1);
+    cy.location('pathname').should('include', 'navigation');
+  });
 
   it('cy.reload() - reload the page', () => {
     // https://on.cypress.io/reload
-    cy.reload()
+    cy.reload();
 
     // reload the page without using the cache
-    cy.reload(true)
-  })
+    cy.reload(true);
+  });
 
   it('cy.visit() - visit a remote url', () => {
     // https://on.cypress.io/visit
@@ -43,14 +43,14 @@ context('Navigation', () => {
     // Pass options to the visit
     cy.visit('https://example.cypress.io/commands/navigation', {
       timeout: 50000, // increase total time for the visit to resolve
-      onBeforeLoad (contentWindow) {
+      onBeforeLoad(contentWindow) {
         // contentWindow is the remote page's window object
-        expect(typeof contentWindow === 'object').to.be.true
+        expect(typeof contentWindow === 'object').to.be.true;
       },
-      onLoad (contentWindow) {
+      onLoad(contentWindow) {
         // contentWindow is the remote page's window object
-        expect(typeof contentWindow === 'object').to.be.true
+        expect(typeof contentWindow === 'object').to.be.true;
       },
-    })
-    })
-})
+    });
+  });
+});

cypress/examples/network_requests.spec.js

@@ -2,8 +2,8 @@
 
 context('Network Requests', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/network-requests')
-  })
+    cy.visit('https://example.cypress.io/commands/network-requests');
+  });
 
   // Manage AJAX / XHR requests in your app
 
@@ -13,59 +13,56 @@ context('Network Requests', () => {
     cy.server().should((server) => {
       // the default options on server
       // you can override any of these options
-      expect(server.delay).to.eq(0)
-      expect(server.method).to.eq('GET')
-      expect(server.status).to.eq(200)
-      expect(server.headers).to.be.null
-      expect(server.response).to.be.null
-      expect(server.onRequest).to.be.undefined
-      expect(server.onResponse).to.be.undefined
-      expect(server.onAbort).to.be.undefined
+      expect(server.delay).to.eq(0);
+      expect(server.method).to.eq('GET');
+      expect(server.status).to.eq(200);
+      expect(server.headers).to.be.null;
+      expect(server.response).to.be.null;
+      expect(server.onRequest).to.be.undefined;
+      expect(server.onResponse).to.be.undefined;
+      expect(server.onAbort).to.be.undefined;
 
       // These options control the server behavior
       // affecting all requests
 
       // pass false to disable existing route stubs
-      expect(server.enable).to.be.true
+      expect(server.enable).to.be.true;
       // forces requests that don't match your routes to 404
-      expect(server.force404).to.be.false
+      expect(server.force404).to.be.false;
       // whitelists requests from ever being logged or stubbed
-      expect(server.whitelist).to.be.a('function')
-    })
+      expect(server.whitelist).to.be.a('function');
+    });
 
     cy.server({
       method: 'POST',
       delay: 1000,
       status: 422,
       response: {},
-    })
+    });
 
     // any route commands will now inherit the above options
     // from the server. anything we pass specifically
     // to route will override the defaults though.
-  })
+  });
 
   it('cy.request() - make an XHR request', () => {
     // https://on.cypress.io/request
-    cy.request('https://jsonplaceholder.cypress.io/comments')
-      .should((response) => {
-        expect(response.status).to.eq(200)
-        expect(response.body).to.have.length(500)
-        expect(response).to.have.property('headers')
-        expect(response).to.have.property('duration')
-      })
-  })
-
+    cy.request('https://jsonplaceholder.cypress.io/comments').should((response) => {
+      expect(response.status).to.eq(200);
+      expect(response.body).to.have.length(500);
+      expect(response).to.have.property('headers');
+      expect(response).to.have.property('duration');
+    });
+  });
 
   it('cy.request() - verify response using BDD syntax', () => {
-    cy.request('https://jsonplaceholder.cypress.io/comments')
-    .then((response) => {
+    cy.request('https://jsonplaceholder.cypress.io/comments').then((response) => {
       // https://on.cypress.io/assertions
-      expect(response).property('status').to.equal(200)
-      expect(response).property('body').to.have.length(500)
-      expect(response).to.include.keys('headers', 'duration')
-    })
-  })
+      expect(response).property('status').to.equal(200);
+      expect(response).property('body').to.have.length(500);
+      expect(response).to.include.keys('headers', 'duration');
+    });
+  });
 
   it('cy.request() with query parameters', () => {
     // will execute request
@@ -77,42 +74,42 @@ context('Network Requests', () => {
         id: 3,
       },
     })
-    .its('body')
-    .should('be.an', 'array')
-    .and('have.length', 1)
-    .its('0') // yields first element of the array
-    .should('contain', {
-      postId: 1,
-      id: 3,
-    })
-  })
+      .its('body')
+      .should('be.an', 'array')
+      .and('have.length', 1)
+      .its('0') // yields first element of the array
+      .should('contain', {
+        postId: 1,
+        id: 3,
+      });
+  });
 
   it('cy.request() - pass result to the second request', () => {
     // first, let's find out the userId of the first user we have
     cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
       .its('body.0') // yields the first element of the returned list
       .then((user) => {
-        expect(user).property('id').to.be.a('number')
+        expect(user).property('id').to.be.a('number');
         // make a new post on behalf of the user
         cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
           userId: user.id,
           title: 'Cypress Test Runner',
           body: 'Fast, easy and reliable testing for anything that runs in a browser.',
-        })
+        });
       })
       // note that the value here is the returned value of the 2nd request
       // which is the new post object
       .then((response) => {
-        expect(response).property('status').to.equal(201) // new entity created
+        expect(response).property('status').to.equal(201); // new entity created
         expect(response).property('body').to.contain({
           id: 101, // there are already 100 posts, so new entity gets id 101
           title: 'Cypress Test Runner',
-        })
+        });
         // we don't know the user id here - since it was in above closure
         // so in this test just confirm that the property is there
-        expect(response.body).property('userId').to.be.a('number')
-      })
-  })
+        expect(response.body).property('userId').to.be.a('number');
+      });
+  });
 
   it('cy.request() - save response in the shared test context', () => {
     // https://on.cypress.io/variables-and-aliases
@@ -131,47 +128,48 @@ context('Network Requests', () => {
           title: 'Cypress Test Runner',
           body: 'Fast, easy and reliable testing for anything that runs in a browser.',
         })
-        .its('body').as('post') // save the new post from the response
+          .its('body')
+          .as('post'); // save the new post from the response
       })
       .then(function () {
         // When this callback runs, both "cy.request" API commands have finished
         // and the test context has "user" and "post" objects set.
         // Let's verify them.
-        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
-      })
-  })
+        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id);
+      });
+  });
 
   it('cy.route() - route responses to matching requests', () => {
     // https://on.cypress.io/route
 
-    let message = 'whoa, this comment does not exist'
+    let message = 'whoa, this comment does not exist';
 
-    cy.server()
+    cy.server();
 
     // Listen to GET to comments/1
-    cy.route('GET', 'comments/*').as('getComment')
+    cy.route('GET', 'comments/*').as('getComment');
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-btn').click()
+    cy.get('.network-btn').click();
 
     // https://on.cypress.io/wait
-    cy.wait('@getComment').its('status').should('eq', 200)
+    cy.wait('@getComment').its('status').should('eq', 200);
 
     // Listen to POST to comments
-    cy.route('POST', '/comments').as('postComment')
+    cy.route('POST', '/comments').as('postComment');
 
     // we have code that posts a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-post').click()
-    cy.wait('@postComment')
+    cy.get('.network-post').click();
+    cy.wait('@postComment');
 
     // get the route
     cy.get('@postComment').should((xhr) => {
-      expect(xhr.requestBody).to.include('email')
-      expect(xhr.requestHeaders).to.have.property('Content-Type')
-      expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()')
-    })
+      expect(xhr.requestBody).to.include('email');
+      expect(xhr.requestHeaders).to.have.property('Content-Type');
+      expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()');
+    });
 
     // Stub a response to PUT comments/ ****
     cy.route({
@@ -180,15 +178,15 @@ context('Network Requests', () => {
       status: 404,
       response: { error: message },
       delay: 500,
-    }).as('putComment')
+    }).as('putComment');
 
     // we have code that puts a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-put').click()
+    cy.get('.network-put').click();
 
-    cy.wait('@putComment')
+    cy.wait('@putComment');
 
     // our 404 statusCode logic in scripts.js executed
-    cy.get('.network-put-comment').should('contain', message)
-  })
-})
+    cy.get('.network-put-comment').should('contain', message);
+  });
+});

cypress/examples/querying.spec.js

@@ -2,8 +2,8 @@
 
 context('Querying', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/querying')
-  })
+    cy.visit('https://example.cypress.io/commands/querying');
+  });
 
   // The most commonly used query is 'cy.get()', you can
   // think of this like the '$' in jQuery
@@ -11,77 +11,65 @@ context('Querying', () => {
   it('cy.get() - query DOM elements', () => {
     // https://on.cypress.io/get
 
-    cy.get('#query-btn').should('contain', 'Button')
+    cy.get('#query-btn').should('contain', 'Button');
 
-    cy.get('.query-btn').should('contain', 'Button')
+    cy.get('.query-btn').should('contain', 'Button');
 
-    cy.get('#querying .well>button:first').should('contain', 'Button')
+    cy.get('#querying .well>button:first').should('contain', 'Button');
     //              ↲
     // Use CSS selectors just like jQuery
 
-    cy.get('[data-test-id="test-example"]').should('have.class', 'example')
+    cy.get('[data-test-id="test-example"]').should('have.class', 'example');
 
     // 'cy.get()' yields jQuery object, you can get its attribute
     // by invoking `.attr()` method
     cy.get('[data-test-id="test-example"]')
       .invoke('attr', 'data-test-id')
-      .should('equal', 'test-example')
+      .should('equal', 'test-example');
 
     // or you can get element's CSS property
-    cy.get('[data-test-id="test-example"]')
-      .invoke('css', 'position')
-      .should('equal', 'static')
+    cy.get('[data-test-id="test-example"]').invoke('css', 'position').should('equal', 'static');
 
     // or use assertions directly during 'cy.get()'
     // https://on.cypress.io/assertions
     cy.get('[data-test-id="test-example"]')
       .should('have.attr', 'data-test-id', 'test-example')
-      .and('have.css', 'position', 'static')
-  })
+      .and('have.css', 'position', 'static');
+  });
 
   it('cy.contains() - query DOM elements with matching content', () => {
     // https://on.cypress.io/contains
-    cy.get('.query-list')
-      .contains('bananas')
-      .should('have.class', 'third')
+    cy.get('.query-list').contains('bananas').should('have.class', 'third');
 
     // we can pass a regexp to `.contains()`
-    cy.get('.query-list')
-      .contains(/^b\w+/)
-      .should('have.class', 'third')
+    cy.get('.query-list').contains(/^b\w+/).should('have.class', 'third');
 
-    cy.get('.query-list')
-      .contains('apples')
-      .should('have.class', 'first')
+    cy.get('.query-list').contains('apples').should('have.class', 'first');
 
     // passing a selector to contains will
     // yield the selector containing the text
-    cy.get('#querying')
-      .contains('ul', 'oranges')
-      .should('have.class', 'query-list')
+    cy.get('#querying').contains('ul', 'oranges').should('have.class', 'query-list');
 
-    cy.get('.query-button')
-      .contains('Save Form')
-      .should('have.class', 'btn')
-  })
+    cy.get('.query-button').contains('Save Form').should('have.class', 'btn');
+  });
 
   it('.within() - query DOM elements within a specific element', () => {
     // https://on.cypress.io/within
     cy.get('.query-form').within(() => {
-      cy.get('input:first').should('have.attr', 'placeholder', 'Email')
-      cy.get('input:last').should('have.attr', 'placeholder', 'Password')
-    })
-  })
+      cy.get('input:first').should('have.attr', 'placeholder', 'Email');
+      cy.get('input:last').should('have.attr', 'placeholder', 'Password');
+    });
+  });
 
   it('cy.root() - query the root DOM element', () => {
     // https://on.cypress.io/root
 
     // By default, root is the document
-    cy.root().should('match', 'html')
+    cy.root().should('match', 'html');
 
     cy.get('.query-ul').within(() => {
       // In this within, the root is now the ul DOM element
-      cy.root().should('have.class', 'query-ul')
-    })
-  })
-})
+      cy.root().should('have.class', 'query-ul');
+    });
+  });
+});

cypress/examples/spies_stubs_clocks.spec.js

@@ -3,93 +3,92 @@
 context('Spies, Stubs, and Clock', () => {
   it('cy.spy() - wrap a method in a spy', () => {
     // https://on.cypress.io/spy
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
 
     const obj = {
-      foo () {},
-    }
+      foo() {},
+    };
 
-    const spy = cy.spy(obj, 'foo').as('anyArgs')
+    const spy = cy.spy(obj, 'foo').as('anyArgs');
 
-    obj.foo()
+    obj.foo();
 
-    expect(spy).to.be.called
-  })
+    expect(spy).to.be.called;
+  });
 
   it('cy.spy() retries until assertions pass', () => {
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
 
     const obj = {
       /**
        * Prints the argument passed
+       *
        * @param x {any}
-      */
-      foo (x) {
-        console.log('obj.foo called with', x)
+       */
+      foo(x) {
+        console.log('obj.foo called with', x);
       },
-    }
+    };
 
-    cy.spy(obj, 'foo').as('foo')
+    cy.spy(obj, 'foo').as('foo');
 
     setTimeout(() => {
-      obj.foo('first')
-    }, 500)
+      obj.foo('first');
+    }, 500);
 
     setTimeout(() => {
-      obj.foo('second')
-    }, 2500)
+      obj.foo('second');
+    }, 2500);
 
-    cy.get('@foo').should('have.been.calledTwice')
-  })
+    cy.get('@foo').should('have.been.calledTwice');
+  });
 
   it('cy.stub() - create a stub and/or replace a function with stub', () => {
     // https://on.cypress.io/stub
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
 
     const obj = {
       /**
-       * prints both arguments to the console
+       * Prints both arguments to the console
+       *
        * @param a {string}
        * @param b {string}
-      */
-      foo (a, b) {
-        console.log('a', a, 'b', b)
+       */
+      foo(a, b) {
+        console.log('a', a, 'b', b);
       },
-    }
+    };
 
-    const stub = cy.stub(obj, 'foo').as('foo')
+    const stub = cy.stub(obj, 'foo').as('foo');
 
-    obj.foo('foo', 'bar')
+    obj.foo('foo', 'bar');
 
-    expect(stub).to.be.called
-  })
+    expect(stub).to.be.called;
+  });
 
   it('cy.clock() - control time in the browser', () => {
     // https://on.cypress.io/clock
 
     // create the date in UTC so its always the same
     // no matter what local timezone the browser is running in
-    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
 
-    cy.clock(now)
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
-    cy.get('#clock-div').click()
-      .should('have.text', '1489449600')
-  })
+    cy.clock(now);
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
+    cy.get('#clock-div').click().should('have.text', '1489449600');
+  });
 
   it('cy.tick() - move time in the browser', () => {
     // https://on.cypress.io/tick
 
     // create the date in UTC so its always the same
     // no matter what local timezone the browser is running in
-    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
 
-    cy.clock(now)
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
-    cy.get('#tick-div').click()
-      .should('have.text', '1489449600')
-    cy.tick(10000) // 10 seconds passed
-    cy.get('#tick-div').click()
-      .should('have.text', '1489449610')
-  })
-})
+    cy.clock(now);
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
+    cy.get('#tick-div').click().should('have.text', '1489449600');
+    cy.tick(10000); // 10 seconds passed
+    cy.get('#tick-div').click().should('have.text', '1489449610');
+  });
+});

cypress/examples/traversal.spec.js

@@ -2,120 +2,96 @@
 
 context('Traversal', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/traversal')
-  })
+    cy.visit('https://example.cypress.io/commands/traversal');
+  });
 
   it('.children() - get child DOM elements', () => {
     // https://on.cypress.io/children
-    cy.get('.traversal-breadcrumb')
-      .children('.active')
-      .should('contain', 'Data')
-  })
+    cy.get('.traversal-breadcrumb').children('.active').should('contain', 'Data');
+  });
 
   it('.closest() - get closest ancestor DOM element', () => {
     // https://on.cypress.io/closest
-    cy.get('.traversal-badge')
-      .closest('ul')
-      .should('have.class', 'list-group')
-  })
+    cy.get('.traversal-badge').closest('ul').should('have.class', 'list-group');
+  });
 
   it('.eq() - get a DOM element at a specific index', () => {
     // https://on.cypress.io/eq
-    cy.get('.traversal-list>li')
-      .eq(1).should('contain', 'siamese')
-  })
+    cy.get('.traversal-list>li').eq(1).should('contain', 'siamese');
+  });
 
   it('.filter() - get DOM elements that match the selector', () => {
     // https://on.cypress.io/filter
-    cy.get('.traversal-nav>li')
-      .filter('.active').should('contain', 'About')
-  })
+    cy.get('.traversal-nav>li').filter('.active').should('contain', 'About');
+  });
 
   it('.find() - get descendant DOM elements of the selector', () => {
     // https://on.cypress.io/find
-    cy.get('.traversal-pagination')
-      .find('li').find('a')
-      .should('have.length', 7)
-  })
+    cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7);
+  });
 
   it('.first() - get first DOM element', () => {
     // https://on.cypress.io/first
-    cy.get('.traversal-table td')
-      .first().should('contain', '1')
-  })
+    cy.get('.traversal-table td').first().should('contain', '1');
+  });
 
   it('.last() - get last DOM element', () => {
     // https://on.cypress.io/last
-    cy.get('.traversal-buttons .btn')
-      .last().should('contain', 'Submit')
-  })
+    cy.get('.traversal-buttons .btn').last().should('contain', 'Submit');
+  });
 
   it('.next() - get next sibling DOM element', () => {
     // https://on.cypress.io/next
-    cy.get('.traversal-ul')
-      .contains('apples').next().should('contain', 'oranges')
-  })
+    cy.get('.traversal-ul').contains('apples').next().should('contain', 'oranges');
+  });
 
   it('.nextAll() - get all next sibling DOM elements', () => {
     // https://on.cypress.io/nextall
-    cy.get('.traversal-next-all')
-      .contains('oranges')
-      .nextAll().should('have.length', 3)
-  })
+    cy.get('.traversal-next-all').contains('oranges').nextAll().should('have.length', 3);
+  });
 
   it('.nextUntil() - get next sibling DOM elements until next el', () => {
     // https://on.cypress.io/nextuntil
-    cy.get('#veggies')
-      .nextUntil('#nuts').should('have.length', 3)
-  })
+    cy.get('#veggies').nextUntil('#nuts').should('have.length', 3);
+  });
 
   it('.not() - remove DOM elements from set of DOM elements', () => {
     // https://on.cypress.io/not
-    cy.get('.traversal-disabled .btn')
-      .not('[disabled]').should('not.contain', 'Disabled')
-  })
+    cy.get('.traversal-disabled .btn').not('[disabled]').should('not.contain', 'Disabled');
+  });
 
   it('.parent() - get parent DOM element from DOM elements', () => {
     // https://on.cypress.io/parent
-    cy.get('.traversal-mark')
-      .parent().should('contain', 'Morbi leo risus')
-  })
+    cy.get('.traversal-mark').parent().should('contain', 'Morbi leo risus');
+  });
 
   it('.parents() - get parent DOM elements from DOM elements', () => {
     // https://on.cypress.io/parents
-    cy.get('.traversal-cite')
-      .parents().should('match', 'blockquote')
-  })
+    cy.get('.traversal-cite').parents().should('match', 'blockquote');
+  });
 
   it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
     // https://on.cypress.io/parentsuntil
-    cy.get('.clothes-nav')
-      .find('.active')
-      .parentsUntil('.clothes-nav')
-      .should('have.length', 2)
-  })
+    cy.get('.clothes-nav').find('.active').parentsUntil('.clothes-nav').should('have.length', 2);
+  });
 
   it('.prev() - get previous sibling DOM element', () => {
     // https://on.cypress.io/prev
-    cy.get('.birds').find('.active')
-      .prev().should('contain', 'Lorikeets')
-  })
+    cy.get('.birds').find('.active').prev().should('contain', 'Lorikeets');
+  });
 
   it('.prevAll() - get all previous sibling DOM elements', () => {
     // https://on.cypress.io/prevAll
-    cy.get('.fruits-list').find('.third')
-      .prevAll().should('have.length', 2)
-  })
+    cy.get('.fruits-list').find('.third').prevAll().should('have.length', 2);
+  });
 
   it('.prevUntil() - get all previous sibling DOM elements until el', () => {
     // https://on.cypress.io/prevUntil
-    cy.get('.foods-list').find('#nuts')
-      .prevUntil('#veggies').should('have.length', 3)
-  })
+    cy.get('.foods-list').find('#nuts').prevUntil('#veggies').should('have.length', 3);
+  });
 
   it('.siblings() - get all sibling DOM elements', () => {
     // https://on.cypress.io/siblings
-    cy.get('.traversal-pills .active')
-      .siblings().should('have.length', 2)
-  })
-})
+    cy.get('.traversal-pills .active').siblings().should('have.length', 2);
+  });
+});

cypress/examples/utilities.spec.js

@@ -2,132 +2,128 @@
 
 context('Utilities', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/utilities')
-  })
+    cy.visit('https://example.cypress.io/utilities');
+  });
 
   it('Cypress._ - call a lodash method', () => {
     // https://on.cypress.io/_
-    cy.request('https://jsonplaceholder.cypress.io/users')
-      .then((response) => {
-        let ids = Cypress._.chain(response.body).map('id').take(3).value()
+    cy.request('https://jsonplaceholder.cypress.io/users').then((response) => {
+      let ids = Cypress._.chain(response.body).map('id').take(3).value();
 
-        expect(ids).to.deep.eq([1, 2, 3])
-      })
-  })
+      expect(ids).to.deep.eq([1, 2, 3]);
+    });
+  });
 
   it('Cypress.$ - call a jQuery method', () => {
     // https://on.cypress.io/$
-    let $li = Cypress.$('.utility-jquery li:first')
+    let $li = Cypress.$('.utility-jquery li:first');
 
-    cy.wrap($li)
-      .should('not.have.class', 'active')
-      .click()
-      .should('have.class', 'active')
-  })
+    cy.wrap($li).should('not.have.class', 'active').click().should('have.class', 'active');
+  });
 
   it('Cypress.Blob - blob utilities and base64 string conversion', () => {
     // https://on.cypress.io/blob
     cy.get('.utility-blob').then(($div) =>
-    // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
-    // get the dataUrl string for the javascript-logo
-      Cypress.Blob.imgSrcToDataURL('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
-      .then((dataUrl) => {
+      // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
+      // get the dataUrl string for the javascript-logo
+      Cypress.Blob.imgSrcToDataURL(
+        'https://example.cypress.io/assets/img/javascript-logo.png',
+        undefined,
+        'anonymous'
+      ).then((dataUrl) => {
         // create an <img> element and set its src to the dataUrl
-        let img = Cypress.$('<img />', { src: dataUrl })
+        let img = Cypress.$('<img />', { src: dataUrl });
 
         // need to explicitly return cy here since we are initially returning
         // the Cypress.Blob.imgSrcToDataURL promise to our test
         // append the image
-        $div.append(img)
+        $div.append(img);
 
-        cy.get('.utility-blob img').click()
-          .should('have.attr', 'src', dataUrl)
-      }))
-  })
+        cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl);
+      })
+    );
+  });
 
   it('Cypress.minimatch - test out glob patterns against strings', () => {
     // https://on.cypress.io/minimatch
     let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
       matchBase: true,
-    })
+    });
 
-    expect(matching, 'matching wildcard').to.be.true
+    expect(matching, 'matching wildcard').to.be.true;
 
     matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
       matchBase: true,
-    })
-    expect(matching, 'comments').to.be.false
+    });
+    expect(matching, 'comments').to.be.false;
 
     // ** matches against all downstream path segments
     matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
       matchBase: true,
-    })
-    expect(matching, 'comments').to.be.true
+    });
+    expect(matching, 'comments').to.be.true;
 
     // whereas * matches only the next path segment
 
     matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
       matchBase: false,
-    })
-    expect(matching, 'comments').to.be.false
-  })
-
+    });
+    expect(matching, 'comments').to.be.false;
+  });
 
   it('Cypress.moment() - format or parse dates using a moment method', () => {
     // https://on.cypress.io/moment
-    const time = Cypress.moment().utc('2014-04-25T19:38:53.196Z').format('h:mm A')
+    const time = Cypress.moment().utc('2014-04-25T19:38:53.196Z').format('h:mm A');
 
-    expect(time).to.be.a('string')
+    expect(time).to.be.a('string');
 
-    cy.get('.utility-moment').contains('3:38 PM')
-      .should('have.class', 'badge')
+    cy.get('.utility-moment').contains('3:38 PM').should('have.class', 'badge');
 
     // the time in the element should be between 3pm and 5pm
-    const start = Cypress.moment('3:00 PM', 'LT')
-    const end = Cypress.moment('5:00 PM', 'LT')
+    const start = Cypress.moment('3:00 PM', 'LT');
+    const end = Cypress.moment('5:00 PM', 'LT');
 
-    cy.get('.utility-moment .badge')
-      .should(($el) => {
-        // parse American time like "3:38 PM"
-        const m = Cypress.moment($el.text().trim(), 'LT')
+    cy.get('.utility-moment .badge').should(($el) => {
+      // parse American time like "3:38 PM"
+      const m = Cypress.moment($el.text().trim(), 'LT');
 
-        // display hours + minutes + AM|PM
-        const f = 'h:mm A'
-
-        expect(m.isBetween(start, end),
-          `${m.format(f)} should be between ${start.format(f)} and ${end.format(f)}`).to.be.true
-      })
-  })
+      // display hours + minutes + AM|PM
+      const f = 'h:mm A';
 
+      expect(
+        m.isBetween(start, end),
+        `${m.format(f)} should be between ${start.format(f)} and ${end.format(f)}`
+      ).to.be.true;
+    });
+  });
 
   it('Cypress.Promise - instantiate a bluebird promise', () => {
     // https://on.cypress.io/promise
-    let waited = false
+    let waited = false;
 
-    /**
-     * @return Bluebird<string>
-     */
-    function waitOneSecond () {
+    /** @returns Bluebird<string> */
+    function waitOneSecond() {
       // return a promise that resolves after 1 second
       // @ts-ignore TS2351 (new Cypress.Promise)
       return new Cypress.Promise((resolve, reject) => {
         setTimeout(() => {
           // set waited to true
-          waited = true
+          waited = true;
 
           // resolve with 'foo' string
-          resolve('foo')
-        }, 1000)
-      })
+          resolve('foo');
+        }, 1000);
+      });
     }
 
     cy.then(() =>
-    // return a promise to cy.then() that
-    // is awaited until it resolves
+      // return a promise to cy.then() that
+      // is awaited until it resolves
       // @ts-ignore TS7006
       waitOneSecond().then((str) => {
-        expect(str).to.eq('foo')
-        expect(waited).to.be.true
-      }))
-  })
-})
+        expect(str).to.eq('foo');
+        expect(waited).to.be.true;
+      })
+    );
+  });
+});

cypress/examples/viewport.spec.js

@@ -2,22 +2,22 @@
 
 context('Viewport', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/viewport')
-  })
+    cy.visit('https://example.cypress.io/commands/viewport');
+  });
 
   it('cy.viewport() - set the viewport size and dimension', () => {
     // https://on.cypress.io/viewport
 
-    cy.get('#navbar').should('be.visible')
-    cy.viewport(320, 480)
+    cy.get('#navbar').should('be.visible');
+    cy.viewport(320, 480);
 
     // the navbar should have collapse since our screen is smaller
-    cy.get('#navbar').should('not.be.visible')
-    cy.get('.navbar-toggle').should('be.visible').click()
-    cy.get('.nav').find('a').should('be.visible')
+    cy.get('#navbar').should('not.be.visible');
+    cy.get('.navbar-toggle').should('be.visible').click();
+    cy.get('.nav').find('a').should('be.visible');
 
     // lets see what our app looks like on a super large screen
-    cy.viewport(2999, 2999)
+    cy.viewport(2999, 2999);
 
     // cy.viewport() accepts a set of preset sizes
     // to easily set the screen to a device's width and height
@@ -25,35 +25,35 @@ context('Viewport', () => {
     // We added a cy.wait() between each viewport change so you can see
     // the change otherwise it is a little too fast to see :)
 
-    cy.viewport('macbook-15')
-    cy.wait(200)
-    cy.viewport('macbook-13')
-    cy.wait(200)
-    cy.viewport('macbook-11')
-    cy.wait(200)
-    cy.viewport('ipad-2')
-    cy.wait(200)
-    cy.viewport('ipad-mini')
-    cy.wait(200)
-    cy.viewport('iphone-6+')
-    cy.wait(200)
-    cy.viewport('iphone-6')
-    cy.wait(200)
-    cy.viewport('iphone-5')
-    cy.wait(200)
-    cy.viewport('iphone-4')
-    cy.wait(200)
-    cy.viewport('iphone-3')
-    cy.wait(200)
+    cy.viewport('macbook-15');
+    cy.wait(200);
+    cy.viewport('macbook-13');
+    cy.wait(200);
+    cy.viewport('macbook-11');
+    cy.wait(200);
+    cy.viewport('ipad-2');
+    cy.wait(200);
+    cy.viewport('ipad-mini');
+    cy.wait(200);
+    cy.viewport('iphone-6+');
+    cy.wait(200);
+    cy.viewport('iphone-6');
+    cy.wait(200);
+    cy.viewport('iphone-5');
+    cy.wait(200);
+    cy.viewport('iphone-4');
+    cy.wait(200);
+    cy.viewport('iphone-3');
+    cy.wait(200);
 
     // cy.viewport() accepts an orientation for all presets
     // the default orientation is 'portrait'
-    cy.viewport('ipad-2', 'portrait')
-    cy.wait(200)
-    cy.viewport('iphone-4', 'landscape')
-    cy.wait(200)
+    cy.viewport('ipad-2', 'portrait');
+    cy.wait(200);
+    cy.viewport('iphone-4', 'landscape');
+    cy.wait(200);
 
     // The viewport will be reset back to the default dimensions
     // in between tests (the  default can be set in cypress.json)
-  })
-})
+  });
+});

cypress/examples/waiting.spec.js

@@ -2,33 +2,32 @@
 
 context('Waiting', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/waiting')
-  })
+    cy.visit('https://example.cypress.io/commands/waiting');
+  });
   // BE CAREFUL of adding unnecessary wait times.
   // https://on.cypress.io/best-practices#Unnecessary-Waiting
 
   // https://on.cypress.io/wait
   it('cy.wait() - wait for a specific amount of time', () => {
-    cy.get('.wait-input1').type('Wait 1000ms after typing')
-    cy.wait(1000)
-    cy.get('.wait-input2').type('Wait 1000ms after typing')
-    cy.wait(1000)
-    cy.get('.wait-input3').type('Wait 1000ms after typing')
-    cy.wait(1000)
-  })
+    cy.get('.wait-input1').type('Wait 1000ms after typing');
+    cy.wait(1000);
+    cy.get('.wait-input2').type('Wait 1000ms after typing');
+    cy.wait(1000);
+    cy.get('.wait-input3').type('Wait 1000ms after typing');
+    cy.wait(1000);
+  });
 
   it('cy.wait() - wait for a specific route', () => {
-    cy.server()
+    cy.server();
 
     // Listen to GET to comments/1
-    cy.route('GET', 'comments/*').as('getComment')
+    cy.route('GET', 'comments/*').as('getComment');
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-btn').click()
+    cy.get('.network-btn').click();
 
     // wait for GET comments/1
-    cy.wait('@getComment').its('status').should('eq', 200)
-  })
-
-})
+    cy.wait('@getComment').its('status').should('eq', 200);
+  });
+});

cypress/examples/window.spec.js

@@ -2,21 +2,21 @@
 
 context('Window', () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/window')
-  })
+    cy.visit('https://example.cypress.io/commands/window');
+  });
 
   it('cy.window() - get the global window object', () => {
     // https://on.cypress.io/window
-    cy.window().should('have.property', 'top')
-  })
+    cy.window().should('have.property', 'top');
+  });
 
   it('cy.document() - get the document object', () => {
     // https://on.cypress.io/document
-    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
-  })
+    cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
+  });
 
   it('cy.title() - get the title', () => {
     // https://on.cypress.io/title
-    cy.title().should('include', 'Kitchen Sink')
-  })
-})
+    cy.title().should('include', 'Kitchen Sink');
+  });
+});

cypress/helpers/util.js

@@ -1,11 +1,9 @@
-/* eslint-env jest */
-/* global cy */
 import { Base64 } from 'js-base64';
 
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
     code: graphStr,
-    mermaid: options
+    mermaid: options,
   };
   const objStr = JSON.stringify(obj);
   let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr);

cypress/integration/other/configuration.spec.js

@@ -1,5 +1,4 @@
 import { renderGraph } from '../../helpers/util';
-/* eslint-env jest */
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -11,12 +10,14 @@ describe('Configuration', () => {
         C -->|Two| E[iPhone]
         C -->|Three| F[fa:fa-car Car]
         `,
-        { }
+        {}
       );
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
         .should('exist')
         .and('include', 'url(#');
     });
@@ -29,12 +30,14 @@ describe('Configuration', () => {
         C -->|Two| E[iPhone]
         C -->|Three| F[fa:fa-car Car]
         `,
-        { }
+        {}
       );
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
         .should('exist')
         .and('include', 'url(#');
     });
@@ -48,13 +51,15 @@ describe('Configuration', () => {
         C -->|Three| F[fa:fa-car Car]
         `,
         {
-          arrowMarkerAbsolute: false
+          arrowMarkerAbsolute: false,
         }
       );
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
         .should('exist')
         .and('include', 'url(#');
     });
@@ -68,13 +73,15 @@ describe('Configuration', () => {
         C -->|Three| F[fa:fa-car Car]
         `,
         {
-          arrowMarkerAbsolute: "false"
+          arrowMarkerAbsolute: 'false',
         }
       );
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
         .should('exist')
         .and('include', 'url(#');
     });
@@ -88,11 +95,13 @@ describe('Configuration', () => {
         C -->|Three| F[fa:fa-car Car]
         `,
         {
-          arrowMarkerAbsolute: true
+          arrowMarkerAbsolute: true,
         }
       );
 
-      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
         .should('exist')
         .and('include', 'url(http://localhost');
     });

cypress/integration/other/interaction.spec.js

@@ -1,13 +1,10 @@
-/* eslint-env jest */
 describe('Interaction', () => {
   describe('Interaction - security level loose', () => {
     it('Graph: should handle a click on a node with a bound function', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-Function-2')
-        .click();
+      cy.get('body').find('g#flowchart-Function-2').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -15,9 +12,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-FunctionArg-18')
-        .click();
+      cy.get('body').find('g#flowchart-FunctionArg-18').click();
 
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
@@ -25,9 +20,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-FunctionArg-22"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click();
 
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
@@ -35,11 +28,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('#flowchart-URL-3')
-        .click();
+      cy.get('body').find('#flowchart-URL-3').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -47,11 +38,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-2URL-7"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -60,9 +49,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-Function-10')
-        .click();
+      cy.get('body').find('g#flowchart-Function-10').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -70,9 +57,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-1Function-14"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-1Function-14"]').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -80,11 +65,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('#flowchart-URL-11')
-        .click();
+      cy.get('body').find('#flowchart-URL-11').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -92,11 +75,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-2URL-15"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-2URL-15"]').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -105,11 +86,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('rect#cl1')
-        .click({ force: true });
+      cy.get('body').find('rect#cl1').click({ force: true });
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -117,11 +96,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('text#cl1-text')
-        .click({ force: true });
+      cy.get('body').find('text#cl1-text').click({ force: true });
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -129,9 +106,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('rect#cl2')
-        .click({ force: true });
+      cy.get('body').find('rect#cl2').click({ force: true });
 
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
@@ -139,9 +114,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('rect#cl3')
-        .click({ force: true });
+      cy.get('body').find('rect#cl3').click({ force: true });
 
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
@@ -150,9 +123,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('text#cl2-text')
-        .click({ force: true });
+      cy.get('body').find('text#cl2-text').click({ force: true });
 
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
@@ -160,13 +131,10 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('text#cl3-text')
-        .click({ force: true });
+      cy.get('body').find('text#cl3-text').click({ force: true });
 
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
-
   });
 
   describe('Interaction - security level tight', () => {
@@ -174,9 +142,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-Function-2')
-        .click();
+      cy.get('body').find('g#flowchart-Function-2').click();
 
       cy.get('.created-by-click').should('not.exist');
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -185,9 +151,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-1Function-6"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
 
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
@@ -196,11 +160,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-URL-3')
-        .click();
+      cy.get('body').find('g#flowchart-URL-3').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -208,11 +170,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-2URL-7"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -221,11 +181,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('rect#cl1')
-        .click({ force: true });
+      cy.get('body').find('rect#cl1').click({ force: true });
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -233,11 +191,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('text#cl1-text')
-        .click({ force: true });
+      cy.get('body').find('text#cl1-text').click({ force: true });
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -245,23 +201,19 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('rect#cl2')
-        .click({ force: true });
+      cy.get('body').find('rect#cl2').click({ force: true });
 
       // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
-      cy.get('.created-by-gant-click').should('not.exist')
+      cy.get('.created-by-gant-click').should('not.exist');
     });
     it('should handle a click on a task with a bound function', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('text#cl2-text')
-        .click({ force: true });
+      cy.get('body').find('text#cl2-text').click({ force: true });
 
       // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
-      cy.get('.created-by-gant-click').should('not.exist')
+      cy.get('.created-by-gant-click').should('not.exist');
     });
   });
 
@@ -270,9 +222,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-Function-2')
-        .click();
+      cy.get('body').find('g#flowchart-Function-2').click();
 
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
@@ -281,9 +231,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g[id="flowchart-1Function-6"]')
-        .click();
+      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
 
       cy.get('.created-by-click').should('not.exist');
       cy.get('.created-by-click').should('not.exist');
@@ -292,11 +240,9 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('g#flowchart-URL-3')
-        .click();
+      cy.get('body').find('g#flowchart-URL-3').click();
 
-      cy.location().should(location => {
+      cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
@@ -305,9 +251,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('rect#cl2')
-        .click({ force: true });
+      cy.get('body').find('rect#cl2').click({ force: true });
 
       cy.get('.created-by-gant-click').should('not.exist');
     });
@@ -315,9 +259,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body')
-        .find('text#cl2-text')
-        .click({ force: true });
+      cy.get('body').find('text#cl2-text').click({ force: true });
 
       cy.get('.created-by-gant-click').should('not.exist');
     });

cypress/integration/other/rerender.spec.js

@@ -1,22 +1,19 @@
-/* eslint-env jest */
 describe('Rerendering', () => {
-    it('should be able to render after an error has occured', () => {
-      const url = 'http://localhost:9000/render-after-error.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('#graphDiv').should('exist');
-    });
+  it('should be able to render after an error has occured', () => {
+    const url = 'http://localhost:9000/render-after-error.html';
+    cy.viewport(1440, 1024);
+    cy.visit(url);
+    cy.get('#graphDiv').should('exist');
+  });
 
-    it('should be able to render and rerender a graph via API', () => {
-      const url = 'http://localhost:9000/rerender.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
+  it('should be able to render and rerender a graph via API', () => {
+    const url = 'http://localhost:9000/rerender.html';
+    cy.viewport(1440, 1024);
+    cy.visit(url);
+    cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
 
-      cy.get('body')
-        .find('#rerender')
-        .click({ force: true });
+    cy.get('body').find('#rerender').click({ force: true });
 
-      cy.get('#graph [id^=flowchart-A]').should('have.text', 'Saturday');
-    });
+    cy.get('#graph [id^=flowchart-A]').should('have.text', 'Saturday');
+  });
 });

cypress/integration/other/webpackUsage.spec.js

@@ -1,20 +1,15 @@
-/* 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', 1);
+    cy.get('body').find('svg').should('have.length', 1);
   });
   it('should handle html escapings properly', () => {
     const url = 'http://localhost:9000/webpackUsage.html?test-html-escaping=true';
 
     cy.visit(url);
-    cy.get('body')
-      .find('svg')
-      .should('have.length', 1);
+    cy.get('body').find('svg').should('have.length', 1);
 
     cy.get('g.label > foreignobject > div').should('not.contain.text', '<b>');
   });

cypress/integration/other/xss.spec.js

@@ -1,102 +1,118 @@
-/* eslint-env jest */
 import { mermaidUrl } from '../../helpers/util.js';
-
-/* eslint-disable */
 describe('XSS', () => {
   it('should handle xss in tags', () => {
-    const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
+    const str =
+      'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
 
-    const url = mermaidUrl(str,{}, true);
+    const url = mermaidUrl(str, {}, true);
 
     cy.visit(url);
-    cy.wait(1000).then(()=>{
+    cy.wait(1000).then(() => {
       cy.get('.mermaid').should('exist');
     });
-    cy.get('svg')
-  })
+    cy.get('svg');
+  });
 
   it('should not allow tags in the css', () => {
-    const str = 'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
+    const str =
+      'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
 
-    const url = mermaidUrl(str,{
-      "theme": "default",
-      "flowchart": {
-        "htmlMode": false
-      }
-    }, true);
+    const url = mermaidUrl(
+      str,
+      {
+        theme: 'default',
+        flowchart: {
+          htmlMode: false,
+        },
+      },
+      true
+    );
 
     cy.visit(url);
-    cy.wait(1000).then(()=>{
+    cy.wait(1000).then(() => {
       cy.get('#the-malware').should('not.exist');
     });
-
-  })
+  });
 
   it('should handle xss in tags in non-html mode', () => {
-    const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
+    const str =
+      'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
 
-    const url = mermaidUrl(str,{
-      "theme": "default",
-      "flowchart": {
-        "htmlMode": false
-      }
-    }, true);
+    const url = mermaidUrl(
+      str,
+      {
+        theme: 'default',
+        flowchart: {
+          htmlMode: false,
+        },
+      },
+      true
+    );
 
     cy.visit(url);
-    cy.wait(1000)
+    cy.wait(1000);
 
     cy.get('#the-malware').should('not.exist');
-  })
+  });
 
   it('should not allow changing the __proto__ attribute using config', () => {
     cy.visit('http://localhost:9000/xss2.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating htmlLabels into a false positive', () => {
     cy.visit('http://localhost:9000/xss4.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript', () => {
     cy.visit('http://localhost:9000/xss5.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror', () => {
     cy.visit('http://localhost:9000/xss6.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
     cy.visit('http://localhost:9000/xss8.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss9.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss10.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss11.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss12.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
+  });
   it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss13.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
-  })
-
-})
+  });
+  it('should not allow maniplulating antiscript to run javascript iframes in class diagrams', () => {
+    cy.visit('http://localhost:9000/xss14.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should sanitize cardinalities properly in class diagrams', () => {
+    cy.visit('http://localhost:9000/xss18.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+});

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -1,10 +1,8 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util';
 describe('Class diagram V2', () => {
-
-    it('0: should render a simple class diagram', () => {
-      imgSnapshotTest(
-        `
+  it('0: should render a simple class diagram', () => {
+    imgSnapshotTest(
+      `
         classDiagram-v2
 
         classA -- classB : Inheritance
@@ -13,10 +11,10 @@ describe('Class diagram V2', () => {
         classB -- classD
 
         `,
-        {logLevel : 1, flowchart: { "htmlLabels": false },}
-      );
-      cy.get('svg');
-    });
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+    cy.get('svg');
+  });
 
   it('1: should render a simple class diagram', () => {
     imgSnapshotTest(
@@ -47,7 +45,7 @@ describe('Class diagram V2', () => {
         test()
       }
       `,
-      {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -76,8 +74,7 @@ describe('Class diagram V2', () => {
         test()
       }
       `,
-      {logLevel : 1, flowchart: { "htmlLabels": false },}
-
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -95,7 +92,7 @@ describe('Class diagram V2', () => {
       Class01 : +int publicGorilla
       Class01 : #int protectedMarmoset
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -103,7 +100,7 @@ describe('Class diagram V2', () => {
   it('should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
-      `
+        `
     classDiagram-v2
       Class01 "1" <|--|> "*" AveryLongClass : Cool
       &lt;&lt;interface&gt;&gt; Class01
@@ -125,7 +122,7 @@ describe('Class diagram V2', () => {
         test()
       }
       `,
-      `
+        `
     classDiagram-v2
       Class01 "1" <|--|> "*" AveryLongClass : Cool
       &lt;&lt;interface&gt;&gt; Class01
@@ -148,7 +145,7 @@ describe('Class diagram V2', () => {
       }
       `,
       ],
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -178,7 +175,7 @@ describe('Class diagram V2', () => {
         test()
       }
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -190,7 +187,7 @@ describe('Class diagram V2', () => {
       Class01 <|-- AveryLongClass : Cool
       Class01 : someMethod()*
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -202,7 +199,7 @@ describe('Class diagram V2', () => {
       Class01 <|-- AveryLongClass : Cool
       Class01 : someMethod()$
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -222,7 +219,7 @@ describe('Class diagram V2', () => {
         test()
       }
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -243,7 +240,7 @@ describe('Class diagram V2', () => {
         test()
       }
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -265,7 +262,7 @@ describe('Class diagram V2', () => {
       }
       link Class01 "google.com" "A Tooltip"
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -287,7 +284,7 @@ describe('Class diagram V2', () => {
       }
       callback Class01 "functionCall" "A Tooltip"
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -302,7 +299,7 @@ describe('Class diagram V2', () => {
         testArray() bool[]
       }
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -318,7 +315,7 @@ describe('Class diagram V2', () => {
         testArray() bool[]
       }
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -336,7 +333,7 @@ describe('Class diagram V2', () => {
 
       cssClass "Class10" exClass2
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -352,7 +349,7 @@ describe('Class diagram V2', () => {
         testArray() bool[]
       }
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -366,7 +363,7 @@ describe('Class diagram V2', () => {
 
       cssClass "Class10, class20" exClass2
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -379,7 +376,7 @@ describe('Class diagram V2', () => {
         +String bar$
       }
             `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -404,7 +401,7 @@ describe('Class diagram V2', () => {
         Student "1" --o "1" Bike : rides
 
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -429,7 +426,7 @@ describe('Class diagram V2', () => {
         Student "1" --o "1" Bike : rides
 
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -453,7 +450,7 @@ describe('Class diagram V2', () => {
         Student "1" --o "1" Bike : rides
 
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });
@@ -477,7 +474,7 @@ describe('Class diagram V2', () => {
         Student "1" --o "1" Bike : rides
 
       `,
-       {logLevel : 1, flowchart: { "htmlLabels": false },}
+      { logLevel: 1, flowchart: { htmlLabels: false } }
     );
     cy.get('svg');
   });

cypress/integration/rendering/classDiagram.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Class diagram', () => {
@@ -31,7 +30,7 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });

cypress/integration/rendering/conf-and-directives.spec.js

@@ -1,10 +1,9 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Configuration and directives - nodes should be light blue', () => {
-    it('No config - use default', () => {
-      imgSnapshotTest(
-        `
+  it('No config - use default', () => {
+    imgSnapshotTest(
+      `
       graph TD
           A(Default) --> B[/Another/]
           A --> C[End]
@@ -13,13 +12,13 @@ describe('Configuration and directives - nodes should be light blue', () => {
             C
           end
         `,
-        {}
-      );
-      cy.get('svg');
-    });
-    it('Settigns from intitialize - nodes should be green', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Settigns from intitialize - nodes should be green', () => {
+    imgSnapshotTest(
+      `
 graph TD
           A(Forest) --> B[/Another/]
           A --> C[End]
@@ -27,13 +26,13 @@ graph TD
             B
             C
           end          `,
-        {theme:'forest'}
-      );
-      cy.get('svg');
-    });
-    it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
-      imgSnapshotTest(
-        `
+      { theme: 'forest' }
+    );
+    cy.get('svg');
+  });
+  it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
+    imgSnapshotTest(
+      `
 
 
         %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
@@ -45,13 +44,13 @@ graph TD
             C
           end
         `,
-        {theme:'base', themeVariables:{ primaryColor: '#ff0000'}, logLevel: 0}
-      );
-      cy.get('svg');
-    });
-    it('Settings from directive - nodes should be grey', () => {
-      imgSnapshotTest(
-        `
+      { theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
+    );
+    cy.get('svg');
+  });
+  it('Settings from directive - nodes should be grey', () => {
+    imgSnapshotTest(
+      `
         %%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
 graph TD
           A(Start) --> B[/Another/]
@@ -61,14 +60,14 @@ graph TD
             C
           end
         `,
-        {}
-      );
-      cy.get('svg');
-    });
+      {}
+    );
+    cy.get('svg');
+  });
 
-    it('Settings from directive overriding theme variable - nodes should be red', () => {
-      imgSnapshotTest(
-        `
+  it('Settings from directive overriding theme variable - nodes should be red', () => {
+    imgSnapshotTest(
+      `
           %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
 graph TD
           A(Start) --> B[/Another/]
@@ -78,13 +77,13 @@ graph TD
             C
           end
         `,
-        {}
-      );
-      cy.get('svg');
+      {}
+    );
+    cy.get('svg');
   });
-    it('Settings from initialize and directive - nodes should be grey', () => {
-      imgSnapshotTest(
-        `
+  it('Settings from initialize and directive - nodes should be grey', () => {
+    imgSnapshotTest(
+      `
       %%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
 graph TD
           A(Start) --> B[/Another/]
@@ -94,13 +93,13 @@ graph TD
             C
           end
         `,
-        {theme:'forest'}
-      );
-      cy.get('svg');
-    });
-    it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
-      imgSnapshotTest(
-        `
+      { theme: 'forest' }
+    );
+    cy.get('svg');
+  });
+  it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
+    imgSnapshotTest(
+      `
       %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
 graph TD
           A(Start) --> B[/Another/]
@@ -110,13 +109,13 @@ graph TD
             C
           end
         `,
-        {theme:'base'}
-      );
-      cy.get('svg');
-    });
-    it('Theme variable from initialize, theme from directive - nodes should be red', () => {
-      imgSnapshotTest(
-        `
+      { theme: 'base' }
+    );
+    cy.get('svg');
+  });
+  it('Theme variable from initialize, theme from directive - nodes should be red', () => {
+    imgSnapshotTest(
+      `
       %%{init: { 'logLevel': 0, 'theme': 'base'} }%%
 graph TD
           A(Start) --> B[/Another/]
@@ -126,16 +125,16 @@ graph TD
             C
           end
         `,
-        {themeVariables:{primaryColor: '#ff0000'}}
-      );
+      { themeVariables: { primaryColor: '#ff0000' } }
+    );
+    cy.get('svg');
+  });
+  describe('when rendering several diagrams', () => {
+    it('diagrams should not taint later diagrams', () => {
+      const url = 'http://localhost:9000/theme-directives.html';
+      cy.visit(url);
       cy.get('svg');
-    });
-    describe('when rendering several diagrams', () => {
-      it('diagrams should not taint later diagrams', () => {
-        const url = 'http://localhost:9000/theme-directives.html';
-        cy.visit(url);
-        cy.get('svg');
-        cy.percySnapshot();
-      });
+      cy.percySnapshot();
     });
   });
+});

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('State diagram', () => {

cypress/integration/rendering/debug.spec.js

@@ -1,14 +1,12 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Flowchart', () => {
-
   it('34: testing the label width in percy', () => {
     imgSnapshotTest(
       `graph TD
       A[Christmas]
       `,
-      { theme: 'forest' , fontFamily: '"Noto Sans SC", sans-serif' }
+      { theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
     );
   });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Entity Relationship Diagram', () => {
@@ -9,7 +8,7 @@ describe('Entity Relationship Diagram', () => {
         CUSTOMER ||--o{ ORDER : places
         ORDER ||--|{ LINE-ITEM : contains
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -22,7 +21,7 @@ describe('Entity Relationship Diagram', () => {
         CUSTOMER ||--o{ ORDER : places
         ORDER ||--|{ LINE-ITEM : contains
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -34,7 +33,7 @@ describe('Entity Relationship Diagram', () => {
         CUSTOMER ||--|{ ADDRESS : "invoiced at"
         CUSTOMER ||--|{ ADDRESS : "receives goods at"
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -47,7 +46,7 @@ describe('Entity Relationship Diagram', () => {
         B ||--|{ C : likes
         C ||--|{ A : likes
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -65,7 +64,7 @@ describe('Entity Relationship Diagram', () => {
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -73,18 +72,18 @@ describe('Entity Relationship Diagram', () => {
   it('should render multiple ER diagrams', () => {
     imgSnapshotTest(
       [
-      `
+        `
     erDiagram
         CUSTOMER ||--o{ ORDER : places
         ORDER ||--|{ LINE-ITEM : contains
       `,
-      `
+        `
     erDiagram
         CUSTOMER ||--o{ ORDER : places
         ORDER ||--|{ LINE-ITEM : contains
-      `
+      `,
       ],
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -97,7 +96,7 @@ describe('Entity Relationship Diagram', () => {
         BOOK }|..|{ GENRE : " "
         AUTHOR }|..|{ GENRE : "  "
       `,
-      {logLevel : 1}
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -111,16 +110,15 @@ describe('Entity Relationship Diagram', () => {
       `,
       { er: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '465');
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(maxWidthValue).to.be.within(140 * .95, 140 * 1.05);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height', '465');
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
+    });
   });
 
   it('should render an ER when useMaxWidth is false', () => {
@@ -132,14 +130,13 @@ describe('Entity Relationship Diagram', () => {
       `,
       { er: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const width = parseFloat(svg.attr('width'));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(width).to.be.within(140 * .95, 140 * 1.05);
-        expect(svg).to.have.attr('height', '465');
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(width).to.be.within(140 * 0.95, 140 * 1.05);
+      expect(svg).to.have.attr('height', '465');
+      expect(svg).to.not.have.attr('style');
+    });
   });
 
   it('should render entities that have no relationships', () => {
@@ -165,7 +162,7 @@ describe('Entity Relationship Diagram', () => {
         AUTHOR }|..|{ BOOK : writes
         BOOK { float price }
       `,
-      { logLevel : 1 }
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -181,7 +178,45 @@ describe('Entity Relationship Diagram', () => {
         PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
         EMPLOYEE { bool officer_of_firm }
       `,
-      { logLevel : 1 }
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
+  it('should render entities with keys', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK { 
+          float price
+          string author FK 
+          string title PK
+        }
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
+  it('should render entities with comments', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK { 
+          string author 
+          string title "author comment"
+          float price "price comment"
+        }
+      `,
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
@@ -190,11 +225,19 @@ describe('Entity Relationship Diagram', () => {
     renderGraph(
       `
     erDiagram
-        BOOK { string title PK "comment"}
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK { 
+          string description
+          float price "price comment"
+          string title PK "title comment"
+          string author FK 
+        }
       `,
-      { logLevel : 1 }
+      { logLevel: 1 }
     );
     cy.get('svg');
   });
-
 });

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Flowchart v2', () => {
@@ -29,7 +28,7 @@ describe('Flowchart v2', () => {
     );
   });
 
-    it('3: a link with correct arrowhead to a subgraph', () => {
+  it('3: a link with correct arrowhead to a subgraph', () => {
     imgSnapshotTest(
       `flowchart TD
         P1
@@ -69,7 +68,7 @@ describe('Flowchart v2', () => {
       `flowchart TD
         a["<strong>Haiya</strong>"]---->b
       `,
-      {htmlLabels: false, flowchart: {htmlLabels: false}}
+      { htmlLabels: false, flowchart: { htmlLabels: false } }
     );
   });
   it('6: should render non-escaped with html labels', () => {
@@ -77,7 +76,7 @@ describe('Flowchart v2', () => {
       `flowchart TD
         a["<strong>Haiya</strong>"]===>b
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('7: should render a flowchart when useMaxWidth is true (default)', () => {
@@ -91,18 +90,17 @@ describe('Flowchart v2', () => {
       `,
       { flowchart: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(446 * .95, 446 * 1.05);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.be.within(290 * .95-1, 290 * 1.05);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+    });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
     renderGraph(
@@ -115,15 +113,14 @@ describe('Flowchart v2', () => {
       `,
       { flowchart: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(height).to.be.within(446 * .95, 446 * 1.05);
-        expect(width).to.be.within(290 * .95-1, 290 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
   });
 
   it('V2 - 16: Render Stadium shape', () => {
@@ -141,7 +138,7 @@ describe('Flowchart v2', () => {
       class A someclass;
       class C someclass;
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -156,7 +153,7 @@ describe('Flowchart v2', () => {
         b
         end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
@@ -171,7 +168,7 @@ describe('Flowchart v2', () => {
         b
         end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
@@ -192,7 +189,7 @@ describe('Flowchart v2', () => {
         B
     end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
@@ -222,7 +219,7 @@ describe('Flowchart v2', () => {
   routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
@@ -236,7 +233,7 @@ describe('Flowchart v2', () => {
      subcontainer-child--> subcontainer-sibling
   end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
@@ -258,11 +255,10 @@ end
 sub_one --> sub_two
 _one --> b
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
-
   it('56: handle nested subgraphs with outgoing links 3', () => {
     imgSnapshotTest(
       `flowchart TB
@@ -275,7 +271,7 @@ _one --> b
     end
     process_B-->|via_AWSBatch|container_Beta
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('57: handle nested subgraphs with outgoing links 4', () => {
@@ -288,11 +284,10 @@ subgraph B
 b
 end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
-
   it('57: handle nested subgraphs with outgoing links 2', () => {
     imgSnapshotTest(
       `flowchart TB
@@ -310,7 +305,7 @@ end
     three --> two
     two --> c2
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('57.x: handle nested subgraphs with outgoing links 5', () => {
@@ -326,7 +321,7 @@ flowchart TB
     process_A-->|messages|process_C
   end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('58: handle styling with style expressions', () => {
@@ -337,7 +332,7 @@ flowchart TB
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('59: handle styling of subgraphs and links', () => {
@@ -359,7 +354,7 @@ flowchart TD
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('60: handle styling for all node shapes - v2', () => {
@@ -389,7 +384,7 @@ flowchart TD
       style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
       style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose', logLevel:2}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
     );
   });
   it('61: fontawesome icons in edge labels', () => {
@@ -398,7 +393,7 @@ flowchart TD
       flowchart TD
         C -->|fa:fa-car Car| F[fa:fa-car Car]
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('62: should render styled subgraphs', () => {
@@ -432,7 +427,7 @@ flowchart TD
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('63: title on subgraphs should be themable', () => {
@@ -448,7 +443,7 @@ flowchart TD
       end
       A --> B
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('65: text-color from classes', () => {
@@ -459,7 +454,7 @@ flowchart TD
         Lorem --> Ipsum --> Dolor
         class Lorem,Dolor dark
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('66: More nested subgraph cases (TB)', () => {
@@ -477,7 +472,7 @@ flowchart TB
     two --> c2
 
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('67: More nested subgraph cases (RL)', () => {
@@ -495,7 +490,7 @@ flowchart RL
     two --> c2
 
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('68: More nested subgraph cases (BT)', () => {
@@ -513,7 +508,7 @@ flowchart BT
     two --> c2
 
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('69: More nested subgraph cases (LR)', () => {
@@ -531,7 +526,7 @@ flowchart LR
     two --> c2
 
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('70: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
@@ -547,7 +542,7 @@ flowchart TB
    S1 --> S2
    sub1 --> sub4
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('71: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
@@ -563,7 +558,7 @@ flowchart RL
    S1 --> S2
    sub1 --> sub4
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('72: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
@@ -579,7 +574,7 @@ flowchart BT
    S1 --> S2
    sub1 --> sub4
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('74: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
@@ -595,10 +590,10 @@ flowchart RL
    S1 --> S2
    sub1 --> sub4
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-    it('74: Handle labels for multiple edges from and to the same couple of nodes', () => {
+  it('74: Handle labels for multiple edges from and to the same couple of nodes', () => {
     imgSnapshotTest(
       `
 flowchart RL
@@ -607,7 +602,7 @@ flowchart RL
       a1 -- l2 --> a2
     end
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
@@ -615,13 +610,13 @@ flowchart RL
     imgSnapshotTest(
       `flowchart TB
       a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
-      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}    
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 
-    it('2050: handling of different rendering direction in subgraphs', () => {
+  it('2050: handling of different rendering direction in subgraphs', () => {
     imgSnapshotTest(
       `
     flowchart LR
@@ -640,7 +635,18 @@ flowchart RL
       A --> TOP --> B
       B1 --> B2
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2388: handling default in the node name', () => {
+    imgSnapshotTest(
+      `
+      flowchart LR
+      default-index.js --> dot.template.js
+      index.js --> module-utl.js
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Graph', () => {
@@ -38,7 +37,7 @@ describe('Graph', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
       `,
-      {fontFamily: 'courier'}
+      { fontFamily: 'courier' }
     );
   });
 
@@ -53,7 +52,7 @@ describe('Graph', () => {
       C -->|Two| E[\\iPhone\\]
       C -->|Three| F[Car]
       `,
-      { fontFamily: 'courier'}
+      { fontFamily: 'courier' }
     );
   });
 
@@ -69,7 +68,7 @@ describe('Graph', () => {
       classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
       class 1A,1B,D,E processHead
       `,
-      {fontFamily: 'courier'}
+      { fontFamily: 'courier' }
     );
   });
 
@@ -98,7 +97,7 @@ describe('Graph', () => {
       35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
       36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -169,7 +168,7 @@ describe('Graph', () => {
       9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
       9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -178,7 +177,7 @@ describe('Graph', () => {
       `
     graph TB;subgraph "number as labels";1;end;
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -190,7 +189,7 @@ describe('Graph', () => {
         a1-->a2
       end
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -202,7 +201,7 @@ describe('Graph', () => {
         a1-->a2
       end
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -237,7 +236,7 @@ describe('Graph', () => {
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -339,7 +338,7 @@ describe('Graph', () => {
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
       `,
-       { fontFamily: 'courier' }
+      { fontFamily: 'courier' }
     );
   });
 
@@ -357,7 +356,7 @@ describe('Graph', () => {
         listUrl: false,
         listId: 'color styling',
         fontFamily: 'courier',
-        logLevel: 0
+        logLevel: 0,
       }
     );
   });
@@ -379,8 +378,9 @@ describe('Graph', () => {
       `,
       {
         listUrl: false,
-        listId: 'color styling', fontFamily: 'courier',
-        logLevel: 0
+        listId: 'color styling',
+        fontFamily: 'courier',
+        logLevel: 0,
       }
     );
   });
@@ -395,7 +395,7 @@ describe('Graph', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -414,7 +414,7 @@ describe('Graph', () => {
       class A someclass;
       class C someclass;
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -431,7 +431,7 @@ describe('Graph', () => {
         linkStyle 1 stroke:DarkGray,stroke-width:2px
         linkStyle 2 stroke:DarkGray,stroke-width:2px
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -440,7 +440,7 @@ describe('Graph', () => {
       `graph LR
         a --> b --> c
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -449,7 +449,7 @@ describe('Graph', () => {
       `graph LR
         a --> b & c--> d
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -459,7 +459,7 @@ describe('Graph', () => {
       A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
       classDef exClass background:#bbb,border:1px solid red;
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -481,7 +481,7 @@ describe('Graph', () => {
       click B testClick "click test"
       classDef someclass fill:#f96;
       class A someclass;`,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -522,7 +522,7 @@ describe('Graph', () => {
       linkStyle 1 stroke:greenyellow,stroke-width:2px
       style C fill:greenyellow,stroke:green,stroke-width:4px
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -545,7 +545,7 @@ describe('Graph', () => {
       click F "javascript:alert('test')" "script test"
       `,
       { securityLevel: 'loose', fontFamily: 'courier' }
-      );
+    );
   });
 
   it('26: Set text color of nodes and links according to styles when html labels are enabled', () => {
@@ -584,7 +584,7 @@ describe('Graph', () => {
       click B "index.html#link-clicked" "link test"
       click D testClick "click test"
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -616,7 +616,7 @@ describe('Graph', () => {
       class A myClass1
       class D myClass2
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -640,7 +640,7 @@ describe('Graph', () => {
       classDef redBg fill:#622;
       classDef whiteTxt color: white;
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -652,7 +652,7 @@ describe('Graph', () => {
       eat --> sleep
       work --> eat
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -671,7 +671,7 @@ describe('Graph', () => {
       class A someclass;
       class C someclass;
       `,
-      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
     );
   });
 
@@ -694,7 +694,7 @@ describe('Graph', () => {
       `graph TD
       A[Christmas]
       `,
-      {  }
+      {}
     );
   });
 
@@ -712,7 +712,7 @@ describe('Graph', () => {
       C -----> E4
       C ======> E5
       `,
-      {  }
+      {}
     );
   });
   it('36: should render escaped without html labels', () => {
@@ -720,7 +720,7 @@ describe('Graph', () => {
       `graph TD
         a["<strong>Haiya</strong>"]-->b
       `,
-      {htmlLabels: false, flowchart: {htmlLabels: false}}
+      { htmlLabels: false, flowchart: { htmlLabels: false } }
     );
   });
   it('37: should render non-escaped with html labels', () => {
@@ -728,7 +728,7 @@ describe('Graph', () => {
       `graph TD
         a["<strong>Haiya</strong>"]-->b
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('38: should render a flowchart when useMaxWidth is true (default)', () => {
@@ -742,18 +742,17 @@ describe('Graph', () => {
       `,
       { flowchart: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(446 * .95, 446 * 1.05);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.be.within(300 * .95, 300 * 1.05);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(300 * 0.95, 300 * 1.05);
+    });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
     renderGraph(
@@ -766,15 +765,14 @@ describe('Graph', () => {
       `,
       { flowchart: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(height).to.be.within(446 * .95, 446 * 1.05);
-        expect(width).to.be.within(300 * .95, 300 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      expect(width).to.be.within(300 * 0.95, 300 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
   });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
@@ -784,7 +782,7 @@ describe('Graph', () => {
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('60: handle styling for all node shapes', () => {
@@ -808,7 +806,7 @@ describe('Graph', () => {
       style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
       style J stroke:#0000ff,fill:#ccccff,color:#0000ff
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('61: fontawesome icons in edge labels', () => {
@@ -817,7 +815,7 @@ describe('Graph', () => {
 graph TD
   C -->|fa:fa-car Car| F[fa:fa-car Car]
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('62: fontawesome icons in edge labels', () => {
@@ -829,7 +827,7 @@ graph TD
       end
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('63: fontawesome icons in edge labels', () => {
@@ -863,7 +861,7 @@ graph TD
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('64: fontawesome icons in edge labels', () => {
@@ -879,7 +877,7 @@ graph TD
     end
     A --> B
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
   it('65: text-color from classes', () => {
@@ -890,7 +888,7 @@ graph TD
         Lorem --> Ipsum --> Dolor
         class Lorem,Dolor dark
       `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 });

cypress/integration/rendering/gantt.spec.js

@@ -1,10 +1,9 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Gantt diagram', () => {
-  beforeEach(()=>{
-    cy.clock((new Date('1010-10-10')).getTime())
-  })
+  beforeEach(() => {
+    cy.clock(new Date('1010-10-10').getTime());
+  });
   it('should render a gantt chart', () => {
     imgSnapshotTest(
       `
@@ -199,18 +198,17 @@ describe('Gantt diagram', () => {
       `,
       { gantt: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(484 * .95, 484 * 1.05);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.be.within(984 * .95, 984 * 1.05);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
+    });
   });
 
   it('should render a gantt diagram when useMaxWidth is false', () => {
@@ -248,17 +246,16 @@ describe('Gantt diagram', () => {
       `,
       { gantt: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(height).to.be.within(484 * .95, 484 * 1.05);
-        expect(width).to.be.within(984 * .95, 984 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
   });
-    it('should render a gantt diagram with data labels at the top when topAxis is true', () => {
+  it('should render a gantt diagram with data labels at the top when topAxis is true', () => {
     imgSnapshotTest(
       `
     gantt

cypress/integration/rendering/gitGraph.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Sequencediagram', () => {

cypress/integration/rendering/info.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Sequencediagram', () => {

cypress/integration/rendering/journey.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('User journey diagram', () => {
@@ -40,17 +39,16 @@ section Checkout from website
     `,
       { journey: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.eq(565);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.eq(700);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.eq(565);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.eq(700);
+    });
   });
 
   it('should render a user journey diagram when useMaxWidth is false', () => {

cypress/integration/rendering/pie.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Pie Chart', () => {
@@ -47,17 +46,16 @@ describe('Pie Chart', () => {
       `,
       { pie: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.eq(450);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.eq(984);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.eq(450);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.eq(984);
+    });
   });
   it('should render a pie diagram when useMaxWidth is false', () => {
     renderGraph(
@@ -69,13 +67,12 @@ describe('Pie Chart', () => {
       `,
       { pie: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        expect(height).to.eq(450);
-        expect(width).to.eq(984);
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      expect(height).to.eq(450);
+      expect(width).to.eq(984);
+      expect(svg).to.not.have.attr('style');
+    });
   });
 });

cypress/integration/rendering/requirement.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Requirement diagram', () => {

cypress/integration/rendering/sequencediagram.spec.js

@@ -29,7 +29,7 @@ context('Sequence diagram', () => {
         Alice -->> John: Parallel message 2
         end
       `,
-      {sequence:{actorFontFamily:'courier'}}
+      { sequence: { actorFontFamily: 'courier' } }
     );
   });
   it('should handle different line breaks', () => {
@@ -71,7 +71,7 @@ context('Sequence diagram', () => {
     `,
       {}
     );
-  })
+  });
   it('should render loops with a slight margin', () => {
     imgSnapshotTest(
       `
@@ -147,7 +147,7 @@ context('Sequence diagram', () => {
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
-        {logLevel: 0}
+        { logLevel: 0 }
       );
     });
     it('should wrap (inline) long actor descriptions', () => {
@@ -158,7 +158,7 @@ context('Sequence diagram', () => {
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
-        {logLevel: 0}
+        { logLevel: 0 }
       );
     });
     it('should wrap (directive) long actor descriptions', () => {
@@ -527,17 +527,17 @@ context('Sequence diagram', () => {
     });
     it('should render with an init directive', () => {
       imgSnapshotTest(
-`%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
+        `%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
           sequenceDiagram
           Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
           Note left of Alice: Bob thinks
           Bob->>Alice: Fine!`,
         {}
-      )
+      );
     });
   });
   context('directives', () => {
-      it('should override config with directive settings', () => {
+    it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": true }}}%%
@@ -546,10 +546,13 @@ context('Sequence diagram', () => {
         note left of Alice: config set to mirrorActors: false<br/>directive set to mirrorActors: true
         Bob->>Alice: Short as well
       `,
-        { logLevel:0,  sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
-      it('should override config with directive settings', () => {
+    it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%
@@ -558,13 +561,13 @@ context('Sequence diagram', () => {
         note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
         Bob->>Alice: Short as well
       `,
-        { logLevel:0,  sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
       );
     });
   });
   context('links', () => {
     it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
-       //Be aware that the syntax for "properties" is likely to be changed. 
+      //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": true, "forceMenus": true }}}%%
@@ -585,7 +588,7 @@ context('Sequence diagram', () => {
       );
     });
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
-       //Be aware that the syntax for "properties" is likely to be changed. 
+      //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": false, "forceMenus": true, "wrap": true }}}%%
@@ -601,7 +604,10 @@ context('Sequence diagram', () => {
         a->>j: Hello John, how are you?
         j-->>a: Great!
       `,
-        { logLevel: 0, sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
   });
@@ -634,18 +640,17 @@ context('Sequence diagram', () => {
       `,
         { sequence: { useMaxWidth: true } }
       );
-      cy.get('svg')
-        .should((svg) => {
-          expect(svg).to.have.attr('width', '100%');
-          expect(svg).to.have.attr('height');
-          const height = parseFloat(svg.attr('height'));
-          expect(height).to.be.within(920, 960);
-          const style = svg.attr('style');
-          expect(style).to.match(/^max-width: [\d.]+px;$/);
-          const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-          // use within because the absolute value can be slightly different depending on the environment ±5%
-          expect(maxWidthValue).to.be.within(820 * .95, 820 * 1.05);
-        });
+      cy.get('svg').should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(920, 960);
+        const style = svg.attr('style');
+        expect(style).to.match(/^max-width: [\d.]+px;$/);
+        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
+      });
     });
     it('should render a sequence diagram when useMaxWidth is false', () => {
       renderGraph(
@@ -675,15 +680,14 @@ context('Sequence diagram', () => {
       `,
         { sequence: { useMaxWidth: false } }
       );
-      cy.get('svg')
-        .should((svg) => {
-          const height = parseFloat(svg.attr('height'));
-          const width = parseFloat(svg.attr('width'));
-          expect(height).to.be.within(920, 960);
-          // use within because the absolute value can be slightly different depending on the environment ±5%
-          expect(width).to.be.within(820 * .95, 820 * 1.05);
-          expect(svg).to.not.have.attr('style');
-        });
+      cy.get('svg').should((svg) => {
+        const height = parseFloat(svg.attr('height'));
+        const width = parseFloat(svg.attr('width'));
+        expect(height).to.be.within(920, 960);
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        expect(width).to.be.within(820 * 0.95, 820 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
     });
   });
 });

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
@@ -351,7 +350,7 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
 stateDiagram-v2
-  state "Long state name" as NotShooting {
+  state "Long state name 2" as NotShooting {
     a-->b
   }
     `,
@@ -360,6 +359,18 @@ stateDiagram-v2
       }
     );
   });
+  it('v2 state label with names in it', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+        Yswsii: Your state with spaces in it
+        [*] --> Yswsii
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
   it('v2 Simplest composite state', () => {
     imgSnapshotTest(
       `
@@ -369,7 +380,8 @@ stateDiagram-v2
         }
     `,
       {
-        logLevel: 0, fontFamily: 'courier'
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -381,7 +393,8 @@ stateDiagram-v2
         a --> b: Stop
     `,
       {
-        logLevel: 0, fontFamily: 'courier',
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -394,7 +407,8 @@ stateDiagram-v2
     note right of MyState : I am a rightie
     `,
       {
-        logLevel: 0, fontFamily: 'courier',
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -414,7 +428,8 @@ stateDiagram-v2
   A --> C
     `,
       {
-        logLevel: 0, fontFamily: 'courier',
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -433,7 +448,8 @@ stateDiagram-v2
   sub1 --> sub4
     `,
       {
-        logLevel: 0, fontFamily: 'courier',
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -447,18 +463,17 @@ stateDiagram-v2
       `,
       { state: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(177, 178);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(maxWidthValue).to.be.within(135 * .95, 135 * 1.05);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.be.within(177, 178);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(maxWidthValue).to.be.within(135 * 0.95, 135 * 1.05);
+    });
   });
   it('v2 should render a state diagram when useMaxWidth is false', () => {
     renderGraph(
@@ -470,14 +485,13 @@ stateDiagram-v2
       `,
       { state: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        expect(height).to.be.within(177, 178);
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(width).to.be.within(135 * .95, 135 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      expect(height).to.be.within(177, 178);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(width).to.be.within(135 * 0.95, 135 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
   });
 });

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
@@ -315,7 +314,8 @@ describe('State diagram', () => {
     }
     `,
       {
-        logLevel: 0, fontFamily: 'courier'
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -328,7 +328,8 @@ describe('State diagram', () => {
         }
     `,
       {
-        logLevel: 0, fontFamily: 'courier'
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -340,7 +341,8 @@ describe('State diagram', () => {
         a --> b: Stop
     `,
       {
-        logLevel: 0, fontFamily: 'courier'
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -353,20 +355,19 @@ describe('State diagram', () => {
       `,
       { state: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(176,178);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        // Todo investigate difference
-        // expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05);
-        expect(maxWidthValue).to.be.within(130, 140);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.be.within(176, 178);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // Todo investigate difference
+      // expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05);
+      expect(maxWidthValue).to.be.within(130, 140);
+    });
   });
   it('should render a state diagram when useMaxWidth is false', () => {
     renderGraph(
@@ -377,17 +378,16 @@ describe('State diagram', () => {
       `,
       { state: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        expect(height).to.be.within(176,178);
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        // Todo investigate difference
-        // expect(width).to.be.within(112 * .95, 112 * 1.05);
-        expect(width).to.be.within(130, 140);
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      expect(height).to.be.within(176, 178);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // Todo investigate difference
+      // expect(width).to.be.within(112 * .95, 112 * 1.05);
+      expect(width).to.be.within(130, 140);
 
-        expect(svg).to.not.have.attr('style');
-      });
+      expect(svg).to.not.have.attr('style');
+    });
   });
 });

cypress/integration/rendering/theme.spec.js

@@ -1,12 +1,36 @@
-/* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util.js';
 
-describe('Pie Chart', () => {
-    // beforeEach(()=>{
-    //   cy.clock((new Date('2014-06-09')).getTime());
-    // });
+describe('themeCSS balancing, it', () => {
+  it('should not allow unbalanced CSS definitions', () => {
+    imgSnapshotTest(
+      `
+  %%{init: { 'themeCSS': '} * { background: red }' } }%%
+  flowchart TD
+    a --> b
+          `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should not allow unbalanced CSS definitions 2', () => {
+    imgSnapshotTest(
+      `
+  %%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
+  flowchart TD
+    a2 --> b2
+          `,
+      {}
+    );
+    cy.get('svg');
+  });
+});
 
-  ['default', 'forest', 'dark', 'neutral'].forEach(theme=>{
+describe('Pie Chart', () => {
+  // beforeEach(()=>{
+  //   cy.clock((new Date('2014-06-09')).getTime());
+  // });
+
+  ['default', 'forest', 'dark', 'neutral'].forEach((theme) => {
     describe(theme, () => {
       it('should render a pie diagram', () => {
         imgSnapshotTest(
@@ -16,7 +40,7 @@ describe('Pie Chart', () => {
           "Ice-Hockey" : 80
           "Football" : 90
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
       });
@@ -39,7 +63,7 @@ describe('Pie Chart', () => {
             G
           end
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
       });
@@ -62,7 +86,7 @@ describe('Pie Chart', () => {
             G
           end
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
       });
@@ -88,7 +112,7 @@ describe('Pie Chart', () => {
 
 
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
       });
@@ -135,10 +159,10 @@ describe('Pie Chart', () => {
         classM ..|> classN : Realization
         classO .. classP : Link(Dashed)
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
-    });
+      });
       it('should render a state diagram', () => {
         imgSnapshotTest(
           `
@@ -167,10 +191,10 @@ stateDiagram
         Active --> SomethingElse
         note right of SomethingElse : This is the note to the right.
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
-    });
+      });
       it('should render a state diagram (v2)', () => {
         imgSnapshotTest(
           `
@@ -199,10 +223,10 @@ stateDiagram-v2
         Active --> SomethingElse2
         note right of SomethingElse2 : This is the note to the right.
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
-    });
+      });
       it('should render a er diagram', () => {
         imgSnapshotTest(
           `
@@ -217,10 +241,10 @@ erDiagram
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 
           `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
-    });
+      });
       it('should render a user journey diagram', () => {
         imgSnapshotTest(
           `
@@ -235,12 +259,12 @@ erDiagram
               Go downstairs: 5: Me
               Sit down: 5: Me
                         `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
-    });
+      });
       it('should render a gantt diagram', () => {
-        cy.clock((new Date('2014-01-06')).getTime());
+        cy.clock(new Date('2014-01-06').getTime());
         imgSnapshotTest(
           `
       gantt
@@ -271,10 +295,10 @@ erDiagram
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
        `,
-          {theme}
+          { theme }
         );
         cy.get('svg');
-    });
+      });
     });
   });
 });

cypress/platform/bundle-test.js

@@ -30,30 +30,29 @@ if (location.href.match('test-html-escaping')) {
   code = code3;
 }
 
-
 mermaid.initialize({
   theme: 'default',
   // fontFamily: '"Lucida Console", Monaco, monospace',
   startOnLoad: false,
   securityLevel: 'loose',
   flowchart: {
-    htmlLabels: true
+    htmlLabels: true,
   },
   gantt: {
     axisFormatter: [
       [
         '%Y-%m-%d',
-        d => {
+        (d) => {
           return d.getDay() === 1;
-        }
-      ]
-    ]
-  }
+        },
+      ],
+    ],
+  },
 });
 mermaid.render(
   'the-id-of-the-svg',
   code,
-  svg => {
+  (svg) => {
     console.log(svg);
     const elem = document.querySelector('#graph-to-be');
     elem.innerHTML = svg;

cypress/platform/class.html

@@ -115,14 +115,14 @@
       <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'default',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": true },
+        flowchart: { curve: 'linear', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -131,9 +131,11 @@
         //   fontFamily: '"arial", sans-serif',
         // },
         curve: 'linear',
-        securityLevel: 'loose'
+        securityLevel: 'loose',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/click_security_loose.html

@@ -130,39 +130,39 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByFlowArg(argument) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click-2'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow: ' + argument
+    const div = document.createElement('div');
+    div.className = 'created-by-click-2';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow: ' + argument;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByClass(arg) {
-    const div = document.createElement('div')
-    div.className = 'created-by-class-click'
-    div.style = 'padding: 20px; background: purple; color: white;'
-    div.innerText = 'Clicked By Class' + (arg?arg:'')
+    const div = document.createElement('div');
+    div.className = 'created-by-class-click';
+    div.style = 'padding: 20px; background: purple; color: white;';
+    div.innerText = 'Clicked By Class' + (arg ? arg : '');
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>

cypress/platform/click_security_other.html

@@ -62,20 +62,20 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
   </script>

cypress/platform/click_security_strict.html

@@ -64,23 +64,23 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
   </script>

cypress/platform/css1.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <style>
+    body {
+      font-family: 'trebuchet ms', verdana, arial;
+    }
+  </style>
+</head>
+<body>
+  <div class="mermaid2">
+  %%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
+  flowchart TD
+    a --> b
+  </div>
+  <div class="mermaid">
+   %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+    flowchart LR
+    subgraph A
+        a --> b
+    end
+    subgraph B
+        i -->f
+    end
+    A --> B
+  </div>
+  <script src="./mermaid.js"></script>
+  <script>
+     function showFullFirstSquad(elemName) {
+       console.log('show ' + elemName);
+     }
+     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
+  </script>
+</body>
+</html>

cypress/platform/current.html

@@ -155,23 +155,25 @@ _one --> b
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'forest',
         // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/current2.html

@@ -107,23 +107,25 @@ Note over Bob,Alice: Looks back
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'forest',
         // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/huge.html

@@ -29,7 +29,7 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

cypress/platform/interaction.html

@@ -90,31 +90,31 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByClass() {
-    const div = document.createElement('div')
-    div.className = 'created-by-class-click'
-    div.style = 'padding: 20px; background: purple; color: white;'
-    div.innerText = 'Clicked By Class'
+    const div = document.createElement('div');
+    div.className = 'created-by-class-click';
+    div.style = 'padding: 20px; background: purple; color: white;';
+    div.innerText = 'Clicked By Class';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>

cypress/platform/knsv.html

@@ -38,32 +38,33 @@ stateDiagram-v2
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'dark',
         theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 2,
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
-        state:{
+        state: {
           nodeSpacing: 50,
           rankSpacing: 50,
           defaultRenderer: 'dagre-wrapper',
         },
-        logLevel:0,
+        logLevel: 0,
         fontSize: 18,
         curve: 'cardinal',
         securityLevel: 'strict',
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/knsv2.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,35 +58,39 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: false,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
         fontSize: 18,
         curve: 'basis',
         securityLevel: 'strict',
-        startOnLoad: false
+        startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
 
-      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
-  diagram += "flowchart\n";
-  diagram += "A[\"<ifra";
-  diagram += "me srcdoc='<scrip";
-  diagram += "t src=http://localhost:9000/exploit.js>";
-  diagram += "</scr"
-  diagram += "ipt>'></iframe>\"]";
+      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
+diagram += 'flowchart\n';
+diagram += 'A["<ifra';
+diagram += "me srcdoc='<scrip";
+diagram += 't src=http://localhost:9000/exploit.js>';
+diagram += '</scr';
+diagram += 'ipt>\'></iframe>"]';
 
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    document.querySelector('#res').innerHTML = res;
-  });
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/knsv3.html

@@ -185,8 +185,8 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'neutral',
         arrowMarkerAbsolute: true,
@@ -195,7 +195,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -204,7 +204,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         securityLevel: 'loose',
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/regression/issue-1874.html

@@ -3,10 +3,9 @@
     <script src="http://localhost:9000/mermaid.js"></script>
   <script>
       mermaid.initialize({
-       theme: 'base',
-       themeVariables: {
-      },
-      startOnLoad: true,
+        theme: 'base',
+        themeVariables: {},
+        startOnLoad: true,
       });
   </script>
 

cypress/platform/render-after-error.html

@@ -11,21 +11,16 @@
         </div>
 
         <script src="./mermaid.js"></script>
-        <script>
-
-         mermaid.init({ startOnLoad: false });
+        <script>mermaid.init({ startOnLoad: false });
          mermaid.mermaidAPI.initialize();
 
-         try{
-             mermaid.mermaidAPI.render("graphDiv",
-                                       `>`);
-         } catch(e){}
+         try {
+           mermaid.mermaidAPI.render('graphDiv', `>`);
+         } catch (e) {}
 
-         mermaid.mermaidAPI.render("graphDiv",
-                                   `graph LR\n a --> b`, html => {
-                                      document.getElementById('graph').innerHTML=html;
+         mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+           document.getElementById('graph').innerHTML = html;
          });
-
         </script>
 
     </body>

cypress/platform/rerender.html

@@ -11,21 +11,18 @@
 </div>
 
   <script src="./mermaid.js"></script>
-  <script>
-
-    mermaid.init({ startOnLoad: false });
+  <script>mermaid.init({ startOnLoad: false });
     mermaid.mermaidAPI.initialize();
 
     rerender('XMas');
 
     function rerender(text) {
       var graphText = `graph TD
-        A[${text}] -->|Get money| B(Go shopping)`
+        A[${text}] -->|Get money| B(Go shopping)`;
       var graph = mermaid.mermaidAPI.render('id', graphText);
-      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph)
-      document.getElementById('graph').innerHTML=graph;
+      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+      document.getElementById('graph').innerHTML = graph;
     }
-
   </script>
   <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
 

cypress/platform/showcase_base.html

@@ -267,23 +267,25 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'base',
         // themeVariables:
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_base_dark.html

@@ -262,15 +262,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'base',
-        themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
+        themeVariables: {
+    primaryColor: '#9400D3',
+    darkMode: true,
+    background: '#222',
+    textColor: 'white',
+    primaryTextColor: '#f4f4f4',
+    nodeBkg: '#ff0000',
+    mainBkg: '#0000ff',
+    tertiaryColor: '#ffffcc',
+  },
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -278,7 +287,9 @@ requirementDiagram
         curve: 'cardinal',
         // securityLevel: 'strict'
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_dark.html

@@ -259,22 +259,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_default.html

@@ -254,22 +254,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_forest.html

@@ -258,22 +258,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_neutral.html

@@ -257,22 +257,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'neutral',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/subgraph.html

@@ -37,9 +37,9 @@
   <script src="./mermaid.js"></script>
   <script>
      function showFullFirstSquad(elemName) {
-            console.log('show ' + elemName);
-        }
-        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+       console.log('show ' + elemName);
+     }
+     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>
 </body>
 </html>

cypress/platform/theme-directives.html

@@ -120,8 +120,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'dark',
         // theme: 'dark',
@@ -129,7 +129,7 @@
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
         // flowchart: { useMaxWidth: true },
-        graph: { curve: 'cardinal', "htmlLabels": false },
+        graph: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -137,7 +137,9 @@
         curve: 'cardinal',
         securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/vertices.html

@@ -29,9 +29,9 @@
   <script src="./mermaid.js"></script>
   <script>
      function showFullFirstSquad(elemName) {
-            console.log('show ' + elemName);
-        }
-        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+       console.log('show ' + elemName);
+     }
+     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>
 </body>
 </html>

cypress/platform/viewer.js

@@ -2,11 +2,10 @@ import { Base64 } from 'js-base64';
 import mermaid2 from '../../src/mermaid';
 
 /**
- * ##contentLoaded
- * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and
- * calls init for rendering the mermaid diagrams on the page.
+ * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
+ * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
  */
-const contentLoaded = function() {
+const contentLoaded = function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -38,8 +37,12 @@ const contentLoaded = function() {
   }
 };
 
+/**
+ * @param current
+ * @param update
+ */
 function merge(current, update) {
-  Object.keys(update).forEach(function(key) {
+  Object.keys(update).forEach(function (key) {
     // if update[key] exist, and it's not a string or array,
     // we go in one level deeper
     if (
@@ -58,7 +61,7 @@ function merge(current, update) {
   return current;
 }
 
-const contentLoadedApi = function() {
+const contentLoadedApi = function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -125,7 +128,7 @@ if (typeof document !== 'undefined') {
    */
   window.addEventListener(
     'load',
-    function() {
+    function () {
       if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
         contentLoadedApi();

cypress/platform/xss.html

@@ -23,11 +23,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         // const el = document.querySelector('.mermaid');
         // el.parentNode.removeChild(el);

cypress/platform/xss10.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,35 +72,36 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
-      var diagram = "classDiagram\n"
-diagram += "class Square~<img/src";
+      var diagram = 'classDiagram\n';
+diagram += 'class Square~<img/src';
 diagram += "='1'/onerror=xssAttack()>~{\n";
-diagram += "id A\n";
-diagram += "}";
+diagram += 'id A\n';
+diagram += '}';
 
-    //   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss11.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
-      var diagram = "stateDiagram-v2\n"
-diagram += "s2 : This is a state description<img/src";
+var diagram = 'stateDiagram-v2\n';
+diagram += 's2 : This is a state description<img/src';
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss12.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
-      var diagram = "stateDiagram-v2\n"
-diagram += "s2 : A<img/src";
+var diagram = 'stateDiagram-v2\n';
+diagram += 's2 : A<img/src';
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss13.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
-      var diagram = "stateDiagram-v2\n"
-diagram += "if_state --> False: if n < 0<img/src";
+var diagram = 'stateDiagram-v2\n';
+diagram += 'if_state --> False: if n < 0<img/src';
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss14.html

@@ -0,0 +1,108 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'antiscript',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = 'classDiagram\n';
+diagram += 'classA <-- classB : <ifr';
+diagram += "ame/srcdoc='<scr";
+diagram += 'ipt>parent.xssAttack(`XSS`)</';
+diagram += "script>'>";
+
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+

cypress/platform/xss15.html

@@ -0,0 +1,107 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `sequenceDiagram
+    participant John
+    links John: {"XSS": "javas`;
+diagram += `cript:alert('AudioParam')"}`;
+
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+

cypress/platform/xss16.html

@@ -0,0 +1,106 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `sequenceDiagram
+    participant Alice
+    links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
+
+// //   var diagram = "stateDiagram-v2\n";
+// //  diagram += "<img/src='1'/onerror"
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+