Merge pull request #3427 from mermaid-js/sidv/vitest

Vitest

.eslintignore

@@ -3,3 +3,4 @@ dist/**
 docs/Setup.md
 cypress.config.js
 cypress/plugins/index.js
+coverage

.prettierignore

@@ -1,3 +1,4 @@
 dist
 cypress/platform/xss3.html
-.cache
+.cache
+coverage

__mocks__/d3.js → __mocks__/d3.ts

@@ -1,4 +1,7 @@
-let NewD3 = function () {
+// @ts-nocheck TODO: Fix TS
+import { vi } from 'vitest';
+
+const NewD3 = function () {
   /**
    *
    */
@@ -56,9 +59,9 @@ export const MockD3 = (name, parent) => {
     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);
+  elem.lower = vi.fn(() => elem);
+  elem.attr = vi.fn(() => elem);
+  elem.text = vi.fn(() => elem);
+  elem.style = vi.fn(() => elem);
   return elem;
 };

__mocks__/dagre-d3.ts

@@ -0,0 +1,3 @@
+import { vi } from 'vitest';
+
+// export const render = vi.fn();

__mocks__/entity-decode/browser.ts

@@ -0,0 +1,3 @@
+module.exports = function (txt: string) {
+  return txt;
+};

package.json

@@ -41,10 +41,9 @@
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
-    "ci": "jest src/.*",
-    "test": "yarn lint && jest src/.*",
-    "test:watch": "jest --watch src",
+    "ci": "vitest run",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest --coverage --watch",
     "prepublishOnly": "yarn build && yarn test",
     "prepare": "concurrently \"husky install\" \"yarn build\"",
     "pre-commit": "lint-staged"
@@ -87,18 +86,20 @@
     "@types/dompurify": "^2.3.4",
     "@types/eslint": "^8.4.6",
     "@types/express": "^4.17.13",
-    "@types/jest": "^28.1.7",
+    "@types/jsdom": "^20.0.0",
     "@types/lodash": "^4.14.185",
+    "@types/prettier": "^2.7.0",
     "@types/stylis": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
+    "@vitest/coverage-c8": "^0.23.2",
+    "@vitest/ui": "^0.23.2",
     "concurrently": "^7.4.0",
-    "coveralls": "^3.0.2",
+    "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
     "esbuild": "^0.15.8",
-    "esbuild-jest": "^0.5.0",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -111,10 +112,9 @@
     "globby": "^13.1.2",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.0.3",
-    "jest-environment-jsdom": "^29.0.3",
     "jison": "^0.4.18",
     "js-base64": "3.7.2",
+    "jsdom": "^20.0.0",
     "lint-staged": "^13.0.0",
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
@@ -123,10 +123,10 @@
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
     "start-server-and-test": "^1.12.6",
-    "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",
-    "unist-util-flatmap": "^1.0.0"
+    "unist-util-flatmap": "^1.0.0",
+    "vitest": "^0.23.1"
   },
   "resolutions": {
     "d3": "^7.0.0"

src/__mocks__/mermaidAPI.ts

@@ -1,18 +1,15 @@
 /**
  * Mocks for `./mermaidAPI`.
  *
- * We can't easily use `jest.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
+ * We can't easily use `vi.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
  */
 import * as configApi from '../config';
-
+import { vi } from 'vitest';
 import { addDiagrams } from '../diagram-api/diagram-orchestration';
 import Diagram from '../Diagram';
 
 // Normally, we could just do the following to get the original `parse()`
-// implementation, however, requireActual isn't currently supported in Jest
-// for ESM, see https://github.com/facebook/jest/issues/9430
-// and https://github.com/facebook/jest/pull/10976
-// const {parse} = jest.requireActual("./mermaidAPI");
+// implementation, however, requireActual returns a promise and it's not documented how to use withing mock file.
 
 let hasLoadedDiagrams = false;
 /**
@@ -31,10 +28,10 @@ function parse(text: string, parseError?: Function): boolean {
 
 // original version cannot be modified since it was frozen with `Object.freeze()`
 export const mermaidAPI = {
-  render: jest.fn(),
+  render: vi.fn(),
   parse,
-  parseDirective: jest.fn(),
-  initialize: jest.fn(),
+  parseDirective: vi.fn(),
+  initialize: vi.fn(),
   getConfig: configApi.getConfig,
   setConfig: configApi.setConfig,
   getSiteConfig: configApi.getSiteConfig,

src/diagrams/class/classDiagram.spec.js

@@ -1,7 +1,7 @@
 import { parser } from './parser/classDiagram';
 import classDb from './classDb';
-
-const spyOn = jest.spyOn;
+import { vi } from 'vitest';
+const spyOn = vi.spyOn;
 
 describe('class diagram, ', function () {
   describe('when parsing an info graph it', function () {
@@ -14,7 +14,7 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
     });
-    xit('should handle a leading newline axa', function () {
+    it.skip('should handle a leading newline axa', function () {
       const str = '\nclassDiagram\n' + 'class Car';
 
       try {

src/diagrams/flowchart/flowRenderer.addEdges.spec.js

@@ -4,9 +4,6 @@ import flowRenderer from './flowRenderer';
 import Diagram from '../../Diagram';
 import { addDiagrams } from '../../diagram-api/diagram-orchestration';
 addDiagrams();
-afterEach(() => {
-  jest.restoreAllMocks();
-});
 
 describe('when using mermaid and ', function () {
   describe('when calling addEdges ', function () {

src/diagrams/flowchart/parser/flow-interactions.spec.js

@@ -1,8 +1,8 @@
 import flowDb from '../flowDb';
 import flow from './flow';
 import { setConfig } from '../../../config';
-
-const spyOn = jest.spyOn;
+import { vi } from 'vitest';
+const spyOn = vi.spyOn;
 
 setConfig({
   securityLevel: 'strict',

src/diagrams/flowchart/parser/flow-text.spec.js

@@ -284,7 +284,7 @@ describe('[Text] when parsing', () => {
 
       expect(edges[0].text).toBe('text including graph space and v');
     });
-    // xit('should handle text on open links',function(){
+    // it.skip('should handle text on open links',function(){
     //    const res = flow.parser.parse('graph TD;A-- text including graph space --B');
     //
     //    const vert = flow.parser.yy.getVertices();
@@ -324,7 +324,7 @@ describe('[Text] when parsing', () => {
       expect(vert['C'].type).toBe('round');
       expect(vert['C'].text).toBe('Chimpansen hoppar åäö  <br> -  ÅÄÖ');
     });
-    // xit('should handle åäö, minus and space and br',function(){
+    // it.skip('should handle åäö, minus and space and br',function(){
     //    const res = flow.parser.parse('graph TD; A[Object&#40;foo,bar&#41;]-->B(Thing);');
     //
     //    const vert = flow.parser.yy.getVertices();

src/diagrams/flowchart/parser/subgraph.spec.js

@@ -62,7 +62,7 @@ describe('when parsing subgraphs', function () {
     expect(subgraph.id).toBe('some-id');
   });
 
-  xit('should handle subgraph without id and space in title', function () {
+  it.skip('should handle subgraph without id and space in title', function () {
     const res = flow.parser.parse('graph TB\nsubgraph Some Title\n\ta1-->a2\nend');
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(1);

src/diagrams/gantt/ganttDb.spec.js → src/diagrams/gantt/ganttDb.spec.ts

@@ -1,20 +1,32 @@
+// @ts-nocheck TODO: Fix TS
 import moment from 'moment-mini';
 import ganttDb from './ganttDb';
+import { it, describe } from 'vitest';
+import { convert } from '../../tests/util';
 
 describe('when using the ganttDb', function () {
   beforeEach(function () {
     ganttDb.clear();
   });
 
   describe('when using duration', function () {
-    it.each`
+    it.each([{ str: '1d', expected: moment.duration(1, 'd') }])(
+      'should %s resulting in $o duration',
+      ({ str, expected }) => {
+        expect(ganttDb.parseDuration(str)).toEqual(expected);
+      }
+    );
+
+    it.each(
+      convert`
       str       | expected
       ${'1d'}   | ${moment.duration(1, 'd')}
       ${'2w'}   | ${moment.duration(2, 'w')}
       ${'1ms'}  | ${moment.duration(1, 'ms')}
       ${'0.1s'} | ${moment.duration(100, 'ms')}
       ${'1f'}   | ${moment.duration.invalid()}
-    `('should $str resulting in $expected duration', ({ str, expected }) => {
+    `
+    )('should $str resulting in $expected duration', ({ str, expected }) => {
       expect(ganttDb.parseDuration(str)).toEqual(expected);
     });
   });
@@ -31,7 +43,7 @@ describe('when using the ganttDb', function () {
       ganttDb.clear();
     });
 
-    it.each`
+    it.each(convert`
       fn                        | expected
       ${'getTasks'}             | ${[]}
       ${'getAccTitle'}          | ${''}
@@ -42,12 +54,13 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
-    `('should clear $fn', ({ fn, expected }) => {
+    `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });
   });
 
-  it.each`
+  // prettier-ignore
+  it.each(convert`
     testName                                                                             | section     | taskName   | taskData                       | expStartDate            | expEndDate                       | expId      | expTask
     ${'should handle fixed dates'}                                                       | ${'testa1'} | ${'test1'} | ${'id1,2013-01-01,2013-01-12'} | ${new Date(2013, 0, 1)} | ${new Date(2013, 0, 12)}         | ${'id1'}   | ${'test1'}
     ${'should handle duration (days) instead of fixed date to determine end date'}       | ${'testa1'} | ${'test1'} | ${'id1,2013-01-01,2d'}         | ${new Date(2013, 0, 1)} | ${new Date(2013, 0, 3)}          | ${'id1'}   | ${'test1'}
@@ -57,7 +70,7 @@ describe('when using the ganttDb', function () {
     ${'should handle duration (weeks) instead of fixed date to determine end date'}      | ${'testa1'} | ${'test1'} | ${'id1,2013-01-01,2w'}         | ${new Date(2013, 0, 1)} | ${new Date(2013, 0, 15)}         | ${'id1'}   | ${'test1'}
     ${'should handle fixed dates without id'}                                            | ${'testa1'} | ${'test1'} | ${'2013-01-01,2013-01-12'}     | ${new Date(2013, 0, 1)} | ${new Date(2013, 0, 12)}         | ${'task1'} | ${'test1'}
     ${'should handle duration instead of a fixed date to determine end date without id'} | ${'testa1'} | ${'test1'} | ${'2013-01-01,4d'}             | ${new Date(2013, 0, 1)} | ${new Date(2013, 0, 5)}          | ${'task1'} | ${'test1'}
-  `('$testName', ({ section, taskName, taskData, expStartDate, expEndDate, expId, expTask }) => {
+  `)('$testName', ({ section, taskName, taskData, expStartDate, expEndDate, expId, expTask }) => {
     ganttDb.setDateFormat('YYYY-MM-DD');
     ganttDb.addSection(section);
     ganttDb.addTask(taskName, taskData);
@@ -68,14 +81,15 @@ describe('when using the ganttDb', function () {
     expect(tasks[0].task).toEqual(expTask);
   });
 
-  it.each`
+  // prettier-ignore
+  it.each(convert`
     section     | taskName1  | taskName2  | taskData1              | taskData2             | expStartDate2                                | expEndDate2              | expId2     | expTask2
     ${'testa1'} | ${'test1'} | ${'test2'} | ${'id1,2013-01-01,2w'} | ${'id2,after id1,1d'} | ${new Date(2013, 0, 15)}                     | ${undefined}             | ${'id2'}   | ${'test2'}
     ${'testa1'} | ${'test1'} | ${'test2'} | ${'id1,2013-01-01,2w'} | ${'id2,after id3,1d'} | ${new Date(new Date().setHours(0, 0, 0, 0))} | ${undefined}             | ${'id2'}   | ${'test2'}
     ${'testa1'} | ${'test1'} | ${'test2'} | ${'id1,2013-01-01,2w'} | ${'after id1,1d'}     | ${new Date(2013, 0, 15)}                     | ${undefined}             | ${'task1'} | ${'test2'}
     ${'testa1'} | ${'test1'} | ${'test2'} | ${'id1,2013-01-01,2w'} | ${'2013-01-26'}       | ${new Date(2013, 0, 15)}                     | ${new Date(2013, 0, 26)} | ${'task1'} | ${'test2'}
     ${'testa1'} | ${'test1'} | ${'test2'} | ${'id1,2013-01-01,2w'} | ${'2d'}               | ${new Date(2013, 0, 15)}                     | ${new Date(2013, 0, 17)} | ${'task1'} | ${'test2'}
-  `(
+  `)(
     '$testName',
     ({
       section,
@@ -381,11 +395,11 @@ describe('when using the ganttDb', function () {
     });
   });
 
-  it.each`
+  it.each(convert`
     type       | expected
     ${'hide'}  | ${'off'}
     ${'style'} | ${'stoke:stroke-width:5px,stroke:#00f,opacity:0.5'}
-  `('should ${type} today marker', ({ expected }) => {
+  `)('should ${type} today marker', ({ expected }) => {
     ganttDb.setTodayMarker(expected);
     expect(ganttDb.getTodayMarker()).toEqual(expected);
   });

src/diagrams/gantt/parser/gantt.spec.js

@@ -1,7 +1,8 @@
 import { parser } from './gantt';
 import ganttDb from '../ganttDb';
-
-const spyOn = jest.spyOn;
+import { convert } from '../../../tests/util';
+import { vi } from 'vitest';
+const spyOn = vi.spyOn;
 const parserFnConstructor = (str) => {
   return () => {
     parser.parse(str);
@@ -92,14 +93,14 @@ describe('when parsing a gantt diagram it', function () {
     expect(tasks[0].id).toEqual('des1');
     expect(tasks[0].task).toEqual('Design jison grammar');
   });
-  it.each`
+  it.each(convert`
     tags                     | milestone | done     | crit     | active
     ${'milestone'}           | ${true}   | ${false} | ${false} | ${false}
     ${'done'}                | ${false}  | ${true}  | ${false} | ${false}
     ${'crit'}                | ${false}  | ${false} | ${true}  | ${false}
     ${'active'}              | ${false}  | ${false} | ${false} | ${true}
     ${'crit,milestone,done'} | ${true}   | ${true}  | ${true}  | ${false}
-  `('should handle a task with tags $tags', ({ tags, milestone, done, crit, active }) => {
+  `)('should handle a task with tags $tags', ({ tags, milestone, done, crit, active }) => {
     const str =
       'gantt\n' +
       'dateFormat YYYY-MM-DD\n' +