chore: rewrite test case Demo CC => FC (#40102)

* chore: rewrite test case demo CC => FC

* chore: rewrite test case demo CC => FC

* fix

components/affix/__tests__/Affix.test.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import type { CSSProperties } from 'react';
 import type { InternalAffixClass } from '..';
 import Affix from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
@@ -9,62 +10,42 @@ import { addObserveTarget, getObserverEntities } from '../utils';
 
 const events: Partial<Record<keyof HTMLElementEventMap, (ev: Partial<Event>) => void>> = {};
 
-class AffixMounter extends React.Component<{
+interface AffixProps {
-  offsetBottom?: number;
   offsetTop?: number;
-  onTestUpdatePosition?(): void;
+  offsetBottom?: number;
+  style?: CSSProperties;
   onChange?: () => void;
+  onTestUpdatePosition?: () => void;
   getInstance?: (inst: InternalAffixClass) => void;
-  style?: React.CSSProperties;
-}> {
-  private container: HTMLDivElement;
-
-  componentDidMount() {
-    this.container.addEventListener = jest
-      .fn()
-      .mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Partial<Event>) => void) => {
-        events[event] = cb;
-      });
-  }
-
-  getTarget = () => this.container;
-
-  render() {
-    const { getInstance, ...restProps } = this.props;
-    return (
-      <div
-        ref={(node) => {
-          this.container = node!;
-        }}
-        className="container"
-      >
-        <Affix
-          className="fixed"
-          target={this.getTarget}
-          ref={(ele) => {
-            getInstance?.(ele!);
-          }}
-          {...restProps}
-        >
-          <Button type="primary">Fixed at the top of container</Button>
-        </Affix>
-      </div>
-    );
-  }
 }
 
+const AffixMounter: React.FC<AffixProps> = ({ getInstance, ...restProps }) => {
+  const container = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (container.current) {
+      container.current.addEventListener = jest
+        .fn()
+        .mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Event) => void) => {
+          events[event] = cb;
+        });
+    }
+  }, []);
+  return (
+    <div ref={container} className="container">
+      <Affix className="fixed" ref={getInstance} target={() => container.current} {...restProps}>
+        <Button type="primary">Fixed at the top of container</Button>
+      </Affix>
+    </div>
+  );
+};
+
 describe('Affix Render', () => {
   rtlTest(Affix);
   accessibilityTest(Affix);
 
   const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
 
-  const classRect: Record<string, DOMRect> = {
+  const classRect: Record<string, DOMRect> = { container: { top: 0, bottom: 100 } as DOMRect };
-    container: {
-      top: 0,
-      bottom: 100,
-    } as DOMRect,
-  };
 
   beforeEach(() => {
     jest.useFakeTimers();
@@ -74,12 +55,7 @@ describe('Affix Render', () => {
 
   beforeAll(() => {
     domMock.mockImplementation(function fn(this: HTMLElement) {
-      return (
+      return classRect[this.className] || { top: 0, bottom: 0 };
-        classRect[this.className] || {
-          top: 0,
-          bottom: 0,
-        }
-      );
     });
   });
 
@@ -93,16 +69,11 @@ describe('Affix Render', () => {
   });
 
   const movePlaceholder = async (top: number) => {
-    classRect.fixed = {
+    classRect.fixed = { top, bottom: top } as DOMRect;
-      top,
-      bottom: top,
-    } as DOMRect;
     if (events.scroll == null) {
       throw new Error('scroll should be set');
     }
-    events.scroll({
+    events.scroll({ type: 'scroll' });
-      type: 'scroll',
-    });
     await waitFakeTimer();
   };