Skip to content

Commit ae5d0a4

Browse files
edison1105edison1105
committed
wip: refactor test
1 parent 36c19b5 commit ae5d0a4

File tree

2 files changed

+73
-145
lines changed

2 files changed

+73
-145
lines changed

‎packages/runtime-vapor/__tests__/_utils.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import { createVaporApp, vaporInteropPlugin } from '../src'
22
import { type App, type Component, createApp } from '@vue/runtime-dom'
3-
import type { VaporComponent, VaporComponentInstance } from '../src/component'
3+
import type {
4+
ObjectVaporComponent,
5+
VaporComponent,
6+
VaporComponentInstance,
7+
} from '../src/component'
48
import type { RawProps } from '../src/componentProps'
59
import { compileScript, parse } from '@vue/compiler-sfc'
610
import * as runtimeVapor from '../src'
711
import * as runtimeDom from '@vue/runtime-dom'
812
import * as VueServerRenderer from '@vue/server-renderer'
13+
import { compile as compileVapor } from '@vue/compiler-vapor'
914

1015
export interface RenderContext {
1116
component: VaporComponent
@@ -187,6 +192,27 @@ export function compile(
187192
)
188193
}
189194

195+
export function compileToVaporRender(
196+
template: string,
197+
): ObjectVaporComponent['render'] {
198+
let { code } = compileVapor(template, {
199+
mode: 'module',
200+
prefixIdentifiers: true,
201+
hmr: true,
202+
})
203+
204+
const transformed = code
205+
.replace(/\bimport {/g, 'const {')
206+
.replace(/ as _/g, ': _')
207+
.replace(/} from ['"]vue['"];/g, '} = Vue;')
208+
.replace(/export function render/, 'function render')
209+
210+
return new Function('Vue', `${transformed}\nreturn render`)({
211+
...runtimeDom,
212+
...runtimeVapor,
213+
})
214+
}
215+
190216
export function shuffle(array: Array<any>): any[] {
191217
let currentIndex = array.length
192218
let temporaryValue

‎packages/runtime-vapor/__tests__/hmr.spec.ts‎

Lines changed: 46 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,6 @@
1-
// TODO: port tests from packages/runtime-core/__tests__/hmr.spec.ts
2-
3-
import {
4-
type HMRRuntime,
5-
nextTick,
6-
ref,
7-
toDisplayString,
8-
} from '@vue/runtime-dom'
9-
import { makeRender } from './_utils'
10-
import {
11-
child,
12-
createComponent,
13-
createComponentWithFallback,
14-
createInvoker,
15-
createSlot,
16-
defineVaporComponent,
17-
delegateEvents,
18-
next,
19-
renderEffect,
20-
setInsertionState,
21-
setText,
22-
template,
23-
txt,
24-
withVaporCtx,
25-
} from '@vue/runtime-vapor'
1+
import { type HMRRuntime, nextTick, ref } from '@vue/runtime-dom'
2+
import { compileToVaporRender as compileToFunction, makeRender } from './_utils'
3+
import { defineVaporComponent, delegateEvents } from '@vue/runtime-vapor'
264

275
declare var __VUE_HMR_RUNTIME__: HMRRuntime
286
const { createRecord, rerender, reload } = __VUE_HMR_RUNTIME__
@@ -60,40 +38,24 @@ describe('hot module replacement', () => {
6038

6139
const Child = defineVaporComponent({
6240
__hmrId: childId,
63-
render() {
64-
const n1 = template('<div></div>', true)() as any
65-
setInsertionState(n1, null, true)
66-
createSlot('default', null)
67-
return n1
68-
},
41+
render: compileToFunction('<div><slot/></div>'),
6942
})
7043
createRecord(childId, Child as any)
7144

7245
const Parent = defineVaporComponent({
7346
__hmrId: parentId,
47+
// @ts-expect-error ObjectVaporComponent doesn't have components
48+
components: { Child },
7449
setup() {
7550
const count = ref(0)
7651
return { count }
7752
},
78-
render(ctx) {
79-
const n3 = template('<div> </div>', true)() as any
80-
const n0 = child(n3) as any
81-
setInsertionState(n3, 1, true)
82-
createComponent(Child, null, {
83-
default: withVaporCtx(() => {
84-
const n1 = template(' ')() as any
85-
renderEffect(() => setText(n1, toDisplayString(ctx.count)))
86-
return n1
87-
}),
88-
})
89-
n3.$evtclick = createInvoker(() => ctx.count++)
90-
renderEffect(() => setText(n0, toDisplayString(ctx.count)))
91-
return n3
92-
},
53+
render: compileToFunction(
54+
`<div @click="count++">{{ count }}<Child>{{ count }}</Child></div>`,
55+
),
9356
})
9457
createRecord(parentId, Parent as any)
9558

96-
// render(h(Parent), root)
9759
const { mount } = define(Parent).create()
9860
mount(root)
9961
expect(root.innerHTML).toBe(`<div>0<div>0<!--slot--></div></div>`)
@@ -106,82 +68,45 @@ describe('hot module replacement', () => {
10668
expect(root.innerHTML).toBe(`<div>1<div>1<!--slot--></div></div>`)
10769

10870
// Update text while preserving state
109-
rerender(parentId, (ctx: any) => {
110-
const n3 = template('<div> </div>', true)() as any
111-
const n0 = child(n3) as any
112-
setInsertionState(n3, 1, true)
113-
createComponent(Child, null, {
114-
default: withVaporCtx(() => {
115-
const n1 = template(' ')() as any
116-
renderEffect(() => setText(n1, toDisplayString(ctx.count)))
117-
return n1
118-
}),
119-
})
120-
n3.$evtclick = createInvoker(() => ctx.count++)
121-
renderEffect(() => setText(n0, toDisplayString(ctx.count) + '!'))
122-
return n3
123-
})
71+
rerender(
72+
parentId,
73+
compileToFunction(
74+
`<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`,
75+
),
76+
)
12477
expect(root.innerHTML).toBe(`<div>1!<div>1<!--slot--></div></div>`)
12578

12679
// Should force child update on slot content change
127-
rerender(parentId, (ctx: any) => {
128-
const n3 = template('<div> </div>', true)() as any
129-
const n0 = child(n3) as any
130-
setInsertionState(n3, 1, true)
131-
createComponent(Child, null, {
132-
default: withVaporCtx(() => {
133-
const n1 = template(' ')() as any
134-
renderEffect(() => setText(n1, toDisplayString(ctx.count) + '!'))
135-
return n1
136-
}),
137-
})
138-
n3.$evtclick = createInvoker(() => ctx.count++)
139-
renderEffect(() => setText(n0, toDisplayString(ctx.count) + '!'))
140-
return n3
141-
})
80+
rerender(
81+
parentId,
82+
compileToFunction(
83+
`<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`,
84+
),
85+
)
14286
expect(root.innerHTML).toBe(`<div>1!<div>1!<!--slot--></div></div>`)
14387

14488
// Should force update element children despite block optimization
145-
rerender(parentId, (ctx: any) => {
146-
const n5 = template('<div> <span> </span></div>', true)() as any
147-
const n0 = child(n5) as any
148-
const n1 = next(n0) as any
149-
setInsertionState(n5, 2, true)
150-
createComponentWithFallback(Child, null, {
151-
default: withVaporCtx(() => {
152-
const n2 = template(' ')() as any
153-
renderEffect(() => setText(n2, toDisplayString(ctx.count) + '!'))
154-
return n2
155-
}),
156-
})
157-
const x1 = txt(n1) as any
158-
n5.$evtclick = createInvoker(() => ctx.count++)
159-
renderEffect(() => {
160-
const count = ctx.count
161-
setText(n0, toDisplayString(count))
162-
setText(x1, toDisplayString(count))
163-
})
164-
return n5
165-
})
89+
rerender(
90+
parentId,
91+
compileToFunction(
92+
`<div @click="count++">{{ count }}<span>{{ count }}</span>
93+
<Child>{{ count }}!</Child>
94+
</div>`,
95+
),
96+
)
16697
expect(root.innerHTML).toBe(
16798
`<div>1<span>1</span><div>1!<!--slot--></div></div>`,
16899
)
169100

170101
// Should force update child slot elements
171-
rerender(parentId, (ctx: any) => {
172-
const n2 = template('<div></div>', true)() as any
173-
setInsertionState(n2, null, true)
174-
createComponentWithFallback(Child, null, {
175-
default: withVaporCtx(() => {
176-
const n0 = template('<span> </span>')() as any
177-
const x0 = txt(n0) as any
178-
renderEffect(() => setText(x0, toDisplayString(ctx.count)))
179-
return n0
180-
}),
181-
})
182-
n2.$evtclick = createInvoker(() => ctx.count++)
183-
return n2
184-
})
102+
rerender(
103+
parentId,
104+
compileToFunction(
105+
`<div @click="count++">
106+
<Child><span>{{ count }}</span></Child>
107+
</div>`,
108+
),
109+
)
185110
expect(root.innerHTML).toBe(
186111
`<div><div><span>1</span><!--slot--></div></div>`,
187112
)
@@ -231,28 +156,19 @@ describe('hot module replacement', () => {
231156
const msg = ref('child')
232157
return { msg }
233158
},
234-
render(ctx) {
235-
const n0 = template(`<div> </div>`)()
236-
const x0 = child(n0 as any)
237-
renderEffect(() => setText(x0 as any, ctx.msg))
238-
return [n0]
239-
},
159+
render: compileToFunction(`<div>{{ msg }}</div>`),
240160
})
241161
createRecord(childId, Child as any)
242162

243163
const { mount, component: Parent } = define({
244164
__hmrId: parentId,
165+
// @ts-expect-error
166+
components: { Child },
245167
setup() {
246168
const msg = ref('root')
247169
return { msg }
248170
},
249-
render(ctx) {
250-
const n0 = createComponent(Child)
251-
const n1 = template(`<div> </div>`)()
252-
const x0 = child(n1 as any)
253-
renderEffect(() => setText(x0 as any, ctx.msg))
254-
return [n0, n1]
255-
},
171+
render: compileToFunction(`<Child/><div>{{ msg }}</div>`),
256172
}).create()
257173
createRecord(parentId, Parent as any)
258174
mount(root)
@@ -269,12 +185,7 @@ describe('hot module replacement', () => {
269185
const msg = ref('child changed')
270186
return { msg }
271187
},
272-
render(ctx: any) {
273-
const n0 = template(`<div> </div>`)()
274-
const x0 = child(n0 as any)
275-
renderEffect(() => setText(x0 as any, ctx.msg))
276-
return [n0]
277-
},
188+
render: compileToFunction(`<div>{{ msg }}</div>`),
278189
})
279190
expect(root.innerHTML).toMatchInlineSnapshot(
280191
`"<div>child changed</div><div>root</div>"`,
@@ -288,12 +199,7 @@ describe('hot module replacement', () => {
288199
const msg = ref('child changed2')
289200
return { msg }
290201
},
291-
render(ctx: any) {
292-
const n0 = template(`<div> </div>`)()
293-
const x0 = child(n0 as any)
294-
renderEffect(() => setText(x0 as any, ctx.msg))
295-
return [n0]
296-
},
202+
render: compileToFunction(`<div>{{ msg }}</div>`),
297203
})
298204
expect(root.innerHTML).toMatchInlineSnapshot(
299205
`"<div>child changed2</div><div>root</div>"`,
@@ -303,17 +209,13 @@ describe('hot module replacement', () => {
303209
reload(parentId, {
304210
__hmrId: parentId,
305211
__vapor: true,
212+
// @ts-expect-error
213+
components: { Child },
306214
setup() {
307215
const msg = ref('root changed')
308216
return { msg }
309217
},
310-
render(ctx: any) {
311-
const n0 = createComponent(Child)
312-
const n1 = template(`<div> </div>`)()
313-
const x0 = child(n1 as any)
314-
renderEffect(() => setText(x0 as any, ctx.msg))
315-
return [n0, n1]
316-
},
218+
render: compileToFunction(`<Child/><div>{{ msg }}</div>`),
317219
})
318220
expect(root.innerHTML).toMatchInlineSnapshot(
319221
`"<div>child changed2</div><div>root changed</div>"`,

0 commit comments

Comments
 (0)