add resize

ant-design · Nov 24, 2020 · bca773f · bca773f
1 parent bcdd861
commit bca773f
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 3 deletions.
diff --git a/tests/setupTests.js b/tests/setupTests.js
@@ -1,4 +1,6 @@
 import MockDate from 'mockdate';
+import Enzyme from 'enzyme';
+
 import moment from 'moment-timezone';
 import { enableFetchMocks } from 'jest-fetch-mock';
 
@@ -31,8 +33,6 @@ if (typeof window !== 'undefined') {
   }
 }
 
-const Enzyme = require('enzyme');
-
 Object.assign(Enzyme.ReactWrapper.prototype, {
   findObserver() {
     return this.find('ResizeObserver');
@@ -96,3 +96,13 @@ Math.random = () => 0.8404419276253765;
 fetch.mockResponse(async () => {
   return { body: JSON.stringify(tableData) };
 });
+
+Object.assign(Enzyme.ReactWrapper.prototype, {
+  findObserver() {
+    return this.find('ResizeObserver');
+  },
+  triggerResize() {
+    const ob = this.findObserver();
+    ob.instance().onResize([{ target: ob.getDOMNode() }]);
+  },
+});
diff --git a/tests/table/search.test.tsx b/tests/table/search.test.tsx
@@ -5,9 +5,29 @@ import { act } from 'react-dom/test-utils';
 import { Input } from 'antd';
 import ProTable from '@ant-design/pro-table';
 import { request } from './demo';
-import { waitForComponentToPaint } from '../util';
+import { waitForComponentToPaint, spyElementPrototypes } from '../util';
 
 describe('BasicTable Search', () => {
+  let domSpy: any;
+  let mockWidth: number;
+  let mockHeight: number;
+  let mockOffsetWidth: number;
+  let mockOffsetHeight: number;
+
+  beforeAll(() => {
+    domSpy = spyElementPrototypes(HTMLElement, {
+      getBoundingClientRect: () => ({
+        width: mockWidth,
+        height: mockHeight,
+      }),
+      offsetWidth: {
+        get: () => mockOffsetWidth,
+      },
+      offsetHeight: {
+        get: () => mockOffsetHeight,
+      },
+    });
+  });
   process.env.NODE_ENV = 'TEST';
   const LINE_STR_COUNT = 20;
   // Mock offsetHeight
@@ -36,9 +56,15 @@ describe('BasicTable Search', () => {
       get: originOffsetHeight,
     });
     window.getComputedStyle = originGetComputedStyle;
+    domSpy.mockRestore();
   });
 
   it('🎏 submit test', async () => {
+    mockHeight = 0;
+    mockWidth = 0;
+    mockOffsetHeight = 0;
+    mockOffsetWidth = 0;
+
     const fn = jest.fn();
     const html = mount(
       <ProTable
@@ -70,6 +96,10 @@ describe('BasicTable Search', () => {
       html.find('button.ant-btn.ant-btn-primary').simulate('click');
     });
 
+    mockOffsetWidth = 1023;
+
+    global.dispatchEvent(new Event('resize'));
+
     await waitForComponentToPaint(html, 500);
 
     expect(fn).toBeCalledTimes(1);

diff --git a/tests/util.ts b/tests/util.ts
@@ -22,3 +22,70 @@ export const resizeWindow = (x: number, y: number) => {
   window.innerHeight = y;
   window.dispatchEvent(new Event('resize'));
 };
+/* eslint-disable no-param-reassign */
+const NO_EXIST = { __NOT_EXIST: true };
+
+export function spyElementPrototypes(
+  Element: { prototype: { [x: string]: any } },
+  properties: { [x: string]: any; [x: number]: any },
+) {
+  const propNames = Object.keys(properties);
+  const originDescriptors = {};
+
+  propNames.forEach((propName) => {
+    const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName);
+    originDescriptors[propName] = originDescriptor || NO_EXIST;
+
+    const spyProp = properties[propName];
+
+    if (typeof spyProp === 'function') {
+      // If is a function
+      Element.prototype[propName] = function spyFunc(...args: any[]) {
+        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?.();
+        },
+        configurable: true,
+      });
+    }
+  });
+
+  return {
+    mockRestore() {
+      propNames.forEach((propName) => {
+        const originDescriptor = originDescriptors[propName];
+        if (originDescriptor === NO_EXIST) {
+          delete Element.prototype[propName];
+        } else if (typeof originDescriptor === 'function') {
+          Element.prototype[propName] = originDescriptor;
+        } else {
+          Object.defineProperty(Element.prototype, propName, originDescriptor);
+        }
+      });
+    },
+  };
+}
+
+export function spyElementPrototype(
+  Element: { prototype: { [x: string]: any } },
+  propName: any,
+  property: any,
+) {
+  return spyElementPrototypes(Element, {
+    [propName]: property,
+  });
+}