ant-design-vue/components/tooltip/__tests__/tooltip.test.js

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)
  // })
})