refactor: id 모킹은 id 생성 함수의 반환값 사용하도록 한다 (#413)

blacktokkies · Sep 17, 2023 · 190d610 · 190d610
1 parent dba1127
commit 190d610
Show file tree

Hide file tree

Showing 19 changed files with 414 additions and 339 deletions.
diff --git a/src/components/home/__tests__/AccountActionMenu.test.tsx b/src/components/home/__tests__/AccountActionMenu.test.tsx
@@ -1,3 +1,5 @@
+import type { UserState } from '@/store/user-store';
+
 import React from 'react';
 
 import { screen, waitFor } from '@testing-library/react';
@@ -8,33 +10,74 @@ import { MemoryRouter } from 'react-router-dom';
 import { AccountActionMenu } from '@/components/home/AccountActionMenu';
 import * as authApis from '@/lib/api/auth';
 import { renderWithQueryClient } from '@/lib/test-utils';
+import { createMockUser, createMockUserId } from '@/mocks/data/auth';
 import { setUserState } from '@/store/user-store';
 
-const handleClose = vi.fn();
-
 const navigateMockFn = vi.fn();
 vi.mock('react-router-dom', async (importOriginal) => {
   const router = (await importOriginal()) ?? {};
   return { ...router, useNavigate: vi.fn(() => navigateMockFn) };
 });
 
+const handleClose = vi.fn();
+function setup({ user }: { user: UserState }): {
+  panelButton: HTMLButtonElement;
+  accountButton: HTMLButtonElement;
+  logoutButton: HTMLButtonElement;
+} {
+  act(() => {
+    setUserState(user);
+  });
+
+  renderWithQueryClient(
+    <MemoryRouter>
+      <AccountActionMenu close={handleClose} />
+    </MemoryRouter>,
+  );
+
+  const panelButton = screen.getByRole<HTMLButtonElement>('button', {
+    name: /내 패널 모아보기/,
+  });
+  const accountButton = screen.getByRole<HTMLButtonElement>('button', {
+    name: /내 계정 관리/,
+  });
+  const logoutButton = screen.getByRole<HTMLButtonElement>('button', {
+    name: /로그아웃/,
+  });
+
+  return { panelButton, accountButton, logoutButton };
+}
+
 describe('AccountActionMenu', () => {
   it('사용자 이메일과 닉네임을 보여준다', () => {
-    setup();
+    setup({
+      user: {
+        id: createMockUserId(),
+        email: '이메일',
+        nickname: '닉네임',
+        provider: 'LOCAL',
+        createdAt: new Date().toString(),
+        updatedAt: new Date().toString(),
+      },
+    });
 
     expect(screen.getByText(/이메일/)).toBeInTheDocument();
     expect(screen.getByText(/닉네임/)).toBeInTheDocument();
   });
 
   it('내 패널 모아보기 버튼을 누르면 홈 페이지로 이동한다', async () => {
-    const { panelButton } = setup();
+    const { panelButton } = setup({
+      user: createMockUser(),
+    });
     await userEvent.click(panelButton);
 
     expect(navigateMockFn).toHaveBeenCalledWith('/home');
   });
 
   it('내 계정 관리 버튼을 누르면 내 계정 관리 페이지로 이동한다', async () => {
-    const { accountButton } = setup();
+    const { accountButton } = setup({
+      user: createMockUser(),
+    });
     await userEvent.click(accountButton);
 
     expect(navigateMockFn).toHaveBeenCalledWith('/account');
@@ -44,7 +87,9 @@ describe('AccountActionMenu', () => {
     const spyOnLogout = vi.spyOn(authApis, 'logout');
 
     it('성공하면 로그인 페이지로 이동한다', async () => {
-      const { logoutButton } = setup();
+      const { logoutButton } = setup({
+        user: createMockUser(),
+      });
       await userEvent.click(logoutButton);
 
       expect(spyOnLogout).toHaveBeenCalled();
@@ -54,38 +99,3 @@ describe('AccountActionMenu', () => {
     });
   });
 });
-
-function setup(): {
-  panelButton: HTMLElement;
-  accountButton: HTMLElement;
-  logoutButton: HTMLElement;
-} {
-  act(() => {
-    setUserState({
-      id: -1,
-      email: '이메일',
-      nickname: '닉네임',
-      provider: 'LOCAL',
-      createdAt: new Date().toString(),
-      updatedAt: new Date().toString(),
-    });
-  });
-
-  renderWithQueryClient(
-    <MemoryRouter>
-      <AccountActionMenu close={handleClose} />
-    </MemoryRouter>,
-  );
-
-  const panelButton = screen.getByRole('button', {
-    name: /내 패널 모아보기/,
-  });
-  const accountButton = screen.getByRole('button', {
-    name: /내 계정 관리/,
-  });
-  const logoutButton = screen.getByRole('button', {
-    name: /로그아웃/,
-  });
-
-  return { panelButton, accountButton, logoutButton };
-}
diff --git a/src/components/home/__tests__/DeletePanelModal.test.tsx b/src/components/home/__tests__/DeletePanelModal.test.tsx
@@ -2,47 +2,52 @@ import type { Panel } from '@/lib/api/panel';
 
 import React from 'react';
 
-import { faker } from '@faker-js/faker';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import * as panelApis from '@/lib/api/panel';
 import { renderWithQueryClient } from '@/lib/test-utils';
+import { createMockPanel } from '@/mocks/data/panel';
 
 import { DeletePanelModal } from '../DeletePanelModal';
 
 const handleClose = vi.fn();
-const panel: Panel = {
-  sid: faker.datatype.uuid(),
-  title: '테스트 패널 제목',
-  description: '테스트 패널 설명',
-  author: {
-    id: -1,
-    nickname: '테스트 닉네임',
-  },
-  createdAt: new Date().toDateString(),
-  updatedAt: new Date().toDateString(),
-};
+function setup({ panel }: { panel: Panel }): {
+  closeButton: HTMLButtonElement;
+  deleteButton: HTMLButtonElement;
+} {
+  renderWithQueryClient(<DeletePanelModal close={handleClose} panel={panel} />);
+
+  const closeButton = screen.getByRole<HTMLButtonElement>('button', {
+    name: /취소/,
+  });
+  const deleteButton = screen.getByRole<HTMLButtonElement>('button', {
+    name: /패널 삭제/,
+  });
+  return { closeButton, deleteButton };
+}
 
 describe('DeletePanelModal', () => {
   it('패널 삭제하기 헤딩을 보여준다', () => {
-    setup();
+    setup({ panel: createMockPanel() });
 
     expect(screen.getByRole('heading')).toHaveTextContent(/패널 삭제하기/);
   });
 
   describe('패널 삭제 버튼을 누르면', () => {
     it('패널 삭제 API를 호출한다', async () => {
       const spyOnDeletePanel = vi.spyOn(panelApis, 'deletePanel');
-      const { deleteButton } = setup();
+      const { deleteButton } = setup({ panel: createMockPanel() });
+
       await userEvent.click(deleteButton);
 
       expect(spyOnDeletePanel).toHaveBeenCalled();
     });
 
     it('패널 삭제 API가 성공 응답 시 close 함수를 호출한다', async () => {
       const spyOnDeletePanel = vi.spyOn(panelApis, 'deletePanel');
-      const { deleteButton } = setup();
+      const { deleteButton } = setup({ panel: createMockPanel() });
+
       await userEvent.click(deleteButton);
 
       expect(spyOnDeletePanel).toHaveBeenCalled();
@@ -54,24 +59,10 @@ describe('DeletePanelModal', () => {
   });
 
   it('취소 버튼을 누르면 close 함수가 호출된다', async () => {
-    const { closeButton } = setup();
+    const { closeButton } = setup({ panel: createMockPanel() });
+
     await userEvent.click(closeButton);
 
     expect(handleClose).toHaveBeenCalled();
   });
 });
-
-function setup(): {
-  closeButton: HTMLButtonElement;
-  deleteButton: HTMLButtonElement;
-} {
-  renderWithQueryClient(<DeletePanelModal close={handleClose} panel={panel} />);
-
-  const closeButton = screen.getByRole<HTMLButtonElement>('button', {
-    name: /취소/,
-  });
-  const deleteButton = screen.getByRole<HTMLButtonElement>('button', {
-    name: /패널 삭제/,
-  });
-  return { closeButton, deleteButton };
-}
diff --git a/src/components/home/__tests__/PanelItem.test.tsx b/src/components/home/__tests__/PanelItem.test.tsx
@@ -2,49 +2,15 @@ import type { Panel } from '@/lib/api/panel';
 
 import React from 'react';
 
-import { faker } from '@faker-js/faker';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { PanelItem } from '@/components/home/PanelItem';
+import { createMockPanel } from '@/mocks/data/panel';
 
-const panel: Panel = {
-  sid: faker.datatype.uuid(),
-  title: '테스트 패널 제목',
-  description: '테스트 패널 설명',
-  author: {
-    id: -1,
-    nickname: '테스트 닉네임',
-  },
-  createdAt: new Date().toDateString(),
-  updatedAt: new Date().toDateString(),
-};
 const handleOpenActionMenu = vi.fn();
 const handleTitleClick = vi.fn();
-
-describe('PanelItem', () => {
-  it('패널 제목과 설명을 렌더링한다', () => {
-    setup();
-    expect(screen.getByText(/패널 제목/)).toBeInTheDocument();
-    expect(screen.getByText(/패널 설명/)).toBeInTheDocument();
-  });
-
-  it('더보기 아이콘을 누르면 openActionMenu 함수를 호출한다', async () => {
-    const { moreButton } = setup();
-    await userEvent.click(moreButton);
-
-    expect(handleOpenActionMenu).toHaveBeenCalled();
-  });
-
-  it('패널 제목을 누르면 onPanelTitleClick 함수를 호출한다', async () => {
-    const { titleButton } = setup();
-    await userEvent.click(titleButton);
-
-    expect(handleTitleClick).toHaveBeenCalled();
-  });
-});
-
-function setup(): {
+function setup({ panel }: { panel: Panel }): {
   moreButton: HTMLButtonElement;
   titleButton: HTMLButtonElement;
 } {
@@ -65,3 +31,31 @@ function setup(): {
 
   return { moreButton, titleButton };
 }
+
+describe('PanelItem', () => {
+  it('패널 제목과 설명을 렌더링한다', () => {
+    setup({
+      panel: {
+        ...createMockPanel(),
+        title: '테스트 패널 제목',
+        description: '테스트 패널 설명',
+      },
+    });
+    expect(screen.getByText(/테스트 패널 제목/)).toBeInTheDocument();
+    expect(screen.getByText(/테스트 패널 설명/)).toBeInTheDocument();
+  });
+
+  it('더보기 아이콘을 누르면 openActionMenu 함수를 호출한다', async () => {
+    const { moreButton } = setup({ panel: createMockPanel() });
+    await userEvent.click(moreButton);
+
+    expect(handleOpenActionMenu).toHaveBeenCalled();
+  });
+
+  it('패널 제목을 누르면 onPanelTitleClick 함수를 호출한다', async () => {
+    const { titleButton } = setup({ panel: createMockPanel() });
+    await userEvent.click(titleButton);
+
+    expect(handleTitleClick).toHaveBeenCalled();
+  });
+});