mirror of https://github.com/vuejs/core.git
test: port tests
This commit is contained in:
parent
1c5d833a76
commit
a103715cfb
|
@ -7,7 +7,7 @@ import {
|
||||||
onUnmounted,
|
onUnmounted,
|
||||||
ref,
|
ref,
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
import type { VaporComponent } from '../../src/component'
|
import type { LooseRawProps, VaporComponent } from '../../src/component'
|
||||||
import { makeRender } from '../_utils'
|
import { makeRender } from '../_utils'
|
||||||
import { VaporKeepAliveImpl as VaporKeepAlive } from '../../src/components/KeepAlive'
|
import { VaporKeepAliveImpl as VaporKeepAlive } from '../../src/components/KeepAlive'
|
||||||
import {
|
import {
|
||||||
|
@ -70,6 +70,13 @@ describe('VaporKeepAlive', () => {
|
||||||
return n0
|
return n0
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
oneTestHooks = {
|
||||||
|
beforeMount: vi.fn(),
|
||||||
|
mounted: vi.fn(),
|
||||||
|
activated: vi.fn(),
|
||||||
|
deactivated: vi.fn(),
|
||||||
|
unmounted: vi.fn(),
|
||||||
|
}
|
||||||
oneTest = defineVaporComponent({
|
oneTest = defineVaporComponent({
|
||||||
name: 'oneTest',
|
name: 'oneTest',
|
||||||
setup() {
|
setup() {
|
||||||
|
@ -469,4 +476,215 @@ describe('VaporKeepAlive', () => {
|
||||||
assertHookCalls(oneHooks, [1, 1, 4, 3, 0])
|
assertHookCalls(oneHooks, [1, 1, 4, 3, 0])
|
||||||
assertHookCalls(twoHooks, [1, 1, 4, 4, 0]) // should remain inactive
|
assertHookCalls(twoHooks, [1, 1, 4, 4, 0]) // should remain inactive
|
||||||
})
|
})
|
||||||
|
|
||||||
|
async function assertNameMatch(props: LooseRawProps) {
|
||||||
|
const outerRef = ref(true)
|
||||||
|
const viewRef = ref('one')
|
||||||
|
const { html } = define({
|
||||||
|
setup() {
|
||||||
|
return createIf(
|
||||||
|
() => outerRef.value,
|
||||||
|
() =>
|
||||||
|
createComponent(VaporKeepAlive, props, {
|
||||||
|
default: () => createDynamicComponent(() => views[viewRef.value]),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}).render()
|
||||||
|
|
||||||
|
expect(html()).toBe(`<div>one</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 1, 0, 0])
|
||||||
|
assertHookCalls(twoHooks, [0, 0, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'two'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>two</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 1, 1, 0])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'one'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>one</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 1, 0])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 0, 0, 1])
|
||||||
|
|
||||||
|
viewRef.value = 'two'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>two</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 2, 0])
|
||||||
|
assertHookCalls(twoHooks, [2, 2, 0, 0, 1])
|
||||||
|
|
||||||
|
// teardown
|
||||||
|
outerRef.value = false
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 2, 1])
|
||||||
|
assertHookCalls(twoHooks, [2, 2, 0, 0, 2])
|
||||||
|
}
|
||||||
|
|
||||||
|
async function assertNameMatchWithFlag(props: LooseRawProps) {
|
||||||
|
const outerRef = ref(true)
|
||||||
|
const viewRef = ref('one')
|
||||||
|
const { html } = define({
|
||||||
|
setup() {
|
||||||
|
return createIf(
|
||||||
|
() => outerRef.value,
|
||||||
|
() =>
|
||||||
|
createComponent(VaporKeepAlive, props, {
|
||||||
|
default: () => createDynamicComponent(() => views[viewRef.value]),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}).render()
|
||||||
|
|
||||||
|
expect(html()).toBe(`<div>one</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 1, 0, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [0, 0, 0, 0, 0])
|
||||||
|
assertHookCalls(twoHooks, [0, 0, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'oneTest'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>oneTest</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 1, 1, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 1, 0, 0])
|
||||||
|
assertHookCalls(twoHooks, [0, 0, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'two'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>two</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 1, 1, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 1, 1, 0])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'one'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>one</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 1, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 1, 1, 0])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 0, 0, 1])
|
||||||
|
|
||||||
|
viewRef.value = 'oneTest'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>oneTest</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 2, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 2, 1, 0])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 0, 0, 1])
|
||||||
|
|
||||||
|
viewRef.value = 'two'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>two</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 2, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 2, 2, 0])
|
||||||
|
assertHookCalls(twoHooks, [2, 2, 0, 0, 1])
|
||||||
|
|
||||||
|
// teardown
|
||||||
|
outerRef.value = false
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 2, 2, 1])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 2, 2, 1])
|
||||||
|
assertHookCalls(twoHooks, [2, 2, 0, 0, 2])
|
||||||
|
}
|
||||||
|
|
||||||
|
async function assertNameMatchWithFlagExclude(props: LooseRawProps) {
|
||||||
|
const outerRef = ref(true)
|
||||||
|
const viewRef = ref('one')
|
||||||
|
const { html } = define({
|
||||||
|
setup() {
|
||||||
|
return createIf(
|
||||||
|
() => outerRef.value,
|
||||||
|
() =>
|
||||||
|
createComponent(VaporKeepAlive, props, {
|
||||||
|
default: () => createDynamicComponent(() => views[viewRef.value]),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}).render()
|
||||||
|
|
||||||
|
expect(html()).toBe(`<div>one</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 0, 0, 0])
|
||||||
|
assertHookCalls(oneTestHooks, [0, 0, 0, 0, 0])
|
||||||
|
assertHookCalls(twoHooks, [0, 0, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'oneTest'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>oneTest</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 0, 0, 1])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 0, 0, 0])
|
||||||
|
assertHookCalls(twoHooks, [0, 0, 0, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'two'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>two</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [1, 1, 0, 0, 1])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 0, 0, 1])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 1, 0, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'one'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>one</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [2, 2, 0, 0, 1])
|
||||||
|
assertHookCalls(oneTestHooks, [1, 1, 0, 0, 1])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 1, 1, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'oneTest'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>oneTest</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [2, 2, 0, 0, 2])
|
||||||
|
assertHookCalls(oneTestHooks, [2, 2, 0, 0, 1])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 1, 1, 0])
|
||||||
|
|
||||||
|
viewRef.value = 'two'
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<div>two</div><!--dynamic-component--><!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [2, 2, 0, 0, 2])
|
||||||
|
assertHookCalls(oneTestHooks, [2, 2, 0, 0, 2])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 2, 1, 0])
|
||||||
|
|
||||||
|
// teardown
|
||||||
|
outerRef.value = false
|
||||||
|
await nextTick()
|
||||||
|
expect(html()).toBe(`<!--if-->`)
|
||||||
|
assertHookCalls(oneHooks, [2, 2, 0, 0, 2])
|
||||||
|
assertHookCalls(oneTestHooks, [2, 2, 0, 0, 2])
|
||||||
|
assertHookCalls(twoHooks, [1, 1, 2, 2, 1])
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('props', () => {
|
||||||
|
test('include (string)', async () => {
|
||||||
|
await assertNameMatch({ include: () => 'one' })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('include (regex)', async () => {
|
||||||
|
await assertNameMatch({ include: () => /^one$/ })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('include (regex with g flag)', async () => {
|
||||||
|
await assertNameMatchWithFlag({ include: () => /one/g })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('include (array)', async () => {
|
||||||
|
await assertNameMatch({ include: () => ['one'] })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('exclude (string)', async () => {
|
||||||
|
await assertNameMatch({ exclude: () => 'two' })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('exclude (regex)', async () => {
|
||||||
|
await assertNameMatch({ exclude: () => /^two$/ })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('exclude (regex with a flag)', async () => {
|
||||||
|
await assertNameMatchWithFlagExclude({ exclude: () => /one/g })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('exclude (array)', async () => {
|
||||||
|
await assertNameMatch({ exclude: () => ['two'] })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('include + exclude', async () => {
|
||||||
|
await assertNameMatch({ include: () => 'one,two', exclude: () => 'two' })
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -64,13 +64,21 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
|
||||||
|
|
||||||
const { include, exclude, max } = props
|
const { include, exclude, max } = props
|
||||||
|
|
||||||
|
function shouldCache(instance: VaporComponentInstance) {
|
||||||
|
const name = getComponentName(instance.type)
|
||||||
|
return !(
|
||||||
|
(include && (!name || !matches(include, name))) ||
|
||||||
|
(exclude && name && matches(exclude, name))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function cacheBlock() {
|
function cacheBlock() {
|
||||||
// TODO suspense
|
// TODO suspense
|
||||||
const currentBlock = keepAliveInstance.block!
|
const currentBlock = keepAliveInstance.block!
|
||||||
if (!isValidBlock(currentBlock)) return
|
if (!isValidBlock(currentBlock)) return
|
||||||
|
|
||||||
const block = getInnerBlock(currentBlock)!
|
const block = getInnerBlock(currentBlock)!
|
||||||
if (!block) return
|
if (!block || !shouldCache(block)) return
|
||||||
|
|
||||||
const key = block.type
|
const key = block.type
|
||||||
if (cache.has(key)) {
|
if (cache.has(key)) {
|
||||||
|
@ -111,13 +119,16 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
|
||||||
instance.shapeFlag! |= ShapeFlags.COMPONENT_KEPT_ALIVE
|
instance.shapeFlag! |= ShapeFlags.COMPONENT_KEPT_ALIVE
|
||||||
}
|
}
|
||||||
|
|
||||||
const name = getComponentName(instance.type)
|
// const name = getComponentName(instance.type)
|
||||||
if (
|
// if (
|
||||||
!(
|
// !(
|
||||||
(include && (!name || !matches(include, name))) ||
|
// (include && (!name || !matches(include, name))) ||
|
||||||
(exclude && name && matches(exclude, name))
|
// (exclude && name && matches(exclude, name))
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
|
// instance.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
|
||||||
|
// }
|
||||||
|
if (shouldCache(instance)) {
|
||||||
instance.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
|
instance.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue