From ac625e03fed3cd2a16fabf3342eb677dfce98b25 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 29 Aug 2019 16:39:23 -0400
Subject: [PATCH] test: test for template ref usage in setup()

---
 .../__tests__/apiTemplateRef.spec.ts          | 124 +++++++++++++++++-
 1 file changed, 123 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/__tests__/apiTemplateRef.spec.ts b/packages/runtime-core/__tests__/apiTemplateRef.spec.ts
index ed49ae56..fad688b5 100644
--- a/packages/runtime-core/__tests__/apiTemplateRef.spec.ts
+++ b/packages/runtime-core/__tests__/apiTemplateRef.spec.ts
@@ -1,5 +1,127 @@
+import { ref, nodeOps, h, render, nextTick, Ref } from '@vue/runtime-test'
+
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
 
 describe('api: template refs', () => {
-  test.todo('should work')
+  it('string ref mount', () => {
+    const root = nodeOps.createElement('div')
+    const el = ref(null)
+
+    const Comp = {
+      setup() {
+        return {
+          refKey: el
+        }
+      },
+      render() {
+        return h('div', { ref: 'refKey' })
+      }
+    }
+    render(h(Comp), root)
+    expect(el.value).toBe(root.children[0])
+  })
+
+  it('string ref update', async () => {
+    const root = nodeOps.createElement('div')
+    const fooEl = ref(null)
+    const barEl = ref(null)
+    const refKey = ref('foo')
+
+    const Comp = {
+      setup() {
+        return {
+          foo: fooEl,
+          bar: barEl
+        }
+      },
+      render() {
+        return h('div', { ref: refKey.value })
+      }
+    }
+    render(h(Comp), root)
+    expect(fooEl.value).toBe(root.children[0])
+    expect(barEl.value).toBe(null)
+
+    refKey.value = 'bar'
+    await nextTick()
+    expect(fooEl.value).toBe(null)
+    expect(barEl.value).toBe(root.children[0])
+  })
+
+  it('string ref unmount', async () => {
+    const root = nodeOps.createElement('div')
+    const el = ref(null)
+    const toggle = ref(true)
+
+    const Comp = {
+      setup() {
+        return {
+          refKey: el
+        }
+      },
+      render() {
+        return toggle.value ? h('div', { ref: 'refKey' }) : null
+      }
+    }
+    render(h(Comp), root)
+    expect(el.value).toBe(root.children[0])
+
+    toggle.value = false
+    await nextTick()
+    expect(el.value).toBe(null)
+  })
+
+  it('render function ref mount', () => {
+    const root = nodeOps.createElement('div')
+    const el = ref(null)
+
+    const Comp = {
+      setup() {
+        return () => h('div', { ref: el })
+      }
+    }
+    render(h(Comp), root)
+    expect(el.value).toBe(root.children[0])
+  })
+
+  it('render function ref update', async () => {
+    const root = nodeOps.createElement('div')
+    const refs = {
+      foo: ref(null),
+      bar: ref(null)
+    }
+    const refKey: Ref<keyof typeof refs> = ref('foo')
+
+    const Comp = {
+      setup() {
+        return () => h('div', { ref: refs[refKey.value] })
+      }
+    }
+    render(h(Comp), root)
+    expect(refs.foo.value).toBe(root.children[0])
+    expect(refs.bar.value).toBe(null)
+
+    refKey.value = 'bar'
+    await nextTick()
+    expect(refs.foo.value).toBe(null)
+    expect(refs.bar.value).toBe(root.children[0])
+  })
+
+  it('render function ref unmount', async () => {
+    const root = nodeOps.createElement('div')
+    const el = ref(null)
+    const toggle = ref(true)
+
+    const Comp = {
+      setup() {
+        return () => (toggle.value ? h('div', { ref: el }) : null)
+      }
+    }
+    render(h(Comp), root)
+    expect(el.value).toBe(root.children[0])
+
+    toggle.value = false
+    await nextTick()
+    expect(el.value).toBe(null)
+  })
 })