import React from 'react';
import Drawer from '..';
import { act, fireEvent, render } from '../../../tests/utils';
describe('Drawer', () => {
const getDrawer = props => (
Here is content of Drawer
);
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
});
it('render correctly', () => {
const { container, asFragment, rerender } = render(getDrawer());
expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
rerender(getDrawer({ 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(getDrawer({ onClose }));
fireEvent.click(container.querySelector('.ant-drawer-mask'));
expect(onClose).toHaveBeenCalled();
});
it('close button trigger onClose', () => {
const onClose = jest.fn();
const { container } = render(getDrawer({ onClose }));
fireEvent.click(container.querySelector('.ant-drawer-close'));
expect(onClose).toHaveBeenCalled();
});
it('maskClosable no trigger onClose', () => {
const onClose = jest.fn();
const { container } = render(getDrawer({ 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(getDrawer({ destroyOnClose: true }));
expect(container.querySelector('.ant-drawer')).toBeTruthy();
rerender(getDrawer({ destroyOnClose: true, 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(getDrawer());
expect(container.querySelector('.ant-drawer')).toBeTruthy();
rerender(getDrawer({ 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(getDrawer({ open: true, getContainer: false }));
expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
// Hide
rerender(getDrawer({ 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(getDrawer({ open: true, getContainer: false }));
expect(container.querySelector('.ant-drawer-content-wrapper')).toBeTruthy();
expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeFalsy();
// Hide
rerender(getDrawer({ 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 afterVisibleChange', async () => {
const afterVisibleChange = jest.fn();
const { container, rerender } = render(getDrawer({ afterVisibleChange, open: true }));
rerender(getDrawer({ afterVisibleChange, open: false }));
act(() => {
jest.runAllTimers();
});
fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
expect(afterVisibleChange).toBeCalledTimes(1);
});
it('should support children ref', () => {
const fn = jest.fn();
const refCallback = ref => {
expect(typeof ref).toBe('object');
fn();
};
const RefDemo = () => {
const ref = React.useRef();
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
if (open) {
refCallback(ref.current);
}
}, [open]);
return (
<>
setOpen(true)}>open
>
);
};
const { container } = render();
fireEvent.click(container.querySelector('a'));
expect(fn).toBeCalled();
});
});