import React from 'react'; import Drawer from '..'; import { fireEvent, render } from '../../../tests/utils'; import Button from '../../button'; class MultiDrawer extends React.Component { state = { visible: false, childrenDrawer: false, hasChildren: true }; showDrawer = () => { this.setState({ visible: true, hasChildren: true, }); }; onClose = () => { this.setState({ visible: false, }); }; showChildrenDrawer = () => { this.setState({ childrenDrawer: true, hasChildren: true, }); }; onChildrenDrawerClose = () => { this.setState({ childrenDrawer: false, }); }; onRemoveChildDrawer = () => { this.setState({ hasChildren: false, }); }; render() { const { childrenDrawer, visible, hasChildren } = this.state; const { placement, push } = this.props; return (
{hasChildren && (
This is two-level drawer
)}
{String(childrenDrawer)}
); } } describe('Drawer', () => { it('render right MultiDrawer', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: 'translateX(-180px)', }); expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1); }); it('render left MultiDrawer', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: 'translateX(180px)', }); expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1); fireEvent.click(wrapper.querySelector('.Two-level .ant-drawer-close')); expect(wrapper.querySelector('.childrenDrawer').innerHTML).toEqual('false'); }); it('render top MultiDrawer', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: 'translateY(180px)', }); expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1); }); it('render MultiDrawer is child in unmount', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); fireEvent.click(wrapper.querySelector('button#remove_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: '', }); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: 'translateY(180px)', }); expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1); }); it('custom MultiDrawer push distance', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: 'translateX(-256px)', }); }); it('custom MultiDrawer push with true', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: 'translateX(-180px)', }); }); it('custom MultiDrawer push with false', () => { const { container: wrapper } = render(); fireEvent.click(wrapper.querySelector('button#open_drawer')); fireEvent.click(wrapper.querySelector('button#open_two_drawer')); expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({ transform: '', }); }); });