From 3b613cbecd8e817d0882eb8bc2411f5b082fcde7 Mon Sep 17 00:00:00 2001 From: Dmitry Sharshakov Date: Wed, 23 Oct 2019 18:54:50 +0300 Subject: [PATCH] test(template-refs): add tests for function refs (#359) --- .../__tests__/apiTemplateRef.spec.ts | 54 ++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/apiTemplateRef.spec.ts b/packages/runtime-core/__tests__/apiTemplateRef.spec.ts index fad688b52..d164d4571 100644 --- a/packages/runtime-core/__tests__/apiTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/apiTemplateRef.spec.ts @@ -1,4 +1,12 @@ -import { ref, nodeOps, h, render, nextTick, Ref } from '@vue/runtime-test' +import { + ref, + nodeOps, + h, + render, + nextTick, + Ref, + createComponent +} from '@vue/runtime-test' // reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs @@ -71,6 +79,50 @@ describe('api: template refs', () => { expect(el.value).toBe(null) }) + it('function ref mount', () => { + const root = nodeOps.createElement('div') + const fn = jest.fn() + + const Comp = createComponent(() => () => h('div', { ref: fn })) + render(h(Comp), root) + expect(fn.mock.calls[0][0]).toBe(root.children[0]) + }) + + it('function ref update', async () => { + const root = nodeOps.createElement('div') + const fn1 = jest.fn() + const fn2 = jest.fn() + const fn = ref(fn1) + + const Comp = createComponent(() => () => h('div', { ref: fn.value })) + + render(h(Comp), root) + expect(fn1.mock.calls).toHaveLength(1) + expect(fn1.mock.calls[0][0]).toBe(root.children[0]) + expect(fn2.mock.calls).toHaveLength(0) + + fn.value = fn2 + await nextTick() + expect(fn1.mock.calls).toHaveLength(1) + expect(fn2.mock.calls).toHaveLength(1) + expect(fn2.mock.calls[0][0]).toBe(root.children[0]) + }) + + it('function ref unmount', async () => { + const root = nodeOps.createElement('div') + const fn = jest.fn() + const toggle = ref(true) + + const Comp = createComponent(() => () => + toggle.value ? h('div', { ref: fn }) : null + ) + render(h(Comp), root) + expect(fn.mock.calls[0][0]).toBe(root.children[0]) + toggle.value = false + await nextTick() + expect(fn.mock.calls[1][0]).toBe(null) + }) + it('render function ref mount', () => { const root = nodeOps.createElement('div') const el = ref(null)