refator: update rc-dialog to remove rc-animate (#26940)

* chore: bump rc-dialog

* fix 1 test case

* test case

* more test

* fix confirm test case

* clean up

* fix snapshot

* update local-provider snapshot

* update Modal snapshot

* fix test of dialog hook

* fix lint

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -16275,12 +16275,12 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
       class="config-modal-mask"
     />
     <div
-      class="config-modal-wrap "
+      class="config-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="config-modal "
+        class="config-modal"
         role="document"
         style="width:520px"
       >
@@ -16368,12 +16368,12 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
       class="config-modal-mask"
     />
     <div
-      class="config-modal-wrap "
+      class="config-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="config-modal "
+        class="config-modal"
         role="document"
         style="width:520px"
       >
@@ -16461,12 +16461,12 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
       class="config-modal-mask"
     />
     <div
-      class="config-modal-wrap "
+      class="config-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="config-modal "
+        class="config-modal"
         role="document"
         style="width:520px"
       >
@@ -16554,12 +16554,12 @@ exports[`ConfigProvider components Modal configProvider virtual and dropdownMatc
       class="ant-modal-mask"
     />
     <div
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal "
+        class="ant-modal"
         role="document"
         style="width:520px"
       >
@@ -16647,12 +16647,12 @@ exports[`ConfigProvider components Modal normal 1`] = `
       class="ant-modal-mask"
     />
     <div
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal "
+        class="ant-modal"
         role="document"
         style="width:520px"
       >
@@ -16740,12 +16740,12 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
       class="prefix-Modal-mask"
     />
     <div
-      class="prefix-Modal-wrap "
+      class="prefix-Modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="prefix-Modal "
+        class="prefix-Modal"
         role="document"
         style="width:520px"
       >

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -8,15 +8,15 @@ exports[`Modal render correctly 1`] = `
         class="ant-modal-root"
       >
         <div
-          class="ant-modal-mask fade-appear"
+          class="ant-modal-mask fade-appear fade-appear-start fade"
         />
         <div
-          class="ant-modal-wrap "
+          class="ant-modal-wrap"
           role="dialog"
           tabindex="-1"
         >
           <div
-            class="ant-modal zoom-appear"
+            class="ant-modal zoom-appear zoom-appear-prepare zoom"
             role="document"
             style="width: 520px;"
           >
@@ -105,15 +105,15 @@ exports[`Modal render without footer 1`] = `
         class="ant-modal-root"
       >
         <div
-          class="ant-modal-mask fade-appear"
+          class="ant-modal-mask fade-appear fade-appear-start fade"
         />
         <div
-          class="ant-modal-wrap "
+          class="ant-modal-wrap"
           role="dialog"
           tabindex="-1"
         >
           <div
-            class="ant-modal zoom-appear"
+            class="ant-modal zoom-appear zoom-appear-prepare zoom"
             role="document"
             style="width: 520px;"
           >
@@ -181,15 +181,15 @@ exports[`Modal support closeIcon 1`] = `
   class="ant-modal-root"
 >
   <div
-    class="ant-modal-mask fade-appear"
+    class="ant-modal-mask fade-appear fade-appear-start fade"
   />
   <div
-    class="ant-modal-wrap "
+    class="ant-modal-wrap"
     role="dialog"
     tabindex="-1"
   >
     <div
-      class="ant-modal zoom-appear"
+      class="ant-modal zoom-appear zoom-appear-prepare zoom"
       role="document"
       style="width: 520px;"
     >

components/modal/__tests__/confirm.test.js

@@ -1,12 +1,45 @@
-import TestUtils from 'react-dom/test-utils';
+import TestUtils, { act } from 'react-dom/test-utils';
+import CSSMotion from 'rc-motion';
+import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
+import KeyCode from 'rc-util/lib/KeyCode';
 import Modal from '..';
 import { destroyFns } from '../Modal';
+import { sleep } from '../../../tests/utils';
 
 const { confirm } = Modal;
 
+jest.mock('rc-motion');
+
 describe('Modal.confirm triggers callbacks correctly', () => {
+  // Inject CSSMotion to replace with No transition support
+  const MockCSSMotion = genCSSMotion(false);
+  Object.keys(MockCSSMotion).forEach(key => {
+    CSSMotion[key] = MockCSSMotion[key];
+  });
+
+  // Mock for rc-util raf
+  window.requestAnimationFrame = callback => {
+    return window.setTimeout(callback, 16);
+  };
+  window.cancelAnimationFrame = id => {
+    window.clearTimeout(id);
+  };
+
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
+  /* eslint-disable no-console */
+  // Hack error to remove act warning
+  const originError = console.error;
+  console.error = (...args) => {
+    const errorStr = String(args[0]);
+    if (errorStr.includes('was not wrapped in act(...)')) {
+      return;
+    }
+
+    originError(...args);
+  };
+  /* eslint-enable */
+
   afterEach(() => {
     errorSpy.mockReset();
     document.body.innerHTML = '';
@@ -68,20 +101,39 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect(onOk.mock.calls.length).toBe(1);
   });
 
-  it('should allow Modal.comfirm without onCancel been set', () => {
+  it('should allow Modal.confirm without onCancel been set', () => {
     open();
     // Third Modal
     $$('.ant-btn')[0].click();
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
-  it('should allow Modal.comfirm without onOk been set', () => {
+  it('should allow Modal.confirm without onOk been set', () => {
     open();
     // Fourth Modal
     $$('.ant-btn-primary')[0].click();
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
+  it('should close confirm modal when press ESC', () => {
+    jest.useFakeTimers();
+    const onCancel = jest.fn();
+    Modal.confirm({
+      title: 'title',
+      content: 'content',
+      onCancel,
+    });
+    jest.runAllTimers();
+    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
+    TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
+      keyCode: KeyCode.ESC,
+    });
+    jest.runAllTimers();
+    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
   it('should not hide confirm when onOk return Promise.resolve', () => {
     open({
       onOk: () => Promise.resolve(''),
@@ -90,23 +142,27 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect($$('.ant-modal-confirm')).toHaveLength(1);
   });
 
-  it('should emit error when onOk return Promise.reject', () => {
+  it('should emit error when onOk return Promise.reject', async () => {
     const error = new Error('something wrong');
     open({
-      onOk: () => Promise.reject(error),
+      onOk: () => {
+        return Promise.reject(error);
+      },
     });
     $$('.ant-btn-primary')[0].click();
+
     // wait promise
-    return Promise.resolve().then(() => {
+    await sleep();
+
     expect(errorSpy).toHaveBeenCalledWith(error);
   });
-  });
 
   it('shows animation when close', () => {
     open();
     jest.useFakeTimers();
     expect($$('.ant-modal-confirm')).toHaveLength(1);
     $$('.ant-btn')[0].click();
+
     jest.runAllTimers();
     expect($$('.ant-modal-confirm')).toHaveLength(0);
     jest.useRealTimers();
@@ -158,25 +214,6 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('should close confirm modal when press ESC', () => {
-    jest.useFakeTimers();
-    const onCancel = jest.fn();
-    Modal.confirm({
-      title: 'title',
-      content: 'content',
-      onCancel,
-    });
-    jest.runAllTimers();
-    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
-    TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
-      keyCode: 27,
-    });
-    jest.runAllTimers();
-    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
-    expect(onCancel).toHaveBeenCalledTimes(1);
-    jest.useRealTimers();
-  });
-
   it('should not close modals when click confirm button when onOk has argument', () => {
     jest.useFakeTimers();
     ['info', 'success', 'warning', 'error'].forEach(type => {
@@ -268,23 +305,35 @@ describe('Modal.confirm triggers callbacks correctly', () => {
 
   it('destroyFns should reduce when instance.destroy', () => {
     jest.useFakeTimers();
+
     Modal.destroyAll(); // clear destroyFns
     jest.runAllTimers();
+
     const instances = [];
     ['info', 'success', 'warning', 'error'].forEach(type => {
       const instance = Modal[type]({
         title: 'title',
         content: 'content',
       });
+
+      // Render modal
+      act(() => {
+        jest.runAllTimers();
+      });
+
       instances.push(instance);
     });
     const { length } = instances;
     instances.forEach((instance, index) => {
       expect(destroyFns.length).toBe(length - index);
+
+      act(() => {
         instance.destroy();
         jest.runAllTimers();
+      });
       expect(destroyFns.length).toBe(length - index - 1);
     });
+
     jest.useRealTimers();
   });
 

components/modal/__tests__/hook.test.js

@@ -1,11 +1,20 @@
 import React from 'react';
+import CSSMotion from 'rc-motion';
+import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
 import { mount } from 'enzyme';
 import Modal from '..';
 import Button from '../../button';
 
 jest.mock('rc-util/lib/Portal');
+jest.mock('rc-motion');
 
 describe('Modal.hook', () => {
+  // Inject CSSMotion to replace with No transition support
+  const MockCSSMotion = genCSSMotion(false);
+  Object.keys(MockCSSMotion).forEach(key => {
+    CSSMotion[key] = MockCSSMotion[key];
+  });
+
   it('hooks support context', () => {
     jest.useFakeTimers();
     const Context = React.createContext('light');

package.json

@@ -121,7 +121,7 @@
     "rc-cascader": "~1.4.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~2.0.0",
-    "rc-dialog": "~8.3.0",
+    "rc-dialog": "~8.4.0",
     "rc-drawer": "~4.1.0",
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.12.0",