add 100% test

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 {
       <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();
   });
 });

components/drawer/__tests__/DrawerEvent.test.js

+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);
+  });
+});

components/drawer/__tests__/__snapshots__/Drawer.test.js.snap

 // 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>

components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap

+// 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>
+`;

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 }}