mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
add test
This commit is contained in:
parent
d4c90d4a3b
commit
bc39c158ab
@ -4,11 +4,12 @@ import Drawer from '..';
|
||||
import Button from '../../button';
|
||||
|
||||
class MultiDrawer extends React.Component {
|
||||
state = { visible: false, childrenDrawer: false };
|
||||
state = { visible: false, childrenDrawer: false, hasChildren: true };
|
||||
|
||||
showDrawer = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
hasChildren: true,
|
||||
});
|
||||
};
|
||||
|
||||
@ -21,6 +22,7 @@ class MultiDrawer extends React.Component {
|
||||
showChildrenDrawer = () => {
|
||||
this.setState({
|
||||
childrenDrawer: true,
|
||||
hasChildren: true,
|
||||
});
|
||||
};
|
||||
|
||||
@ -30,14 +32,23 @@ class MultiDrawer extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
onRemoveChildDrawer = () => {
|
||||
this.setState({
|
||||
hasChildren: false,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { childrenDrawer, visible } = this.state;
|
||||
const { childrenDrawer, visible, hasChildren } = this.state;
|
||||
const { placement } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" id="open_drawer" onClick={this.showDrawer}>
|
||||
Open drawer
|
||||
</Button>
|
||||
<Button type="primary" id="remove_drawer" onClick={this.onRemoveChildDrawer}>
|
||||
rm child drawer
|
||||
</Button>
|
||||
<Drawer
|
||||
title="Multi-level drawer"
|
||||
className="test_drawer"
|
||||
@ -50,17 +61,19 @@ class MultiDrawer extends React.Component {
|
||||
<Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
|
||||
Two-level drawer
|
||||
</Button>
|
||||
<Drawer
|
||||
title="Two-level Drawer"
|
||||
width={320}
|
||||
className="Two-level"
|
||||
getContainer={false}
|
||||
placement={placement}
|
||||
onClose={this.onChildrenDrawerClose}
|
||||
visible={childrenDrawer}
|
||||
>
|
||||
<div id="two_drawer_text">This is two-level drawer</div>
|
||||
</Drawer>
|
||||
{hasChildren && (
|
||||
<Drawer
|
||||
title="Two-level Drawer"
|
||||
width={320}
|
||||
className="Two-level"
|
||||
getContainer={false}
|
||||
placement={placement}
|
||||
onClose={this.onChildrenDrawerClose}
|
||||
visible={childrenDrawer}
|
||||
>
|
||||
<div id="two_drawer_text">This is two-level drawer</div>
|
||||
</Drawer>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@ -121,4 +134,17 @@ describe('Drawer', () => {
|
||||
expect(translateX).toEqual('translateY(180px)');
|
||||
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('render MultiDrawer is child in unmount', () => {
|
||||
const wrapper = mount(<MultiDrawer placement="top" mask={false} />);
|
||||
wrapper.find('button#open_drawer').simulate('click');
|
||||
wrapper.find('button#open_two_drawer').simulate('click');
|
||||
wrapper.find('button#remove_drawer').simulate('click');
|
||||
let translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
|
||||
expect(translateX).toEqual(undefined);
|
||||
wrapper.find('button#open_two_drawer').simulate('click');
|
||||
translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
|
||||
expect(translateX).toEqual('translateY(180px)');
|
||||
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user