Skip to content

Commit 0771acb

Browse files
tangjinzhoutangjinzhou
committed
test: add tooltip test
1 parent d5baf1b commit 0771acb

File tree

1 file changed

+215
-0
lines changed

1 file changed

+215
-0
lines changed

‎components/tooltip/__tests__/tooltip.test.js

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
import { asyncExpect } from '@/tests/utils'
2+
import { mount } from '@vue/test-utils'
3+
import Tooltip from '..'
4+
import Button from '../../button'
5+
6+
describe('Tooltip', () => {
7+
it('check `onVisibleChange` arguments', async () => {
8+
const onVisibleChange = jest.fn()
9+
const wrapper = mount({
10+
props: ['title', 'visible'],
11+
render () {
12+
const props = {
13+
props: {
14+
title: this.title || '',
15+
mouseEnterDelay: 0,
16+
mouseLeaveDelay: 0,
17+
},
18+
on: {
19+
visibleChange: onVisibleChange,
20+
},
21+
}
22+
if (this.visible !== undefined) {
23+
props.props.visible = this.visible
24+
}
25+
return <Tooltip
26+
ref='tooltip'
27+
{...props}
28+
>
29+
<div id='hello'>Hello world!</div>
30+
</Tooltip>
31+
},
32+
}, { sync: false })
33+
34+
let div = null
35+
let lastCount = null
36+
await asyncExpect(() => {
37+
// `title` is empty.
38+
div = wrapper.findAll('#hello').at(0)
39+
div.trigger('mouseenter')
40+
})
41+
await asyncExpect(() => {
42+
expect(onVisibleChange).not.toHaveBeenCalled()
43+
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
44+
})
45+
await asyncExpect(() => {
46+
div.trigger('mouseleave')
47+
})
48+
await asyncExpect(() => {
49+
expect(onVisibleChange).not.toHaveBeenCalled()
50+
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
51+
})
52+
await asyncExpect(() => {
53+
// update `title` value.
54+
wrapper.setProps({ title: 'Have a nice day!' })
55+
})
56+
await asyncExpect(() => {
57+
wrapper.findAll('#hello').at(0).trigger('mouseenter')
58+
})
59+
await asyncExpect(() => {
60+
expect(onVisibleChange).toHaveBeenLastCalledWith(true)
61+
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
62+
}, 0)
63+
await asyncExpect(() => {
64+
wrapper.find('#hello').trigger('mouseleave')
65+
})
66+
await asyncExpect(() => {
67+
expect(onVisibleChange).toHaveBeenLastCalledWith(false)
68+
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
69+
})
70+
await asyncExpect(() => {
71+
// add `visible` props.
72+
wrapper.setProps({ visible: false })
73+
})
74+
await asyncExpect(() => {
75+
wrapper.find('#hello').trigger('mouseenter')
76+
})
77+
await asyncExpect(() => {
78+
expect(onVisibleChange).toHaveBeenLastCalledWith(true)
79+
lastCount = onVisibleChange.mock.calls.length
80+
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
81+
})
82+
await asyncExpect(() => {
83+
// always trigger onVisibleChange
84+
wrapper.trigger('mouseleave')
85+
})
86+
await asyncExpect(() => {
87+
expect(onVisibleChange.mock.calls.length).toBe(lastCount) // no change with lastCount
88+
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
89+
})
90+
await asyncExpect(() => {
91+
92+
})
93+
})
94+
95+
// it('should hide when mouse leave native disabled button', () => {
96+
// const onVisibleChange = jest.fn()
97+
// const wrapper = mount(
98+
// <Tooltip
99+
// title='xxxxx'
100+
// mouseEnterDelay={0}
101+
// mouseLeaveDelay={0}
102+
// onVisibleChange={onVisibleChange}
103+
// >
104+
// <button disabled>Hello world!</button>
105+
// </Tooltip>
106+
// )
107+
108+
// expect(wrapper.find('span')).toHaveLength(1)
109+
// const button = wrapper.find('span').at(0)
110+
// button.dispatchEvent(new MouseEvent('mouseenter'))
111+
// expect(onVisibleChange).toBeCalledWith(true)
112+
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
113+
114+
// button.trigger('mouseleave')
115+
// expect(onVisibleChange).toBeCalledWith(false)
116+
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
117+
// })
118+
119+
// it('should hide when mouse leave antd disabled Button', () => {
120+
// const onVisibleChange = jest.fn()
121+
// const wrapper = mount(
122+
// <Tooltip
123+
// title='xxxxx'
124+
// mouseEnterDelay={0}
125+
// mouseLeaveDelay={0}
126+
// onVisibleChange={onVisibleChange}
127+
// >
128+
// <Button disabled>Hello world!</Button>
129+
// </Tooltip>
130+
// )
131+
132+
// expect(wrapper.render()).toMatchSnapshot()
133+
// const button = wrapper.find('span').at(0)
134+
// button.dispatchEvent(new MouseEvent('mouseenter'))
135+
// expect(onVisibleChange).toBeCalledWith(true)
136+
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
137+
138+
// button.trigger('mouseleave')
139+
// expect(onVisibleChange).toBeCalledWith(false)
140+
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
141+
// })
142+
143+
// it('should render disabled Button style properly', () => {
144+
// const wrapper1 = mount(
145+
// <Tooltip title='xxxxx'>
146+
// <Button disabled>Hello world!</Button>
147+
// </Tooltip>
148+
// )
149+
// const wrapper2 = mount(
150+
// <Tooltip title='xxxxx'>
151+
// <Button disabled style={{ display: 'block' }}>Hello world!</Button>
152+
// </Tooltip>
153+
// )
154+
// expect(wrapper1.find('span').at(0).element.style.display).toBe('inline-block')
155+
// expect(wrapper2.find('span').at(0).element.style.display).toBe('block')
156+
// })
157+
158+
// it('should not wrap span when trigger is not hover', () => {
159+
// const wrapper = mount(
160+
// <Tooltip
161+
// title='xxxxx'
162+
// trigger='click'
163+
// mouseEnterDelay={0}
164+
// mouseLeaveDelay={0}
165+
// >
166+
// <button disabled>Hello world!</button>
167+
// </Tooltip>
168+
// )
169+
170+
// expect(wrapper.find('span')).toHaveLength(0)
171+
// })
172+
173+
// it('should works for arrowPointAtCenter', () => {
174+
// const arrowWidth = 5
175+
// const horizontalArrowShift = 16
176+
// const triggerWidth = 200
177+
178+
// const suit = () => {
179+
// const wrapper = mount(
180+
// <Tooltip
181+
// title='xxxxx'
182+
// trigger='click'
183+
// mouseEnterDelay={0}
184+
// mouseLeaveDelay={0}
185+
// placement='bottomLeft'
186+
// >
187+
// <button style={{ width: triggerWidth }}>
188+
// Hello world!
189+
// </button>
190+
// </Tooltip>
191+
// )
192+
// wrapper.find('button').at(0).trigger('click')
193+
// const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10)
194+
195+
// const wrapper2 = mount(
196+
// <Tooltip
197+
// title='xxxxx'
198+
// trigger='click'
199+
// mouseEnterDelay={0}
200+
// mouseLeaveDelay={0}
201+
// placement='bottomLeft'
202+
// arrowPointAtCenter
203+
// >
204+
// <button style={{ width: triggerWidth }}>
205+
// Hello world!
206+
// </button>
207+
// </Tooltip>
208+
// )
209+
// wrapper2.find('button').at(0).trigger('click')
210+
// const popupLeftArrowPointAtCenter = parseInt(wrapper2.instance().getPopupDomNode().style.left, 10)
211+
// expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe((triggerWidth / 2) - horizontalArrowShift - arrowWidth)
212+
// }
213+
// jest.dontMock('rc-trigger', suit)
214+
// })
215+
})

0 commit comments

Comments
 (0)