From e0ba76ed80cb1402d6674917f84d4f77dce3bfea Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sun, 1 Oct 2023 20:46:24 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20refactor=20intersection=20observer?=
 =?UTF-8?q?=20hook=20unit=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TableOfContents/tableOfContents.test.tsx  | 41 ++++++++++---------
 ...st.tsx => useIntersectionObserver.test.ts} | 30 ++++++--------
 2 files changed, 35 insertions(+), 36 deletions(-)
 rename src/hooks/__tests__/{useIntersectionObserver.test.tsx => useIntersectionObserver.test.ts} (76%)

diff --git a/src/components/TableOfContents/tableOfContents.test.tsx b/src/components/TableOfContents/tableOfContents.test.tsx
index b232e32d..1f494d56 100644
--- a/src/components/TableOfContents/tableOfContents.test.tsx
+++ b/src/components/TableOfContents/tableOfContents.test.tsx
@@ -9,28 +9,19 @@ jest.mock(
       slug = (text: string) => text;
     }
 );
-jest.mock('@/hooks/useIntersectionObserver', () => () => [
-  [
-    {
-      isIntersecting: false,
-      target: { id: 'H2_2' },
-    },
-    {
-      isIntersecting: true,
-      target: { id: 'H3_2-1' },
-    },
-  ],
-  () => undefined,
-]);
 
 describe('TableOfContents component', () => {
-  beforeEach(() => {
-    const mockIntersectionObserver = jest.fn();
+  const mockIntersectionObserver = jest.fn();
+  const mockObserverCallback = jest.fn();
 
-    mockIntersectionObserver.mockReturnValue({
-      observe: () => null,
-      unobserve: () => null,
-      disconnect: () => null,
+  beforeEach(() => {
+    mockIntersectionObserver.mockImplementation((callback) => {
+      callback(mockObserverCallback())
+      return {
+        observe: () => null,
+        unobserve: () => null,
+        disconnect: () => null,
+      }
     });
     window.IntersectionObserver = mockIntersectionObserver;
   });
@@ -38,6 +29,17 @@ describe('TableOfContents component', () => {
   it('should render correct element', () => {
     const source = '# H1\n## H2_1\n### H3_1-1\n## H2_2\n### H3_2-1\n';
 
+    mockObserverCallback.mockReturnValueOnce([
+      {
+        isIntersecting: false,
+        target: { id: 'H2_2' },
+      },
+      {
+        isIntersecting: true,
+        target: { id: 'H3_2-1' },
+      },
+    ])
+
     render(<TableOfContents source={source} />);
 
     const toc = screen.getByRole('navigation');
@@ -48,6 +50,7 @@ describe('TableOfContents component', () => {
     expect(anchorLinks[0]).toHaveAttribute('href', '#H2_1');
     expect(anchorLinks[1]).toHaveAttribute('href', '#H3_1-1');
     expect(anchorLinks[2]).toHaveAttribute('href', '#H2_2');
+    expect(anchorLinks[2]).not.toHaveClass('font-medium');
     expect(anchorLinks[3]).toHaveAttribute('href', '#H3_2-1');
     expect(anchorLinks[3]).toHaveClass('font-medium');
   });
diff --git a/src/hooks/__tests__/useIntersectionObserver.test.tsx b/src/hooks/__tests__/useIntersectionObserver.test.ts
similarity index 76%
rename from src/hooks/__tests__/useIntersectionObserver.test.tsx
rename to src/hooks/__tests__/useIntersectionObserver.test.ts
index e399084b..a7756535 100644
--- a/src/hooks/__tests__/useIntersectionObserver.test.tsx
+++ b/src/hooks/__tests__/useIntersectionObserver.test.ts
@@ -1,4 +1,4 @@
-import { act, render, renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import useIntersectionObserver from '../useIntersectionObserver';
 
 describe('useIntersectionObserver hook', () => {
@@ -6,12 +6,8 @@ describe('useIntersectionObserver hook', () => {
   const mockObserve = jest.fn();
   const mockUnobserve = jest.fn();
   const mockDisconnect = jest.fn();
-  const elementRef: { current: Element[] } = { current: [] };
-  const pushElementRef = (element: Element | null) =>
-    element && elementRef.current.push(element);
 
   beforeEach(() => {
-    elementRef.current = [];
     mockObserve.mockClear();
     mockUnobserve.mockClear();
     mockDisconnect.mockClear();
@@ -25,12 +21,12 @@ describe('useIntersectionObserver hook', () => {
   });
 
   it('should observe elements when elementRef is provided', () => {
-    render(
-      <div>
-        <h2 ref={pushElementRef}>Test1</h2>
-        <h2 ref={pushElementRef}>Test2</h2>
-      </div>
-    );
+    const elementRef = {
+      current: [
+        document.createElement('h2'),
+        document.createElement('h2')
+      ]
+    }
 
     renderHook(() => useIntersectionObserver({ elementRef }));
 
@@ -41,12 +37,12 @@ describe('useIntersectionObserver hook', () => {
   });
 
   it('should observe and disconnect elements when setElementRef is called', () => {
-    render(
-      <div>
-        <h2 ref={pushElementRef}>Test1</h2>
-        <h2 ref={pushElementRef}>Test2</h2>
-      </div>
-    );
+    const elementRef = {
+      current: [
+        document.createElement('h2'),
+        document.createElement('h2')
+      ]
+    }
 
     const { result } = renderHook(() => useIntersectionObserver());