fix: 테스트 추가 구현 및 serverState 리셋 추가

Author: CreatiCoding

src/__mocks__/handlers.ts

@@ -6,48 +6,59 @@ import { Event } from '../types';
 
 // ! HARD
 // ! 각 응답에 대한 MSW 핸들러를 작성해주세요. GET 요청은 이미 작성되어 있는 events json을 활용해주세요.
-const serverState = { events };
+export const serverState = {
+  data: {
+    events,
+  },
+
+  reset: () => {
+    serverState.data = { events };
+  },
+};
 
 export const handlers = [
   http.get('/api/events', () => {
-    return HttpResponse.json({ events: serverState.events });
+    const events = [...serverState.data.events];
+
+    return HttpResponse.json({ events });
   }),
 
   http.post('/api/events', async ({ request }) => {
-    const newEvent: Event = { id: randomUUID(), ...await request.clone().json() };
-
-    serverState.events.unshift(newEvent);
+    const events = [...serverState.data.events];
+    const newEvent: Event = { id: randomUUID(), ...(await request.clone().json()) };
 
+    serverState.data.events = [...events, newEvent];
     return HttpResponse.json(newEvent, { status: 201 });
   }),
 
   http.put('/api/events/:id', async ({ params, request }) => {
+    const events = [...serverState.data.events];
     const { id } = params;
     const updatedEvent: Event = await request.clone().json();
-
-    const targetIndex = serverState.events.findIndex(x => x.id === id);
+    const targetIndex = events.findIndex((x) => x.id === id);
     if (targetIndex === -1) {
       return HttpResponse.json({ error: 'Not Found' }, { status: 404 });
     }
 
-    serverState.events[targetIndex] = {
-      ...serverState.events[targetIndex],
-      ...updatedEvent
+    events[targetIndex] = {
+      ...events[targetIndex],
+      ...updatedEvent,
     };
 
-    return HttpResponse.json(serverState.events[targetIndex]);
+    serverState.data.events = [...events];
+    return HttpResponse.json(events[targetIndex]);
   }),
 
   http.delete('/api/events/:id', ({ params }) => {
+    const events = [...serverState.data.events];
     const { id } = params;
 
-    const targetIndex = serverState.events.findIndex(x => x.id === id);
+    const targetIndex = events.findIndex((x) => x.id === id);
     if (targetIndex === -1) {
       return HttpResponse.json({ error: 'Not Found' }, { status: 404 });
     }
-    
-    serverState.events.splice(targetIndex, 1);
 
+    serverState.data.events = events.filter((x) => x.id !== id);
     return HttpResponse.json(null, { status: 204 });
   }),
 ];

src/__tests__/medium.integration.spec.tsx

@@ -1,14 +1,22 @@
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { render, screen, within, act, fireEvent, RenderResult, waitFor } from '@testing-library/react';
+import {
+  render,
+  screen,
+  within,
+  act,
+  fireEvent,
+  RenderResult,
+  waitFor,
+} from '@testing-library/react';
 import { UserEvent, userEvent } from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { SnackbarProvider } from 'notistack';
 import { ReactElement } from 'react';
 
 import App from '../App';
 import { server } from '../setupTests';
-import { Event } from '../types';
+import { Event, EventForm } from '../types';
 
 const renderApp = () => {
   const theme = createTheme();
@@ -22,35 +30,97 @@ const renderApp = () => {
   );
 };
 
-describe('일정 CRUD 및 기본 기능', () => {
-  it.only('입력한 새로운 일정 정보에 맞춰 모든 필드가 이벤트 리스트에 정확히 저장된다.', async () => {
-    renderApp();
+async function clearEvent() {
+  fireEvent.change(screen.getByLabelText('제목'), { target: { value: '' } });
+  fireEvent.change(screen.getByLabelText('날짜'), { target: { value: '' } });
+  fireEvent.change(screen.getByLabelText('설명'), { target: { value: '' } });
+  fireEvent.change(screen.getByLabelText('시작 시간'), { target: { value: '' } });
+  fireEvent.change(screen.getByLabelText('종료 시간'), { target: { value: '' } });
+}
+
+async function createEvent({ title, date, description, startTime, endTime }: Partial<EventForm>) {
+  fireEvent.change(screen.getByLabelText('제목'), { target: { value: title } });
+  fireEvent.change(screen.getByLabelText('날짜'), { target: { value: date } });
+  fireEvent.change(screen.getByLabelText('설명'), { target: { value: description } });
+  fireEvent.change(screen.getByLabelText('시작 시간'), { target: { value: startTime } });
+  fireEvent.change(screen.getByLabelText('종료 시간'), { target: { value: endTime } });
+
+  await fireEvent.click(screen.getByTestId('event-submit-button'));
 
-    fireEvent.change(screen.getByLabelText('제목'), { target: { value : '테스트 - 새 회의'}});
-    fireEvent.change(screen.getByLabelText('날짜'), { target: { value : '2025-08-01'}});
-    fireEvent.change(screen.getByLabelText('설명'), { target: { value : '테스트 - 설명'}});
-    fireEvent.change(screen.getByLabelText('시작 시간'), { target: { value : '17:00'}});
-    fireEvent.change(screen.getByLabelText('종료 시간'), { target: { value : '18:00'}});
+  clearEvent();
+}
 
-    await fireEvent.click(
-      screen.getByTestId('event-submit-button')
-    );
+async function updateEvent({ title, date, description, startTime, endTime }: Partial<EventForm>) {
+  fireEvent.click(screen.getByLabelText('Edit event'));
 
-    await waitFor(() => {
-      screen.getByTestId('event-list');
-    })
+  fireEvent.change(screen.getByLabelText('제목'), { target: { value: title } });
+  date && fireEvent.change(screen.getByLabelText('날짜'), { target: { value: date } });
+  description && fireEvent.change(screen.getByLabelText('설명'), { target: { value: description } });
+  startTime && fireEvent.change(screen.getByLabelText('시작 시간'), { target: { value: startTime } });
+  endTime && fireEvent.change(screen.getByLabelText('종료 시간'), { target: { value: endTime } });
 
-    const eventList = within(screen.getByTestId('event-list'));
+  await fireEvent.click(screen.getByTestId('event-submit-button'));
+
+  clearEvent();
+}
+
+describe.only('일정 CRUD 및 기본 기능', () => {
+  it('입력한 새로운 일정 정보에 맞춰 모든 필드가 이벤트 리스트에 정확히 저장된다.', async () => {
+    renderApp();
+
+    // 기존 회의 날짜로 이동
+    fireEvent.click(screen.getByLabelText('Next'));
+    fireEvent.click(screen.getByLabelText('Next'));
+
+    await createEvent({
+      title: '테스트 - 새 회의',
+      date: '2025-10-16',
+      description: '테스트 - 설명',
+      startTime: '17:00',
+      endTime: '18:00',
+    });
+
+    const eventList = within(await screen.findByTestId('event-list'));
     expect(eventList.getByText('테스트 - 새 회의')).toBeInTheDocument();
-    expect(eventList.getByText('2025-08-01')).toBeInTheDocument();
+    expect(eventList.getByText('2025-10-16')).toBeInTheDocument();
     expect(eventList.getByText('테스트 - 설명')).toBeInTheDocument();
 
+    // TODO: 구현에 몇가지 validation 을 넣어서 더 안정적으로 바꾸기
     // ! HINT. event를 추가 제거하고 저장하는 로직을 잘 살펴보고, 만약 그대로 구현한다면 어떤 문제가 있을 지 고민해보세요.
   });
 
-  it('기존 일정의 세부 정보를 수정하고 변경사항이 정확히 반영된다', async () => {});
+  it('기존 일정의 세부 정보를 수정하고 변경사항이 정확히 반영된다', async () => {
+    renderApp();
+
+    // 기존 회의 날짜로 이동
+    fireEvent.click(screen.getByLabelText('Next'));
+    fireEvent.click(screen.getByLabelText('Next'));
 
-  it('일정을 삭제하고 더 이상 조회되지 않는지 확인한다', async () => {});
+    const eventList = within(await screen.findByTestId('event-list'));
+    expect(eventList.getByText('기존 회의')).toBeInTheDocument();
+
+    await updateEvent({ title: '바뀐 회의' });
+
+    const eventListAfterUpdate = within(await screen.findByTestId('event-list'));
+    expect(eventListAfterUpdate.getByText('바뀐 회의')).toBeInTheDocument();
+  });
+
+  it('일정을 삭제하고 더 이상 조회되지 않는지 확인한다', async () => {
+    renderApp();
+
+    // 기존 회의 날짜로 이동
+    fireEvent.click(screen.getByLabelText('Next'));
+    fireEvent.click(screen.getByLabelText('Next'));
+
+    const eventList = within(await screen.findByTestId('event-list'));
+    expect(eventList.getByText('기존 회의')).toBeInTheDocument();
+
+    await fireEvent.click(screen.getByLabelText('Delete event'));
+
+    const eventListAfterDelete = within(await screen.findByTestId('event-list'));
+    expect(await eventListAfterDelete.queryByText('기존 회의')).toBeNull();
+    expect(await eventListAfterDelete.getByText('검색 결과가 없습니다.')).toBeInTheDocument();
+  });
 });
 
 describe('일정 뷰', () => {

src/setupTests.ts

@@ -1,7 +1,7 @@
 import { setupServer } from 'msw/node';
 import '@testing-library/jest-dom';
 
-import { handlers } from './__mocks__/handlers';
+import { handlers, serverState } from './__mocks__/handlers';
 
 /* msw */
 export const server = setupServer(...handlers);
@@ -16,6 +16,7 @@ beforeEach(() => {
 
 afterEach(() => {
   server.resetHandlers();
+  serverState.reset();
   vi.clearAllMocks();
 });