import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import React from 'react'; import Tooltip from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render, sleep, waitFor } from '../../../tests/utils'; import Button from '../../button'; import DatePicker from '../../date-picker'; import Input from '../../input'; import Group from '../../input/Group'; import Switch from '../../switch'; import Radio from '../../radio'; describe('Tooltip', () => { mountTest(Tooltip); rtlTest(Tooltip); beforeAll(() => { spyElementPrototype(HTMLElement, 'offsetParent', { get: () => ({}), }); }); it('check `onVisibleChange` arguments', () => { const onVisibleChange = jest.fn(); const ref = React.createRef(); const { container, rerender } = render(
Hello world!
, ); // `title` is empty. const divElement = container.querySelector('#hello'); fireEvent.mouseEnter(divElement); expect(onVisibleChange).not.toHaveBeenCalled(); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); fireEvent.mouseLeave(divElement); expect(onVisibleChange).not.toHaveBeenCalled(); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); // update `title` value. rerender(
Hello world!
, ); fireEvent.mouseEnter(divElement); expect(onVisibleChange).toHaveBeenLastCalledWith(true); expect(ref.current.props.visible).toBe(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); fireEvent.mouseLeave(divElement); expect(onVisibleChange).toHaveBeenLastCalledWith(false); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); // add `visible` props. rerender(
Hello world!
, ); fireEvent.mouseEnter(divElement); expect(onVisibleChange).toHaveBeenLastCalledWith(true); const lastCount = onVisibleChange.mock.calls.length; expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); // always trigger onVisibleChange fireEvent.mouseLeave(divElement); expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); }); it('should hide when mouse leave native disabled button', () => { const onVisibleChange = jest.fn(); const ref = React.createRef(); const { container } = render( , ); expect(container.getElementsByTagName('span')).toHaveLength(1); const button = container.getElementsByTagName('span')[0]; fireEvent.mouseEnter(button); expect(onVisibleChange).toHaveBeenCalledWith(true); expect(ref.current.props.visible).toBe(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); fireEvent.mouseLeave(button); expect(onVisibleChange).toHaveBeenCalledWith(false); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); }); describe('should hide when mouse leave antd disabled component', () => { function testComponent(name, Component) { it(name, () => { const onVisibleChange = jest.fn(); const ref = React.createRef(); const { container } = render( , ); expect(container.children[0]).toMatchSnapshot(); const button = container.getElementsByTagName('span')[0]; fireEvent.mouseEnter(button); expect(onVisibleChange).toHaveBeenCalledWith(true); expect(ref.current.props.visible).toBe(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); fireEvent.mouseLeave(button); expect(onVisibleChange).toHaveBeenCalledWith(false); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); }); } testComponent('Button', Button); testComponent('Switch', Switch); }); it('should render disabled Button style properly', () => { const { container: containerInline } = render( , ); const { container: containerBlock } = render( , ); expect(containerInline.getElementsByTagName('span')[0].style.display).toBe('inline-block'); expect(containerBlock.getElementsByTagName('span')[0].style.display).toBe('block'); }); it('should works for arrowPointAtCenter', () => { const arrowWidth = 5; const horizontalArrowShift = 16; const triggerWidth = 200; const suit = () => { const { container } = render( , ); fireEvent.click(container.getElementsByTagName('button')[0]); const popupLeftDefault = parseInt(container.querySelector('.default-element').style.left, 10); const { container: container2 } = render( , ); fireEvent.click(container2.getElementsByTagName('button')[0]); const popupLeftArrowPointAtCenter = parseInt( container.querySelector('.point-center-element').style.left, 10, ); expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe( triggerWidth / 2 - horizontalArrowShift - arrowWidth, ); }; jest.dontMock('rc-trigger', suit); }); it('should works for date picker', async () => { const onVisibleChange = jest.fn(); const ref = React.createRef(); const { container } = render( , ); expect(container.getElementsByClassName('ant-picker')).toHaveLength(1); const picker = container.getElementsByClassName('ant-picker')[0]; fireEvent.mouseEnter(picker); await sleep(100); expect(onVisibleChange).toHaveBeenCalledWith(true); expect(ref.current.props.visible).toBe(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); fireEvent.mouseLeave(picker); await sleep(100); expect(onVisibleChange).toHaveBeenCalledWith(false); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); }); it('should works for input group', async () => { const onVisibleChange = jest.fn(); const ref = React.createRef(); const { container } = render( , ); expect(container.getElementsByClassName('ant-input-group')).toHaveLength(1); const inputGroup = container.getElementsByClassName('ant-input-group')[0]; fireEvent.mouseEnter(inputGroup); await sleep(100); expect(onVisibleChange).toHaveBeenCalledWith(true); expect(ref.current.props.visible).toBe(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); fireEvent.mouseLeave(inputGroup); await sleep(100); expect(onVisibleChange).toHaveBeenCalledWith(false); expect(ref.current.props.visible).toBe(false); expect(container.querySelector('.ant-tooltip-open')).toBeNull(); }); // https://github.com/ant-design/ant-design/issues/20891 it('should display zero', () => { const { container } = render(
, ); expect(container.querySelector('.ant-tooltip-inner').innerHTML).toBe('0'); }); it('autoAdjustOverflow should be object or undefined', () => { expect(() => { render(
, ); }).not.toThrow(); expect(() => { render(
, ); }).not.toThrow(); }); describe('support other placement when mouse enter', () => { const placementList = [ 'top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom', ]; const testPlacement = (name, placement) => { it(name, async () => { const { container } = render( Hello world! , ); expect(container.getElementsByTagName('span')).toHaveLength(1); const element = container.getElementsByTagName('span')[0]; fireEvent.mouseEnter(element); await sleep(500); await waitFor(() => { expect(document.querySelector(`.ant-tooltip-placement-${placement}`)).not.toBeNull(); }); }); }; placementList.forEach(placement => testPlacement(`Placement ${placement}`, placement)); }); it('should works for mismatch placement', async () => { const { container } = render( Hello world! , ); const button = container.getElementsByTagName('span')[0]; fireEvent.mouseEnter(button); await sleep(600); expect(document.querySelector('.ant-tooltip')).not.toBeNull(); }); it('should pass overlayInnerStyle through to the inner component', () => { const { container } = render(
, ); expect(container.querySelector('.ant-tooltip-inner').style.color).toBe('red'); }); it('should work with loading switch', () => { const onVisibleChange = jest.fn(); const { container } = render( , ); const wrapperEl = container.querySelectorAll('.ant-tooltip-disabled-compatible-wrapper'); expect(wrapperEl).toHaveLength(1); fireEvent.mouseEnter(container.getElementsByTagName('span')[0]); expect(onVisibleChange).toHaveBeenLastCalledWith(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); }); it('should work with disabled Radio', () => { const onVisibleChange = jest.fn(); const { container } = render( , ); const wrapperEl = container.querySelectorAll('.ant-tooltip-disabled-compatible-wrapper'); expect(wrapperEl).toHaveLength(1); fireEvent.mouseEnter(container.getElementsByTagName('span')[0]); expect(onVisibleChange).toHaveBeenLastCalledWith(true); expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); }); });