mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
179 lines
5.6 KiB
TypeScript
179 lines
5.6 KiB
TypeScript
import React from 'react';
|
|
import type { DrawerProps } from '..';
|
|
import Drawer from '..';
|
|
import { act, fireEvent, render } from '../../../tests/utils';
|
|
|
|
const DrawerTest: React.FC<DrawerProps> = (props) => (
|
|
<Drawer open getContainer={false} {...props}>
|
|
Here is content of Drawer
|
|
</Drawer>
|
|
);
|
|
|
|
describe('Drawer', () => {
|
|
beforeEach(() => {
|
|
jest.useFakeTimers();
|
|
});
|
|
|
|
afterEach(() => {
|
|
jest.useRealTimers();
|
|
});
|
|
|
|
it('render correctly', () => {
|
|
const { container, asFragment, rerender } = render(<DrawerTest />);
|
|
expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
|
|
|
|
rerender(<DrawerTest open={false} />);
|
|
|
|
expect(container.querySelector('.ant-drawer-body')?.textContent).toEqual(
|
|
'Here is content of Drawer',
|
|
);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
});
|
|
|
|
it('mask trigger onClose', () => {
|
|
const onClose = jest.fn();
|
|
const { container } = render(<DrawerTest onClose={onClose} />);
|
|
|
|
fireEvent.click(container.querySelector('.ant-drawer-mask')!);
|
|
expect(onClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it('close button trigger onClose', () => {
|
|
const onClose = jest.fn();
|
|
const { container } = render(<DrawerTest onClose={onClose} />);
|
|
|
|
fireEvent.click(container.querySelector('.ant-drawer-close')!);
|
|
expect(onClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it('maskClosable no trigger onClose', () => {
|
|
const onClose = jest.fn();
|
|
const { container } = render(<DrawerTest onClose={onClose} maskClosable={false} />);
|
|
|
|
fireEvent.click(container.querySelector('.ant-drawer-mask')!);
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('dom should be removed after close when destroyOnClose is true', () => {
|
|
const { container, rerender } = render(<DrawerTest destroyOnClose />);
|
|
expect(container.querySelector('.ant-drawer')).toBeTruthy();
|
|
|
|
rerender(<DrawerTest destroyOnClose open={false} />);
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
|
|
expect(container.querySelector('.ant-drawer')).toBeFalsy();
|
|
});
|
|
|
|
it('dom should be existed after close when destroyOnClose is false', () => {
|
|
const { container, rerender } = render(<DrawerTest />);
|
|
expect(container.querySelector('.ant-drawer')).toBeTruthy();
|
|
|
|
rerender(<DrawerTest open={false} />);
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
fireEvent.animationEnd(container.querySelector('.ant-drawer-content')!);
|
|
|
|
expect(container.querySelector('.ant-drawer')).toBeTruthy();
|
|
});
|
|
|
|
it('dom should be existed after close twice when getContainer is false', () => {
|
|
const { container, rerender } = render(<DrawerTest open getContainer={false} />);
|
|
expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
|
|
|
|
// Hide
|
|
rerender(<DrawerTest open={false} getContainer={false} />);
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
|
|
expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
|
|
|
|
// Show
|
|
rerender(<DrawerTest open getContainer={false} />);
|
|
expect(container.querySelector('.ant-drawer-content-wrapper')).toBeTruthy();
|
|
expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeFalsy();
|
|
|
|
// Hide
|
|
rerender(<DrawerTest open={false} getContainer={false} />);
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
|
|
expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
|
|
});
|
|
|
|
it('test afterOpenChange', async () => {
|
|
const afterOpenChange = jest.fn();
|
|
const { container, rerender } = render(<DrawerTest open afterOpenChange={afterOpenChange} />);
|
|
rerender(<DrawerTest open={false} afterOpenChange={afterOpenChange} />);
|
|
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
|
|
|
|
expect(afterOpenChange).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('test legacy afterVisibleChange', async () => {
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
const afterVisibleChange = jest.fn();
|
|
const { container, rerender } = render(
|
|
<DrawerTest open afterVisibleChange={afterVisibleChange} />,
|
|
);
|
|
rerender(<DrawerTest visible={false} afterVisibleChange={afterVisibleChange} />);
|
|
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
|
|
|
|
expect(afterVisibleChange).toHaveBeenCalledTimes(1);
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
|
'Warning: [antd: Drawer] `visible` is deprecated, please use `open` instead.',
|
|
);
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
|
'Warning: [antd: Drawer] `afterVisibleChange` is deprecated, please use `afterOpenChange` instead.',
|
|
);
|
|
|
|
errorSpy.mockRestore();
|
|
});
|
|
|
|
it('should support children ref', () => {
|
|
const fn = jest.fn();
|
|
|
|
const refCallback = (ref: HTMLDivElement | null) => {
|
|
expect(typeof ref).toBe('object');
|
|
fn();
|
|
};
|
|
|
|
const RefDemo: React.FC = () => {
|
|
const ref = React.useRef<HTMLDivElement>(null);
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (open) {
|
|
refCallback(ref.current!);
|
|
}
|
|
}, [open]);
|
|
|
|
return (
|
|
<>
|
|
<a onClick={() => setOpen(true)}>open</a>
|
|
<Drawer open={open}>
|
|
<div ref={ref} />
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
const { container } = render(<RefDemo />);
|
|
fireEvent.click(container.querySelector('a')!);
|
|
expect(fn).toHaveBeenCalled();
|
|
});
|
|
});
|