2018-06-21 12:32:13 +08:00
|
|
|
import React from 'react';
|
|
|
|
import Drawer from '..';
|
2022-05-25 11:03:13 +08:00
|
|
|
import { fireEvent, render } from '../../../tests/utils';
|
2018-06-21 12:32:13 +08:00
|
|
|
|
|
|
|
describe('Drawer', () => {
|
2022-04-18 21:02:11 +08:00
|
|
|
const getDrawer = props => (
|
|
|
|
<Drawer visible getContainer={false} {...props}>
|
|
|
|
Here is content of Drawer
|
|
|
|
</Drawer>
|
|
|
|
);
|
|
|
|
|
2018-06-21 12:32:13 +08:00
|
|
|
it('render correctly', () => {
|
2022-04-18 21:02:11 +08:00
|
|
|
const { container, asFragment, rerender } = render(getDrawer());
|
|
|
|
expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
|
2018-06-21 12:32:13 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
rerender(getDrawer({ visible: false }));
|
2018-06-21 12:32:13 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
expect(container.querySelector('.ant-drawer-body').textContent).toEqual(
|
|
|
|
'Here is content of Drawer',
|
|
|
|
);
|
2018-06-21 12:32:13 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2018-06-21 12:32:13 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('mask trigger onClose', () => {
|
2022-04-18 21:02:11 +08:00
|
|
|
const onClose = jest.fn();
|
|
|
|
const { container } = render(getDrawer({ onClose }));
|
2018-06-21 12:32:13 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-drawer-mask'));
|
|
|
|
expect(onClose).toHaveBeenCalled();
|
2018-06-21 12:32:13 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('close button trigger onClose', () => {
|
2022-04-18 21:02:11 +08:00
|
|
|
const onClose = jest.fn();
|
|
|
|
const { container } = render(getDrawer({ onClose }));
|
2018-06-21 12:32:13 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-drawer-close'));
|
|
|
|
expect(onClose).toHaveBeenCalled();
|
2018-06-21 12:32:13 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('maskClosable no trigger onClose', () => {
|
2022-04-18 21:02:11 +08:00
|
|
|
const onClose = jest.fn();
|
|
|
|
const { container } = render(getDrawer({ onClose, maskClosable: false }));
|
2018-06-21 12:32:13 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-drawer-mask'));
|
|
|
|
expect(onClose).not.toHaveBeenCalled();
|
2018-06-21 12:32:13 +08:00
|
|
|
});
|
2018-07-20 18:51:10 +08:00
|
|
|
|
2020-06-08 19:24:29 +08:00
|
|
|
it('dom should be removed after close when destroyOnClose is true', () => {
|
2022-04-18 21:02:11 +08:00
|
|
|
const { container, rerender } = render(getDrawer({ destroyOnClose: true }));
|
2018-07-20 18:51:10 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
rerender(getDrawer({ destroyOnClose: true, visible: false }));
|
2022-05-16 10:14:26 +08:00
|
|
|
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
|
|
|
ev.propertyName = 'transform';
|
|
|
|
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
2022-04-18 21:02:11 +08:00
|
|
|
|
|
|
|
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeFalsy();
|
2020-06-08 19:24:29 +08:00
|
|
|
});
|
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
it('dom should be existed after close when destroyOnClose is false', () => {
|
|
|
|
const { container, rerender } = render(getDrawer());
|
|
|
|
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
2018-07-20 18:51:10 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
rerender(getDrawer({ visible: false }));
|
2022-05-16 10:14:26 +08:00
|
|
|
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
|
|
|
ev.propertyName = 'transform';
|
|
|
|
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
2018-07-20 18:51:10 +08:00
|
|
|
|
2022-04-18 21:02:11 +08:00
|
|
|
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
2018-07-20 18:51:10 +08:00
|
|
|
});
|
2022-06-01 16:46:55 +08:00
|
|
|
it('dom should be existed after close twice when getContainer is false', () => {
|
|
|
|
const { container, rerender } = render(getDrawer({ visible: true, getContainer: false }));
|
|
|
|
rerender(getDrawer({ visible: false, getContainer: false }));
|
|
|
|
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
|
|
|
ev.propertyName = 'transform';
|
|
|
|
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
|
|
|
|
|
|
|
rerender(getDrawer({ visible: true, getContainer: false }));
|
|
|
|
const ev2 = new TransitionEvent('transitionend', { bubbles: true });
|
|
|
|
ev2.propertyName = 'transform';
|
|
|
|
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev2);
|
|
|
|
|
|
|
|
rerender(getDrawer({ visible: false, getContainer: false }));
|
|
|
|
const ev3 = new TransitionEvent('transitionend', { bubbles: true });
|
|
|
|
ev3.propertyName = 'transform';
|
|
|
|
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev3);
|
|
|
|
|
|
|
|
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
|
|
|
});
|
2022-05-16 10:14:26 +08:00
|
|
|
it('test afterVisibleChange', async () => {
|
|
|
|
const afterVisibleChange = jest.fn();
|
|
|
|
const { rerender } = render(getDrawer({ afterVisibleChange, visible: true }));
|
|
|
|
rerender(getDrawer({ afterVisibleChange, visible: false }));
|
|
|
|
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
|
|
|
ev.propertyName = 'transform';
|
|
|
|
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
|
|
|
expect(afterVisibleChange).toBeCalledTimes(1);
|
|
|
|
});
|
2022-05-25 10:50:12 +08:00
|
|
|
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 [visible, setVisible] = React.useState(false);
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
if (visible) {
|
|
|
|
refCallback(ref.current);
|
|
|
|
}
|
|
|
|
}, [visible]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<a onClick={() => setVisible(true)}>open</a>
|
|
|
|
<Drawer visible={visible}>
|
|
|
|
<div ref={ref} />
|
|
|
|
</Drawer>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const { container } = render(<RefDemo />);
|
|
|
|
fireEvent.click(container.querySelector('a'));
|
|
|
|
expect(fn).toBeCalled();
|
|
|
|
});
|
2018-06-21 12:32:13 +08:00
|
|
|
});
|