✅ fix test case of Button loading

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -283,66 +283,3 @@ exports[`Button should support link button 1`] = `
   </span>
 </a>
 `;
-
-exports[`Button should support to change loading 1`] = `
-<button
-  class="ant-btn ant-btn-loading"
-  type="button"
->
-  <i
-    aria-label="icon: loading"
-    class="anticon anticon-loading"
-  >
-    <svg
-      aria-hidden="true"
-      class="anticon-spin"
-      data-icon="loading"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="0 0 1024 1024"
-      width="1em"
-    >
-      <path
-        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-      />
-    </svg>
-  </i>
-  <span>
-    Button
-  </span>
-</button>
-`;
-
-exports[`Button should support to change loading 2`] = `
-<button
-  class="ant-btn"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;
-
-exports[`Button should support to change loading 3`] = `
-<button
-  class="ant-btn"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;
-
-exports[`Button should support to change loading 4`] = `
-<button
-  class="ant-btn"
-  type="button"
->
-  <span>
-    Button
-  </span>
-</button>
-`;

components/button/__tests__/index.test.js

@@ -4,6 +4,7 @@ import renderer from 'react-test-renderer';
 import Button from '..';
 import Icon from '../../icon';
 import mountTest from '../../../tests/shared/mountTest';
+import { sleep } from '../../../tests/utils';
 
 describe('Button', () => {
   mountTest(Button);
@@ -54,7 +55,11 @@ describe('Button', () => {
     expect(wrapper5).toMatchSnapshot();
 
     // should insert space while only one nested element
-    const wrapper6 = render(<Button><span>按钮</span></Button>);
+    const wrapper6 = render(
+      <Button>
+        <span>按钮</span>
+      </Button>,
+    );
     expect(wrapper6).toMatchSnapshot();
   });
 
@@ -85,7 +90,12 @@ describe('Button', () => {
   });
 
   it('should render empty button without errors', () => {
-    const wrapper = mount(<Button />);
+    const wrapper = mount(
+      <Button>
+        {null}
+        {undefined}
+      </Button>,
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -203,20 +213,24 @@ describe('Button', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  it('should support to change loading', () => {
-    const wrapper = mount(
-      <Button>
-        Button
-      </Button>,
-    );
+  it('should support to change loading', async () => {
+    const wrapper = mount(<Button>Button</Button>);
     wrapper.setProps({ loading: true });
-    expect(wrapper.render()).toMatchSnapshot();
+    wrapper.update();
+    expect(wrapper.find('.ant-btn-loading').length).toBe(1);
     wrapper.setProps({ loading: false });
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper.setProps({ loading: { delay: 200 } });
-    expect(wrapper.render()).toMatchSnapshot();
+    wrapper.update();
+    expect(wrapper.find('.ant-btn-loading').length).toBe(0);
+    wrapper.setProps({ loading: { delay: 50 } });
+    wrapper.update();
+    expect(wrapper.find('.ant-btn-loading').length).toBe(0);
+    await sleep(50);
+    wrapper.update();
+    expect(wrapper.find('.ant-btn-loading').length).toBe(1);
     wrapper.setProps({ loading: false });
-    expect(wrapper.render()).toMatchSnapshot();
+    await sleep(50);
+    wrapper.update();
+    expect(wrapper.find('.ant-btn-loading').length).toBe(0);
     expect(() => {
       wrapper.unmount();
     }).not.toThrow();

components/button/button.tsx

@@ -134,16 +134,6 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     title: PropTypes.string,
   };
 
-  static getDerivedStateFromProps(nextProps: ButtonProps, prevState: ButtonState) {
-    if (nextProps.loading instanceof Boolean) {
-      return {
-        ...prevState,
-        loading: nextProps.loading,
-      };
-    }
-    return null;
-  }
-
   private delayTimeout: number;
 
   private buttonNode: HTMLElement | null;
@@ -169,8 +159,10 @@ class Button extends React.Component<ButtonProps, ButtonState> {
 
     const { loading } = this.props;
     if (loading && typeof loading !== 'boolean' && loading.delay) {
-      this.delayTimeout = window.setTimeout(() => this.setState({ loading }), loading.delay);
-    } else if (prevProps.loading !== this.props.loading) {
+      this.delayTimeout = window.setTimeout(() => {
+        this.setState({ loading });
+      }, loading.delay);
+    } else if (prevProps.loading !== loading) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ loading });
     }
@@ -260,7 +252,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
       [`${prefixCls}-${shape}`]: shape,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
       [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
-      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-loading`]: !!loading,
       [`${prefixCls}-background-ghost`]: ghost,
       [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
       [`${prefixCls}-block`]: block,