From 0771acb193d2a227913fd54583eaeca260d1ab87 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Sun, 10 Jun 2018 21:53:52 +0800 Subject: [PATCH] test: add tooltip test --- components/tooltip/__tests__/tooltip.test.js | 215 +++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 components/tooltip/__tests__/tooltip.test.js diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js new file mode 100644 index 000000000..f104c0e9f --- /dev/null +++ b/components/tooltip/__tests__/tooltip.test.js @@ -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 +
Hello world!
+ + }, + }, { 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( + // + // + // + // ) + + // 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( + // + // + // + // ) + + // 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( + // + // + // + // ) + // const wrapper2 = mount( + // + // + // + // ) + // 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( + // + // + // + // ) + + // 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( + // + // + // + // ) + // wrapper.find('button').at(0).trigger('click') + // const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10) + + // const wrapper2 = mount( + // + // + // + // ) + // 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) + // }) +})