test: Update util test case sleep to useFakeTimers and deprecated HTMLDocument, use Document instead (#37984)

* test: Update util test case sleep to useFakeTimers and deprecated HTMLDocument, use Document instead

* test: Update util test case sleep to useFakeTimers

components/_util/__tests__/scrollTo.test.ts

@@ -1,9 +1,13 @@
-import { sleep } from '../../../tests/utils';
+import { waitFakeTimer } from '../../../tests/utils';
 import scrollTo from '../scrollTo';
 
 describe('Test ScrollTo function', () => {
   let dateNowMock: jest.SpyInstance;
 
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
   beforeEach(() => {
     dateNowMock = jest
       .spyOn(Date, 'now')
@@ -11,7 +15,12 @@ describe('Test ScrollTo function', () => {
       .mockImplementationOnce(() => 1000);
   });
 
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   afterEach(() => {
+    jest.clearAllTimers();
     dateNowMock.mockRestore();
   });
 
@@ -22,7 +31,7 @@ describe('Test ScrollTo function', () => {
     });
 
     scrollTo(1000);
-    await sleep(20);
+    await waitFakeTimer();
 
     expect(window.pageYOffset).toBe(1000);
 
@@ -34,7 +43,7 @@ describe('Test ScrollTo function', () => {
     scrollTo(1000, {
       callback: cbMock,
     });
-    await sleep(20);
+    await waitFakeTimer();
     expect(cbMock).toHaveBeenCalledTimes(1);
   });
 
@@ -43,7 +52,7 @@ describe('Test ScrollTo function', () => {
     scrollTo(1000, {
       getContainer: () => div,
     });
-    await sleep(20);
+    await waitFakeTimer();
     expect(div.scrollTop).toBe(1000);
   });
 
@@ -51,7 +60,7 @@ describe('Test ScrollTo function', () => {
     scrollTo(1000, {
       getContainer: () => document,
     });
-    await sleep(20);
+    await waitFakeTimer();
     expect(document.documentElement.scrollTop).toBe(1000);
   });
 
@@ -60,7 +69,7 @@ describe('Test ScrollTo function', () => {
       duration: 1100,
       getContainer: () => document,
     });
-    await sleep(20);
+    await waitFakeTimer();
     expect(document.documentElement.scrollTop).toBe(1000);
   });
 });

components/_util/__tests__/util.test.tsx

@@ -2,7 +2,7 @@
 import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
 import React from 'react';
-import { sleep, render, fireEvent } from '../../../tests/utils';
+import { waitFakeTimer, render, fireEvent } from '../../../tests/utils';
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import delayRaf from '../raf';
 import { isStyleSupport } from '../styleChecker';
@@ -14,6 +14,18 @@ import TransButton from '../transButton';
 
 describe('Test utils function', () => {
   describe('throttle', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+    });
+
     it('throttle function should work', async () => {
       const callback = jest.fn();
       const throttled = throttleByAnimationFrame(callback);
@@ -21,7 +33,7 @@ describe('Test utils function', () => {
 
       throttled();
       throttled();
-      await sleep(20);
+      await waitFakeTimer();
 
       expect(callback).toHaveBeenCalled();
       expect(callback.mock.calls.length).toBe(1);
@@ -33,7 +45,7 @@ describe('Test utils function', () => {
 
       throttled();
       throttled.cancel();
-      await sleep(20);
+      await waitFakeTimer();
 
       expect(callback).not.toHaveBeenCalled();
     });
@@ -50,7 +62,7 @@ describe('Test utils function', () => {
       test.callback();
       test.callback();
       test.callback();
-      await sleep(30);
+      await waitFakeTimer();
       expect(callbackFn).toHaveBeenCalledTimes(1);
     });
   });

components/_util/__tests__/wave.test.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import mountTest from '../../../tests/shared/mountTest';
-import { render, sleep, fireEvent, act } from '../../../tests/utils';
+import { render, waitFakeTimer, fireEvent, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import Wave from '../wave';
 
 describe('Wave component', () => {
   mountTest(Wave);
 
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   afterEach(() => {
+    jest.clearAllTimers();
     const styles = document.getElementsByTagName('style');
     for (let i = 0; i < styles.length; i += 1) {
       styles[i].remove();
@@ -56,7 +65,7 @@ describe('Wave component', () => {
       </Wave>,
     );
     container.querySelector('button')?.click();
-    await sleep(0);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('button')?.getRootNode() as HTMLButtonElement
     ).getElementsByTagName('style');
@@ -73,7 +82,7 @@ describe('Wave component', () => {
       </Wave>,
     );
     container.querySelector('button')?.click();
-    await sleep(200);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('button')?.getRootNode() as HTMLButtonElement
     ).getElementsByTagName('style');
@@ -89,7 +98,7 @@ describe('Wave component', () => {
       </Wave>,
     );
     container.querySelector('div')?.click();
-    await sleep(0);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('div')?.getRootNode() as HTMLDivElement
     ).getElementsByTagName('style');
@@ -105,7 +114,7 @@ describe('Wave component', () => {
       </Wave>,
     );
     container.querySelector('div')?.click();
-    await sleep(0);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('div')?.getRootNode() as HTMLDivElement
     ).getElementsByTagName('style');
@@ -121,7 +130,7 @@ describe('Wave component', () => {
       </Wave>,
     );
     container.querySelector('div')?.click();
-    await sleep(0);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('div')?.getRootNode() as HTMLDivElement
     ).getElementsByTagName('style');
@@ -139,7 +148,7 @@ describe('Wave component', () => {
       </Wave>,
     );
     container.querySelector('button')?.click();
-    await sleep(0);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('button')?.getRootNode() as HTMLButtonElement
     ).getElementsByTagName('style');
@@ -156,7 +165,7 @@ describe('Wave component', () => {
       </ConfigProvider>,
     );
     container.querySelector('button')?.click();
-    await sleep(0);
+    await waitFakeTimer();
     const styles = (
       container.querySelector('button')?.getRootNode() as HTMLButtonElement
     ).getElementsByTagName('style');

components/_util/scrollTo.ts

@@ -23,8 +23,8 @@ export default function scrollTo(y: number, options: ScrollToOptions = {}) {
     const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
     if (isWindow(container)) {
       (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
-    } else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
-      (container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
+    } else if (container instanceof Document || container.constructor.name === 'HTMLDocument') {
+      (container as Document).documentElement.scrollTop = nextScrollTop;
     } else {
       (container as HTMLElement).scrollTop = nextScrollTop;
     }