chore: update test case

This commit is contained in:
linzhe 2024-11-18 21:42:55 +08:00
parent 45403e34bd
commit 9291afe66b
2 changed files with 58 additions and 31 deletions

View File

@ -29,7 +29,7 @@ import {
setBlockTracking,
withCtx,
} from '@vue/runtime-test'
import { PatchFlags, SlotFlags } from '@vue/shared'
import { PatchFlags, SlotFlags, toDisplayString } from '@vue/shared'
import { SuspenseImpl } from '../src/components/Suspense'
describe('renderer: optimized mode', () => {
@ -270,6 +270,63 @@ describe('renderer: optimized mode', () => {
)
})
test('PatchFlags: PatchFlags.STABLE_FRAGMENT with change array item', async () => {
const count = ref(0)
const foo: any = []
function updateFoo() {
for (let n = 0; n < 3; n++) {
foo[n] = n + 1 + '_foo'
}
}
const Comp = {
setup() {
return () => {
// <div>{{ count }}</div>
// <div v-for='item in foo'>{{ item }}</div>
return (
openBlock(),
createElementBlock(
Fragment,
null,
[
createElementVNode(
'div',
null,
toDisplayString(count.value),
1 /* TEXT */,
),
(openBlock(),
createElementBlock(
Fragment,
null,
renderList(foo, item => {
return createElementVNode(
'div',
null,
toDisplayString(item),
1 /* TEXT */,
)
}),
64 /* STABLE_FRAGMENT */,
)),
],
64 /* STABLE_FRAGMENT */,
)
)
}
},
}
render(h(Comp), root)
expect(inner(root)).toBe('<div>0</div>')
updateFoo()
count.value++
await nextTick()
expect(inner(root)).toBe(
'<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
)
})
// A Fragment with `UNKEYED_FRAGMENT` flag will always patch its children,
// so there's no need for tracking dynamicChildren.
test('PatchFlags: PatchFlags.UNKEYED_FRAGMENT', async () => {

View File

@ -311,34 +311,4 @@ describe('compiler + runtime integration', () => {
app.mount(root)
expect(root.innerHTML).toBe('<div>60000000100000111</div>')
})
test('should correctly update when reactive state and normal array are modified', async () => {
const count = ref(0)
const foo: any[] = []
function updateFoo() {
for (let n = 0; n < 3; n++) {
foo[n] = n + 1 + '_foo'
}
}
const app = createApp({
setup() {
return {
count,
foo,
}
},
template: `
<div>{{count}}</div>
<div v-for='item in foo'>{{ item }}</div>`,
})
const root = document.createElement('div')
app.mount(root)
expect(root.innerHTML).toBe('<div>0</div>')
updateFoo()
count.value++
await nextTick()
expect(root.innerHTML).toBe(
'<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
)
})
})