test: add tooltip test
tjz
parent
d5baf1bfb1
commit
0771acb193
|
|
@ -0,0 +1,215 @@
|
|||
import { asyncExpect } from '@/tests/utils'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Tooltip from '..'
|
||||
import Button from '../../button'
|
||||
|
||||
describe('Tooltip', () => {
|
||||
it('check `onVisibleChange` arguments', async () => {
|
||||
const onVisibleChange = jest.fn()
|
||||
const wrapper = mount({
|
||||
props: ['title', 'visible'],
|
||||
render () {
|
||||
const props = {
|
||||
props: {
|
||||
title: this.title || '',
|
||||
mouseEnterDelay: 0,
|
||||
mouseLeaveDelay: 0,
|
||||
},
|
||||
on: {
|
||||
visibleChange: onVisibleChange,
|
||||
},
|
||||
}
|
||||
if (this.visible !== undefined) {
|
||||
props.props.visible = this.visible
|
||||
}
|
||||
return <Tooltip
|
||||
ref='tooltip'
|
||||
{...props}
|
||||
>
|
||||
<div id='hello'>Hello world!</div>
|
||||
</Tooltip>
|
||||
},
|
||||
}, { sync: false })
|
||||
|
||||
let div = null
|
||||
let lastCount = null
|
||||
await asyncExpect(() => {
|
||||
// `title` is empty.
|
||||
div = wrapper.findAll('#hello').at(0)
|
||||
div.trigger('mouseenter')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onVisibleChange).not.toHaveBeenCalled()
|
||||
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
div.trigger('mouseleave')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onVisibleChange).not.toHaveBeenCalled()
|
||||
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
// update `title` value.
|
||||
wrapper.setProps({ title: 'Have a nice day!' })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
wrapper.findAll('#hello').at(0).trigger('mouseenter')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onVisibleChange).toHaveBeenLastCalledWith(true)
|
||||
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
|
||||
}, 0)
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('#hello').trigger('mouseleave')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onVisibleChange).toHaveBeenLastCalledWith(false)
|
||||
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
// add `visible` props.
|
||||
wrapper.setProps({ visible: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('#hello').trigger('mouseenter')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onVisibleChange).toHaveBeenLastCalledWith(true)
|
||||
lastCount = onVisibleChange.mock.calls.length
|
||||
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
// always trigger onVisibleChange
|
||||
wrapper.trigger('mouseleave')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onVisibleChange.mock.calls.length).toBe(lastCount) // no change with lastCount
|
||||
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
// it('should hide when mouse leave native disabled button', () => {
|
||||
// const onVisibleChange = jest.fn()
|
||||
// const wrapper = mount(
|
||||
// <Tooltip
|
||||
// title='xxxxx'
|
||||
// mouseEnterDelay={0}
|
||||
// mouseLeaveDelay={0}
|
||||
// onVisibleChange={onVisibleChange}
|
||||
// >
|
||||
// <button disabled>Hello world!</button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
|
||||
// expect(wrapper.find('span')).toHaveLength(1)
|
||||
// const button = wrapper.find('span').at(0)
|
||||
// button.dispatchEvent(new MouseEvent('mouseenter'))
|
||||
// expect(onVisibleChange).toBeCalledWith(true)
|
||||
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
|
||||
|
||||
// button.trigger('mouseleave')
|
||||
// expect(onVisibleChange).toBeCalledWith(false)
|
||||
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
// })
|
||||
|
||||
// it('should hide when mouse leave antd disabled Button', () => {
|
||||
// const onVisibleChange = jest.fn()
|
||||
// const wrapper = mount(
|
||||
// <Tooltip
|
||||
// title='xxxxx'
|
||||
// mouseEnterDelay={0}
|
||||
// mouseLeaveDelay={0}
|
||||
// onVisibleChange={onVisibleChange}
|
||||
// >
|
||||
// <Button disabled>Hello world!</Button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
|
||||
// expect(wrapper.render()).toMatchSnapshot()
|
||||
// const button = wrapper.find('span').at(0)
|
||||
// button.dispatchEvent(new MouseEvent('mouseenter'))
|
||||
// expect(onVisibleChange).toBeCalledWith(true)
|
||||
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
|
||||
|
||||
// button.trigger('mouseleave')
|
||||
// expect(onVisibleChange).toBeCalledWith(false)
|
||||
// expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
|
||||
// })
|
||||
|
||||
// it('should render disabled Button style properly', () => {
|
||||
// const wrapper1 = mount(
|
||||
// <Tooltip title='xxxxx'>
|
||||
// <Button disabled>Hello world!</Button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
// const wrapper2 = mount(
|
||||
// <Tooltip title='xxxxx'>
|
||||
// <Button disabled style={{ display: 'block' }}>Hello world!</Button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
// expect(wrapper1.find('span').at(0).element.style.display).toBe('inline-block')
|
||||
// expect(wrapper2.find('span').at(0).element.style.display).toBe('block')
|
||||
// })
|
||||
|
||||
// it('should not wrap span when trigger is not hover', () => {
|
||||
// const wrapper = mount(
|
||||
// <Tooltip
|
||||
// title='xxxxx'
|
||||
// trigger='click'
|
||||
// mouseEnterDelay={0}
|
||||
// mouseLeaveDelay={0}
|
||||
// >
|
||||
// <button disabled>Hello world!</button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
|
||||
// expect(wrapper.find('span')).toHaveLength(0)
|
||||
// })
|
||||
|
||||
// it('should works for arrowPointAtCenter', () => {
|
||||
// const arrowWidth = 5
|
||||
// const horizontalArrowShift = 16
|
||||
// const triggerWidth = 200
|
||||
|
||||
// const suit = () => {
|
||||
// const wrapper = mount(
|
||||
// <Tooltip
|
||||
// title='xxxxx'
|
||||
// trigger='click'
|
||||
// mouseEnterDelay={0}
|
||||
// mouseLeaveDelay={0}
|
||||
// placement='bottomLeft'
|
||||
// >
|
||||
// <button style={{ width: triggerWidth }}>
|
||||
// Hello world!
|
||||
// </button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
// wrapper.find('button').at(0).trigger('click')
|
||||
// const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10)
|
||||
|
||||
// const wrapper2 = mount(
|
||||
// <Tooltip
|
||||
// title='xxxxx'
|
||||
// trigger='click'
|
||||
// mouseEnterDelay={0}
|
||||
// mouseLeaveDelay={0}
|
||||
// placement='bottomLeft'
|
||||
// arrowPointAtCenter
|
||||
// >
|
||||
// <button style={{ width: triggerWidth }}>
|
||||
// Hello world!
|
||||
// </button>
|
||||
// </Tooltip>
|
||||
// )
|
||||
// wrapper2.find('button').at(0).trigger('click')
|
||||
// const popupLeftArrowPointAtCenter = parseInt(wrapper2.instance().getPopupDomNode().style.left, 10)
|
||||
// expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe((triggerWidth / 2) - horizontalArrowShift - arrowWidth)
|
||||
// }
|
||||
// jest.dontMock('rc-trigger', suit)
|
||||
// })
|
||||
})
|
||||
Loading…
Reference in New Issue