Add dom testing

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