mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
test: Update tooltip test case (#38283)
This commit is contained in:
parent
759abca658
commit
302a8e5a58
@ -4,7 +4,7 @@ import type { TooltipPlacement } from '..';
|
|||||||
import Tooltip from '..';
|
import Tooltip from '..';
|
||||||
import mountTest from '../../../tests/shared/mountTest';
|
import mountTest from '../../../tests/shared/mountTest';
|
||||||
import rtlTest from '../../../tests/shared/rtlTest';
|
import rtlTest from '../../../tests/shared/rtlTest';
|
||||||
import { fireEvent, render, sleep, waitFor } from '../../../tests/utils';
|
import { fireEvent, render, waitFakeTimer, waitFor } from '../../../tests/utils';
|
||||||
import Button from '../../button';
|
import Button from '../../button';
|
||||||
import DatePicker from '../../date-picker';
|
import DatePicker from '../../date-picker';
|
||||||
import Input from '../../input';
|
import Input from '../../input';
|
||||||
@ -258,6 +258,7 @@ describe('Tooltip', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should works for date picker', async () => {
|
it('should works for date picker', async () => {
|
||||||
|
jest.useFakeTimers();
|
||||||
const onOpenChange = jest.fn();
|
const onOpenChange = jest.fn();
|
||||||
const onVisibleChange = jest.fn();
|
const onVisibleChange = jest.fn();
|
||||||
const ref = React.createRef<any>();
|
const ref = React.createRef<any>();
|
||||||
@ -277,21 +278,24 @@ describe('Tooltip', () => {
|
|||||||
const picker = container.getElementsByClassName('ant-picker')[0];
|
const picker = container.getElementsByClassName('ant-picker')[0];
|
||||||
|
|
||||||
fireEvent.mouseEnter(picker);
|
fireEvent.mouseEnter(picker);
|
||||||
await sleep(100);
|
await waitFakeTimer();
|
||||||
expect(onOpenChange).toHaveBeenCalledWith(true);
|
expect(onOpenChange).toHaveBeenCalledWith(true);
|
||||||
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
||||||
expect(ref.current?.props.visible).toBe(true);
|
expect(ref.current?.props.visible).toBe(true);
|
||||||
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
|
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
|
||||||
|
|
||||||
fireEvent.mouseLeave(picker);
|
fireEvent.mouseLeave(picker);
|
||||||
await sleep(100);
|
await waitFakeTimer();
|
||||||
expect(onOpenChange).toHaveBeenCalledWith(false);
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
||||||
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
||||||
expect(ref.current?.props.visible).toBe(false);
|
expect(ref.current?.props.visible).toBe(false);
|
||||||
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
|
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
|
||||||
|
jest.clearAllTimers();
|
||||||
|
jest.useRealTimers();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should works for input group', async () => {
|
it('should works for input group', async () => {
|
||||||
|
jest.useFakeTimers();
|
||||||
const onOpenChange = jest.fn();
|
const onOpenChange = jest.fn();
|
||||||
const onVisibleChange = jest.fn();
|
const onVisibleChange = jest.fn();
|
||||||
const ref = React.createRef<any>();
|
const ref = React.createRef<any>();
|
||||||
@ -312,18 +316,20 @@ describe('Tooltip', () => {
|
|||||||
expect(container.getElementsByClassName('ant-input-group')).toHaveLength(1);
|
expect(container.getElementsByClassName('ant-input-group')).toHaveLength(1);
|
||||||
const inputGroup = container.getElementsByClassName('ant-input-group')[0];
|
const inputGroup = container.getElementsByClassName('ant-input-group')[0];
|
||||||
fireEvent.mouseEnter(inputGroup);
|
fireEvent.mouseEnter(inputGroup);
|
||||||
await sleep(100);
|
await waitFakeTimer();
|
||||||
expect(onOpenChange).toHaveBeenCalledWith(true);
|
expect(onOpenChange).toHaveBeenCalledWith(true);
|
||||||
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
expect(onVisibleChange).toHaveBeenCalledWith(true);
|
||||||
expect(ref.current?.props.visible).toBe(true);
|
expect(ref.current?.props.visible).toBe(true);
|
||||||
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
|
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
|
||||||
|
|
||||||
fireEvent.mouseLeave(inputGroup);
|
fireEvent.mouseLeave(inputGroup);
|
||||||
await sleep(100);
|
await waitFakeTimer();
|
||||||
expect(onOpenChange).toHaveBeenCalledWith(false);
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
||||||
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
expect(onVisibleChange).toHaveBeenCalledWith(false);
|
||||||
expect(ref.current?.props.visible).toBe(false);
|
expect(ref.current?.props.visible).toBe(false);
|
||||||
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
|
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
|
||||||
|
jest.clearAllTimers();
|
||||||
|
jest.useRealTimers();
|
||||||
});
|
});
|
||||||
|
|
||||||
// https://github.com/ant-design/ant-design/issues/20891
|
// https://github.com/ant-design/ant-design/issues/20891
|
||||||
@ -355,6 +361,17 @@ describe('Tooltip', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('support other placement when mouse enter', () => {
|
describe('support other placement when mouse enter', () => {
|
||||||
|
beforeAll(() => {
|
||||||
|
jest.useFakeTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
jest.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
jest.clearAllTimers();
|
||||||
|
});
|
||||||
const placementList = [
|
const placementList = [
|
||||||
'top',
|
'top',
|
||||||
'left',
|
'left',
|
||||||
@ -379,7 +396,7 @@ describe('Tooltip', () => {
|
|||||||
expect(container.getElementsByTagName('span')).toHaveLength(1);
|
expect(container.getElementsByTagName('span')).toHaveLength(1);
|
||||||
const element = container.getElementsByTagName('span')[0];
|
const element = container.getElementsByTagName('span')[0];
|
||||||
fireEvent.mouseEnter(element);
|
fireEvent.mouseEnter(element);
|
||||||
await sleep(500);
|
await waitFakeTimer();
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(document.querySelector(`.ant-tooltip-placement-${placement}`)).not.toBeNull();
|
expect(document.querySelector(`.ant-tooltip-placement-${placement}`)).not.toBeNull();
|
||||||
});
|
});
|
||||||
@ -403,7 +420,7 @@ describe('Tooltip', () => {
|
|||||||
);
|
);
|
||||||
const button = container.getElementsByTagName('span')[0];
|
const button = container.getElementsByTagName('span')[0];
|
||||||
fireEvent.mouseEnter(button);
|
fireEvent.mouseEnter(button);
|
||||||
await sleep(600);
|
await waitFakeTimer();
|
||||||
expect(document.querySelector('.ant-tooltip')).not.toBeNull();
|
expect(document.querySelector('.ant-tooltip')).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user