ant-design/components/drawer/__tests__/DrawerEvent.test.js

131 lines
4.6 KiB
JavaScript
Raw Normal View History

2018-06-21 12:32:13 +08:00
import React from 'react';
import Drawer from '..';
import { fireEvent, render } from '../../../tests/utils';
2018-06-21 12:32:13 +08:00
describe('Drawer', () => {
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', () => {
const { container, asFragment, rerender } = render(getDrawer());
expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
2018-06-21 12:32:13 +08:00
rerender(getDrawer({ visible: false }));
2018-06-21 12:32:13 +08:00
expect(container.querySelector('.ant-drawer-body').textContent).toEqual(
'Here is content of Drawer',
);
2018-06-21 12:32:13 +08:00
expect(asFragment().firstChild).toMatchSnapshot();
2018-06-21 12:32:13 +08:00
});
it('mask trigger onClose', () => {
const onClose = jest.fn();
const { container } = render(getDrawer({ onClose }));
2018-06-21 12:32:13 +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', () => {
const onClose = jest.fn();
const { container } = render(getDrawer({ onClose }));
2018-06-21 12:32:13 +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', () => {
const onClose = jest.fn();
const { container } = render(getDrawer({ onClose, maskClosable: false }));
2018-06-21 12:32:13 +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
it('dom should be removed after close when destroyOnClose is true', () => {
const { container, rerender } = render(getDrawer({ destroyOnClose: true }));
2018-07-20 18:51:10 +08:00
rerender(getDrawer({ destroyOnClose: true, visible: false }));
const ev = new TransitionEvent('transitionend', { bubbles: true });
ev.propertyName = 'transform';
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeFalsy();
});
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
rerender(getDrawer({ visible: false }));
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
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
2018-07-20 18:51:10 +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();
});
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);
});
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
});