ant-design/components/tooltip/__tests__/tooltip.test.tsx

608 lines
18 KiB
TypeScript
Raw Normal View History

2022-06-22 14:57:09 +08:00
import React from 'react';
import { spyElementPrototype } from 'rc-util/lib/test/domHook';
import { act } from 'react-dom/test-utils';
import type { TooltipPlacement } from '..';
import Tooltip from '..';
import getPlacements from '../../_util/placements';
import { resetWarned } from '../../_util/warning';
2022-06-22 14:57:09 +08:00
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import Button from '../../button';
import DatePicker from '../../date-picker';
import Input from '../../input';
import Group from '../../input/Group';
import Radio from '../../radio';
import Switch from '../../switch';
import { isTooltipOpen } from './util';
2018-07-29 10:34:43 +08:00
describe('Tooltip', () => {
2019-08-26 22:53:20 +08:00
mountTest(Tooltip);
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
rtlTest(Tooltip);
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
jest.clearAllTimers();
});
2019-08-26 22:53:20 +08:00
2020-09-21 16:38:43 +08:00
beforeAll(() => {
spyElementPrototype(HTMLElement, 'offsetParent', {
get: () => ({}),
});
});
it('check `onOpenChange` arguments', async () => {
const onOpenChange = jest.fn();
const ref = React.createRef<any>();
const { container, rerender } = render(
<Tooltip
title=""
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
ref={ref}
>
2018-12-07 16:17:45 +08:00
<div id="hello">Hello world!</div>
</Tooltip>,
);
// `title` is empty.
const divElement = container.querySelector('#hello');
fireEvent.mouseEnter(divElement!);
await waitFakeTimer();
expect(onOpenChange).not.toHaveBeenCalled();
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
fireEvent.mouseLeave(divElement!);
await waitFakeTimer();
expect(onOpenChange).not.toHaveBeenCalled();
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
// update `title` value.
rerender(
<Tooltip
title="Have a nice day!"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
ref={ref}
>
<div id="hello">Hello world!</div>
</Tooltip>,
);
fireEvent.mouseEnter(divElement!);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenLastCalledWith(true);
expect(isTooltipOpen()).toBeTruthy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
fireEvent.mouseLeave(divElement!);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenLastCalledWith(false);
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
// add `open` props.
rerender(
<Tooltip
title="Have a nice day!"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
ref={ref}
open={false}
>
<div id="hello">Hello world!</div>
</Tooltip>,
);
fireEvent.mouseEnter(divElement!);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenLastCalledWith(true);
const lastCount = onOpenChange.mock.calls.length;
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
// always trigger onOpenChange
fireEvent.mouseLeave(divElement!);
await waitFakeTimer();
expect(onOpenChange.mock.calls.length).toBe(lastCount); // no change with lastCount
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
it('should hide when mouse leave native disabled button', async () => {
const onOpenChange = jest.fn();
const ref = React.createRef<any>();
const { container } = render(
<Tooltip
title="xxxxx"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
ref={ref}
>
2018-12-07 16:17:45 +08:00
<button type="button" disabled>
Hello world!
</button>
</Tooltip>,
);
const button = container.getElementsByTagName('button')[0];
fireEvent.pointerEnter(button);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(true);
expect(isTooltipOpen()).toBeTruthy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
fireEvent.pointerLeave(button);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(false);
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
describe('should hide when mouse leave antd disabled component', () => {
function testComponent(name: string, Component: typeof Button | typeof Switch) {
it(name, async () => {
const onOpenChange = jest.fn();
const ref = React.createRef<any>();
const { container } = render(
<Tooltip
title="xxxxx"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
ref={ref}
>
<Component disabled />
</Tooltip>,
);
expect(container.children[0]).toMatchSnapshot();
const button = container.getElementsByTagName('button')[0];
fireEvent.pointerEnter(button);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(true);
expect(isTooltipOpen()).toBeTruthy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
fireEvent.pointerLeave(button);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(false);
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
}
testComponent('Button', Button);
testComponent('Switch', Switch);
});
it('should render disabled Button style properly', () => {
const { container: containerInline } = render(
<Tooltip title="xxxxx">
<Button disabled>Hello world!</Button>
2018-12-07 16:17:45 +08:00
</Tooltip>,
);
const { container: containerBlock } = render(
<Tooltip title="xxxxx">
2018-12-07 16:17:45 +08:00
<Button disabled style={{ display: 'block' }}>
Hello world!
</Button>
</Tooltip>,
);
expect(getComputedStyle(containerInline.querySelector('button')!)?.display).toBe(
'inline-block',
);
expect(getComputedStyle(containerBlock.querySelector('button')!)?.display).toBe('block');
});
it('should warn for arrowPointAtCenter', async () => {
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(
<Tooltip
title="xxxxx"
trigger="click"
mouseEnterDelay={0}
mouseLeaveDelay={0}
placement="bottomLeft"
arrowPointAtCenter
overlayClassName="point-center-element"
>
<button type="button">Hello world!</button>
</Tooltip>,
);
expect(warnSpy).toHaveBeenLastCalledWith(
expect.stringContaining('`arrowPointAtCenter` is deprecated'),
);
render(
<Tooltip
title="xxxxx"
trigger="click"
mouseEnterDelay={0}
mouseLeaveDelay={0}
placement="bottomLeft"
arrow={{ arrowPointAtCenter: true }}
overlayClassName="point-center-element"
>
<button type="button">Hello world!</button>
</Tooltip>,
);
expect(warnSpy).toHaveBeenCalledWith(
expect.stringContaining('`arrowPointAtCenter` in `arrow` is deprecated'),
);
});
2018-07-29 10:34:43 +08:00
it('should works for date picker', async () => {
const onOpenChange = jest.fn();
const ref = React.createRef<any>();
const { container } = render(
<Tooltip title="date picker" onOpenChange={onOpenChange} ref={ref}>
<DatePicker />
2018-12-07 16:17:45 +08:00
</Tooltip>,
);
expect(container.getElementsByClassName('ant-picker')).toHaveLength(1);
const picker = container.getElementsByClassName('ant-picker')[0];
fireEvent.mouseEnter(picker);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(true);
expect(isTooltipOpen()).toBeTruthy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
fireEvent.mouseLeave(picker);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(false);
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
it('should works for input group', async () => {
const onOpenChange = jest.fn();
const ref = React.createRef<any>();
const { container } = render(
<Tooltip title="hello" onOpenChange={onOpenChange} ref={ref}>
<Group>
<Input style={{ width: '50%' }} />
<Input style={{ width: '50%' }} />
</Group>
2018-12-07 16:17:45 +08:00
</Tooltip>,
);
expect(container.getElementsByClassName('ant-input-group')).toHaveLength(1);
2022-05-06 13:51:01 +08:00
const inputGroup = container.getElementsByClassName('ant-input-group')[0];
fireEvent.mouseEnter(inputGroup);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(true);
expect(isTooltipOpen()).toBeTruthy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
2022-05-06 13:51:01 +08:00
fireEvent.mouseLeave(inputGroup);
await waitFakeTimer();
expect(onOpenChange).toHaveBeenCalledWith(false);
expect(isTooltipOpen()).toBeFalsy();
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
// https://github.com/ant-design/ant-design/issues/20891
it('should display zero', () => {
const { container } = render(
<Tooltip title={0} open>
<div />
</Tooltip>,
);
expect(container.querySelector('.ant-tooltip-inner')?.innerHTML).toBe('0');
});
2020-03-27 12:07:18 +08:00
it('autoAdjustOverflow should be object or undefined', () => {
expect(() => {
render(
<Tooltip title={0} open autoAdjustOverflow={{ adjustX: 0, adjustY: 0 }}>
<div />
</Tooltip>,
);
}).not.toThrow();
expect(() => {
render(
<Tooltip title={0} open autoAdjustOverflow={undefined}>
<div />
</Tooltip>,
);
}).not.toThrow();
});
2022-05-07 10:43:59 +08:00
describe('support other placement when mouse enter', () => {
const placementList = [
'top',
'left',
'right',
'bottom',
'topLeft',
'topRight',
'bottomLeft',
'bottomRight',
'leftTop',
'leftBottom',
'rightTop',
'rightBottom',
] as const;
const testPlacement = (name: string, placement: TooltipPlacement) => {
2022-05-07 10:43:59 +08:00
it(name, async () => {
const { container } = render(
<Tooltip
title="xxxxx"
transitionName=""
mouseEnterDelay={0}
placement={placement}
autoAdjustOverflow={false}
>
2022-05-07 10:43:59 +08:00
<span>Hello world!</span>
</Tooltip>,
);
expect(container.getElementsByTagName('span')).toHaveLength(1);
const element = container.getElementsByTagName('span')[0];
fireEvent.mouseEnter(element);
await waitFakeTimer();
expect(document.querySelector(`.ant-tooltip-placement-${placement}`)).toBeTruthy();
});
it(`${name} with arrowPointAtCenter`, async () => {
const placementInfo: Record<string, any> = getPlacements({
arrowPointAtCenter: true,
autoAdjustOverflow: false,
arrowWidth: 0,
borderRadius: 10,
offset: 0,
2022-05-07 10:43:59 +08:00
});
// Safe to rewrite follow all check
const { offset } = placementInfo[placement];
const existO = offset[0] !== 0 || offset[1] !== 0;
if (['left', 'right', 'top', 'bottom'].includes(placement)) {
expect(existO).toBeFalsy();
} else {
expect(existO).toBeTruthy();
}
2022-05-07 10:43:59 +08:00
});
};
placementList.forEach((placement) => testPlacement(`Placement ${placement}`, placement));
});
it('should works for mismatch placement', async () => {
const { container } = render(
<Tooltip
title="xxxxx"
align={{
points: ['bc', 'tl'],
}}
mouseEnterDelay={0}
>
<span>Hello world!</span>
</Tooltip>,
);
const button = container.getElementsByTagName('span')[0];
fireEvent.mouseEnter(button);
await waitFakeTimer();
2022-05-06 23:44:27 +08:00
expect(document.querySelector('.ant-tooltip')).not.toBeNull();
});
it('should pass overlayInnerStyle through to the inner component', () => {
const { container } = render(
<Tooltip overlayInnerStyle={{ color: 'red' }} title="xxxxx" open>
<div />
</Tooltip>,
);
expect(container.querySelector<HTMLDivElement>('.ant-tooltip-inner')?.style?.color).toBe('red');
});
it('should work with loading switch', () => {
const onOpenChange = jest.fn();
const { container } = render(
<Tooltip
title="loading tips"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
>
<Switch loading defaultChecked />
</Tooltip>,
);
fireEvent.pointerEnter(container.getElementsByTagName('button')[0]);
expect(onOpenChange).toHaveBeenLastCalledWith(true);
2022-05-06 23:44:27 +08:00
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
});
it('should work with disabled Radio', () => {
const onOpenChange = jest.fn();
const { container } = render(
<Tooltip
title="loading tips"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
>
<Radio disabled />
</Tooltip>,
);
fireEvent.pointerEnter(container.getElementsByTagName('input')[0]);
expect(onOpenChange).toHaveBeenLastCalledWith(true);
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
});
it('should work with Fragment children', async () => {
const onOpenChange = jest.fn();
const ref = React.createRef<any>();
const { container } = render(
<Tooltip
title="Have a nice day!"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onOpenChange={onOpenChange}
ref={ref}
>
<>
<div className="hello">Hello world!</div>
<div className="hello">Hello world!</div>
</>
</Tooltip>,
);
const divElement = container.querySelector('.hello');
fireEvent.mouseEnter(divElement!);
expect(onOpenChange).toHaveBeenLastCalledWith(true);
await waitFakeTimer();
expect(isTooltipOpen()).toBeTruthy();
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
fireEvent.mouseLeave(divElement!);
expect(onOpenChange).toHaveBeenLastCalledWith(false);
await waitFakeTimer();
expect(isTooltipOpen()).toBeFalsy();
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
it('deprecated warning', async () => {
resetWarned();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
// defaultVisible
const { container, rerender } = render(
<Tooltip defaultVisible title="bamboo">
<a />
</Tooltip>,
);
await waitFakeTimer();
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Tooltip] `defaultVisible` is deprecated. Please use `defaultOpen` instead.',
);
expect(isTooltipOpen()).toBeTruthy();
// visible
rerender(
<Tooltip visible title="bamboo">
<a />
</Tooltip>,
);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Tooltip] `visible` is deprecated. Please use `open` instead.',
);
rerender(
<Tooltip visible={false} title="bamboo">
<a />
</Tooltip>,
);
await waitFakeTimer();
if (container.querySelector('.ant-zoom-big-fast-leave-active')) {
fireEvent.animationEnd(container.querySelector('.ant-zoom-big-fast-leave-active')!);
}
expect(isTooltipOpen()).toBeFalsy();
// onVisibleChange
rerender(
<Tooltip onVisibleChange={() => {}} title="bamboo">
<a />
</Tooltip>,
);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Tooltip] `onVisibleChange` is deprecated. Please use `onOpenChange` instead.',
);
// afterVisibleChange
rerender(
<Tooltip afterVisibleChange={() => {}} title="bamboo">
<a />
</Tooltip>,
);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Tooltip] `afterVisibleChange` is deprecated. Please use `afterOpenChange` instead.',
);
// Event Trigger
const onVisibleChange = jest.fn();
const afterVisibleChange = jest.fn();
rerender(
<Tooltip
visible
onVisibleChange={onVisibleChange}
afterVisibleChange={afterVisibleChange}
title="bamboo"
>
<a />
</Tooltip>,
);
fireEvent.mouseLeave(container.querySelector('a')!);
await waitFakeTimer();
expect(onVisibleChange).toHaveBeenCalled();
expect(afterVisibleChange).toHaveBeenCalled();
errSpy.mockRestore();
});
it('not inject className when children className is not string type', () => {
const HOC = ({ className }: { className: Function }) => <span className={className()} />;
const { container } = render(
<Tooltip open>
<HOC className={() => 'bamboo'} />
</Tooltip>,
);
expect(container.querySelector('.bamboo')).toBeTruthy();
expect(container.querySelector('.ant-tooltip')).toBeTruthy();
});
it('support arrow props pass false to hide arrow', () => {
const { container } = render(
<Tooltip open arrow={false}>
<div className="target">target</div>
</Tooltip>,
);
expect(container).toMatchSnapshot();
});
it('support arrow props by default', () => {
const { container } = render(
<Tooltip open>
<div className="target">target</div>
</Tooltip>,
);
expect(container).toMatchSnapshot();
});
it('use ref.current.forcePopupAlign', async () => {
const ref = React.createRef<any>();
const error = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Tooltip open ref={ref} />);
act(() => {
ref.current.forcePopupAlign();
jest.runAllTimers();
});
expect(error).toHaveBeenCalled();
error.mockRestore();
});
});