Skip to content

Commit

Permalink
fix(Transition): re-fix #10620 (#10832)
Browse files Browse the repository at this point in the history
revert #10632
re-fix #10620
close #10827
  • Loading branch information
edison1105 authored Apr 29, 2024
1 parent 09b4df8 commit accf839
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 40 deletions.
37 changes: 0 additions & 37 deletions packages/runtime-core/__tests__/components/BaseTransition.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
h,
nextTick,
nodeOps,
onUnmounted,
ref,
render,
serialize,
Expand Down Expand Up @@ -769,42 +768,6 @@ describe('BaseTransition', () => {
test('w/ KeepAlive', async () => {
await runTestWithKeepAlive(testOutIn)
})

test('w/ KeepAlive + unmount innerChild', async () => {
const unmountSpy = vi.fn()
const includeRef = ref(['TrueBranch'])
const trueComp = {
name: 'TrueBranch',
setup() {
onUnmounted(unmountSpy)
const count = ref(0)
return () => h('div', count.value)
},
}

const toggle = ref(true)
const { props } = mockProps({ mode: 'out-in' }, true /*withKeepAlive*/)
const root = nodeOps.createElement('div')
const App = {
render() {
return h(BaseTransition, props, () => {
return h(
KeepAlive,
{ include: includeRef.value },
toggle.value ? h(trueComp) : h('div'),
)
})
},
}
render(h(App), root)

// trigger toggle
toggle.value = false
includeRef.value = []

await nextTick()
expect(unmountSpy).toHaveBeenCalledTimes(1)
})
})

// #6835
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/__tests__/hmr.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ describe('hot module replacement', () => {
triggerEvent(root.children[1] as TestElement, 'click')
await nextTick()
await new Promise(r => setTimeout(r, 0))
expect(serializeInner(root)).toBe(`<button></button><!---->`)
expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
expect(unmountSpy).toHaveBeenCalledTimes(1)
expect(mountSpy).toHaveBeenCalledTimes(1)
expect(activeSpy).toHaveBeenCalledTimes(1)
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/src/components/BaseTransition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ const BaseTransitionImpl: ComponentOptions = {
// update old tree's hooks in case of dynamic transition
setTransitionHooks(oldInnerChild, leavingHooks)
// switching between different views
if (mode === 'out-in') {
if (mode === 'out-in' && innerChild.type !== Comment) {
state.isLeaving = true
// return placeholder node and queue update when leave finishes
leavingHooks.afterLeave = () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/src/components/KeepAlive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ const KeepAliveImpl: ComponentOptions = {
pendingCacheKey = null

if (!slots.default) {
return (current = null)
return null
}

const children = slots.default()
Expand Down
57 changes: 57 additions & 0 deletions packages/vue/__tests__/e2e/Transition.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1214,6 +1214,63 @@ describe('e2e: Transition', () => {
},
E2E_TIMEOUT,
)

test(
'w/ KeepAlive + unmount innerChild',
async () => {
const unmountSpy = vi.fn()
await page().exposeFunction('unmountSpy', unmountSpy)
await page().evaluate(() => {
const { unmountSpy } = window as any
const { createApp, ref, h, onUnmounted } = (window as any).Vue
createApp({
template: `
<div id="container">
<transition mode="out-in">
<KeepAlive :include="includeRef">
<TrueBranch v-if="toggle"></TrueBranch>
</KeepAlive>
</transition>
</div>
<button id="toggleBtn" @click="click">button</button>
`,
components: {
TrueBranch: {
name: 'TrueBranch',
setup() {
onUnmounted(unmountSpy)
const count = ref(0)
return () => h('div', count.value)
},
},
},
setup: () => {
const includeRef = ref(['TrueBranch'])
const toggle = ref(true)
const click = () => {
toggle.value = !toggle.value
if (toggle.value) {
includeRef.value = ['TrueBranch']
} else {
includeRef.value = []
}
}
return { toggle, click, unmountSpy, includeRef }
},
}).mount('#app')
})

await transitionFinish()
expect(await html('#container')).toBe('<div>0</div>')

await click('#toggleBtn')

await transitionFinish()
expect(await html('#container')).toBe('<!--v-if-->')
expect(unmountSpy).toBeCalledTimes(1)
},
E2E_TIMEOUT,
)
})

describe('transition with Suspense', () => {
Expand Down

0 comments on commit accf839

Please sign in to comment.