Skip to content

Commit 040154e

Browse files
edison1105edison1105
committed
test: add useId helper test file
1 parent 7f91557 commit 040154e

File tree

1 file changed

+325
-0
lines changed

1 file changed

+325
-0
lines changed

‎packages/runtime-vapor/__tests__/helpers/useId.spec.ts‎

Lines changed: 325 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
1+
// TODO: Suspense is required to be implemented for this test to pass
2+
3+
// /**
4+
// * @vitest-environment jsdom
5+
// */
6+
// import {
7+
// type App,
8+
// Suspense,
9+
// createApp,
10+
// defineAsyncComponent,
11+
// defineComponent,
12+
// h,
13+
// onServerPrefetch,
14+
// useId,
15+
// } from 'vue'
16+
// import { renderToString } from '@vue/server-renderer'
17+
18+
// type FactoryRes = [App, Promise<any>[]]
19+
// type TestCaseFactory = () => FactoryRes | Promise<FactoryRes>
20+
21+
// async function runOnClient(factory: TestCaseFactory) {
22+
// const [app, deps] = await factory()
23+
// const root = document.createElement('div')
24+
// app.mount(root)
25+
// await Promise.all(deps)
26+
// await promiseWithDelay(null, 0)
27+
// return root.innerHTML
28+
// }
29+
30+
// async function runOnServer(factory: TestCaseFactory) {
31+
// const [app, _] = await factory()
32+
// return (await renderToString(app))
33+
// .replace(/<!--[\[\]]-->/g, '') // remove fragment wrappers
34+
// .trim()
35+
// }
36+
37+
// async function getOutput(factory: TestCaseFactory) {
38+
// const clientResult = await runOnClient(factory)
39+
// const serverResult = await runOnServer(factory)
40+
// expect(serverResult).toBe(clientResult)
41+
// return clientResult
42+
// }
43+
44+
// function promiseWithDelay(res: any, delay: number) {
45+
// return new Promise<any>(r => {
46+
// setTimeout(() => r(res), delay)
47+
// })
48+
// }
49+
50+
// const BasicComponentWithUseId = defineComponent({
51+
// setup() {
52+
// const id1 = useId()
53+
// const id2 = useId()
54+
// return () => [id1, ' ', id2]
55+
// },
56+
// })
57+
58+
// describe('useId', () => {
59+
// test('basic', async () => {
60+
// expect(
61+
// await getOutput(() => {
62+
// const app = createApp(BasicComponentWithUseId)
63+
// return [app, []]
64+
// }),
65+
// ).toBe('v-0 v-1')
66+
// })
67+
68+
// test('with config.idPrefix', async () => {
69+
// expect(
70+
// await getOutput(() => {
71+
// const app = createApp(BasicComponentWithUseId)
72+
// app.config.idPrefix = 'foo'
73+
// return [app, []]
74+
// }),
75+
// ).toBe('foo-0 foo-1')
76+
// })
77+
78+
// test('async component', async () => {
79+
// const factory = (
80+
// delay1: number,
81+
// delay2: number,
82+
// ): ReturnType<TestCaseFactory> => {
83+
// const p1 = promiseWithDelay(BasicComponentWithUseId, delay1)
84+
// const p2 = promiseWithDelay(BasicComponentWithUseId, delay2)
85+
// const AsyncOne = defineAsyncComponent(() => p1)
86+
// const AsyncTwo = defineAsyncComponent(() => p2)
87+
// const app = createApp({
88+
// setup() {
89+
// const id1 = useId()
90+
// const id2 = useId()
91+
// return () => [id1, ' ', id2, ' ', h(AsyncOne), ' ', h(AsyncTwo)]
92+
// },
93+
// })
94+
// return [app, [p1, p2]]
95+
// }
96+
97+
// const expected =
98+
// 'v-0 v-1 ' + // root
99+
// 'v-0-0 v-0-1 ' + // inside first async subtree
100+
// 'v-1-0 v-1-1' // inside second async subtree
101+
// // assert different async resolution order does not affect id stable-ness
102+
// expect(await getOutput(() => factory(0, 16))).toBe(expected)
103+
// expect(await getOutput(() => factory(16, 0))).toBe(expected)
104+
// })
105+
106+
// test('serverPrefetch', async () => {
107+
// const factory = (
108+
// delay1: number,
109+
// delay2: number,
110+
// ): ReturnType<TestCaseFactory> => {
111+
// const p1 = promiseWithDelay(null, delay1)
112+
// const p2 = promiseWithDelay(null, delay2)
113+
114+
// const SPOne = defineComponent({
115+
// async serverPrefetch() {
116+
// await p1
117+
// },
118+
// render() {
119+
// return h(BasicComponentWithUseId)
120+
// },
121+
// })
122+
123+
// const SPTwo = defineComponent({
124+
// async serverPrefetch() {
125+
// await p2
126+
// },
127+
// render() {
128+
// return h(BasicComponentWithUseId)
129+
// },
130+
// })
131+
132+
// const app = createApp({
133+
// setup() {
134+
// const id1 = useId()
135+
// const id2 = useId()
136+
// return () => [id1, ' ', id2, ' ', h(SPOne), ' ', h(SPTwo)]
137+
// },
138+
// })
139+
// return [app, [p1, p2]]
140+
// }
141+
142+
// const expected =
143+
// 'v-0 v-1 ' + // root
144+
// 'v-0-0 v-0-1 ' + // inside first async subtree
145+
// 'v-1-0 v-1-1' // inside second async subtree
146+
// // assert different async resolution order does not affect id stable-ness
147+
// expect(await getOutput(() => factory(0, 16))).toBe(expected)
148+
// expect(await getOutput(() => factory(16, 0))).toBe(expected)
149+
// })
150+
151+
// test('components with serverPrefetch', async () => {
152+
// const factory = (): ReturnType<TestCaseFactory> => {
153+
// const SPOne = defineComponent({
154+
// setup() {
155+
// onServerPrefetch(() => {})
156+
// return () => h(BasicComponentWithUseId)
157+
// },
158+
// })
159+
160+
// const SPTwo = defineComponent({
161+
// render() {
162+
// return h(BasicComponentWithUseId)
163+
// },
164+
// })
165+
166+
// const app = createApp({
167+
// setup() {
168+
// const id1 = useId()
169+
// const id2 = useId()
170+
// return () => [id1, ' ', id2, ' ', h(SPOne), ' ', h(SPTwo)]
171+
// },
172+
// })
173+
// return [app, []]
174+
// }
175+
176+
// const expected =
177+
// 'v-0 v-1 ' + // root
178+
// 'v-0-0 v-0-1 ' + // inside first async subtree
179+
// 'v-2 v-3' // inside second async subtree
180+
// // assert different async resolution order does not affect id stable-ness
181+
// expect(await getOutput(() => factory())).toBe(expected)
182+
// expect(await getOutput(() => factory())).toBe(expected)
183+
// })
184+
185+
// test('async setup()', async () => {
186+
// const factory = (
187+
// delay1: number,
188+
// delay2: number,
189+
// ): ReturnType<TestCaseFactory> => {
190+
// const p1 = promiseWithDelay(null, delay1)
191+
// const p2 = promiseWithDelay(null, delay2)
192+
193+
// const ASOne = defineComponent({
194+
// async setup() {
195+
// await p1
196+
// return {}
197+
// },
198+
// render() {
199+
// return h(BasicComponentWithUseId)
200+
// },
201+
// })
202+
203+
// const ASTwo = defineComponent({
204+
// async setup() {
205+
// await p2
206+
// return {}
207+
// },
208+
// render() {
209+
// return h(BasicComponentWithUseId)
210+
// },
211+
// })
212+
213+
// const app = createApp({
214+
// setup() {
215+
// const id1 = useId()
216+
// const id2 = useId()
217+
// return () =>
218+
// h(Suspense, null, {
219+
// default: h('div', [id1, ' ', id2, ' ', h(ASOne), ' ', h(ASTwo)]),
220+
// })
221+
// },
222+
// })
223+
// return [app, [p1, p2]]
224+
// }
225+
226+
// const expected =
227+
// '<div>' +
228+
// 'v-0 v-1 ' + // root
229+
// 'v-0-0 v-0-1 ' + // inside first async subtree
230+
// 'v-1-0 v-1-1' + // inside second async subtree
231+
// '</div>'
232+
// // assert different async resolution order does not affect id stable-ness
233+
// expect(await getOutput(() => factory(0, 16))).toBe(expected)
234+
// expect(await getOutput(() => factory(16, 0))).toBe(expected)
235+
// })
236+
237+
// test('deep nested', async () => {
238+
// const factory = (): ReturnType<TestCaseFactory> => {
239+
// const p = Promise.resolve()
240+
// const One = {
241+
// async setup() {
242+
// const id = useId()
243+
// await p
244+
// return () => [id, ' ', h(Two), ' ', h(Three)]
245+
// },
246+
// }
247+
// const Two = {
248+
// async setup() {
249+
// const id = useId()
250+
// await p
251+
// return () => [id, ' ', h(Three), ' ', h(Three)]
252+
// },
253+
// }
254+
// const Three = {
255+
// async setup() {
256+
// const id = useId()
257+
// return () => id
258+
// },
259+
// }
260+
// const app = createApp({
261+
// setup() {
262+
// return () =>
263+
// h(Suspense, null, {
264+
// default: h(One),
265+
// })
266+
// },
267+
// })
268+
// return [app, [p]]
269+
// }
270+
271+
// const expected =
272+
// 'v-0 ' + // One
273+
// 'v-0-0 ' + // Two
274+
// 'v-0-0-0 v-0-0-1 ' + // Three + Three nested in Two
275+
// 'v-0-1' // Three after Two
276+
// // assert different async resolution order does not affect id stable-ness
277+
// expect(await getOutput(() => factory())).toBe(expected)
278+
// expect(await getOutput(() => factory())).toBe(expected)
279+
// })
280+
281+
// test('async component inside async setup, already resolved', async () => {
282+
// const factory = async (
283+
// delay1: number,
284+
// delay2: number,
285+
// ): Promise<FactoryRes> => {
286+
// const p1 = promiseWithDelay(null, delay1)
287+
// const p2 = promiseWithDelay(BasicComponentWithUseId, delay2)
288+
// const AsyncInner = defineAsyncComponent(() => p2)
289+
290+
// const AsyncSetup = defineComponent({
291+
// async setup() {
292+
// await p1
293+
// return {}
294+
// },
295+
// render() {
296+
// return h(AsyncInner)
297+
// },
298+
// })
299+
300+
// const app = createApp({
301+
// setup() {
302+
// const id1 = useId()
303+
// const id2 = useId()
304+
// return () =>
305+
// h(Suspense, null, {
306+
// default: h('div', [id1, ' ', id2, ' ', h(AsyncSetup)]),
307+
// })
308+
// },
309+
// })
310+
311+
// // the async component may have already been resolved
312+
// await AsyncInner.__asyncLoader()
313+
// return [app, [p1, p2]]
314+
// }
315+
316+
// const expected =
317+
// '<div>' +
318+
// 'v-0 v-1 ' + // root
319+
// 'v-0-0-0 v-0-0-1' + // async component inside async setup
320+
// '</div>'
321+
// // assert different async resolution order does not affect id stable-ness
322+
// expect(await getOutput(async () => factory(0, 16))).toBe(expected)
323+
// expect(await getOutput(() => factory(16, 0))).toBe(expected)
324+
// })
325+
// })

0 commit comments

Comments
 (0)