Add dom testing

Author: sidharthv96

.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',

.prettierignore

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

package.json

@@ -13,6 +13,7 @@
 		"pre-commit": "lint-staged",
 		"postinstall": "husky install; cypress cache prune",
 		"test:unit": "vitest",
+		"test:ui": "vitest --ui",
 		"test:coverage": "vitest run --coverage",
 		"test:browser": "cypress run",
 		"test": "test:unit && test:browser",
@@ -28,6 +29,7 @@
 		"@types/pako": "^1.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
+		"@vitest/ui": "^0.17.0",
 		"autoprefixer": "^10.4.7",
 		"c8": "^7.11.3",
 		"chai": "^4.3.6",
@@ -39,27 +41,26 @@
 		"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",
+		"eslint-plugin-vitest": "^0.0.8",
 		"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",
 		"prettier": "~2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.48.0",
-		"svelte-preprocess": "4.10.7",
+		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.1.4",
 		"tslib": "^2.4.0",
 		"typescript": "^4.7.4",
 		"vite": "^2.9.13",
-		"vitest": "^0.17.0"
+		"vitest": "^0.17.0",
+		"vitest-svelte-kit": "^0.0.6"
 	},
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",

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/tests/setup.ts

@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);

tsconfig.json

@@ -8,6 +8,8 @@
 		"static/**/*.js"
 	],
 	"compilerOptions": {
+		"lib": ["ESNext", "dom"],
+		"resolveJsonModule": true,
 		"allowSyntheticDefaultImports": true,
 		"types": ["vitest/importMeta"]
 	},

vite.config.js

@@ -11,7 +11,7 @@ const config = {
 		environment: 'jsdom',
 		// in-source testing
 		includeSource: ['src/**/*.{js,ts,svelte}'],
-		// setupFiles: ['./src/tests/setup.ts'],
+		setupFiles: ['./src/tests/setup.ts'],
 		coverage: {
 			exclude: ['src/mocks', '.svelte-kit', 'src/**/*.test.ts'],
 			reporter: ['text', 'json', 'html', 'lcov']