add browser testing

.github/workflows/lint.yml

@@ -16,6 +16,18 @@ jobs:
         with:
           cache: yarn
 
+      - name: Get Yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - name: Setup Yarn cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install project dependencies
         run: yarn install
 

.github/workflows/test.yml

@@ -16,8 +16,29 @@ jobs:
         with:
           cache: yarn
 
+      - name: Get Yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - name: Setup Yarn cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install project dependencies
         run: yarn install
 
+      - name: Setup Playwright cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright
+
+      - name: Install Playwright browsers
+        run: yarn run playwright install --with-deps
+
       - name: Check
         run: yarn run test:unit

package.json

@@ -60,19 +60,21 @@
 		"@types/node": "^22.9.1",
 		"@typescript-eslint/eslint-plugin": "^8.15.0",
 		"@typescript-eslint/parser": "^8.15.0",
-		"@vitest/coverage-v8": "^3.0.4",
+		"@vitest/browser": "^3.0.5",
+		"@vitest/coverage-v8": "^3.0.5",
 		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.0",
 		"pino-pretty": "^13.0.0",
+		"playwright": "^1.50.1",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.3.1",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.1.4",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
 		"vite": "^6.0.0",
-		"vitest": "^3.0.4"
+		"vitest": "^3.0.5"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",

src/lib/logger.ts

@@ -1,7 +1,7 @@
 import * as Pino from 'pino';
 import { dev } from '$app/environment';
 
-const pino: typeof Pino.pino = typeof Pino === 'function' ? (Pino as any) : Pino.default;
+const pino: typeof Pino.pino = typeof Pino === 'function' ? Pino : Pino.default;
 export const logger: Pino.Logger = pino({
 	transport: dev ? { target: 'pino-pretty' } : undefined,
 	level: dev ? 'debug' : 'info',

tests/test-logger.ts

@@ -1,18 +1,24 @@
-import { destination, type Level } from 'pino';
+import type { Level } from 'pino';
 
-const METADATA = Symbol.for('pino.metadata');
+class DebugTransport {
+	#data: string[] = [];
 
-type PinoMetadata = ReturnType<typeof destination> & {
-	[METADATA]: boolean;
-	lastLevel?: Level;
-	lastMsg?: string;
-	lastObj?: unknown;
-	lastTime?: number;
-};
+	lastLevel?: Level = undefined;
+	lastMsg?: string = undefined;
+	lastObj?: unknown = undefined;
+	lastTime?: number = undefined;
 
-export const testTransportFactory = () => {
-	const dest = destination('/dev/null') as PinoMetadata;
-	dest[METADATA] = true;
+	get [Symbol.for('pino.metadata')]() {
+		return true;
+	}
 
-	return dest;
-};
+	get writable() {
+		return true;
+	}
+
+	write(datum: string): void {
+		this.#data.push(datum);
+	}
+}
+
+export const testTransportFactory = () => new DebugTransport();

tests/utils/browser.test.ts

@@ -1,7 +1,7 @@
 import { sanitizeHtml } from '$lib/utils/browser';
 import { describe, expect, it } from 'vitest';
 
-describe.skipIf(typeof window === 'undefined')(sanitizeHtml.name, async () => {
+describe(sanitizeHtml.name, async () => {
 	const CASES = {
 		'should remove tag': { html: 'hello <a href="https://example.org/">world</a>', expected: 'hello world' },
 	} satisfies Record<string, { html: string | undefined | null; expected: string }>;

tests/utils/misc.test.ts

@@ -7,7 +7,7 @@ describe(timeout.name, () => {
 		const result = await timeout(80);
 		const end = Date.now();
 
-		expect(end - start).to.be.approximately(80, 2);
+		expect(end - start).to.be.approximately(80, 5);
 		expect(result).to.equal(undefined);
 	});
 
@@ -16,7 +16,7 @@ describe(timeout.name, () => {
 		const result = await timeout(120, { foo: 'bar' });
 		const end = Date.now();
 
-		expect(end - start).to.be.approximately(120, 2);
+		expect(end - start).to.be.approximately(120, 5);
 		expect(result).to.deep.equal({ foo: 'bar' });
 	});
 });
@@ -64,9 +64,9 @@ describe(backoffRetry.name, () => {
 		await expect(backoffRetry(factory, 10, 50, 3, JitterMode.None)).resolves.to.equal('foo');
 		expect(count).to.equals(3);
 		expect(laps).to.have.length(3);
-		expect(laps[0]).to.be.approximately(0, 2);
-		expect(laps[1]).to.be.approximately(10, 2);
-		expect(laps[2]).to.be.approximately(20, 2);
+		expect(laps[0]).to.be.approximately(0, 5);
+		expect(laps[1]).to.be.approximately(10, 5);
+		expect(laps[2]).to.be.approximately(20, 5);
 	});
 
 	it('should not wait longer than cap', async () => {
@@ -85,9 +85,9 @@ describe(backoffRetry.name, () => {
 		await expect(backoffRetry(factory, 10, 15, 3, JitterMode.None)).resolves.to.equal('foo');
 		expect(count).to.equals(3);
 		expect(laps).to.have.length(3);
-		expect(laps[0]).to.be.approximately(0, 2);
-		expect(laps[1]).to.be.approximately(10, 2);
-		expect(laps[2]).to.be.approximately(15, 2);
+		expect(laps[0]).to.be.approximately(0, 5);
+		expect(laps[1]).to.be.approximately(10, 5);
+		expect(laps[2]).to.be.approximately(15, 5);
 	});
 
 	it('should not invoke the function more than max attempts times', async () => {
@@ -106,7 +106,7 @@ describe(backoffRetry.name, () => {
 		await expect(backoffRetry(factory, 10, 15, 2, JitterMode.None)).resolves.to.equal(undefined);
 		expect(count).to.equals(2);
 		expect(laps).to.have.length(2);
-		expect(laps[0]).to.be.approximately(0, 2);
-		expect(laps[1]).to.be.approximately(10, 2);
+		expect(laps[0]).to.be.approximately(0, 5);
+		expect(laps[1]).to.be.approximately(10, 5);
 	});
 });

vitest.workspace.ts

@@ -0,0 +1,26 @@
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace([
+	{
+		extends: './vitest.config.ts',
+		test: {
+			include: ['tests/**/*.{test,spec}.ts', '!tests/**/*.browser.{test,spec}.ts', '!tests/**/browser.{test,spec}.ts'],
+			name: 'unit',
+			environment: 'node',
+		},
+	},
+	{
+		extends: './vitest.config.ts',
+		test: {
+			include: ['tests/**/*.{test,spec}.ts', '!tests/**/*.server.{test,spec}.ts'],
+			name: 'browser',
+			browser: {
+				enabled: true,
+				provider: 'playwright',
+				headless: true,
+				screenshotFailures: false,
+				instances: [{ browser: 'chromium' }],
+			},
+		},
+	},
+]);