Skip to content

Commit 0518df8

Browse files
SomaticITSomaticIT
committed
test: add tests for client-side handleFetch
1 parent 32f4c46 commit 0518df8

16 files changed

+177
-0
lines changed

‎packages/kit/test/apps/client-fetch/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.custom-out-dir
2+
!.env

‎packages/kit/test/apps/client-fetch/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "test-embed",
3+
"private": true,
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"prepare": "svelte-kit sync",
10+
"check": "svelte-kit sync && tsc && svelte-check",
11+
"test": "pnpm test:dev && pnpm test:build",
12+
"test:dev": "cross-env DEV=true playwright test",
13+
"test:build": "playwright test"
14+
},
15+
"devDependencies": {
16+
"@sveltejs/kit": "workspace:^",
17+
"@sveltejs/vite-plugin-svelte": "^5.0.1",
18+
"cross-env": "^7.0.3",
19+
"svelte": "^5.23.1",
20+
"svelte-check": "^4.1.1",
21+
"typescript": "^5.5.4",
22+
"vite": "^6.2.6"
23+
},
24+
"type": "module"
25+
}

‎packages/kit/test/apps/client-fetch/playwright.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { config as default } from '../../utils.js';

‎packages/kit/test/apps/client-fetch/src/app.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
7+
%sveltekit.head%
8+
</head>
9+
<body>
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎packages/kit/test/apps/client-fetch/src/hooks.client.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const handleFetch = async ({ request, fetch }) => {
2+
if (request.url.startsWith(location.origin)) {
3+
request.headers.set('X-Client-Header', 'imtheclient');
4+
}
5+
6+
return await fetch(request);
7+
};

‎packages/kit/test/apps/client-fetch/src/routes/+layout.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
import { setup } from '../../../../setup.js';
3+
4+
setup();
5+
</script>
6+
7+
<slot />

‎packages/kit/test/apps/client-fetch/src/routes/+page.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a href="/load" class="navigate-to-load">load</a>

‎packages/kit/test/apps/client-fetch/src/routes/api/+server.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { json } from '@sveltejs/kit';
2+
3+
export function GET({ request }) {
4+
const header = request.headers.get('x-client-header') ?? 'empty';
5+
6+
return json({ header });
7+
}

‎packages/kit/test/apps/client-fetch/src/routes/fetch/+page.svelte

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import { onMount } from 'svelte';
3+
4+
let header = $state('loading');
5+
6+
onMount(async () => {
7+
const res = await fetch('/api');
8+
const data = await res.json();
9+
header = data.header;
10+
});
11+
</script>
12+
13+
<div data-testid="header">{header}</div>

‎packages/kit/test/apps/client-fetch/src/routes/load/+page.server.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const load = ({ request }) => {
2+
const header = request.headers.get('x-client-header') ?? 'empty';
3+
return { header };
4+
};

‎packages/kit/test/apps/client-fetch/src/routes/load/+page.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script>
2+
let { data } = $props();
3+
</script>
4+
5+
<div data-testid="header">{data.header}</div>

‎packages/kit/test/apps/client-fetch/svelte.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('@sveltejs/kit').Config} */
2+
const config = {};
3+
4+
export default config;

‎packages/kit/test/apps/client-fetch/test/test.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { expect } from '@playwright/test';
2+
import { test } from '../../../utils.js';
3+
4+
/** @typedef {import('@playwright/test').Response} Response */
5+
6+
test.describe.configure({ mode: 'parallel' });
7+
8+
test.describe('client-fetch', () => {
9+
test('should use client handleFetch for client-side load requests', async ({
10+
page,
11+
javaScriptEnabled
12+
}) => {
13+
await page.goto('/');
14+
await page.click('.navigate-to-load');
15+
16+
if (javaScriptEnabled) {
17+
await expect(page.getByTestId('header')).toHaveText('imtheclient');
18+
} else {
19+
await expect(page.getByTestId('header')).toHaveText('empty');
20+
}
21+
});
22+
23+
test('should not use client handleFetch for server-side load requests', async ({ page }) => {
24+
await page.goto('/load');
25+
await expect(page.getByTestId('header')).toHaveText('empty');
26+
});
27+
28+
test('should use client handleFetch for fetch requests', async ({ page, javaScriptEnabled }) => {
29+
await page.goto('/fetch');
30+
31+
if (javaScriptEnabled) {
32+
await expect(page.getByTestId('header')).toHaveText('imtheclient');
33+
} else {
34+
await expect(page.getByTestId('header')).toHaveText('loading');
35+
}
36+
});
37+
});

‎packages/kit/test/apps/client-fetch/tsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"checkJs": true,
5+
"esModuleInterop": true,
6+
"noEmit": true,
7+
"resolveJsonModule": true
8+
},
9+
"extends": "./.svelte-kit/tsconfig.json"
10+
}

‎packages/kit/test/apps/client-fetch/vite.config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as path from 'node:path';
2+
import { sveltekit } from '@sveltejs/kit/vite';
3+
4+
/** @type {import('vite').UserConfig} */
5+
const config = {
6+
build: {
7+
minify: false
8+
},
9+
clearScreen: false,
10+
plugins: [sveltekit()],
11+
server: {
12+
fs: {
13+
allow: [path.resolve('../../../src')]
14+
}
15+
}
16+
};
17+
18+
export default config;

‎pnpm-lock.yaml

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)