refactor: ♻️ new testing setup

Author: spences10

.github/workflows/unit-test.yml

@@ -28,6 +28,9 @@ jobs:
           version: '^8.0.0'
       - name: Install dependencies
         run: pnpm recursive install
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: packages/sveltekit-embed
       - name: Run unit tests
         run: pnpm run test:ci
         working-directory: packages/sveltekit-embed

packages/sveltekit-embed/README.md

@@ -1,3 +1,3 @@
 # SvelteKit Embed 🌱
 
-[docs](../../README.md)
+[docs](../../README.md)

packages/sveltekit-embed/tests/test.ts renamed to packages/sveltekit-embed/e2e/test.ts

@@ -46,31 +46,38 @@
 		"svelte": "^4.0.0 || ^5.0.0"
 	},
 	"devDependencies": {
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
 		"@playwright/test": "^1.52.0",
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.1",
 		"@sveltejs/package": "^2.3.11",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@testing-library/svelte": "^5.2.7",
-		"@types/eslint": "^9.6.1",
-		"@typescript-eslint/eslint-plugin": "^8.31.0",
-		"@typescript-eslint/parser": "^8.31.0",
-		"eslint": "^9.25.1",
-		"eslint-config-prettier": "^10.1.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"@vitest/browser": "^3.1.4",
+		"eslint": "^9.27.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.0",
 		"fathom-client": "^3.7.2",
+		"globals": "^16.1.0",
 		"jsdom": "^26.1.0",
 		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.2",
-		"svelte": "5.28.2",
-		"svelte-check": "^4.1.6",
-		"tslib": "^2.8.1",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.12",
+		"svelte": "5.33.1",
+		"svelte-check": "^4.2.1",
 		"typescript": "^5.8.3",
-		"vite": "^6.3.3",
-		"vitest": "^3.1.2"
+		"typescript-eslint": "^8.32.1",
+		"vite": "^6.3.5",
+		"vitest": "^3.1.4",
+		"vitest-browser-svelte": "^0.1.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module"
+	"type": "module",
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
+	}
 }

packages/sveltekit-embed/package.json

@@ -1,12 +1,9 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'npm run build && PORT=4173 node build/index.js',
 		port: 4173,
 	},
-	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-};
-
-export default config;
+	testDir: 'e2e',
+});

packages/sveltekit-embed/playwright.config.ts

@@ -1,13 +1,11 @@
 import AnchorFm from '$lib/components/anchor-fm.svelte';
-import { cleanup, render } from '@testing-library/svelte/svelte5';
-import { afterEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
 
 let episodeUrl =
 	'purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a';
 
 describe('AnchorFm', () => {
-	afterEach(() => cleanup());
-
 	it('mounts with episode url', async () => {
 		const { container } = render(AnchorFm, {
 			episodeUrl,
@@ -23,7 +21,7 @@ describe('AnchorFm', () => {
 		});
 		const iframe = getByTestId('anchor-fm-episode');
 		const expected_src = `https://anchor.fm/${episodeUrl}`;
-		expect(iframe.getAttribute('src')).toBe(expected_src);
+		await expect.element(iframe).toHaveAttribute('src', expected_src);
 	});
 
 	it('mounts with custom height and width', async () => {
@@ -45,6 +43,6 @@ describe('AnchorFm', () => {
 			disable_observer: false,
 		});
 		const general_observer = getByTestId('general-observer');
-		expect(general_observer).toBeTruthy();
+		await expect.element(general_observer).toBeInTheDocument();
 	});
 });

packages/sveltekit-embed/src/index.test.ts

@@ -1,10 +1,8 @@
-import { cleanup, render } from '@testing-library/svelte/svelte5';
-import { afterEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
 import Bluesky from './bluesky.svelte';
 
 describe('Bluesky', () => {
-	afterEach(() => cleanup());
-
 	const test_post_id =
 		'did:plc:nlvjelw3dy3pddq7qoglleko/app.bsky.feed.post/3l6ud34tnwn2k';
 
@@ -20,7 +18,7 @@ describe('Bluesky', () => {
 
 		const iframe = getByTestId('bluesky-embed');
 		const expected_src = `https://embed.bsky.app/embed/${test_post_id}`;
-		expect(iframe.getAttribute('src')).toBe(expected_src);
+		await expect.element(iframe).toHaveAttribute('src', expected_src);
 	});
 
 	it('renders with custom width', async () => {
@@ -30,7 +28,7 @@ describe('Bluesky', () => {
 		});
 
 		const iframe = getByTestId('bluesky-embed');
-		expect(iframe.getAttribute('width')).toBe('50%');
+		await expect.element(iframe).toHaveAttribute('width', '50%');
 	});
 
 	it('applies custom iframe styles', async () => {
@@ -41,7 +39,8 @@ describe('Bluesky', () => {
 		});
 
 		const iframe = getByTestId('bluesky-embed');
-		const style_text = iframe.style.cssText.toLowerCase();
+		const element = iframe.element();
+		const style_text = element.style.cssText.toLowerCase();
 		expect(style_text).toContain('border-radius: 8px');
 		expect(style_text).toContain('background: rgb(240, 240, 240)');
 	});
@@ -52,15 +51,16 @@ describe('Bluesky', () => {
 		});
 
 		const iframe = getByTestId('bluesky-embed');
-		const style_text = iframe.style.cssText.toLowerCase();
+		const element = iframe.element();
+		const style_text = element.style.cssText.toLowerCase();
 		expect(style_text).toContain('position: absolute');
 		expect(style_text).toContain('top: 0px');
 		expect(style_text).toContain('left: 0px');
 		expect(style_text).toContain('width: 100%');
 		expect(style_text).toContain('height: 100%');
 		expect(style_text).toContain('border: 0px');
-		expect(iframe.getAttribute('frameborder')).toBe('0');
-		expect(iframe.getAttribute('scrolling')).toBe('no');
+		await expect.element(iframe).toHaveAttribute('frameborder', '0');
+		await expect.element(iframe).toHaveAttribute('scrolling', 'no');
 	});
 
 	it('combines default and custom iframe styles correctly', async () => {
@@ -71,7 +71,8 @@ describe('Bluesky', () => {
 		});
 
 		const iframe = getByTestId('bluesky-embed');
-		const style_text = iframe.style.cssText.toLowerCase();
+		const element = iframe.element();
+		const style_text = element.style.cssText.toLowerCase();
 
 		// Check default styles are preserved
 		expect(style_text).toContain('position: absolute');
@@ -84,7 +85,7 @@ describe('Bluesky', () => {
 		expect(style_text).toContain('margin: 10px');
 	});
 
-	it('updates height when receiving message from iframe', () => {
+	it('updates height when receiving message from iframe', async () => {
 		const { getByTestId } = render(Bluesky, {
 			post_id: test_post_id,
 		});
@@ -97,6 +98,7 @@ describe('Bluesky', () => {
 		window.dispatchEvent(message_event);
 
 		const iframe = getByTestId('bluesky-embed');
-		expect(iframe.style.height).toBe('100%');
+		const element = iframe.element();
+		expect(element.style.height).toBe('100%');
 	});
 });

packages/sveltekit-embed/src/lib/components/anchor-fm.test.ts renamed to packages/sveltekit-embed/src/lib/components/anchor-fm.svelte.test.ts

@@ -1,12 +1,10 @@
 import Buzzsprout from '$lib/components/buzzsprout.svelte';
-import { cleanup, render } from '@testing-library/svelte/svelte5';
-import { afterEach, describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { describe, expect, it } from 'vitest';
 
 let buzzsproutId = '12345';
 
 describe('Buzzsprout', () => {
-	afterEach(() => cleanup());
-
 	it('mounts with buzzsproutId', async () => {
 		const { container } = render(Buzzsprout, {
 			buzzsproutId,
@@ -22,7 +20,7 @@ describe('Buzzsprout', () => {
 		});
 		const iframe = getByTestId('buzzsprout');
 		const expected_src = `https://www.buzzsprout.com/${buzzsproutId}?client_source=admin&iframe=true`;
-		expect(iframe.getAttribute('src')).toBe(expected_src);
+		await expect.element(iframe).toHaveAttribute('src', expected_src);
 	});
 
 	it('mounts with custom height and width', async () => {

packages/sveltekit-embed/src/lib/components/bluesky.test.ts renamed to packages/sveltekit-embed/src/lib/components/bluesky.svelte.test.ts

@@ -1,12 +1,10 @@
 import CodePen from '$lib/components/code-pen.svelte';
-import { cleanup, render } from '@testing-library/svelte/svelte5';
-import { afterEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
 
 let codePenId = 'abcde';
 
 describe('CodePen', () => {
-	afterEach(() => cleanup());
-
 	it('mounts', async () => {
 		const { container } = render(CodePen, {
 			codePenId,
@@ -22,22 +20,25 @@ describe('CodePen', () => {
 		});
 
 		const iframe = getByTitle(`codepen-${codePenId}`);
+		const element = iframe.element();
 
-		expect(iframe.getAttribute('src')).toContain(
+		expect(element.getAttribute('src')).toContain(
 			`codepen.io/team/codepen/embed`,
 		);
-		expect(iframe.getAttribute('src')).toContain(`/${codePenId}/`);
-		expect(iframe.getAttribute('src')).toContain(`height=500px`);
-		expect(iframe.getAttribute('src')).toContain(`theme-id=default`);
-		expect(iframe.getAttribute('src')).toContain(
+		expect(element.getAttribute('src')).toContain(`/${codePenId}/`);
+		expect(element.getAttribute('src')).toContain(`height=500px`);
+		expect(element.getAttribute('src')).toContain(`theme-id=default`);
+		expect(element.getAttribute('src')).toContain(
 			`default-tab=result`,
 		);
-		expect(iframe.getAttribute('src')).toContain(`editable=true`);
-		expect(iframe.getAttribute('src')).toContain('/preview');
-		expect(iframe.getAttribute('frameborder')).toBe('no');
-		expect(iframe.getAttribute('allowfullscreen')).toBe('');
-		expect(iframe.getAttribute('style')).toContain(`height: 500px`);
-		expect(iframe.getAttribute('style')).toContain(`width: 100%`);
+		expect(element.getAttribute('src')).toContain(`editable=true`);
+		expect(element.getAttribute('src')).toContain('/preview');
+		await expect.element(iframe).toHaveAttribute('frameborder', 'no');
+		await expect
+			.element(iframe)
+			.toHaveAttribute('allowfullscreen', '');
+		expect(element.getAttribute('style')).toContain(`height: 500px`);
+		expect(element.getAttribute('style')).toContain(`width: 100%`);
 	});
 
 	it('mounts with custom height and width', async () => {
@@ -58,6 +59,6 @@ describe('CodePen', () => {
 			disable_observer: false,
 		});
 		const general_observer = getByTestId('general-observer');
-		expect(general_observer).toBeTruthy();
+		await expect.element(general_observer).toBeInTheDocument();
 	});
 });