Add vitest

.github/workflows/tests.yml

@@ -1,4 +1,4 @@
-name: Cypress Tests
+name: Tests
 
 on:
   pull_request:
@@ -36,6 +36,9 @@ jobs:
           yarn build
           yarn lint
 
+      - name: Unit Tests
+        run: yarn test:unit
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run

package.json

@@ -12,18 +12,24 @@
 		"format": "prettier --write --cache --plugin-search-dir=. .",
 		"pre-commit": "lint-staged",
 		"postinstall": "husky install; cypress cache prune",
-		"test": "cypress run",
+		"test:unit": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"test:browser": "cypress run",
+		"test": "test:unit && test:browser",
 		"cy": "cypress open"
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
 		"@sveltejs/adapter-static": "1.0.0-next.34",
 		"@sveltejs/kit": "1.0.0-next.359",
+		"@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": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
 		"autoprefixer": "^10.4.7",
+		"c8": "^7.11.3",
 		"chai": "^4.3.6",
 		"cssnano": "^5.1.12",
 		"cy-verify-downloads": "^0.1.8",
@@ -38,8 +44,10 @@
 		"eslint-plugin-svelte3": "^3.4.1",
 		"eslint-plugin-tailwindcss": "^3.6.0",
 		"husky": "^8.0.1",
+		"jsdom": "^20.0.0",
 		"lint-staged": "13.0.3",
 		"mocha": "^10.0.0",
+		"msw": "^0.43.0",
 		"node-html-parser": "^5.3.3",
 		"postcss": "^8.4.14",
 		"postcss-load-config": "^4.0.1",
@@ -50,7 +58,8 @@
 		"tailwindcss": "^3.1.4",
 		"tslib": "^2.4.0",
 		"typescript": "^4.7.4",
-		"vite": "^2.9.13"
+		"vite": "^2.9.13",
+		"vitest": "^0.17.0"
 	},
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",

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');
+	});
+});

src/lib/util/serde.ts

@@ -28,18 +28,20 @@ export const pakoSerde: Serde = {
 	}
 };
 
-const serdes: { [key: string]: Serde } = {
+export type SerdeType = 'base64' | 'pako';
+
+const serdes: { [key in SerdeType]: Serde } = {
 	base64: base64Serde,
 	pako: pakoSerde
 };
 
-type SerdeType = keyof typeof serdes;
-
-export const serializeState = (state: State): string => {
+export const serializeState = (state: State, serde: SerdeType = 'pako'): string => {
+	if (serdes[serde] === undefined) {
+		throw new Error(`Unknown serde type: ${serde}`);
+	}
 	const json = JSON.stringify(state);
-	const defaultSerde: SerdeType = 'pako';
-	const serialized = serdes[defaultSerde].serialize(json);
-	return `${defaultSerde}:${serialized}`;
+	const serialized = serdes[serde].serialize(json);
+	return `${serde}:${serialized}`;
 };
 
 export const deserializeState = (state: string): State => {
@@ -48,7 +50,7 @@ export const deserializeState = (state: string): State => {
 		let tempType: string;
 		[tempType, serialized] = state.split(':');
 		if (tempType in serdes) {
-			type = tempType;
+			type = tempType as SerdeType;
 		} else {
 			throw new Error(`Unknown serde type: ${tempType}`);
 		}

tsconfig.json

@@ -8,7 +8,8 @@
 		"static/**/*.js"
 	],
 	"compilerOptions": {
-		"allowSyntheticDefaultImports": true
+		"allowSyntheticDefaultImports": true,
+		"types": ["vitest/importMeta"]
 	},
 	"extends": "./.svelte-kit/tsconfig.json"
 }

vite.config.js

@@ -3,6 +3,19 @@ import { sveltekit } from '@sveltejs/kit/vite';
 const config = {
 	plugins: [sveltekit()],
 	envPrefix: 'MERMAID_',
-	optimizeDeps: { include: ['mermaid'] }
+	optimizeDeps: { include: ['mermaid'] },
+	ssr: {
+		noExternal: ['@macfja/svelte-persistent-store']
+	},
+	test: {
+		environment: 'jsdom',
+		// in-source testing
+		includeSource: ['src/**/*.{js,ts,svelte}'],
+		// setupFiles: ['./src/tests/setup.ts'],
+		coverage: {
+			exclude: ['src/mocks', '.svelte-kit', 'src/**/*.test.ts'],
+			reporter: ['text', 'json', 'html', 'lcov']
+		}
+	}
 };
 export default config;