2023-06-07 21:59:21 +08:00
|
|
|
import type { TriggerProps } from '@rc-component/trigger';
|
2022-06-21 15:48:29 +08:00
|
|
|
import React from 'react';
|
2022-08-15 17:47:10 +08:00
|
|
|
import type { DropDownProps } from '..';
|
2023-06-07 11:54:50 +08:00
|
|
|
import Dropdown from '..';
|
2020-05-25 16:27:02 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-10-21 15:07:44 +08:00
|
|
|
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
2022-09-06 21:46:49 +08:00
|
|
|
import { resetWarned } from '../../_util/warning';
|
2020-05-25 16:27:02 +08:00
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
let triggerProps: TriggerProps;
|
|
|
|
|
|
|
|
jest.mock('@rc-component/trigger', () => {
|
|
|
|
let Trigger = jest.requireActual('@rc-component/trigger/lib/mock');
|
|
|
|
Trigger = Trigger.default || Trigger;
|
|
|
|
const h: typeof React = jest.requireActual('react');
|
|
|
|
|
|
|
|
return {
|
2023-07-08 15:45:28 +08:00
|
|
|
default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
|
2023-06-07 21:59:21 +08:00
|
|
|
triggerProps = props;
|
|
|
|
return h.createElement(Trigger, { ref, ...props });
|
|
|
|
}),
|
|
|
|
__esModule: true,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2020-05-25 16:27:02 +08:00
|
|
|
describe('Dropdown', () => {
|
2022-10-23 00:33:45 +08:00
|
|
|
const items = [
|
|
|
|
{
|
|
|
|
label: 'foo',
|
|
|
|
key: '1',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2020-05-25 16:27:02 +08:00
|
|
|
mountTest(() => (
|
2022-10-23 00:33:45 +08:00
|
|
|
<Dropdown menu={{ items }}>
|
2020-05-25 16:27:02 +08:00
|
|
|
<span />
|
|
|
|
</Dropdown>
|
|
|
|
));
|
|
|
|
|
|
|
|
rtlTest(() => (
|
2022-10-23 00:33:45 +08:00
|
|
|
<Dropdown menu={{ items }}>
|
2020-05-25 16:27:02 +08:00
|
|
|
<span />
|
|
|
|
</Dropdown>
|
|
|
|
));
|
|
|
|
|
|
|
|
it('overlay is function and has custom transitionName', () => {
|
2022-08-15 17:47:10 +08:00
|
|
|
const { asFragment } = render(
|
2022-09-02 17:22:23 +08:00
|
|
|
<Dropdown overlay={() => <div>menu</div>} transitionName="move-up" open>
|
2020-05-25 16:27:02 +08:00
|
|
|
<button type="button">button</button>
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
2022-08-15 17:47:10 +08:00
|
|
|
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
2020-05-25 16:27:02 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('overlay is string', () => {
|
2022-08-15 17:47:10 +08:00
|
|
|
const { asFragment } = render(
|
2022-09-02 17:22:23 +08:00
|
|
|
<Dropdown overlay={'string' as any} open>
|
2020-05-25 16:27:02 +08:00
|
|
|
<button type="button">button</button>
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
2022-08-15 17:47:10 +08:00
|
|
|
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
2020-05-25 16:27:02 +08:00
|
|
|
});
|
2021-02-17 17:09:13 +08:00
|
|
|
|
2022-10-23 00:33:45 +08:00
|
|
|
it('should render custom dropdown correctly', () => {
|
|
|
|
const { asFragment } = render(
|
|
|
|
<Dropdown
|
|
|
|
open
|
|
|
|
menu={{ items }}
|
2022-11-19 13:47:33 +08:00
|
|
|
dropdownRender={(menu) => (
|
2022-10-23 00:33:45 +08:00
|
|
|
<div>
|
|
|
|
{menu}
|
|
|
|
<div className="dropdown-custom-node">CUSTOM NODE</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<button type="button">button</button>
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
|
|
|
expect(Array.from(asFragment().childNodes)).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2021-02-17 17:09:13 +08:00
|
|
|
it('support Menu expandIcon', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-08-15 17:47:10 +08:00
|
|
|
const props: DropDownProps = {
|
2022-10-23 00:33:45 +08:00
|
|
|
menu: {
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
label: 'foo',
|
|
|
|
key: '1',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'SubMenu',
|
|
|
|
key: 'submenu',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
label: 'foo',
|
|
|
|
key: '1',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
expandIcon: <span id="customExpandIcon" />,
|
|
|
|
},
|
2022-09-02 17:22:23 +08:00
|
|
|
open: true,
|
2022-11-19 13:47:33 +08:00
|
|
|
getPopupContainer: (node) => node,
|
2021-02-17 17:09:13 +08:00
|
|
|
};
|
|
|
|
|
2022-08-15 17:47:10 +08:00
|
|
|
const { container } = render(
|
2021-02-17 17:09:13 +08:00
|
|
|
<Dropdown {...props}>
|
|
|
|
<button type="button">button</button>
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
2022-10-21 15:07:44 +08:00
|
|
|
await waitFakeTimer();
|
2022-08-15 17:47:10 +08:00
|
|
|
expect(container.querySelectorAll('#customExpandIcon').length).toBe(1);
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useRealTimers();
|
2021-02-17 17:09:13 +08:00
|
|
|
});
|
2022-01-13 13:34:34 +08:00
|
|
|
|
|
|
|
it('should warn if use topCenter or bottomCenter', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const error = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-08-15 17:47:10 +08:00
|
|
|
render(
|
2022-01-13 13:34:34 +08:00
|
|
|
<div>
|
2022-10-23 00:33:45 +08:00
|
|
|
<Dropdown menu={{ items }} placement="bottomCenter">
|
2022-01-13 13:34:34 +08:00
|
|
|
<button type="button">bottomCenter</button>
|
|
|
|
</Dropdown>
|
2022-10-23 00:33:45 +08:00
|
|
|
<Dropdown menu={{ items }} placement="topCenter">
|
2022-01-13 13:34:34 +08:00
|
|
|
<button type="button">topCenter</button>
|
|
|
|
</Dropdown>
|
|
|
|
</div>,
|
|
|
|
);
|
|
|
|
expect(error).toHaveBeenCalledWith(
|
|
|
|
expect.stringContaining("[antd: Dropdown] You are using 'bottomCenter'"),
|
|
|
|
);
|
|
|
|
expect(error).toHaveBeenCalledWith(
|
|
|
|
expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
|
|
|
|
);
|
2022-09-02 17:22:23 +08:00
|
|
|
error.mockRestore();
|
2022-01-13 13:34:34 +08:00
|
|
|
});
|
2022-03-09 19:34:46 +08:00
|
|
|
|
|
|
|
// zombieJ: when replaced with react test lib, it may be mock fully content
|
|
|
|
it('dropdown should support auto adjust placement', () => {
|
2022-08-15 17:47:10 +08:00
|
|
|
render(
|
2022-10-23 00:33:45 +08:00
|
|
|
<Dropdown menu={{ items }} open>
|
2022-03-09 19:34:46 +08:00
|
|
|
<button type="button">button</button>
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
expect(triggerProps.builtinPlacements).toEqual(
|
2022-03-09 19:34:46 +08:00
|
|
|
expect.objectContaining({
|
|
|
|
bottomLeft: expect.objectContaining({
|
|
|
|
overflow: {
|
2023-02-15 10:21:28 +08:00
|
|
|
adjustX: true,
|
|
|
|
adjustY: true,
|
2022-03-09 19:34:46 +08:00
|
|
|
},
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
2022-06-21 15:48:29 +08:00
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
it('menu item with group', () => {
|
|
|
|
jest.useFakeTimers();
|
2022-06-21 15:48:29 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Dropdown
|
2022-08-15 17:47:10 +08:00
|
|
|
trigger={['click']}
|
2022-10-23 00:33:45 +08:00
|
|
|
menu={{
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
label: 'grp',
|
|
|
|
type: 'group',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
label: '1',
|
|
|
|
key: 1,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}}
|
2022-06-21 15:48:29 +08:00
|
|
|
>
|
|
|
|
<a />
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
|
|
|
|
|
|
|
// Open
|
2022-08-15 17:47:10 +08:00
|
|
|
fireEvent.click(container.querySelector('a')!);
|
2022-06-21 15:48:29 +08:00
|
|
|
act(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.runAllTimers();
|
2022-06-21 15:48:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
// Close
|
2022-08-15 17:47:10 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
|
2022-06-21 15:48:29 +08:00
|
|
|
|
|
|
|
// Force Motion move on
|
2023-06-07 21:59:21 +08:00
|
|
|
for (let i = 0; i < 10; i += 1) {
|
|
|
|
act(() => {
|
|
|
|
jest.runAllTimers();
|
|
|
|
});
|
|
|
|
}
|
2022-06-21 15:48:29 +08:00
|
|
|
|
|
|
|
// Motion End
|
2022-08-15 17:47:10 +08:00
|
|
|
fireEvent.animationEnd(container.querySelector('.ant-slide-up-leave-active')!);
|
2022-06-21 15:48:29 +08:00
|
|
|
|
|
|
|
expect(container.querySelector('.ant-dropdown-hidden')).toBeTruthy();
|
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useRealTimers();
|
2022-06-21 15:48:29 +08:00
|
|
|
});
|
2022-09-06 21:46:49 +08:00
|
|
|
|
|
|
|
it('legacy visible', () => {
|
|
|
|
resetWarned();
|
2023-06-07 21:59:21 +08:00
|
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
const onOpenChange = jest.fn();
|
|
|
|
const onVisibleChange = jest.fn();
|
2022-09-06 21:46:49 +08:00
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
const { container, rerender } = render(
|
2022-09-06 21:46:49 +08:00
|
|
|
<Dropdown
|
|
|
|
visible
|
|
|
|
onOpenChange={onOpenChange}
|
|
|
|
onVisibleChange={onVisibleChange}
|
|
|
|
trigger={['click']}
|
2022-10-23 00:33:45 +08:00
|
|
|
menu={{
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
label: <div className="bamboo" />,
|
|
|
|
key: 'bamboo',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}}
|
2022-09-06 21:46:49 +08:00
|
|
|
>
|
|
|
|
<a className="little" />
|
|
|
|
</Dropdown>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(document.querySelector('.bamboo')).toBeTruthy();
|
|
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
|
|
|
'Warning: [antd: Dropdown] `visible` is deprecated, please use `open` instead.',
|
|
|
|
);
|
|
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
|
|
|
'Warning: [antd: Dropdown] `onVisibleChange` is deprecated, please use `onOpenChange` instead.',
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.click(container.querySelector('.little')!);
|
|
|
|
expect(onOpenChange).toHaveBeenCalled();
|
|
|
|
expect(onVisibleChange).toHaveBeenCalled();
|
|
|
|
|
2022-10-23 00:33:45 +08:00
|
|
|
rerender(
|
|
|
|
<Dropdown overlay={<div>menu</div>}>
|
2022-11-07 23:32:46 +08:00
|
|
|
<a className="little" />
|
2022-10-23 00:33:45 +08:00
|
|
|
</Dropdown>,
|
|
|
|
);
|
2022-11-07 23:32:46 +08:00
|
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
2022-10-23 00:33:45 +08:00
|
|
|
'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
|
|
|
|
);
|
2022-09-02 17:22:23 +08:00
|
|
|
|
2022-09-06 21:46:49 +08:00
|
|
|
errorSpy.mockRestore();
|
|
|
|
});
|
2020-05-25 16:27:02 +08:00
|
|
|
});
|