fix: Modal async (ant-design#23826)

* make async * fix tesst
zoechi · May 2, 2020 · 1489903 · 1489903
1 parent 33cb4c9
commit 1489903
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/components/config-provider/__tests__/locale.test.js b/components/config-provider/__tests__/locale.test.js
@@ -45,10 +45,13 @@ describe('ConfigProvider.Locale', () => {
       }
 
       openConfirm = () => {
+        jest.useFakeTimers();
         Modal.confirm({
           title: 'title',
           content: 'Some descriptions',
         });
+        jest.runAllTimers();
+        jest.useRealTimers();
       };
 
       render() {

diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js
@@ -195,9 +195,12 @@ describe('Locale Provider', () => {
   it('should change locale of Modal.xxx', () => {
     class ModalDemo extends React.Component {
       componentDidMount() {
+        jest.useFakeTimers();
         Modal.confirm({
           title: 'Hello World!',
         });
+        jest.runAllTimers();
+        jest.useRealTimers();
       }
 
       render() {

diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
@@ -21,18 +21,24 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   }
 
   function open(args) {
+    jest.useFakeTimers();
     confirm({
       title: 'Want to delete these items?',
       content: 'some descriptions',
       ...args,
     });
+    jest.runAllTimers();
+    jest.useRealTimers();
   }
 
   it('should not render title when title not defined', () => {
+    jest.useFakeTimers();
     confirm({
       content: 'some descriptions',
     });
+    jest.runAllTimers();
     expect(document.querySelector('.ant-modal-confirm-title')).toBe(null);
+    jest.useRealTimers();
   });
 
   it('trigger onCancel once when click on cancel button', () => {
@@ -96,8 +102,8 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   it('shows animation when close', () => {
-    jest.useFakeTimers();
     open();
+    jest.useFakeTimers();
     expect($$('.ant-modal-confirm')).toHaveLength(1);
     $$('.ant-btn')[0].click();
     jest.runAllTimers();
@@ -125,6 +131,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
+      jest.runAllTimers();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       $$('.ant-btn')[0].click();
       jest.runAllTimers();
@@ -141,6 +148,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         content: 'content',
         onOk: close => null, // eslint-disable-line no-unused-vars
       });
+      jest.runAllTimers();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       $$('.ant-btn')[0].click();
       jest.runAllTimers();
@@ -156,13 +164,15 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
+      jest.runAllTimers();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
       expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
       instance.update({
         title: 'new title',
         content: 'new content',
       });
+      jest.runAllTimers();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
       expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
@@ -179,6 +189,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
+      jest.runAllTimers();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       instance.destroy();
       jest.runAllTimers();
@@ -194,6 +205,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
+      jest.runAllTimers();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
     });
     Modal.destroyAll();
@@ -205,16 +217,22 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   it('prefixCls', () => {
+    jest.useFakeTimers();
     open({ prefixCls: 'custom-modal' });
+    jest.runAllTimers();
     expect($$('.custom-modal-mask')).toHaveLength(1);
     expect($$('.custom-modal-wrap')).toHaveLength(1);
     expect($$('.custom-modal-confirm')).toHaveLength(1);
     expect($$('.custom-modal-confirm-body-wrapper')).toHaveLength(1);
+    jest.useRealTimers();
   });
 
   it('should be Modal.confirm without mask', () => {
+    jest.useFakeTimers();
     open({ mask: false });
+    jest.runAllTimers();
     expect($$('.ant-modal-mask')).toHaveLength(0);
+    jest.useRealTimers();
   });
 
   it('destroyFns should reduce when instance.destroy', () => {
@@ -240,42 +258,52 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   it('should warning when pass a string as icon props', () => {
+    jest.useFakeTimers();
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     confirm({
       content: 'some descriptions',
       icon: 'ab',
     });
+    jest.runAllTimers();
     expect(warnSpy).not.toHaveBeenCalled();
     confirm({
       content: 'some descriptions',
       icon: 'question',
     });
+    jest.runAllTimers();
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Modal] \`icon\` is using ReactNode instead of string naming in v4. Please check \`question\` at https://ant.design/components/icon`,
     );
     warnSpy.mockRestore();
+    jest.useRealTimers();
   });
 
   it('ok button should trigger onOk once when click it many times quickly', () => {
+    jest.useFakeTimers();
     const onOk = jest.fn();
     open({ onOk });
+    jest.runAllTimers();
     $$('.ant-btn-primary')[0].click();
     $$('.ant-btn-primary')[0].click();
     expect(onOk).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
   });
 
   // https://github.com/ant-design/ant-design/issues/23358
   it('ok button should trigger onOk multiple times when onOk has close argument', () => {
+    jest.useFakeTimers();
     const onOk = jest.fn();
     open({
       onOk: close => {
         onOk();
         (() => {})(close); // do nothing
       },
     });
+    jest.runAllTimers();
     $$('.ant-btn-primary')[0].click();
     $$('.ant-btn-primary')[0].click();
     $$('.ant-btn-primary')[0].click();
     expect(onOk).toHaveBeenCalledTimes(3);
+    jest.useRealTimers();
   });
 });
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
@@ -50,15 +50,21 @@ export default function confirm(config: ModalFuncProps) {
   }
 
   function render({ okText, cancelText, ...props }: any) {
-    const runtimeLocale = getConfirmLocale();
-    ReactDOM.render(
-      <ConfirmDialog
-        {...props}
-        okText={okText || (props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText)}
-        cancelText={cancelText || runtimeLocale.cancelText}
-      />,
-      div,
-    );
+    /**
+     * https://github.com/ant-design/ant-design/issues/23623
+     * Sync render blocks React event. Let's make this async.
+     */
+    setTimeout(() => {
+      const runtimeLocale = getConfirmLocale();
+      ReactDOM.render(
+        <ConfirmDialog
+          {...props}
+          okText={okText || (props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText)}
+          cancelText={cancelText || runtimeLocale.cancelText}
+        />,
+        div,
+      );
+    });
   }
 
   function close(...args: any[]) {