2017-01-14 15:23:02 +08:00
|
|
|
import React from 'react';
|
|
|
|
import { mount } from 'enzyme';
|
|
|
|
import Tooltip from '..';
|
2017-02-16 14:03:05 +08:00
|
|
|
import Button from '../../button';
|
2019-06-30 00:29:48 +08:00
|
|
|
import Switch from '../../switch';
|
2019-08-07 14:33:01 +08:00
|
|
|
import Checkbox from '../../checkbox';
|
2018-07-29 09:40:58 +08:00
|
|
|
import DatePicker from '../../date-picker';
|
2018-08-02 11:22:32 +08:00
|
|
|
import Input from '../../input';
|
|
|
|
import Group from '../../input/Group';
|
2019-07-31 18:06:31 +08:00
|
|
|
import { sleep } from '../../../tests/utils';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2018-07-29 10:34:43 +08:00
|
|
|
|
2017-01-14 15:23:02 +08:00
|
|
|
describe('Tooltip', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Tooltip);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Tooltip);
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2017-01-14 15:23:02 +08:00
|
|
|
it('check `onVisibleChange` arguments', () => {
|
|
|
|
const onVisibleChange = jest.fn();
|
|
|
|
|
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Tooltip title="" mouseEnterDelay={0} mouseLeaveDelay={0} onVisibleChange={onVisibleChange}>
|
|
|
|
<div id="hello">Hello world!</div>
|
|
|
|
</Tooltip>,
|
2017-01-14 15:23:02 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
// `title` is empty.
|
2017-11-11 00:07:03 +08:00
|
|
|
const div = wrapper.find('#hello').at(0);
|
2017-01-14 15:23:02 +08:00
|
|
|
div.simulate('mouseenter');
|
|
|
|
expect(onVisibleChange).not.toHaveBeenCalled();
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
2017-01-14 15:23:02 +08:00
|
|
|
|
|
|
|
div.simulate('mouseleave');
|
|
|
|
expect(onVisibleChange).not.toHaveBeenCalled();
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
2017-01-14 15:23:02 +08:00
|
|
|
|
|
|
|
// update `title` value.
|
|
|
|
wrapper.setProps({ title: 'Have a nice day!' });
|
2017-11-11 00:07:03 +08:00
|
|
|
wrapper.find('#hello').simulate('mouseenter');
|
2017-01-15 00:27:02 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenLastCalledWith(true);
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(true);
|
2017-01-14 15:23:02 +08:00
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
wrapper.find('#hello').simulate('mouseleave');
|
2017-01-15 00:27:02 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenLastCalledWith(false);
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
2017-01-14 15:23:02 +08:00
|
|
|
|
|
|
|
// add `visible` props.
|
|
|
|
wrapper.setProps({ visible: false });
|
2017-11-11 00:07:03 +08:00
|
|
|
wrapper.find('#hello').simulate('mouseenter');
|
2017-01-15 00:27:02 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenLastCalledWith(true);
|
|
|
|
const lastCount = onVisibleChange.mock.calls.length;
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
2017-01-14 15:23:02 +08:00
|
|
|
|
2017-01-15 00:27:02 +08:00
|
|
|
// always trigger onVisibleChange
|
2017-01-14 15:23:02 +08:00
|
|
|
wrapper.simulate('mouseleave');
|
2017-01-15 00:27:02 +08:00
|
|
|
expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
2017-01-14 15:23:02 +08:00
|
|
|
});
|
2017-02-16 14:03:05 +08:00
|
|
|
|
|
|
|
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}
|
|
|
|
>
|
2018-12-07 16:17:45 +08:00
|
|
|
<button type="button" disabled>
|
|
|
|
Hello world!
|
|
|
|
</button>
|
|
|
|
</Tooltip>,
|
2017-02-16 14:03:05 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.find('span')).toHaveLength(1);
|
|
|
|
const button = wrapper.find('span').at(0);
|
|
|
|
button.simulate('mouseenter');
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(true);
|
2017-02-16 14:03:05 +08:00
|
|
|
|
|
|
|
button.simulate('mouseleave');
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
2017-09-08 09:45:34 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
2017-02-16 14:03:05 +08:00
|
|
|
});
|
|
|
|
|
2019-06-30 00:29:48 +08:00
|
|
|
describe('should hide when mouse leave antd disabled component', () => {
|
|
|
|
function testComponent(name, Component) {
|
|
|
|
it(name, () => {
|
|
|
|
const onVisibleChange = jest.fn();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Tooltip
|
|
|
|
title="xxxxx"
|
|
|
|
mouseEnterDelay={0}
|
|
|
|
mouseLeaveDelay={0}
|
|
|
|
onVisibleChange={onVisibleChange}
|
|
|
|
>
|
|
|
|
<Component disabled />
|
|
|
|
</Tooltip>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
const button = wrapper.find('span').at(0);
|
|
|
|
button.simulate('mouseenter');
|
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(true);
|
|
|
|
|
|
|
|
button.simulate('mouseleave');
|
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
testComponent('Button', Button);
|
|
|
|
testComponent('Switch', Switch);
|
2019-08-07 14:33:01 +08:00
|
|
|
testComponent('Checkbox', Checkbox);
|
2017-02-16 14:03:05 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should render disabled Button style properly', () => {
|
|
|
|
const wrapper1 = mount(
|
|
|
|
<Tooltip title="xxxxx">
|
|
|
|
<Button disabled>Hello world!</Button>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Tooltip>,
|
2017-02-16 14:03:05 +08:00
|
|
|
);
|
|
|
|
const wrapper2 = mount(
|
|
|
|
<Tooltip title="xxxxx">
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button disabled style={{ display: 'block' }}>
|
|
|
|
Hello world!
|
|
|
|
</Button>
|
|
|
|
</Tooltip>,
|
2017-02-16 14:03:05 +08:00
|
|
|
);
|
2020-04-13 20:21:30 +08:00
|
|
|
expect(wrapper1.find('span').first().getDOMNode().style.display).toBe('inline-block');
|
|
|
|
expect(wrapper2.find('span').first().getDOMNode().style.display).toBe('block');
|
2017-02-16 14:03:05 +08:00
|
|
|
});
|
2017-03-14 19:04:18 +08:00
|
|
|
|
2017-07-16 16:00:23 +08:00
|
|
|
it('should works for arrowPointAtCenter', () => {
|
|
|
|
const arrowWidth = 5;
|
|
|
|
const horizontalArrowShift = 16;
|
|
|
|
const triggerWidth = 200;
|
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
const suit = () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Tooltip
|
|
|
|
title="xxxxx"
|
|
|
|
trigger="click"
|
|
|
|
mouseEnterDelay={0}
|
|
|
|
mouseLeaveDelay={0}
|
|
|
|
placement="bottomLeft"
|
|
|
|
>
|
2018-06-22 21:05:13 +08:00
|
|
|
<button type="button" style={{ width: triggerWidth }}>
|
2017-11-11 00:07:03 +08:00
|
|
|
Hello world!
|
|
|
|
</button>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Tooltip>,
|
2017-11-11 00:07:03 +08:00
|
|
|
);
|
2020-04-13 20:21:30 +08:00
|
|
|
wrapper.find('button').at(0).simulate('click');
|
2017-11-11 00:07:03 +08:00
|
|
|
const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10);
|
|
|
|
|
|
|
|
const wrapper2 = mount(
|
|
|
|
<Tooltip
|
|
|
|
title="xxxxx"
|
|
|
|
trigger="click"
|
|
|
|
mouseEnterDelay={0}
|
|
|
|
mouseLeaveDelay={0}
|
|
|
|
placement="bottomLeft"
|
|
|
|
arrowPointAtCenter
|
|
|
|
>
|
2018-06-22 21:05:13 +08:00
|
|
|
<button type="button" style={{ width: triggerWidth }}>
|
2017-11-11 00:07:03 +08:00
|
|
|
Hello world!
|
|
|
|
</button>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Tooltip>,
|
2017-11-11 00:07:03 +08:00
|
|
|
);
|
2020-04-13 20:21:30 +08:00
|
|
|
wrapper2.find('button').at(0).simulate('click');
|
2018-11-28 15:00:03 +08:00
|
|
|
const popupLeftArrowPointAtCenter = parseInt(
|
|
|
|
wrapper2.instance().getPopupDomNode().style.left,
|
2018-12-07 16:17:45 +08:00
|
|
|
10,
|
|
|
|
);
|
|
|
|
expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe(
|
|
|
|
triggerWidth / 2 - horizontalArrowShift - arrowWidth,
|
2018-11-28 15:00:03 +08:00
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
jest.dontMock('rc-trigger', suit);
|
2017-07-16 16:00:23 +08:00
|
|
|
});
|
2018-07-29 09:40:58 +08:00
|
|
|
|
2018-07-29 10:34:43 +08:00
|
|
|
it('should works for date picker', async () => {
|
2018-07-29 09:40:58 +08:00
|
|
|
const onVisibleChange = jest.fn();
|
|
|
|
|
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Tooltip title="date picker" onVisibleChange={onVisibleChange}>
|
2018-07-29 09:40:58 +08:00
|
|
|
<DatePicker />
|
2018-12-07 16:17:45 +08:00
|
|
|
</Tooltip>,
|
2018-07-29 09:40:58 +08:00
|
|
|
);
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
expect(wrapper.find('.ant-picker')).toHaveLength(1);
|
|
|
|
const picker = wrapper.find('.ant-picker').at(0);
|
2018-07-29 09:40:58 +08:00
|
|
|
picker.simulate('mouseenter');
|
2019-07-31 18:06:31 +08:00
|
|
|
await sleep(100);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
2018-07-29 09:40:58 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(true);
|
|
|
|
|
|
|
|
picker.simulate('mouseleave');
|
2019-07-31 18:06:31 +08:00
|
|
|
await sleep(100);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
2018-07-29 09:40:58 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
|
|
|
});
|
2018-08-02 11:22:32 +08:00
|
|
|
|
|
|
|
it('should works for input group', async () => {
|
|
|
|
const onVisibleChange = jest.fn();
|
|
|
|
|
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Tooltip title="hello" onVisibleChange={onVisibleChange}>
|
2018-08-02 11:22:32 +08:00
|
|
|
<Group>
|
|
|
|
<Input style={{ width: '50%' }} />
|
|
|
|
<Input style={{ width: '50%' }} />
|
|
|
|
</Group>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Tooltip>,
|
2018-08-02 11:22:32 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.find('Group')).toHaveLength(1);
|
|
|
|
const picker = wrapper.find('Group').at(0);
|
|
|
|
picker.simulate('mouseenter');
|
2019-07-31 18:06:31 +08:00
|
|
|
await sleep(100);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
2018-08-02 11:22:32 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(true);
|
|
|
|
|
|
|
|
picker.simulate('mouseleave');
|
2019-07-31 18:06:31 +08:00
|
|
|
await sleep(100);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
2018-08-02 11:22:32 +08:00
|
|
|
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
|
|
|
});
|
2020-01-14 17:55:40 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/20891
|
2020-03-04 21:03:08 +08:00
|
|
|
it('should display zero', () => {
|
2020-01-14 17:55:40 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Tooltip title={0} visible>
|
|
|
|
<div />
|
|
|
|
</Tooltip>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-tooltip-inner').getDOMNode().innerHTML).toBe('0');
|
|
|
|
});
|
2020-03-27 12:07:18 +08:00
|
|
|
|
2020-03-04 21:03:08 +08:00
|
|
|
it('autoAdjustOverflow should be object or undefined', () => {
|
|
|
|
expect(() => {
|
|
|
|
mount(
|
|
|
|
<Tooltip title={0} visible autoAdjustOverflow={{ adjustX: 0, adjustY: 0 }}>
|
|
|
|
<div />
|
|
|
|
</Tooltip>,
|
|
|
|
);
|
|
|
|
}).not.toThrow();
|
|
|
|
|
|
|
|
expect(() => {
|
|
|
|
mount(
|
|
|
|
<Tooltip title={0} visible autoAdjustOverflow={undefined}>
|
|
|
|
<div />
|
|
|
|
</Tooltip>,
|
|
|
|
);
|
|
|
|
}).not.toThrow();
|
|
|
|
});
|
|
|
|
|
2020-04-13 20:21:30 +08:00
|
|
|
it('support other placement', done => {
|
2020-03-04 21:03:08 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Tooltip
|
|
|
|
title="xxxxx"
|
|
|
|
placement="bottomLeft"
|
2020-03-20 15:07:47 +08:00
|
|
|
transitionName=""
|
2020-03-23 14:34:42 +08:00
|
|
|
mouseEnterDelay={0}
|
2020-04-13 20:21:30 +08:00
|
|
|
afterVisibleChange={visible => {
|
|
|
|
if (visible) {
|
|
|
|
expect(wrapper.find('Trigger').props().popupPlacement).toBe('bottomLeft');
|
|
|
|
}
|
|
|
|
done();
|
|
|
|
}}
|
2020-03-04 21:03:08 +08:00
|
|
|
>
|
2020-04-13 20:21:30 +08:00
|
|
|
<span>Hello world!</span>
|
2020-03-04 21:03:08 +08:00
|
|
|
</Tooltip>,
|
|
|
|
);
|
2020-04-13 20:21:30 +08:00
|
|
|
expect(wrapper.find('span')).toHaveLength(1);
|
|
|
|
const button = wrapper.find('span').at(0);
|
|
|
|
button.simulate('mouseenter');
|
2020-03-20 15:07:47 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('other placement when mouse enter', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Tooltip
|
|
|
|
title="xxxxx"
|
|
|
|
placement="topRight"
|
|
|
|
transitionName=""
|
2020-04-13 20:21:30 +08:00
|
|
|
popupTransitionName=""
|
2020-03-23 14:34:42 +08:00
|
|
|
mouseEnterDelay={0}
|
2020-03-20 15:07:47 +08:00
|
|
|
>
|
2020-04-13 20:21:30 +08:00
|
|
|
<span>Hello world!</span>
|
2020-03-20 15:07:47 +08:00
|
|
|
</Tooltip>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.find('span')).toHaveLength(1);
|
|
|
|
const button = wrapper.find('span').at(0);
|
2020-03-04 21:03:08 +08:00
|
|
|
button.simulate('mouseenter');
|
2020-04-13 20:21:30 +08:00
|
|
|
await sleep(500);
|
2020-03-04 21:03:08 +08:00
|
|
|
expect(wrapper.instance().getPopupDomNode().className).toContain('placement-topRight');
|
|
|
|
});
|
2020-04-29 21:30:36 +08:00
|
|
|
|
|
|
|
it('should works for mismatch placement', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Tooltip
|
|
|
|
title="xxxxx"
|
|
|
|
align={{
|
2020-05-01 15:03:27 +08:00
|
|
|
points: ['bc', 'tl'],
|
2020-04-29 21:30:36 +08:00
|
|
|
}}
|
2020-05-01 15:03:27 +08:00
|
|
|
mouseEnterDelay={0}
|
2020-04-29 21:30:36 +08:00
|
|
|
>
|
|
|
|
<span>Hello world!</span>
|
|
|
|
</Tooltip>,
|
|
|
|
);
|
2020-05-01 15:03:27 +08:00
|
|
|
const button = wrapper.find('span').at(0);
|
|
|
|
button.simulate('mouseenter');
|
|
|
|
await sleep(600);
|
|
|
|
expect(wrapper.instance().getPopupDomNode().className).toContain('ant-tooltip');
|
2020-04-29 21:30:36 +08:00
|
|
|
});
|
2017-01-14 15:23:02 +08:00
|
|
|
});
|