From 115f51898527c409adc7ac9cb6cea9ba194ad37f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 21 Jun 2018 12:32:13 +0800 Subject: [PATCH] add 100% test --- components/drawer/__tests__/Drawer.test.js | 28 ++++- .../drawer/__tests__/DrawerEvent.test.js | 93 +++++++++++++++ .../__snapshots__/Drawer.test.js.snap | 107 ++++++++++++++++++ .../__snapshots__/DrawerEvent.test.js.snap | 50 ++++++++ components/drawer/index.tsx | 26 +---- 5 files changed, 280 insertions(+), 24 deletions(-) create mode 100644 components/drawer/__tests__/DrawerEvent.test.js create mode 100644 components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js index 0e4f555a73..73ed243819 100644 --- a/components/drawer/__tests__/Drawer.test.js +++ b/components/drawer/__tests__/Drawer.test.js @@ -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 {
Here is content of Drawer @@ -37,6 +36,31 @@ class DrawerTester extends React.Component { describe('Drawer', () => { it('render correctly', () => { const wrapper = mount(); + 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(); + 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(); + const closable = wrapper.find('.ant-drawer-close').exists(); + expect(closable).toBe(false); + expect(wrapper.render()).toMatchSnapshot(); + }); + + it('destroyOnClose is true', () => { + const wrapper = mount(); + const body = wrapper.find('.ant-drawer-body').exists(); + expect(body).toBe(false); expect(wrapper.render()).toMatchSnapshot(); }); }); diff --git a/components/drawer/__tests__/DrawerEvent.test.js b/components/drawer/__tests__/DrawerEvent.test.js new file mode 100644 index 0000000000..5a940189d7 --- /dev/null +++ b/components/drawer/__tests__/DrawerEvent.test.js @@ -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 ( +
+ +
+ + Here is content of Drawer + +
+ ); + } +} + + +describe('Drawer', () => { + it('render correctly', () => { + const wrapper = mount(); + 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(); + + 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(); + + 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(); + + 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); + }); +}); diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap index db457fe6ef..b4d67e1e2c 100644 --- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap +++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap @@ -1,5 +1,112 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Drawer closable is false 1`] = ` +
+
+
+
+
+
+
+
+
+ Here is content of Drawer +
+
+
+
+
+
+
+
+`; + +exports[`Drawer destroyOnClose is true 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Drawer have a title 1`] = ` +
+
+
+
+
+
+
+
+
+
+ Test Title +
+
+ +
+ Here is content of Drawer +
+
+
+
+
+
+
+
+`; + exports[`Drawer render correctly 1`] = `
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap new file mode 100644 index 0000000000..2b5b4f4f8e --- /dev/null +++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Drawer render correctly 1`] = ` +
+ +
+
+
+
+
+
+
+ +
+ Here is content of Drawer +
+
+
+
+
+
+
+
+`; diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 67b91a7c69..3167a548f2 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -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 }} -- GitLab