From f90296b2b3681c58e559287ac68a8bd4219fe4a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 23 Sep 2022 13:59:21 +0800
Subject: [PATCH] test: Refactor Affix related test case (#37715)

* test: refactor

* test: Refactor Affix test case

* test: refactor more test case

* test: fix lint
---
 components/affix/__tests__/Affix.test.tsx | 41 ++++++++++++++---------
 components/form/__tests__/index.test.tsx  | 19 ++++++-----
 tests/utils.tsx                           | 15 +++++++++
 3 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
index b65684f8a6..67e2039199 100644
--- a/components/affix/__tests__/Affix.test.tsx
+++ b/components/affix/__tests__/Affix.test.tsx
@@ -3,7 +3,7 @@ import type { InternalAffixClass } from '..';
 import Affix from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, sleep, triggerResize } from '../../../tests/utils';
+import { render, sleep, triggerResize, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import { getObserverEntities } from '../utils';
 
@@ -216,22 +216,31 @@ describe('Affix Render', () => {
     });
 
     // Trigger inner and outer element for the two <ResizeObserver>s.
-    it.each([
-      { selector: '.ant-btn' }, // inner
-      { selector: '.fixed' }, // outer
-    ])('trigger listener when size change', async ({ selector }) => {
-      const updateCalled = jest.fn();
-      const { container } = render(
-        <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
-        {
-          container: document.getElementById('mounter')!,
-        },
-      );
+    [
+      '.ant-btn', // inner
+      '.fixed', // outer
+    ].forEach(selector => {
+      it(`trigger listener when size change: ${selector}`, async () => {
+        jest.useFakeTimers();
 
-      updateCalled.mockReset();
-      triggerResize(container.querySelector(selector)!);
-      await sleep(20);
-      expect(updateCalled).toHaveBeenCalled();
+        const updateCalled = jest.fn();
+        const { container } = render(
+          <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
+          {
+            container: document.getElementById('mounter')!,
+          },
+        );
+
+        updateCalled.mockReset();
+        triggerResize(container.querySelector(selector)!);
+
+        await waitFakeTimer();
+
+        expect(updateCalled).toHaveBeenCalled();
+
+        jest.clearAllTimers();
+        jest.useRealTimers();
+      });
     });
   });
 });
diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
index 6dafb1be3e..427a1cf6ea 100644
--- a/components/form/__tests__/index.test.tsx
+++ b/components/form/__tests__/index.test.tsx
@@ -20,7 +20,7 @@ import TreeSelect from '../../tree-select';
 
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep, act } from '../../../tests/utils';
+import { fireEvent, render, sleep, act, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import Drawer from '../../drawer';
 import zhCN from '../../locale/zh_CN';
@@ -811,13 +811,7 @@ describe('Form', () => {
     fireEvent.submit(container.querySelector('form')!);
 
     // Repeat enough time for validator promise sequence
-    for (let i = 0; i < 20; i += 1) {
-      // eslint-disable-next-line no-await-in-loop
-      await act(async () => {
-        await Promise.resolve();
-        jest.advanceTimersByTime(1000);
-      });
-    }
+    await waitFakeTimer();
 
     expect(container.querySelector('.ant-form-item-explain')?.textContent).toEqual('请输入Bamboo');
 
@@ -1415,6 +1409,8 @@ describe('Form', () => {
   });
 
   it('Form.Item.useStatus should work', async () => {
+    jest.useFakeTimers();
+
     const {
       Item: { useStatus },
     } = Form;
@@ -1461,11 +1457,16 @@ describe('Form', () => {
     expect(errorSpy).toHaveBeenCalledWith(
       expect.stringContaining('Form.Item.useStatus should be used under Form.Item component.'),
     );
+
     fireEvent.click(container.querySelector('.submit-button')!);
-    await sleep(0);
+    await waitFakeTimer();
+
     expect(container.querySelector('.custom-input-required')?.classList).toContain(
       'custom-input-status-error',
     );
+
+    jest.clearAllTimers();
+    jest.useRealTimers();
   });
 
   it('item customize margin', async () => {
diff --git a/tests/utils.tsx b/tests/utils.tsx
index 46747bc9d2..fd04bbdca3 100644
--- a/tests/utils.tsx
+++ b/tests/utils.tsx
@@ -63,4 +63,19 @@ export const triggerResize = (target: Element) => {
   target.getBoundingClientRect = originGetBoundingClientRect;
 };
 
+export async function waitFakeTimer(advanceTime = 1000) {
+  for (let i = 0; i < 20; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await act(async () => {
+      await Promise.resolve();
+
+      if (advanceTime > 0) {
+        jest.advanceTimersByTime(advanceTime);
+      } else {
+        jest.runAllTimers();
+      }
+    });
+  }
+}
+
 export * from '@testing-library/react';