[pull] master from mermaid-js:master

.eslintignore

@@ -0,0 +1,8 @@
+docs/**
+.svelte-kit/**
+static/**
+build/**
+node_modules/**
+coverage/**
+__snapshots__/**
+snapshots.js

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
  // 'plugin:@typescript-eslint/recommended-requiring-type-checking',
  'prettier'
  ],
- plugins: ['svelte3', 'tailwindcss', '@typescript-eslint', 'es'],
+ plugins: ['svelte3', 'tailwindcss', '@typescript-eslint', 'es', 'vitest'],
  ignorePatterns: [
  'docs/*',
  '*.cjs',

.github/workflows/cypress.yml → .github/workflows/tests.yml

@@ -1,4 +1,4 @@
-name: Cypress Tests
+name: Tests
 
 on:
  pull_request:
@@ -30,17 +30,18 @@ jobs:
  node-version: 16
  cache: 'yarn'
 
- - name: Build & Lint
+ - name: Lint & Test
  run: |
  yarn install
- yarn build
  yarn lint
+ yarn test:unit
 
  # Install NPM dependencies, cache them correctly
  # and run all Cypress tests
  - name: Cypress run
  uses: cypress-io/github-action@v3
  with:
+ build: yarn build
  start: yarn preview
  wait-on: 'http:https://localhost:3000'
  record: true

.prettierignore

@@ -3,4 +3,6 @@ docs/**
 static/**
 build/**
 node_modules/**
+coverage/**
+__snapshots__/**
 snapshots.js

SECURITY.md

@@ -6,7 +6,7 @@ Live editor only has a single version, which will be maintained.
 
 | Version | Supported |
 | ------- | ------------------ |
-| latest  | :white_check_mark: |
+| latest | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

cypress/.eslintrc

@@ -1,12 +1,10 @@
 {
- "plugins": ["cypress", "mocha"],
- "extends": ["plugin:cypress/recommended", "plugin:mocha/recommended"],
+ "plugins": ["cypress"],
+ "extends": ["plugin:cypress/recommended"],
  "rules": {
- "jest/expect-expect": "off",
- "mocha/no-mocha-arrows": "off"
+ "jest/expect-expect": "off"
  },
  "env": {
- "cypress/globals": true,
- "mocha": true
+ "cypress/globals": true
  }
 }

cypress/e2e/diagramUpdate.spec.ts

@@ -1,4 +1,13 @@
 describe('Auto sync tests', () => {
+ const cmd = Cypress.platform === 'darwin' ? 'meta' : 'ctrl';
+ const getEditor = ({ bottom = true, newline = false } = {}) =>
+ cy
+ .get('#editor textarea:first')
+ .click()
+ .focused()
+ .type(`${bottom ? '{pageDown}' : `{${cmd}}`}`)
+ .type(`${newline ? '{enter}' : `{${cmd}}`}`);
+
  beforeEach(() => {
  cy.clearLocalStorage();
  cy.visit('/');
@@ -7,7 +16,7 @@ describe('Auto sync tests', () => {
  it('should dim diagram when code is edited', () => {
  cy.contains('Auto sync').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
- cy.get('#editor').type(' C --> Test');
+ getEditor().type(' C --> Test');
  cy.get('#view').should('have.class', 'outOfSync');
  cy.getLocalStorage('codeStore').snapshot();
  });
@@ -19,26 +28,25 @@ describe('Auto sync tests', () => {
  cy.get('#autoSync').check();
  cy.get('[data-cy=sync]').should('not.exist');
  });
+
  it('should not dim diagram when code is in sync', () => {
  cy.contains('Auto sync').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
- cy.get('#editor').type(' C --> Test');
+ getEditor().type(' C --> Test');
  cy.get('#view').should('have.class', 'outOfSync');
  cy.get('[data-cy=sync]').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
  cy.get('#autoSync').check();
- cy.get('#editor').type('ing');
+ getEditor().type('ing');
  cy.get('#view').should('not.have.class', 'outOfSync');
  cy.getLocalStorage('codeStore').snapshot();
  });
 
  it('supports commenting code out/in', () => {
- const cmd = Cypress.platform === 'darwin' ? 'meta' : 'ctrl';
-
- cy.get('#editor').type(`{uparrow}{${cmd}}/`);
+ getEditor().type(`{uparrow}{${cmd}}/`);
  cy.get('#view').contains('Car').should('not.exist');
 
- cy.get('#editor').type(`{uparrow}{${cmd}}/`);
+ getEditor().type(`{uparrow}{${cmd}}/`);
  cy.get('#view').contains('Car').should('exist');
  });
 
@@ -47,7 +55,7 @@ describe('Auto sync tests', () => {
  '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
  );
  cy.get('#errorContainer').should('not.exist');
- cy.get('#editor').type(`{enter}branch test`);
+ getEditor({ newline: true }).type(`branch test`);
  cy.get('#editor').contains('branch test').should('exist');
  cy.get('#errorContainer')
  .contains(

cypress/e2e/history.spec.ts

@@ -47,7 +47,6 @@ describe('Save History', () => {
  });
 
  // TODO: Fix #639
- // eslint-disable-next-line mocha/no-skipped-tests
  xit('should auto save history', () => {
  cy.get('#editor').type(' C --> HistoryTest');
  cy.tick(70000);

cypress/e2e/themes.spec.ts

@@ -32,7 +32,6 @@ describe('Test themes', () => {
  });
 
  describe('Test dark mode', () => {
- // eslint-disable-next-line mocha/no-hooks-for-single-case
  beforeEach(() => {
  cy.clearLocalStorage();
  cy.visit('/edit', {

package.json

@@ -11,59 +11,69 @@
  "lint:fix": "prettier --write --cache --plugin-search-dir=. .;eslint --fix --ignore-path .gitignore .",
  "format": "prettier --write --cache --plugin-search-dir=. .",
  "pre-commit": "lint-staged",
- "postinstall": "husky install; cypress cache prune",
- "test": "cypress run",
+ "postinstall": "husky install; cypress cache prune; svelte-kit sync",
+ "test:unit": "vitest",
+ "test:ui": "vitest --ui",
+ "test:coverage": "vitest run --coverage",
+ "test:browser": "cypress run",
+ "test": "test:unit && test:browser",
  "cy": "cypress open"
  },
  "devDependencies": {
- "@cypress/snapshot": "^2.1.7",
+ "@cypress/snapshot": "2.1.7",
  "@sveltejs/adapter-static": "1.0.0-next.34",
  "@sveltejs/kit": "1.0.0-next.359",
- "@types/mermaid": "^8.2.9",
- "@types/pako": "^1.0.3",
- "@typescript-eslint/eslint-plugin": "^4.33.0",
- "@typescript-eslint/parser": "^4.33.0",
- "autoprefixer": "^10.4.7",
- "chai": "^4.3.6",
- "cssnano": "^5.1.12",
- "cy-verify-downloads": "^0.1.8",
+ "@testing-library/jest-dom": "5.16.4",
+ "@testing-library/svelte": "3.1.3",
+ "@types/mermaid": "8.2.9",
+ "@types/pako": "1.0.3",
+ "@typescript-eslint/eslint-plugin": "5.30.5",
+ "@typescript-eslint/parser": "5.30.5",
+ "@vitest/ui": "0.17.0",
+ "autoprefixer": "10.4.7",
+ "c8": "7.11.3",
+ "chai": "4.3.6",
+ "cssnano": "5.1.12",
+ "cy-verify-downloads": "0.1.8",
  "cypress": "10.3.0",
- "cypress-localstorage-commands": "^2.1.0",
- "eslint": "^7.32.0",
- "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-cypress": "^2.12.1",
- "eslint-plugin-es": "^4.1.0",
- "eslint-plugin-mocha": "^10.0.5",
- "eslint-plugin-postcss-modules": "^2.0.0",
- "eslint-plugin-svelte3": "^3.4.1",
- "eslint-plugin-tailwindcss": "^3.6.0",
- "husky": "^8.0.1",
+ "cypress-localstorage-commands": "2.1.0",
+ "eslint": "8.19.0",
+ "eslint-config-prettier": "8.5.0",
+ "eslint-plugin-cypress": "2.12.1",
+ "eslint-plugin-es": "4.1.0",
+ "eslint-plugin-postcss-modules": "2.0.0",
+ "eslint-plugin-svelte3": "4.0.0",
+ "eslint-plugin-tailwindcss": "3.6.0",
+ "eslint-plugin-vitest": "0.0.8",
+ "husky": "8.0.1",
+ "jsdom": "20.0.0",
  "lint-staged": "13.0.3",
- "mocha": "^10.0.0",
- "node-html-parser": "^5.3.3",
- "postcss": "^8.4.14",
- "postcss-load-config": "^4.0.1",
- "prettier": "~2.7.1",
- "prettier-plugin-svelte": "^2.7.0",
- "svelte": "^3.48.0",
+ "node-html-parser": "5.3.3",
+ "postcss": "8.4.14",
+ "postcss-load-config": "4.0.1",
+ "prettier": "2.7.1",
+ "prettier-plugin-svelte": "2.7.0",
+ "svelte": "3.48.0",
  "svelte-preprocess": "4.10.7",
- "tailwindcss": "^3.1.4",
- "tslib": "^2.4.0",
- "typescript": "^4.7.4",
- "vite": "^2.9.13"
+ "tailwindcss": "3.1.4",
+ "tslib": "2.4.0",
+ "typescript": "4.7.4",
+ "vite": "2.9.13",
+ "vitest": "0.17.0",
+ "vitest-svelte-kit": "0.0.6"
  },
  "dependencies": {
- "@analytics/google-analytics": "^0.5.3",
- "@macfja/svelte-persistent-store": "^1.3.0",
- "analytics": "^0.8.1",
+ "@analytics/google-analytics": "0.5.3",
+ "@macfja/svelte-persistent-store": "1.3.0",
+ "analytics": "0.8.1",
  "daisyui": "2.17.0",
- "js-base64": "^3.7.2",
+ "js-base64": "3.7.2",
  "mermaid": "9.1.3",
- "moment": "^2.29.3",
- "monaco-editor": "^0.33.0",
- "monaco-mermaid": "^1.0.6",
+ "moment": "2.29.4",
+ "monaco-editor": "0.33.0",
+ "monaco-mermaid": "1.0.6",
  "pako": "2.0.4",
- "random-word-slugs": "^0.1.6"
+ "random-word-slugs": "0.1.6"
  },
  "lint-staged": {
  "*.{ts,svelte,js,css,md,json}": [

src/global.d.ts

@@ -1 +1,15 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 /// <reference types="@sveltejs/kit" />
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+
+declare global {
+ namespace jest {
+ interface Matchers<R = void>
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
+ }
+}

src/hooks.ts

@@ -1,4 +1,4 @@
-import type { Handle } from '@sveltejs/kit/types/hooks';
+import type { Handle } from '@sveltejs/kit';
 
 export const handle: Handle = async ({ event, resolve }) => {
  const response = await resolve(event, {

src/lib/components/card/__snapshots__/card.test.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`card.svelte > mounts 1`] = `"<div><div class=\\"card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl\\"><div class=\\"bg-primary p-2 pb-0 flex-none cursor-pointer\\"><div class=\\"flex justify-between\\"><div class=\\"flex cursor-default s-_wx1E_JHsCoF\\"><span class=\\"mr-2 font-semibold s-_wx1E_JHsCoF\\"><i class=\\"fas fa-chevron-right icon s-_wx1E_JHsCoF isOpen\\"></i> TabTest</span> <ul class=\\"tabs s-_wx1E_JHsCoF\\"><div class=\\"tab tab-lifted tab-active s-_wx1E_JHsCoF\\"><i class=\\"mr-1 undefined s-_wx1E_JHsCoF\\"></i> title1 </div><div class=\\"tab tab-lifted text-primary-content s-_wx1E_JHsCoF\\"><i class=\\"mr-1 undefined s-_wx1E_JHsCoF\\"></i> title2 </div></ul></div><!--<Tabs>--> <div class=\\"flex gap-x-4 items-center -mt-2\\"></div></div></div> <div class=\\"card-body p-0 flex-grow overflow-auto text-base-content\\"></div></div><!--<Card>--></div>"`;

src/lib/components/card/card.test.ts

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/svelte';
+import { describe, expect, it, afterEach } from 'vitest';
+import Card from './card.svelte';
+
+describe('card.svelte', () => {
+ // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
+ afterEach(() => cleanup());
+
+ it('mounts', () => {
+ const { container } = render(Card, {
+ title: 'TabTest',
+ tabs: [
+ { id: 't1', title: 'title1' },
+ { id: 't2', title: 'title2' }
+ ]
+ });
+ expect(container).toBeTruthy();
+ expect(container).toHaveTextContent('TabTest');
+ expect(container).toHaveTextContent('title1');
+ expect(container).toHaveTextContent('title2');
+ expect(container).not.toHaveTextContent('title3');
+ expect(container.innerHTML).toMatchSnapshot();
+ });
+});

src/lib/types.d.ts

@@ -43,7 +43,7 @@ export interface State {
 }
 
 export interface ValidatedState extends State {
- error: any;
+ error: unknown;
  errorMarkers: MarkerData[];
  serialized: string;
 }

src/lib/util/fileLoaders/gist.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -43,6 +44,7 @@ const getGistData = async (gistURL: string): Promise<GistData> => {
  }
  const currentItem = history[0];
  return {
+ // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
  url: `${html_url}/${currentItem.version}`,
  code,
  config,

src/lib/util/fileLoaders/loader.ts

@@ -23,6 +23,9 @@ export const loadDataFromUrl = async (): Promise<void> => {
  config = defaultState.mermaid;
  }
  if (!code) {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-call
  for (const [key, value] of searchParams.entries()) {
  if (key in loaders) {
  try {

src/lib/util/serde.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { serializeState, deserializeState, type SerdeType } from './serde';
+import { defaultState } from './state';
+import type { State } from '$lib/types';
+
+describe('Serde tests', () => {
+ const verifySerde = (state: State, serde?: SerdeType): string => {
+ const serialized = serializeState(state, serde);
+ const deserialized = deserializeState(serialized);
+ expect(deserialized).to.deep.equal(state);
+ return serialized;
+ };
+
+ it('should serialize and deserialize with default serde', () => {
+ expect(verifySerde(defaultState)).toMatchInlineSnapshot(
+ '"pako:eNpVkM1qw0AMhF9F6JRC_AI-FBo7ySXQQnPz5iC8cnZp9oe1TAm2373rmEKik5j5ZhAasQ2ascRromjgXCsPeT6ayiTbi6P-AkXxPh1ZwAXP9wl2m2OA3oQYrb--rfxugaAaTwvGIMb6n3m1qkf-0_MEdXOiKCFenp3zb5hg39gvk-tfHZM4pw5NR2VHRUsJKkoPBLfoODmyOp8-LopCMexYYZlXzR0NN1Go_JzRIWoS3msrIWGuuvW8RRokfN99i6Wkgf-h2lL-hFvF-Q9-YFyS"'
+ );
+ });
+
+ it('should serialize and deserialize with base64 serde', () => {
+ expect(verifySerde(defaultState, 'base64')).toMatchInlineSnapshot(
+ '"base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cbiAgIiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsInVwZGF0ZUVkaXRvciI6ZmFsc2UsImF1dG9TeW5jIjp0cnVlLCJ1cGRhdGVEaWFncmFtIjp0cnVlfQ"'
+ );
+ });
+
+ it('should serialize and deserialize with pako serde', () => {
+ expect(verifySerde(defaultState, 'pako')).toMatchInlineSnapshot(
+ '"pako:eNpVkM1qw0AMhF9F6JRC_AI-FBo7ySXQQnPz5iC8cnZp9oe1TAm2373rmEKik5j5ZhAasQ2ascRromjgXCsPeT6ayiTbi6P-AkXxPh1ZwAXP9wl2m2OA3oQYrb--rfxugaAaTwvGIMb6n3m1qkf-0_MEdXOiKCFenp3zb5hg39gvk-tfHZM4pw5NR2VHRUsJKkoPBLfoODmyOp8-LopCMexYYZlXzR0NN1Go_JzRIWoS3msrIWGuuvW8RRokfN99i6Wkgf-h2lL-hFvF-Q9-YFyS"'
+ );
+ });
+
+ it('should throw error for unrecognized serde', () => {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ expect(() => serializeState(defaultState, 'unknown')).toThrowError(
+ 'Unknown serde type: unknown'
+ );
+ expect(() => deserializeState('unknown:hello')).toThrowError('Unknown serde type: unknown');
+ });
+});