Merge pull request #111 from GDSC-PKNU-21-22/feat/#107

Feat/#107: msw로 졸업요건링크 모킹 데이터 생성 & 졸업요건 카드 기능 구현

src/components/Card/InformCard/index.test.tsx

@@ -6,18 +6,39 @@ import useModals from '@hooks/useModals';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Major from '@type/major';
+import { IconKind } from '@type/styles/icon';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
 
 import '@testing-library/jest-dom';
 import InformCard from './index';
 
-const ICON = 'notification';
-const TITLE = '공지사항';
-const PATH = '/announcement';
+type INFORM_CARD_TYPE = 'ANNOUNCEMENT' | 'GRADUATION';
+
+type INFORM_CARD_DATA = {
+  [key in INFORM_CARD_TYPE]: {
+    title: string;
+    icon: IconKind & ('school' | 'notification');
+    onClick: () => void;
+  };
+};
+
+const graduationLink = 'https://ce.pknu.ac.kr/ce/2889';
+const INFORM_CARD: INFORM_CARD_DATA = {
+  ANNOUNCEMENT: {
+    title: '공지사항',
+    icon: 'notification',
+    onClick: () => mockRouterTo('/announcement'),
+  },
+  GRADUATION: {
+    title: '졸업요건',
+    icon: 'school',
+    onClick: () => (window.location.href = graduationLink),
+  },
+};
 
 const setMajorMock = (isRender: boolean) => {
-  const mockMajor: Major = isRender ? null : '컴퓨터공학과';
+  const mockMajor: Major = isRender ? null : '컴퓨터인공지능학부';
   const mockSetMajor = jest.fn();
 
   jest.mock('react', () => ({
@@ -50,15 +71,33 @@ jest.mock('@hooks/useModals', () => {
 });
 
 describe('InformCard 컴포넌트 테스트', () => {
+  const oldWindowLocation = window.location;
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      enumerable: true,
+      value: new URL(window.location.href),
+    });
+  });
+
   afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: false,
+      enumerable: true,
+      value: oldWindowLocation,
+    });
     jest.clearAllMocks();
   });
 
   it('전역상태가 설정 됐을 경우, 페이지 이동 테스트', async () => {
     render(
       <MajorContext.Provider value={{ ...setMajorMock(false) }}>
         <ModalsProvider>
-          <InformCard icon={ICON} title={TITLE} path={PATH} />
+          <InformCard
+            icon={INFORM_CARD['ANNOUNCEMENT'].icon}
+            title={INFORM_CARD['ANNOUNCEMENT'].title}
+            onClick={INFORM_CARD['ANNOUNCEMENT'].onClick}
+          />
         </ModalsProvider>
       </MajorContext.Provider>,
       {
@@ -71,14 +110,18 @@ describe('InformCard 컴포넌트 테스트', () => {
       await userEvent.click(card);
     });
 
-    expect(mockRouterTo).toHaveBeenCalledWith(`${PATH}`);
+    expect(mockRouterTo).toHaveBeenCalled();
   });
 
   it('전역상태가 설정 안됐을 경우, 모달 렌더링 테스트', async () => {
     render(
       <MajorContext.Provider value={{ ...setMajorMock(true) }}>
         <ModalsProvider>
-          <InformCard icon={ICON} title={TITLE} path={PATH} />
+          <InformCard
+            icon={INFORM_CARD['ANNOUNCEMENT'].icon}
+            title={INFORM_CARD['ANNOUNCEMENT'].title}
+            onClick={INFORM_CARD['ANNOUNCEMENT'].onClick}
+          />
         </ModalsProvider>
       </MajorContext.Provider>,
       {
@@ -99,4 +142,28 @@ describe('InformCard 컴포넌트 테스트', () => {
       routerTo: expect.any(Function),
     });
   });
+
+  it('전역상태가 설정 됐을 경우, 졸업요건 클릭 시 페이지 이동 테스트', async () => {
+    render(
+      <MajorContext.Provider value={{ ...setMajorMock(false) }}>
+        <ModalsProvider>
+          <InformCard
+            icon={INFORM_CARD['GRADUATION'].icon}
+            title={INFORM_CARD['GRADUATION'].title}
+            onClick={INFORM_CARD['GRADUATION'].onClick}
+          />
+        </ModalsProvider>
+      </MajorContext.Provider>,
+      {
+        wrapper: MemoryRouter,
+      },
+    );
+
+    const card = screen.getByTestId('card');
+    await act(async () => {
+      await userEvent.click(card);
+    });
+
+    expect(window.location.href).toBe(graduationLink);
+  });
 });

src/components/Card/InformCard/index.tsx

@@ -10,24 +10,23 @@ import { THEME } from '@styles/ThemeProvider/theme';
 import { IconKind } from '@type/styles/icon';
 import { setSize } from '@utils/styles/size';
 
+// TODO: InformCard 컴포넌트 Props 및 로직 수정
+
 interface InformCardProps {
   icon: IconKind & ('school' | 'notification');
   title: string;
-  path: string;
+  onClick: () => void;
 }
 
-const InformCard = ({ icon, title, path }: InformCardProps) => {
+const InformCard = ({ icon, title, onClick }: InformCardProps) => {
   const { major } = useMajor();
-
   const { routerTo } = useRouter();
-  const routerToPath = (path: string) => routerTo(path);
   const routerToMajorDecision = () => routerTo('/major-decision');
-
   const { openModal, closeModal } = useModals();
 
   const handleMajorModal = () => {
     if (major) {
-      routerToPath(path);
+      onClick();
       return;
     }
     openModal(AlertModal, {