mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
add 100% test
This commit is contained in:
陈帅
parent
172759177f
commit
115f518985
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Drawer from '..';
|
||||
|
||||
jest.mock('rc-util/lib/Portal');
|
||||
|
||||
class DrawerTester extends React.Component {
|
||||
constructor(props) {
|
||||
@ -23,9 +22,9 @@ class DrawerTester extends React.Component {
|
||||
<div>
|
||||
<div ref={this.saveContainer} />
|
||||
<Drawer
|
||||
{...this.props}
|
||||
visible={this.state.visible}
|
||||
getContainer={this.getContainer}
|
||||
{...this.props}
|
||||
>
|
||||
Here is content of Drawer
|
||||
</Drawer>
|
||||
@ -37,6 +36,31 @@ class DrawerTester extends React.Component {
|
||||
describe('Drawer', () => {
|
||||
it('render correctly', () => {
|
||||
const wrapper = mount(<DrawerTester />);
|
||||
const content = wrapper.find('.ant-drawer-body').getDOMNode().innerHTML;
|
||||
expect(content).toBe('Here is content of Drawer');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('have a title', () => {
|
||||
const wrapper = mount(<DrawerTester title="Test Title" />);
|
||||
const title = wrapper.find('.ant-drawer-title').getDOMNode().innerHTML;
|
||||
expect(title).toBe('Test Title');
|
||||
const closable = wrapper.find('.ant-drawer-close').exists();
|
||||
expect(closable).toBe(true);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('closable is false', () => {
|
||||
const wrapper = mount(<DrawerTester closable={false} />);
|
||||
const closable = wrapper.find('.ant-drawer-close').exists();
|
||||
expect(closable).toBe(false);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('destroyOnClose is true', () => {
|
||||
const wrapper = mount(<DrawerTester destroyOnClose visible={false} />);
|
||||
const body = wrapper.find('.ant-drawer-body').exists();
|
||||
expect(body).toBe(false);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
93
components/drawer/__tests__/DrawerEvent.test.js
Normal file
93
components/drawer/__tests__/DrawerEvent.test.js
Normal file
@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Drawer from '..';
|
||||
import Button from '../../button';
|
||||
|
||||
class DrawerEventTester extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { visible: false };
|
||||
}
|
||||
componentDidMount() {
|
||||
this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
|
||||
}
|
||||
saveContainer = (container) => {
|
||||
this.container = container;
|
||||
};
|
||||
getContainer = () => {
|
||||
return this.container;
|
||||
};
|
||||
onClose = () => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
open = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={this.open}>open</Button>
|
||||
<div ref={this.saveContainer} />
|
||||
<Drawer
|
||||
visible={this.state.visible}
|
||||
onClose={this.onClose}
|
||||
destroyOnClose
|
||||
getContainer={this.getContainer}
|
||||
{...this.props}
|
||||
>
|
||||
Here is content of Drawer
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
describe('Drawer', () => {
|
||||
it('render correctly', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
const body = wrapper.find('.ant-drawer-body').exists();
|
||||
|
||||
expect(body).toBe(true);
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
|
||||
const content = wrapper.find('.ant-drawer-body').getDOMNode().innerHTML;
|
||||
expect(content).toBe('Here is content of Drawer');
|
||||
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('mask trigger onClose', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-mask').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(false);
|
||||
});
|
||||
|
||||
it('close button trigger onClose', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-close').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(false);
|
||||
});
|
||||
|
||||
it('maskClosable no trigger onClose', () => {
|
||||
const wrapper = mount(<DrawerEventTester maskClosable={false} />);
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-mask').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -1,5 +1,112 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Drawer closable is false 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-left ant-drawer-open"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
>
|
||||
<div
|
||||
style="width: 256px;"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Drawer destroyOnClose is true 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-left"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="transform: translateX(-100%);"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Drawer have a title 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-left ant-drawer-open"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
>
|
||||
<div
|
||||
style="width: 256px;"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Test Title
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Drawer render correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Drawer render correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-clicked"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
open
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-left ant-drawer-open"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
>
|
||||
<div
|
||||
style="width: 256px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -55,23 +55,8 @@ export default class Drawer extends React.Component<
|
||||
prefixCls: 'ant-drawer',
|
||||
width: 256,
|
||||
closable: true,
|
||||
maskClosable: true,
|
||||
};
|
||||
static getDerivedStateFromProps(
|
||||
nextProps: DrawerProps,
|
||||
prevState: IDrawerState,
|
||||
) {
|
||||
const nextState: IDrawerState = {};
|
||||
if (nextProps.visible !== undefined && nextProps.visible !== prevState.visible) {
|
||||
nextState.visible = nextProps.visible;
|
||||
}
|
||||
return nextState;
|
||||
}
|
||||
constructor(props: DrawerProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
close = (e: EventType) => {
|
||||
if (this.props.visible !== undefined) {
|
||||
if (this.props.onClose) {
|
||||
@ -79,9 +64,6 @@ export default class Drawer extends React.Component<
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
}
|
||||
onMaskClick = (e: EventType) => {
|
||||
if (!this.props.maskClosable) {
|
||||
@ -90,7 +72,7 @@ export default class Drawer extends React.Component<
|
||||
this.close(e);
|
||||
}
|
||||
renderBody = () => {
|
||||
if (this.props.destroyOnClose && this.props.visible) {
|
||||
if (this.props.destroyOnClose && !this.props.visible) {
|
||||
return null;
|
||||
}
|
||||
const { prefixCls, title, closable } = this.props;
|
||||
@ -135,8 +117,8 @@ export default class Drawer extends React.Component<
|
||||
level={null}
|
||||
{...rest}
|
||||
handleChild={false}
|
||||
open={this.state.visible}
|
||||
onMaskClick={this.close}
|
||||
open={this.props.visible}
|
||||
onMaskClick={this.onMaskClick}
|
||||
showMask={this.props.mask}
|
||||
placement={this.props.placement}
|
||||
style={{ zIndex }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user