chore: Replace domhook with jest.spyon (#23469)

* chore: Replace domhook with jest.spyon

* use mockreturn value when possible

* Update tests/shared/focusTest.js

components/__tests__/util/domHook.ts

@@ -1,71 +0,0 @@
-const __NULL__ = { notExist: true };
-
-type ElementType<P> = {
-  prototype: P;
-};
-
-export function spyElementPrototypes<P extends {}>(Element: ElementType<P>, properties: P) {
-  const propNames = Object.keys(properties);
-  const originDescriptors = {};
-
-  propNames.forEach(propName => {
-    const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName);
-    originDescriptors[propName] = originDescriptor || __NULL__;
-
-    const spyProp = properties[propName];
-
-    if (typeof spyProp === 'function') {
-      // If is a function
-      Element.prototype[propName] = function spyFunc(...args) {
-        return spyProp.call(this, originDescriptor, ...args);
-      };
-    } else {
-      // Otherwise tread as a property
-      Object.defineProperty(Element.prototype, propName, {
-        ...spyProp,
-        set(value) {
-          if (spyProp.set) {
-            return spyProp.set.call(this, originDescriptor, value);
-          }
-          return originDescriptor.set(value);
-        },
-        get() {
-          if (spyProp.get) {
-            return spyProp.get.call(this, originDescriptor);
-          }
-          return originDescriptor.get();
-        },
-      });
-    }
-  });
-
-  return {
-    mockRestore() {
-      propNames.forEach(propName => {
-        const originDescriptor = originDescriptors[propName];
-        if (originDescriptor === __NULL__) {
-          delete Element.prototype[propName];
-        } else if (typeof originDescriptor === 'function') {
-          Element.prototype[propName] = originDescriptor;
-        } else {
-          Object.defineProperty(Element.prototype, propName, originDescriptor);
-        }
-      });
-    },
-  };
-}
-
-type FunctionPropertyNames<T> = {
-  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
-}[keyof T] &
-  string;
-
-export function spyElementPrototype<P extends {}, K extends FunctionPropertyNames<P>>(
-  Element: ElementType<P>,
-  propName: K,
-  property: P[K],
-) {
-  return spyElementPrototypes(Element, {
-    [propName]: property,
-  });
-}

components/affix/__tests__/Affix.test.tsx

@@ -3,7 +3,6 @@ import { mount } from 'enzyme';
 import Affix from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
-import { spyElementPrototype } from '../../__tests__/util/domHook';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
 
@@ -53,7 +52,7 @@ describe('Affix Render', () => {
   rtlTest(Affix);
 
   let wrapper;
-  let domMock;
+  const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
 
   const classRect: any = {
     container: {
@@ -63,7 +62,7 @@ describe('Affix Render', () => {
   };
 
   beforeAll(() => {
-    domMock = spyElementPrototype(HTMLElement, 'getBoundingClientRect', function mockBounding() {
+    domMock.mockImplementation(function fn(this: HTMLElement) {
       return (
         classRect[this.className] || {
           top: 0,

components/anchor/__tests__/Anchor.test.js

@@ -1,27 +1,29 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Anchor from '..';
-import { spyElementPrototypes } from '../../__tests__/util/domHook';
 import { sleep } from '../../../tests/utils';
 
 const { Link } = Anchor;
 
 describe('Anchor Render', () => {
-  const getBoundingClientRectMock = jest.fn(() => ({
-    width: 100,
-    height: 100,
-    top: 1000,
-  }));
-  const getClientRectsMock = jest.fn(() => ({
-    length: 1,
-  }));
-  const headingSpy = spyElementPrototypes(HTMLHeadingElement, {
-    getBoundingClientRect: getBoundingClientRectMock,
-    getClientRects: getClientRectsMock,
+  const getBoundingClientRectMock = jest.spyOn(
+    HTMLHeadingElement.prototype,
+    'getBoundingClientRect',
+  );
+  const getClientRectsMock = jest.spyOn(HTMLHeadingElement.prototype, 'getClientRects');
+
+  beforeAll(() => {
+    getBoundingClientRectMock.mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 1000,
+    });
+    getClientRectsMock.mockReturnValue({ length: 1 });
   });
 
   afterAll(() => {
-    headingSpy.mockRestore();
+    getBoundingClientRectMock.mockRestore();
+    getClientRectsMock.mockRestore();
   });
 
   it('Anchor render perfectly', () => {

components/page-header/__tests__/index.test.js

@@ -4,24 +4,19 @@ import PageHeader from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { spyElementPrototypes } from '../../__tests__/util/domHook';
 
 describe('PageHeader', () => {
   mountTest(PageHeader);
   rtlTest(PageHeader);
 
-  let spy;
+  const mockGetBoundingClientRect = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
 
   beforeAll(() => {
-    spy = spyElementPrototypes(HTMLElement, {
-      getBoundingClientRect: () => ({
-        width: 100,
-      }),
-    });
+    mockGetBoundingClientRect.mockReturnValue({ width: 100 });
   });
 
   afterAll(() => {
-    spy.mockRestore();
+    mockGetBoundingClientRect.mockRestore();
   });
 
   it('pageHeader should not contain back it back', () => {

components/upload/__tests__/uploadlist.test.js

@@ -3,7 +3,6 @@ import { mount } from 'enzyme';
 import Upload from '..';
 import UploadList from '../UploadList';
 import Form from '../../form';
-import { spyElementPrototypes } from '../../__tests__/util/domHook';
 import { errorRequest, successRequest } from './requests';
 import { setup, teardown } from './mock';
 import { sleep } from '../../../tests/utils';
@@ -35,35 +34,16 @@ describe('Upload List', () => {
   function setSize(width, height) {
     size = { width, height };
   }
-  const imageSpy = spyElementPrototypes(Image, {
-    src: {
-      set() {
-        if (this.onload) {
-          this.onload();
-        }
-      },
-    },
-    width: {
-      get: () => size.width,
-    },
-    height: {
-      get: () => size.height,
-    },
-  });
+  const mockWidthGet = jest.spyOn(Image.prototype, 'width', 'get');
+  const mockHeightGet = jest.spyOn(Image.prototype, 'height', 'get');
+  const mockSrcSet = jest.spyOn(Image.prototype, 'src', 'set');
 
   let drawImageCallback = null;
   function hookDrawImageCall(callback) {
     drawImageCallback = callback;
   }
-  const canvasSpy = spyElementPrototypes(HTMLCanvasElement, {
-    getContext: () => ({
-      drawImage: (...args) => {
-        if (drawImageCallback) drawImageCallback(...args);
-      },
-    }),
-
-    toDataURL: () => 'data:image/png;base64,',
-  });
+  const mockGetCanvasContext = jest.spyOn(HTMLCanvasElement.prototype, 'getContext');
+  const mockToDataURL = jest.spyOn(HTMLCanvasElement.prototype, 'toDataURL');
 
   // HTMLCanvasElement.prototype
 
@@ -76,12 +56,29 @@ describe('Upload List', () => {
   let open;
   beforeAll(() => {
     open = jest.spyOn(window, 'open').mockImplementation(() => {});
+    mockWidthGet.mockImplementation(() => size.width);
+    mockHeightGet.mockImplementation(() => size.height);
+    mockSrcSet.mockImplementation(function fn() {
+      if (this.onload) {
+        this.onload();
+      }
+    });
+
+    mockGetCanvasContext.mockReturnValue({
+      drawImage: (...args) => {
+        if (drawImageCallback) drawImageCallback(...args);
+      },
+    });
+    mockToDataURL.mockReturnValue('data:image/png;base64,');
   });
 
   afterAll(() => {
     window.URL.createObjectURL = originCreateObjectURL;
-    imageSpy.mockRestore();
-    canvasSpy.mockRestore();
+    mockWidthGet.mockRestore();
+    mockHeightGet.mockRestore();
+    mockSrcSet.mockRestore();
+    mockGetCanvasContext.mockRestore();
+    mockToDataURL.mockRestore();
     open.mockRestore();
   });
 

tests/shared/focusTest.js

@@ -1,24 +1,22 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { sleep } from '../utils';
 
 // eslint-disable-next-line jest/no-export
 export default function focusTest(Component, refFocus = false) {
   describe('focus and blur', () => {
-    let domSpy;
     let focused = false;
     let blurred = false;
+    const mockFocus = jest.spyOn(HTMLElement.prototype, 'focus');
+    const mockBlur = jest.spyOn(HTMLElement.prototype, 'blur');
 
     beforeAll(() => {
       if (refFocus) {
-        domSpy = spyElementPrototypes(HTMLElement, {
-          focus() {
-            focused = true;
-          },
-          blur() {
-            blurred = true;
-          },
+        mockFocus.mockImplementation(() => {
+          focused = true;
+        });
+        mockBlur.mockImplementation(() => {
+          blurred = true;
         });
       }
     });
@@ -32,9 +30,8 @@ export default function focusTest(Component, refFocus = false) {
     });
 
     afterAll(() => {
-      if (domSpy) {
-        domSpy.mockRestore();
-      }
+      mockFocus.mockRestore();
+      mockBlur.mockRestore();
     });
 
     afterEach(() => {
@@ -53,10 +50,7 @@ export default function focusTest(Component, refFocus = false) {
         ref.current.focus();
         expect(focused).toBeTruthy();
 
-        wrapper
-          .find('input')
-          .first()
-          .simulate('focus');
+        wrapper.find('input').first().simulate('focus');
         expect(onFocus).toHaveBeenCalled();
       });
 
@@ -71,10 +65,7 @@ export default function focusTest(Component, refFocus = false) {
         ref.current.blur();
         expect(blurred).toBeTruthy();
 
-        wrapper
-          .find('input')
-          .first()
-          .simulate('blur');
+        wrapper.find('input').first().simulate('blur');
         expect(onBlur).toHaveBeenCalled();
       });
 
@@ -84,10 +75,7 @@ export default function focusTest(Component, refFocus = false) {
 
         expect(focused).toBeTruthy();
 
-        wrapper
-          .find('input')
-          .first()
-          .simulate('focus');
+        wrapper.find('input').first().simulate('focus');
         expect(onFocus).toHaveBeenCalled();
       });
     } else {