Skip to content

Commit

Permalink
fix(runtime-core): should call Suspense fallback unmount hook (#1061)
Browse files Browse the repository at this point in the history
fix #1059
  • Loading branch information
underfin authored May 1, 2020
1 parent b40fcbc commit 8b85aae
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 3 deletions.
53 changes: 52 additions & 1 deletion packages/runtime-core/__tests__/components/Suspense.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,57 @@ describe('Suspense', () => {
])
})

// #1059
test('mounted/updated hooks & fallback component', async () => {
const deps: Promise<any>[] = []
const calls: string[] = []
const toggle = ref(true)

const Async = {
async setup() {
const p = new Promise(r => setTimeout(r, 1))
// extra tick needed for Node 12+
deps.push(p.then(() => Promise.resolve()))

await p
return () => h('div', 'async')
}
}

const Fallback = {
setup() {
onMounted(() => {
calls.push('mounted')
})

onUnmounted(() => {
calls.push('unmounted')
})
return () => h('div', 'fallback')
}
}

const Comp = {
setup() {
return () =>
h(Suspense, null, {
default: toggle.value ? h(Async) : null,
fallback: h(Fallback)
})
}
}

const root = nodeOps.createElement('div')
render(h(Comp), root)
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
expect(calls).toEqual([`mounted`])

await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(`<div>async</div>`)
expect(calls).toEqual([`mounted`, `unmounted`])
})

test('content update before suspense resolve', async () => {
const Async = defineAsyncComponent({
props: { msg: String },
Expand Down Expand Up @@ -316,7 +367,7 @@ describe('Suspense', () => {
await nextTick()
expect(serializeInner(root)).toBe(`<!---->`)
// should discard effects (except for immediate ones)
expect(calls).toEqual(['immediate effect'])
expect(calls).toEqual(['immediate effect', 'watch callback', 'unmounted'])
})

test('unmount suspense after resolve', async () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime-core/src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1856,9 +1856,9 @@ function baseCreateRenderer(
) {
queuePostRenderEffect(da, parentSuspense)
}
queuePostFlushCb(() => {
queuePostRenderEffect(() => {
instance.isUnmounted = true
})
}, parentSuspense)

// A component with async dep inside a pending suspense is unmounted before
// its async dep resolves. This should remove the dep from the suspense, and
Expand Down

0 comments on commit 8b85aae

Please sign in to comment.