[4팀 오하늘] Chapter 3-1. 프론트엔드 테스트 코드 🧦

cSpell.json

@@ -0,0 +1,3 @@
+{
+  "words": ["notistack"]
+}

package.json

@@ -29,6 +29,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.33.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",

src/__mocks__/handlers.ts

@@ -6,11 +6,54 @@
 // ! HARD
 // ! 각 응답에 대한 MSW 핸들러를 작성해주세요. GET 요청은 이미 작성되어 있는 events json을 활용해주세요.
 export const handlers = [
-  http.get('/api/events', () => {}),
+  http.get('/api/events', () => {
+    // 조회
+    // status 값을 생략하면 명시적으로 200
+    return HttpResponse.json({ events });
+  }),
 
-  http.post('/api/events', async ({ request }) => {}),
+  http.post('/api/events', async ({ request }) => {
+    // 생성
 
-  http.put('/api/events/:id', async ({ params, request }) => {}),
+    try {
+      const newEvents = (await request.json()) as Event;
+      newEvents.id = String(events.length + 1); // id 타입이 string
+      events.push(newEvents);
 
-  http.delete('/api/events/:id', ({ params }) => {}),
+      return HttpResponse.json({ newEvents }, { status: 201 });
+    } catch (err) {
+      return HttpResponse.json({ error: '이벤트 생성에 실패했습니다.' }, { status: 400 });
+    }
+  }),
+
+  http.put('/api/events/:id', async ({ params, request }) => {
+    // 업데이트
+    const { id } = params;
+    const updateEvent = (await request.json()) as Event;
+    const index = events.findIndex((event) => event.id === id); // 업데이트할 이벤트 찾기
+
+    if (index !== -1) {
+      // 수정하고자 하는 이벤트가 (findIndex로) 잘 찾아졌으면
+      events[index] = { ...events[index], ...updateEvent };
+      return HttpResponse.json({ ...events[index], ...updateEvent }, { status: 200 });
+    }
+
+    // 수정하고자 하는 이벤트가 없으면
+    return HttpResponse.json(null, { status: 404 });
+  }),
+
+  http.delete('/api/events/:id', ({ params }) => {
+    // 삭제
+
+    const { id } = params;
+    const index = events.findIndex((event) => event.id === id); // 삭제할 이벤트 찾기
+    if (index !== -1) {
+      // 삭제하고자 하는 이벤트가 잘 찾아졌으면
+      events.splice(index, 1);
+      return HttpResponse.json(null, { status: 204 });
+    }
+
+    // 삭제하고자 하는 이벤트가 없으면
+    return HttpResponse.json(null, { status: 404 });
+  }),
 ];

src/__mocks__/handlersUtils.ts

@@ -1,10 +1,149 @@
+import { http, HttpResponse } from 'msw';
 import { Event } from '../types';
+import { server } from '../setupTests';
 
 // ! Hard
-// ! 이벤트는 생성, 수정 되면 fetch를 다시 해 상태를 업데이트 합니다. 이를 위한 제어가 필요할 것 같은데요. 어떻게 작성해야 테스트가 병렬로 돌아도 안정적이게 동작할까요?
-// ! 아래 이름을 사용하지 않아도 되니, 독립적이게 테스트를 구동할 수 있는 방법을 찾아보세요. 그리고 이 로직을 PR에 설명해주세요.
-export const setupMockHandlerCreation = (initEvents = [] as Event[]) => {};
+// ! 이벤트는 생성, 수정 되면 fetch를 다시 해 상태를 업데이트 합니다.
+// 이를 위한 제어가 필요할 것 같은데요.
+// 어떻게 작성해야 테스트가 병렬로 돌아도 안정적이게 동작할까요?
 
-export const setupMockHandlerUpdating = () => {};
+// ! 아래 이름을 사용하지 않아도 되니,
+// 독립적이게 테스트를 구동할 수 있는 방법을 찾아보세요.
+// 그리고 이 로직을 PR에 설명해주세요.... (-> 제가요?)
 
-export const setupMockHandlerDeletion = () => {};
+// server.use -> handler.ts에 있는 http 함수들은 모든 테스트에 기본적으로 깔려 있는 msw
+// 그런데 테스트를 하다 보면 다른 상황에서의 API 호출(fetch)이 필요하니
+// 그때 server.use로 handler.ts에 적혀 있는 msw를 덮어 씌우는 역할을 함
+// 특정 상황에서만 사용되니 export
+
+// 같은 변수값 상태 공유를 위해 상단에서 초기화
+let events: Event[] = [];
+
+export const setupMockHandlerCreation = (initEvents = [] as Event[]) => {
+  // 이벤트 생성 -> 이벤트 배열이 우선적으로 필요하고, 거기에 id를 추가한 새 이벤트를 넣는다
+  // handlers.ts에 있는 http.get, http.post와 비슷...?
+  // initEvents가 필요한 이유: 테스트마다 다른 값들이 필요할 수 있어서..
+
+  events = [...initEvents];
+
+  server.use(
+    http.get('/api/events', () => {
+      return HttpResponse.json({ events });
+    }),
+    http.post('/api/events', async ({ request }) => {
+      try {
+        const newEvents = (await request.json()) as Event;
+        newEvents.id = String(events.length + 1);
+        events.push(newEvents);
+
+        return HttpResponse.json({ newEvents }, { status: 201 });
+      } catch (err) {
+        return HttpResponse.json({ error: '이벤트 생성에 실패했습니다.' }, { status: 400 });
+      }
+    })
+  );
+};
+
+export const setupMockHandlerUpdating = () => {
+  // update면 http.put과 비슷하게 해도 되지 않을까?
+  // 그런데 왜 인자 request가 없을까.. -> 기본적인 목업 데이터를 만들어라?
+
+  events = [
+    {
+      id: '1',
+      title: '소희랑 밥 먹기',
+      date: '2025-08-22',
+      startTime: '21:00',
+      endTime: '23:00',
+      description: '수민지혜유진송이 초대하기',
+      location: '강남역',
+      category: '개인',
+      repeat: { type: 'none', interval: 0 },
+      notificationTime: 10,
+    },
+    {
+      id: '2',
+      title: '병준이 집들이 가기',
+      date: '2025-08-27',
+      startTime: '18:00',
+      endTime: '23:00',
+      description: '4팀 7팀 다 모여',
+      location: '병준이네 집',
+      category: '개인',
+      repeat: { type: 'none', interval: 0 },
+      notificationTime: 10,
+    },
+  ];
+
+  // 먼저 기존 데이터(위에 작성한 event)를 get으로 불러오고, put으로 추가
+  server.use(
+    http.get('/api/events', () => {
+      return HttpResponse.json({ events });
+    }),
+
+    http.put('/api/events/:id', async ({ params, request }) => {
+      // 업데이트
+      const { id } = params;
+      const updateEvent = (await request.json()) as Event;
+      const index = events.findIndex((event) => event.id === id); // 업데이트할 이벤트 찾기
+
+      if (index !== -1) {
+        // 수정하고자 하는 이벤트가 (findIndex로) 잘 찾아졌으면
+        events[index] = { ...events[index], ...updateEvent };
+        return HttpResponse.json({ ...events[index], ...updateEvent }, { status: 200 });
+      }
+
+      // 수정하고자 하는 이벤트가 없으면
+      return HttpResponse.json(null, { status: 404 });
+    })
+  );
+};
+
+export const setupMockHandlerDeletion = () => {
+  events = [
+    {
+      id: '1',
+      title: '소희랑 밥 먹기',
+      date: '2025-08-22',
+      startTime: '21:00',
+      endTime: '23:00',
+      description: '수민지혜유진송이 초대하기',
+      location: '강남역',
+      category: '개인',
+      repeat: { type: 'none', interval: 0 },
+      notificationTime: 10,
+    },
+    {
+      id: '2',
+      title: '병준이 집들이 가기',
+      date: '2025-08-27',
+      startTime: '18:00',
+      endTime: '23:00',
+      description: '4팀 7팀 다 모여',
+      location: '병준이네 집',
+      category: '개인',
+      repeat: { type: 'none', interval: 0 },
+      notificationTime: 10,
+    },
+  ];
+
+  server.use(
+    http.get('/api/events', () => {
+      return HttpResponse.json({ events });
+    }),
+    http.delete('/api/events/:id', ({ params }) => {
+      // 삭제
+
+      const { id } = params;
+      const index = events.findIndex((event) => event.id === id); // 삭제할 이벤트 찾기
+      if (index !== -1) {
+        // 삭제하고자 하는 이벤트가 잘 찾아졌으면
+        events.splice(index, 1);
+        return HttpResponse.json(null, { status: 204 });
+      }
+
+      // 삭제하고자 하는 이벤트가 없으면
+      return HttpResponse.json(null, { status: 404 });
+    })
+  );
+};

src/__tests__/hooks/easy.useCalendarView.spec.ts

@@ -1,24 +1,124 @@
 import { act, renderHook } from '@testing-library/react';
 
 import { useCalendarView } from '../../hooks/useCalendarView.ts';
-import { assertDate } from '../utils.ts';
 
 describe('초기 상태', () => {
-  it('view는 "month"이어야 한다', () => {});
+  // renderHook으로 감싸면 result.current로 return으로 접근해야 함
+  const { result } = renderHook(() => useCalendarView());
 
-  it('currentDate는 오늘 날짜인 "2025-10-01"이어야 한다', () => {});
+  it('view는 "month"이어야 한다', () => {
+    expect(result.current.view).toBe('month');
+  });
 
-  it('holidays는 10월 휴일인 개천절, 한글날, 추석이 지정되어 있어야 한다', () => {});
+  it('currentDate는 오늘 날짜이어야 한다', () => {
+    expect(result.current.currentDate.getFullYear()).toBe(new Date().getFullYear());
+    expect(result.current.currentDate.getMonth()).toBe(new Date().getMonth());
+    expect(result.current.currentDate.getDate()).toBe(new Date().getDate());
+  });
+
+  it('holidays는 10월 휴일인 개천절, 한글날, 추석이 지정되어 있어야 한다', () => {
+    act(() => {
+      result.current.setCurrentDate(new Date('2025-10-01'));
+    });
+
+    const holidays = {
+      '2025-10-05': '추석',
+      '2025-10-06': '추석',
+      '2025-10-07': '추석',
+      '2025-10-03': '개천절',
+      '2025-10-09': '한글날',
+    };
+
+    expect(result.current.holidays).toEqual(holidays);
+  });
+});
+
+it("view를 'week'으로 변경 시 적절하게 반영된다", () => {
+  const { result } = renderHook(() => useCalendarView());
+  act(() => {
+    result.current.setView('week');
+  });
+
+  expect(result.current.view).toBe('week');
+});
+
+it("주간 뷰에서 다음으로 navigate시 7일 후 '2025-08-29' 날짜로 지정이 된다", () => {
+  const { result } = renderHook(() => useCalendarView());
+
+  // setCurrentDate를 오늘 날짜로 해야 할 것 같았는데 딱히 안 그래도 되는 느낌..
+  act(() => {
+    result.current.setCurrentDate(new Date('2025-08-22'));
+    result.current.setView('week');
+  });
+
+  act(() => {
+    result.current.navigate('next');
+  });
+
+  const expectedDate = new Date('2025-08-29');
+
+  expect(result.current.currentDate).toEqual(expectedDate);
 });
 
-it("view를 'week'으로 변경 시 적절하게 반영된다", () => {});
+it("주간 뷰에서 이전으로 navigate시 7일 전인 '2025-09-24' 날짜로 지정이 된다", () => {
+  const { result } = renderHook(() => useCalendarView());
+
+  act(() => {
+    result.current.setCurrentDate(new Date('2025-10-01'));
+    result.current.setView('week');
+  });
 
-it("주간 뷰에서 다음으로 navigate시 7일 후 '2025-10-08' 날짜로 지정이 된다", () => {});
+  act(() => {
+    result.current.navigate('prev');
+  });
 
-it("주간 뷰에서 이전으로 navigate시 7일 후 '2025-09-24' 날짜로 지정이 된다", () => {});
+  const expectedDate = new Date('2025-09-24');
 
-it("월간 뷰에서 다음으로 navigate시 한 달 후 '2025-11-01' 날짜여야 한다", () => {});
+  expect(result.current.currentDate).toEqual(expectedDate);
+});
 
-it("월간 뷰에서 이전으로 navigate시 한 달 전 '2025-09-01' 날짜여야 한다", () => {});
+it("월간 뷰에서 다음으로 navigate시 한 달 후 '2025-11-01' 날짜여야 한다", () => {
+  const { result } = renderHook(() => useCalendarView());
 
-it("currentDate가 '2025-03-01' 변경되면 3월 휴일 '삼일절'로 업데이트되어야 한다", async () => {});
+  act(() => {
+    result.current.setCurrentDate(new Date('2025-10-01'));
+    result.current.setView('month');
+  });
+
+  act(() => {
+    result.current.navigate('next');
+  });
+
+  const expectedDate = new Date('2025-11-01');
+
+  expect(result.current.currentDate).toEqual(expectedDate);
+});
+
+it("월간 뷰에서 이전으로 navigate시 한 달 전 '2025-09-01' 날짜여야 한다", () => {
+  const { result } = renderHook(() => useCalendarView());
+
+  act(() => {
+    result.current.setCurrentDate(new Date('2025-10-01'));
+    result.current.setView('month');
+  });
+
+  act(() => {
+    result.current.navigate('prev');
+  });
+
+  const expectedDate = new Date('2025-09-01');
+
+  expect(result.current.currentDate).toEqual(expectedDate);
+});
+
+it("currentDate가 '2025-03-01' 변경되면 3월 휴일 '삼일절'로 업데이트되어야 한다", async () => {
+  const { result } = renderHook(() => useCalendarView());
+  const holidays = {
+    '2025-03-01': '삼일절',
+  };
+
+  act(() => {
+    result.current.setCurrentDate(new Date('2025-03-01'));
+  });
+  expect(result.current.holidays).toEqual(holidays);
+});