Skip to content

Commit 56a83bd

Browse files
alexandfoxalexandfox
committed
update tests
1 parent a0fda48 commit 56a83bd

File tree

5 files changed

+208
-4
lines changed

5 files changed

+208
-4
lines changed

‎code/frameworks/sveltekit/src/mocks/app/state.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { getContext, setContext } from 'svelte';
2-
import { state } from 'svelte/reactivity';
32

43
function createMockedStateValue<T>(contextName: string, defaultValue?: T) {
5-
let value = state.raw(getContext(contextName) ?? defaultValue);
4+
let value = $state.raw(getContext(contextName) ?? defaultValue);
65

76
return {
87
get current() {
@@ -29,12 +28,12 @@ function createPageState() {
2928
state: {}
3029
};
3130

32-
return state.raw(contextValue);
31+
return $state.raw(contextValue);
3332
}
3433

3534
function createNavigatingState() {
3635
const contextValue = getContext('navigating-state-ctx') ?? null;
37-
return state.raw(contextValue);
36+
return $state.raw(contextValue);
3837
}
3938

4039
function createUpdatedState() {

‎code/frameworks/sveltekit/src/preview.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { action } from 'storybook/actions';
44
import { onMount } from 'svelte';
55

66
import { setAfterNavigateArgument } from './mocks/app/navigation';
7+
import { setPageState, setNavigatingState, setUpdatedState } from './mocks/app/state';
78
import { setNavigating, setPage, setUpdated } from './mocks/app/stores';
89
import type { HrefConfig, NormalizedHrefConfig, SvelteKitParameters } from './types';
910

@@ -16,9 +17,14 @@ const normalizeHrefConfig = (hrefConfig: HrefConfig): NormalizedHrefConfig => {
1617

1718
const svelteKitMocksDecorator: Decorator = (Story, ctx) => {
1819
const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
20+
// Support for $app/stores
1921
setPage(svelteKitParameters?.stores?.page);
2022
setNavigating(svelteKitParameters?.stores?.navigating);
2123
setUpdated(svelteKitParameters?.stores?.updated);
24+
// Support for $app/state (Svelte 5 runes)
25+
setPageState(svelteKitParameters?.state?.page);
26+
setNavigatingState(svelteKitParameters?.state?.navigating);
27+
setUpdatedState(svelteKitParameters?.state?.updated);
2228
setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
2329

2430
onMount(() => {

‎code/frameworks/sveltekit/src/types.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ export type SvelteKitParameters = Partial<{
6161
navigating: Record<string, any>;
6262
updated: boolean;
6363
};
64+
state: {
65+
page: Record<string, any>;
66+
navigating: Record<string, any> | null;
67+
updated: boolean;
68+
};
6469
navigation: {
6570
goto: typeof goto;
6671
invalidate: typeof invalidate;

‎code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/State.svelte

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
import { page, navigating, updated } from '$app/state';
3+
4+
// Test reactive access to page properties
5+
const pageUrl = $derived(page.url);
6+
const pageParams = $derived(page.params);
7+
const pageData = $derived(page.data);
8+
const pageStatus = $derived(page.status);
9+
const pageError = $derived(page.error);
10+
const pageForm = $derived(page.form);
11+
const pageState = $derived(page.state);
12+
13+
// Test navigating state
14+
const isNavigating = $derived(navigating);
15+
16+
// Test updated state
17+
const isUpdated = $derived(updated.current);
18+
19+
// Trigger check for demonstration
20+
updated.check();
21+
</script>
22+
23+
<h2>$app/state Module Test</h2>
24+
25+
<h3>Page State</h3>
26+
<pre>URL: {JSON.stringify(pageUrl, null, 2)}</pre>
27+
<pre>Params: {JSON.stringify(pageParams, null, 2)}</pre>
28+
<pre>Data: {JSON.stringify(pageData, null, 2)}</pre>
29+
<pre>Status: {pageStatus}</pre>
30+
<pre>Error: {JSON.stringify(pageError, null, 2)}</pre>
31+
<pre>Form: {JSON.stringify(pageForm, null, 2)}</pre>
32+
<pre>State: {JSON.stringify(pageState, null, 2)}</pre>
33+
34+
<h3>Navigating State</h3>
35+
<pre>{JSON.stringify(isNavigating, null, 2)}</pre>
36+
37+
<h3>Updated State</h3>
38+
<pre>Current: {isUpdated}</pre>

‎code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import State from './State.svelte';
2+
3+
export default {
4+
title: 'stories/frameworks/sveltekit/modules/state',
5+
component: State,
6+
};
7+
8+
export const DefaultState = {};
9+
10+
export const WithPageData = {
11+
parameters: {
12+
sveltekit_experimental: {
13+
state: {
14+
page: {
15+
url: new URL('https://example.com/test?query=value'),
16+
params: {
17+
id: '123',
18+
slug: 'test-slug'
19+
},
20+
data: {
21+
user: {
22+
name: 'Test User',
23+
email: '[email protected]'
24+
},
25+
posts: ['Post 1', 'Post 2']
26+
},
27+
status: 200,
28+
error: null,
29+
form: null,
30+
state: {
31+
counter: 42
32+
}
33+
},
34+
},
35+
},
36+
},
37+
};
38+
39+
export const WithNavigating = {
40+
parameters: {
41+
sveltekit_experimental: {
42+
state: {
43+
navigating: {
44+
from: {
45+
params: {},
46+
route: { id: '/' },
47+
url: new URL('https://example.com/')
48+
},
49+
to: {
50+
params: { id: '456' },
51+
route: { id: '/posts/[id]' },
52+
url: new URL('https://example.com/posts/456')
53+
},
54+
type: 'link',
55+
willUnload: false,
56+
delta: 1,
57+
complete: Promise.resolve()
58+
},
59+
},
60+
},
61+
},
62+
};
63+
64+
export const WithUpdated = {
65+
parameters: {
66+
sveltekit_experimental: {
67+
state: {
68+
updated: true,
69+
},
70+
},
71+
},
72+
};
73+
74+
export const WithPageError = {
75+
parameters: {
76+
sveltekit_experimental: {
77+
state: {
78+
page: {
79+
url: new URL('https://example.com/error'),
80+
params: {},
81+
data: null,
82+
status: 404,
83+
error: {
84+
message: 'Page not found',
85+
status: 404
86+
},
87+
form: null,
88+
state: {}
89+
},
90+
},
91+
},
92+
},
93+
};
94+
95+
export const WithFormData = {
96+
parameters: {
97+
sveltekit_experimental: {
98+
state: {
99+
page: {
100+
url: new URL('https://example.com/contact'),
101+
params: {},
102+
data: {},
103+
status: 200,
104+
error: null,
105+
form: {
106+
success: true,
107+
message: 'Form submitted successfully'
108+
},
109+
state: {}
110+
},
111+
},
112+
},
113+
},
114+
};
115+
116+
export const CompleteState = {
117+
parameters: {
118+
sveltekit_experimental: {
119+
state: {
120+
page: {
121+
url: new URL('https://example.com/complete?test=true'),
122+
params: {
123+
id: '789',
124+
category: 'tech'
125+
},
126+
data: {
127+
title: 'Complete Test',
128+
content: 'This is a complete state test'
129+
},
130+
status: 200,
131+
error: null,
132+
form: {
133+
submitted: true
134+
},
135+
state: {
136+
theme: 'dark',
137+
sidebarOpen: true
138+
}
139+
},
140+
navigating: {
141+
from: null,
142+
to: {
143+
params: { id: '789' },
144+
route: { id: '/posts/[id]' },
145+
url: new URL('https://example.com/posts/789')
146+
},
147+
type: 'goto',
148+
willUnload: false,
149+
delta: null,
150+
complete: Promise.resolve()
151+
},
152+
updated: false,
153+
},
154+
},
155+
},
156+
};

0 commit comments

Comments
 (0)