-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.test.ts
102 lines (87 loc) · 2.25 KB
/
index.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { defineComponent, h, nextTick, ref } from 'vue-demi'
import { mount } from '../../.test'
import { templateRef } from '.'
describe('templateRef', () => {
it('should be defined', () => {
expect(templateRef).toBeDefined()
})
it('string ref mount', () => {
const refKey = 'target'
const vm = mount(defineComponent({
setup() {
const targetEl = templateRef<HTMLElement | null>(refKey, null)
return { targetEl }
},
render() {
return h('div', { ref: refKey })
},
}))
expect(vm.targetEl).toBe(vm.$el)
})
it('string ref update', async () => {
const vm = mount(defineComponent({
setup() {
const refKey = ref('foo')
const fooEl = templateRef<HTMLElement | null>('foo', null)
const barEl = templateRef<HTMLElement | null>('bar', null)
return {
refKey,
fooEl,
barEl,
}
},
render() {
return h('div', { ref: this.refKey })
},
}))
expect(vm.fooEl).toBe(vm.$el)
expect(vm.barEl).toBe(null)
vm.refKey = 'bar'
await nextTick()
expect(vm.fooEl).toBe(null)
expect(vm.barEl).toBe(vm.$el)
})
it('string ref unmount', async () => {
const vm = mount(defineComponent({
setup() {
const toggle = ref(true)
const targetEl = templateRef<HTMLElement | null>('target', null)
return {
toggle,
targetEl,
}
},
render() {
return this.toggle ? h('div', { ref: 'target' }) : null
},
}))
expect(vm.targetEl).toBe(vm.$el)
vm.toggle = false
await nextTick()
expect(vm.targetEl).toBe(null)
})
it('support vue component as ref', async () => {
const ChildComponent = defineComponent({
name: 'ChildComponent',
render() {
return null
},
})
const vm = mount(defineComponent({
components: {
ChildComponent,
},
setup() {
const targetEl = templateRef<typeof ChildComponent>('target')
return {
targetEl,
}
},
render() {
return h(ChildComponent, { ref: 'target' })
},
}))
expect(vm.targetEl).toBeDefined()
expect(vm.targetEl.$options.name).toBe('ChildComponent')
})
})