import { useEffect, useState } from 'react';
import Page from '@common/types/page';

type PageMap = { [id in string]?: Page };
const CachePageMap: PageMap = {};
export const DEFAULT_PAGE: Page = { /* ... */ };

const usePage = (pageId: string, defaultPage = DEFAULT_PAGE) => {
  const [data, setData] = useState<Page>(defaultPage);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    // cacheID는 캐시된 값을 찾아오기 위한 유일한 값이다.
    const cacheID = pageId;
    // 먼저 캐시가 존재하는지 확인하고 만약 존재한다면 값을 설정한다.
    const cachePage = CachePageMap[cacheID];
    if (cachePage !== undefined) {
      setData(cachePage);
      setLoading(false);
    } else {
      // 캐시가 존재하지 않는다면 로딩 상태를 true로 만들고 값을 초기화해야 한다.
      setLoading(true);
      setData(defaultPage);
    }

    // 새로운 데이터를 fetch한다.
    const url = `/get-page/${pageId}`;
    fetch(url)
      .then((res) => res.json())
      .then((newData) => {
        CachePageMap[cacheID] = newData.data;
        setData(newData.data);
        setLoading(false);
      });
  }, [pageId, defaultPage]);

  return [data, isLoading];
};

export default usePage;

describe('usePage', () => {
  it('usePage를 새로운 pageId와 호출하면 isLoading은 true다.', () => {
    const [pageData, isLoading] = usePage('pageId1');

    expect(isLoading).toBe(true);
  });
});

import { renderHook } from '@testing-library/react-hooks';

const setupRenderCustomHook = (pageId: string, defaultPage?: Page) => {
  return renderHook(({ pageId }) => usePage(pageId, defaultPage), {
    initialProps: {
      pageId,
    },
  });
};

describe('usePage', () => {
  it('usePage를 새로운 pageId와 호출하면 isLoading은 true이다.', () => {
    const { result } = setupRenderCustomHook('pageId1');

    const [, isLoading] = result.current;

    expect(isLoading).toBe(true);
  });
});

// ...

const fetchMock = (url: string, suffix = '') => {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve({
        json: () =>
          Promise.resolve({
            data: {
              name: url,
              creator: suffix + url,
            } as Page,
          }),
      });
    }, 50 + Math.random() * 150),
  );
};

// ...

describe('usePage', () => {
  // 테스트 실행전에 모킹한다.
  beforeAll(() => {
    global.fetch = jest.fn(fetchMock) as jest.Mock;
  });

  it( /* ... */ );
});

describe('usePage', () => {
  // ...
  it('usePage에 pageId이 전달되면 캐시에 존재하지 않기 때문에 isLoading은 true로 data는 DEFAULT_PAGE로 초기화된다.', () => {
    const { result } = setupRenderCustomHook('pageId1');

    const [defaultPage, isLoading] = result.current;

    expect(defaultPage).toBe(DEFAULT_PAGE);
    expect(isLoading).toBe(true);
  });
});

describe('usePage', () => {
  // ...
  it('비동기 fetch 요청 지연 이후에 data를 새로운 페이지 데이터 page1으로 업데이트하고 isLoading은 false가 된다.', async () => {
    const { result, waitForNextUpdate } = setupRenderCustomHook('pageId1');

    expect(global.fetch).toHaveBeenCalledWith('/get-page/pageId1');

    await waitForNextUpdate();

    const [page1, isLoading] = result.current;

    expect(isLoading).toBe(false);
    expect(page1).toEqual({
      name: '/get-page/pageId1',
      creator: '/get-page/pageId1',
    });
  });
});

describe('usePage', () => {
  it('usePage호출 이후에 캐시되지 않은 pageId가 전달되면 isLoading은 true로, data는 DEFAULT_PAGE로 초기화된다.', async () => {
    const { result, waitForNextUpdate, rerender } =
      setupRenderCustomHook('pageId1');
    await waitForNextUpdate();

    rerender({ pageId: 'pageId2' });
    const [defaultPage, isLoading] = result.current;

    expect(isLoading).toBe(true);
    expect(defaultPage).toBe(DEFAULT_PAGE);
  });

  it('usePage호출 이후에 캐시되지 않은 pageId가 전달되고 비동기 fetch 요청 지연 이후에 isLoading은 false로, data는 page2로 초기화된다.', async () => {
    const { result, waitForNextUpdate, rerender } =
      setupRenderCustomHook('pageId1');
    await waitForNextUpdate();

    rerender({ pageId: 'pageId2' });
    await waitForNextUpdate();
    const [page2, isLoading] = result.current;

    expect(isLoading).toBe(false);
    expect(page2).toEqual({
      name: '/get-page/pageId2',
      creator: '/get-page/pageId2',
    });
  });
});

describe('usePage', () => {
  it('usePage에 캐시된 pageId가 전달되면 isLoading은 false로, data는 캐시된 page로 초기화된다.', async () => {
    const { result, waitForNextUpdate, rerender } =
      setupRenderCustomHook('pageId1');
    await waitForNextUpdate();

    rerender({ pageId: 'pageId2' });
    await waitForNextUpdate();

    rerender({ pageId: 'pageId1' });
    const [page1, isLoading] = result.current;

    expect(isLoading).toBe(false);
    expect(page1).toEqual({
      name: '/get-page/pageId1',
      creator: '/get-page/pageId1',
    });
  });

  it('캐시된 데이터도 비동기 fetch 요청 지연 이후에 data를 새로운 페이지 데이터로 업데이트한다.', async () => {
    const { result, waitForNextUpdate, rerender } =
      setupRenderCustomHook('pageId1');
    await waitForNextUpdate();

    rerender({ pageId: 'pageId2' });
    await waitForNextUpdate();

    rerender({ pageId: 'pageId1' });
    const [page1] = result.current;
    await waitForNextUpdate();
    
    const [newPage1] = result.current;
    expect(page1).not.toBe(newPage1);
  });
});

const setupRenderCustomHookWithWrapper = (
  state: any,
  pageId: string,
  defaultPage?: Page,
) => {
  const store = {
    getState: () => state,
    dispatch: () => {},
    subscribe: () => () => null,
  } as unknown as Store;
  
  return renderHook(({ pageId }) => usePage(pageId, defaultPage), {
    initialProps: {
      pageId,
    },
    wrapper: ({ children }) => (
      <ReduxProvider store={store}>{children}</ReduxProvider>
    ),
  });
};