test: add tests for client-side handleFetch

SomaticIT · SomaticIT · commit 7370c2b96e52 · 2025-05-26T23:03:25.000+02:00
diff --git a/packages/kit/test/apps/client-fetch/.gitignore b/packages/kit/test/apps/client-fetch/.gitignore
@@ -0,0 +1,2 @@
+.custom-out-dir
+!.env
diff --git a/packages/kit/test/apps/client-fetch/package.json b/packages/kit/test/apps/client-fetch/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "test-embed",
+	"private": true,
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync",
+		"check": "svelte-kit sync && tsc && svelte-check",
+		"test": "pnpm test:dev && pnpm test:build",
+		"test:dev": "cross-env DEV=true playwright test",
+		"test:build": "playwright test"
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "workspace:^",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"cross-env": "^7.0.3",
+		"svelte": "^5.23.1",
+		"svelte-check": "^4.1.1",
+		"typescript": "^5.5.4",
+		"vite": "^6.2.6"
+	},
+	"type": "module"
+}
diff --git a/packages/kit/test/apps/client-fetch/playwright.config.js b/packages/kit/test/apps/client-fetch/playwright.config.js
@@ -0,0 +1 @@
+export { config as default } from '../../utils.js';
diff --git a/packages/kit/test/apps/client-fetch/src/app.html b/packages/kit/test/apps/client-fetch/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/kit/test/apps/client-fetch/src/hooks.client.js b/packages/kit/test/apps/client-fetch/src/hooks.client.js
@@ -0,0 +1,7 @@
+export const handleFetch = async ({ request, fetch }) => {
+	if (request.url.startsWith(location.origin)) {
+		request.headers.set('X-Client-Header', 'imtheclient');
+	}
+
+	return await fetch(request);
+};
diff --git a/packages/kit/test/apps/client-fetch/src/routes/+layout.svelte b/packages/kit/test/apps/client-fetch/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { setup } from '../../../../setup.js';
+
+	setup();
+</script>
+
+<slot />
diff --git a/packages/kit/test/apps/client-fetch/src/routes/+page.svelte b/packages/kit/test/apps/client-fetch/src/routes/+page.svelte
@@ -0,0 +1 @@
+<a href="/load" class="navigate-to-load">load</a>
diff --git a/packages/kit/test/apps/client-fetch/src/routes/api/+server.js b/packages/kit/test/apps/client-fetch/src/routes/api/+server.js
@@ -0,0 +1,7 @@
+import { json } from '@sveltejs/kit';
+
+export function GET({ request }) {
+	const header = request.headers.get('x-client-header') ?? 'empty';
+
+	return json({ header });
+}
diff --git a/packages/kit/test/apps/client-fetch/src/routes/fetch/+page.svelte b/packages/kit/test/apps/client-fetch/src/routes/fetch/+page.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let header = $state('loading');
+
+	onMount(async () => {
+		const res = await fetch('/api');
+		const data = await res.json();
+		header = data.header;
+	});
+</script>
+
+<div data-testid="header">{header}</div>
diff --git a/packages/kit/test/apps/client-fetch/src/routes/load/+page.server.js b/packages/kit/test/apps/client-fetch/src/routes/load/+page.server.js
@@ -0,0 +1,4 @@
+export const load = ({ request }) => {
+	const header = request.headers.get('x-client-header') ?? 'empty';
+	return { header };
+};
diff --git a/packages/kit/test/apps/client-fetch/src/routes/load/+page.svelte b/packages/kit/test/apps/client-fetch/src/routes/load/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { data } = $props();
+</script>
+
+<div data-testid="header">{data.header}</div>
diff --git a/packages/kit/test/apps/client-fetch/svelte.config.js b/packages/kit/test/apps/client-fetch/svelte.config.js
@@ -0,0 +1,4 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {};
+
+export default config;
diff --git a/packages/kit/test/apps/client-fetch/test/test.js b/packages/kit/test/apps/client-fetch/test/test.js
@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test } from '../../../utils.js';
+
+/** @typedef {import('@playwright/test').Response} Response */
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('client-fetch', () => {
+	test('should use client handleFetch for client-side load requests', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		await page.goto('/');
+		await page.click('.navigate-to-load');
+
+		if (javaScriptEnabled) {
+			await expect(page.getByTestId('header')).toHaveText('imtheclient');
+		} else {
+			await expect(page.getByTestId('header')).toHaveText('empty');
+		}
+	});
+
+	test('should not use client handleFetch for server-side load requests', async ({ page }) => {
+		await page.goto('/load');
+		await expect(page.getByTestId('header')).toHaveText('empty');
+	});
+
+	test('should use client handleFetch for fetch requests', async ({ page, javaScriptEnabled }) => {
+		await page.goto('/fetch');
+
+		if (javaScriptEnabled) {
+			await expect(page.getByTestId('header')).toHaveText('imtheclient');
+		} else {
+			await expect(page.getByTestId('header')).toHaveText('loading');
+		}
+	});
+});
diff --git a/packages/kit/test/apps/client-fetch/tsconfig.json b/packages/kit/test/apps/client-fetch/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"noEmit": true,
+		"resolveJsonModule": true
+	},
+	"extends": "./.svelte-kit/tsconfig.json"
+}
diff --git a/packages/kit/test/apps/client-fetch/vite.config.js b/packages/kit/test/apps/client-fetch/vite.config.js
@@ -0,0 +1,18 @@
+import * as path from 'node:path';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	build: {
+		minify: false
+	},
+	clearScreen: false,
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			allow: [path.resolve('../../../src')]
+		}
+	}
+};
+
+export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { config as default } from '../../utils.js';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<a href="/load" class="navigate-to-load">load</a>`