feat: update useAnalyticsPageView parameter (#180)

* enhance: update useAnalyticsPageView to be called only once

* enhance: update useAnalyticsPageView to accept callback

- 이제 callback 함수를 입력 받을 수 있습니다.
- regular function으로 변경하고 overloading을 추가했습니다.

* test: add useAnalyticsPageView test

* test: remove waiting time in useAnalyticsPageView tests

100ms -> 0mx

* chore: fix typo

* test: add waitForAsync for remove duplicates

비동기 대기 인라인 코드를 함수로 만들어 중복을 제거했습니다.

* test: mute logs

console.info를 mocking하여 불필요한 log 발생을 없앴습니다.

resolve #171

Author: greatSumini

src/hooks/useAnalyticsPageView.ts

@@ -2,10 +2,19 @@ import React from 'react';
 import {useAnalyticsContext} from '../contexts/useAnalyticsContext';
 import {UnknownRecord} from '../types/common';
 
-export const useAnalyticsPageView = (params: UnknownRecord) => {
+export function useAnalyticsPageView(params: UnknownRecord): void;
+export function useAnalyticsPageView(callback: () => UnknownRecord): void;
+export function useAnalyticsPageView(callback: () => Promise<UnknownRecord>): void;
+export function useAnalyticsPageView(paramsOrCallback: UnknownRecord | (() => Promise<UnknownRecord> | UnknownRecord)) {
   const analytics = useAnalyticsContext();
 
-  React.useEffect(() => {
+  const pageView = async () => {
+    const params = typeof paramsOrCallback === 'function' ? await paramsOrCallback() : paramsOrCallback;
     analytics.onPageView(params);
-  }, [analytics, params]);
-};
+  };
+
+  React.useEffect(() => {
+    pageView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analytics]);
+}

tests/hooks/useAnalyticsPageView.test.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import * as faker from 'faker';
+
+import * as contextModule from '../../src/contexts/useAnalyticsContext';
+import {useAnalyticsPageView} from '../../src/hooks/useAnalyticsPageView';
+
+describe('useAnalyticsPageView', () => {
+  const setUp = () => {
+    const params = {value: faker.lorem.word()};
+    const callback = () => params;
+    const asyncCallback = async () => params;
+
+    const onPageView = jest.fn();
+
+    const useEffectSpy = jest.spyOn(React, 'useEffect').mockImplementationOnce(cb => cb());
+    const useContextSpy = jest.spyOn(contextModule, 'useAnalyticsContext').mockImplementationOnce(
+      () =>
+        ({
+          onPageView,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any),
+    );
+    jest.spyOn(console, 'info').mockImplementation(() => null);
+
+    return {
+      params,
+      callback,
+      asyncCallback,
+      onPageView,
+      useEffectSpy,
+      useContextSpy,
+    };
+  };
+
+  const waitForAsync = () => new Promise(resolve => setTimeout(resolve, 0));
+
+  test('should call analytics.onPageView with params', async () => {
+    const {params, onPageView, useContextSpy, useEffectSpy} = setUp();
+
+    useAnalyticsPageView(params);
+    await waitForAsync();
+
+    expect(useContextSpy).toHaveBeenCalled();
+    expect(useEffectSpy).toHaveBeenCalled();
+    expect(onPageView).toHaveBeenCalledWith(params);
+  });
+
+  test('should call analytics.onPageView with callback', async () => {
+    const {params, callback, onPageView, useContextSpy, useEffectSpy} = setUp();
+
+    useAnalyticsPageView(callback);
+    await waitForAsync();
+
+    expect(useContextSpy).toHaveBeenCalled();
+    expect(useEffectSpy).toHaveBeenCalled();
+    expect(onPageView).toHaveBeenCalledWith(params);
+  });
+
+  test('should call analytics.onPageView with asyncCallback', async () => {
+    const {params, asyncCallback, onPageView, useContextSpy, useEffectSpy} = setUp();
+
+    useAnalyticsPageView(asyncCallback);
+    await waitForAsync();
+
+    expect(useContextSpy).toHaveBeenCalled();
+    expect(useEffectSpy).toHaveBeenCalled();
+    expect(onPageView).toHaveBeenCalledWith(params);
+  });
+});