/
popover.test.ts
154 lines (131 loc) Β· 3.77 KB
/
popover.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import { h, nextTick } from 'vue'
import { afterEach, describe, expect, it, test, vi } from 'vitest'
import { POPPER_CONTAINER_SELECTOR, useZIndex } from '@element-plus/hooks'
import makeMount from '@element-plus/test-utils/make-mount'
import { rAF } from '@element-plus/test-utils/tick'
import { ElPopperTrigger } from '@element-plus/components/popper'
import Popover from '../src/popover.vue'
const AXIOM = 'Rem is the best girl'
const mount = makeMount(Popover, {
slots: {
default: () => AXIOM,
reference: () => h('button', 'click me'),
},
props: {},
global: {
attachTo: document.body,
},
})
describe('Popover.vue', () => {
let wrapper: ReturnType<typeof mount>
const findContentComp = () =>
wrapper.findComponent({
name: 'ElPopperContent',
})
afterEach(() => {
wrapper?.unmount()
document.body.innerHTML = ''
})
test('render test', () => {
wrapper = mount()
expect(findContentComp().text()).toEqual(AXIOM)
})
test('should render with title', () => {
const title = 'test title'
wrapper = mount({
props: {
title,
},
})
expect(findContentComp().text()).toContain(title)
})
test("should modify popover's style with width", async () => {
wrapper = mount({
props: {
width: 200,
},
})
const popperContent = findContentComp()
expect(getComputedStyle(popperContent.element).width).toBe('200px')
await wrapper.setProps({
width: '100vw',
})
expect(getComputedStyle(popperContent.element).width).toBe('100vw')
})
test('the content should be overrode by slots', () => {
const content = 'test content'
wrapper = mount({
props: {
content,
},
})
expect(findContentComp().text()).toContain(AXIOM)
})
test('should render content when no slots were passed', () => {
const content = 'test content'
const virtualRef = document.createElement('button')
wrapper = makeMount(Popover, {
props: {
content,
teleported: false,
virtualRef,
virtualTriggering: true,
},
})()
expect(findContentComp().text()).toBe(content)
})
test('popper z-index should be dynamical', () => {
wrapper = mount()
const { currentZIndex } = useZIndex()
expect(
Number.parseInt(window.getComputedStyle(findContentComp().element).zIndex)
).toBeLessThanOrEqual(currentZIndex.value)
})
test('defind hide method', async () => {
wrapper = mount()
const vm = wrapper.vm as any
expect(vm.hide).toBeDefined()
})
test('should be able to emit after-enter and after-leave', async () => {
const wrapper = mount({
attrs: {
trigger: 'click',
},
})
await nextTick()
const trigger$ = wrapper.findComponent(ElPopperTrigger)
const triggerEl = trigger$.find('.el-tooltip__trigger')
vi.useFakeTimers()
await triggerEl.trigger('click')
vi.runAllTimers()
vi.useRealTimers()
await rAF()
expect(wrapper.emitted()).toHaveProperty('after-enter')
vi.useFakeTimers()
await triggerEl.trigger('click')
vi.runAllTimers()
vi.useRealTimers()
await rAF()
expect(wrapper.emitted()).toHaveProperty('after-leave')
})
describe('teleported API', () => {
it('should mount on popper container', async () => {
expect(document.body.innerHTML).toBe('')
mount()
await nextTick()
expect(
document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
).not.toBe('')
})
it('should not mount on the popper container', async () => {
expect(document.body.innerHTML).toBe('')
mount({
props: { teleported: false },
})
await nextTick()
expect(
document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
).toBe('')
})
})
})