Merge pull request #97 from JohnsonMao/refactor/unit-test

✅ refactor intersection observer hook unit test
JohnsonMao · Oct 1, 2023 · 7d7c35c · 7d7c35c
2 parents 50cd6b8 + e0ba76e
commit 7d7c35c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 36 deletions.
diff --git a/src/components/TableOfContents/tableOfContents.test.tsx b/src/components/TableOfContents/tableOfContents.test.tsx
@@ -9,35 +9,37 @@ 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;
   });
 
   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/..._tests__/useIntersectionObserver.test.tsx → ...__tests__/useIntersectionObserver.test.ts b/..._tests__/useIntersectionObserver.test.tsx → ...__tests__/useIntersectionObserver.test.ts
@@ -1,17 +1,13 @@
-import { act, render, renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import useIntersectionObserver from '../useIntersectionObserver';
 
 describe('useIntersectionObserver hook', () => {
   const mockIntersectionObserver = jest.fn();
   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());