From 95f6f0f14a9a41395ee1d1777d45d860a6c40074 Mon Sep 17 00:00:00 2001
From: Eric Wang <eric@canva.com>
Date: Sat, 18 Apr 2020 02:31:31 +1000
Subject: [PATCH] Chore: Refactor affix test to typescript (#23364)

---
 .../__tests__/util/{domHook.js => domHook.ts} | 17 ++++++++++++++--
 .../{Affix.test.js => Affix.test.tsx}         | 20 +++++++++++++------
 ...Affix.test.js.snap => Affix.test.tsx.snap} |  0
 .../{demo.test.js.snap => demo.test.ts.snap}  |  0
 .../__tests__/{demo.test.js => demo.test.ts}  |  0
 components/affix/index.tsx                    |  2 +-
 6 files changed, 30 insertions(+), 9 deletions(-)
 rename components/__tests__/util/{domHook.js => domHook.ts} (79%)
 rename components/affix/__tests__/{Affix.test.js => Affix.test.tsx} (91%)
 rename components/affix/__tests__/__snapshots__/{Affix.test.js.snap => Affix.test.tsx.snap} (100%)
 rename components/affix/__tests__/__snapshots__/{demo.test.js.snap => demo.test.ts.snap} (100%)
 rename components/affix/__tests__/{demo.test.js => demo.test.ts} (100%)

diff --git a/components/__tests__/util/domHook.js b/components/__tests__/util/domHook.ts
similarity index 79%
rename from components/__tests__/util/domHook.js
rename to components/__tests__/util/domHook.ts
index dddc3ffc27..26f4a0532f 100644
--- a/components/__tests__/util/domHook.js
+++ b/components/__tests__/util/domHook.ts
@@ -1,6 +1,10 @@
 const __NULL__ = { notExist: true };
 
-export function spyElementPrototypes(Element, properties) {
+type ElementType<P> = {
+  prototype: P;
+};
+
+export function spyElementPrototypes<P extends {}>(Element: ElementType<P>, properties: P) {
   const propNames = Object.keys(properties);
   const originDescriptors = {};
 
@@ -51,7 +55,16 @@ export function spyElementPrototypes(Element, properties) {
   };
 }
 
-export function spyElementPrototype(Element, propName, property) {
+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,
   });
diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.tsx
similarity index 91%
rename from components/affix/__tests__/Affix.test.js
rename to components/affix/__tests__/Affix.test.tsx
index 78c81d5c6b..1c34b576ef 100644
--- a/components/affix/__tests__/Affix.test.js
+++ b/components/affix/__tests__/Affix.test.tsx
@@ -7,9 +7,17 @@ import { spyElementPrototype } from '../../__tests__/util/domHook';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
 
-const events = {};
+const events: any = {};
+
+class AffixMounter extends React.Component<{
+  offsetBottom?: number;
+  offsetTop?: number;
+  onTestUpdatePosition?(): void;
+}> {
+  private container: HTMLDivElement;
+
+  private affix: Affix;
 
-class AffixMounter extends React.Component {
   componentDidMount() {
     this.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
       events[event] = cb;
@@ -47,7 +55,7 @@ describe('Affix Render', () => {
   let wrapper;
   let domMock;
 
-  const classRect = {
+  const classRect: any = {
     container: {
       top: 0,
       bottom: 100,
@@ -135,9 +143,9 @@ describe('Affix Render', () => {
   describe('updatePosition when target changed', () => {
     it('function change', () => {
       document.body.innerHTML = '<div id="mounter" />';
-      const container = document.querySelector('#id');
+      const container = document.querySelector('#id') as HTMLDivElement;
       const getTarget = () => container;
-      wrapper = mount(<Affix target={getTarget} />);
+      wrapper = mount(<Affix target={getTarget}>{null}</Affix>);
       wrapper.setProps({ target: null });
       expect(wrapper.instance().state.status).toBe(0);
       expect(wrapper.instance().state.affixStyle).toBe(undefined);
@@ -153,7 +161,7 @@ describe('Affix Render', () => {
 
       const originLength = getObserverLength();
       const getTarget = () => target;
-      wrapper = mount(<Affix target={getTarget} />);
+      wrapper = mount(<Affix target={getTarget}>{null}</Affix>);
       await sleep(50);
 
       expect(getObserverLength()).toBe(originLength + 1);
diff --git a/components/affix/__tests__/__snapshots__/Affix.test.js.snap b/components/affix/__tests__/__snapshots__/Affix.test.tsx.snap
similarity index 100%
rename from components/affix/__tests__/__snapshots__/Affix.test.js.snap
rename to components/affix/__tests__/__snapshots__/Affix.test.tsx.snap
diff --git a/components/affix/__tests__/__snapshots__/demo.test.js.snap b/components/affix/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/affix/__tests__/__snapshots__/demo.test.js.snap
rename to components/affix/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/affix/__tests__/demo.test.js b/components/affix/__tests__/demo.test.ts
similarity index 100%
rename from components/affix/__tests__/demo.test.js
rename to components/affix/__tests__/demo.test.ts
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 4e00fae97e..737565a63d 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -32,7 +32,7 @@ export interface AffixProps {
   target?: () => Window | HTMLElement | null;
   prefixCls?: string;
   className?: string;
-  children: React.ReactElement;
+  children: React.ReactNode;
 }
 
 enum AffixStatus {