[항해 플러스 프론트엔드 3기] 7주차 회고

osohyun0224·2024년 11월 10일

WIL 항해 플러스

항해 프론트엔드 플러스 3기

목록 보기

8/12

안녕하세요 프론트엔드 개발자 Garden, 오소현입니다:)
저는 요즘 항해 플러스 프론트엔드 3기 코스 과정에 참여하면서 공부하고 있는데요!
오늘은 그 7주차의 회고를 진행해보려고 합니다 !

[1] 과제 회고

이번주차는 오프코치님의 테스트 코드 발제가 시작되었습니다!

주요한 토픽 1가지

1️⃣ Topic 1. [심화] 컴포넌트 테스트

이번 주차 심화 과제 제시사항에는 App.tsx를 리팩토링하여 컴포넌트, 커스텀훅, 함수에 대한 테스트코드를 작성해보라는 제시사항이 있었습니다. 가장 헷갈린 부분이 컴포넌트 테스트 였는데, 처음에는 UI 테스트를 생각했다가 오프 코치님의 멘토링을 받고 감을 잡게 되었습니다 !

제 컴포넌트들 중에 예를들어 MonthView , 즉 달력 부분을 보여주는 컴포넌트에 대한 테스트 코드를 2가지 방법으로 작성을 해보았습니다.

1) 컴포넌트 자체만을 가지고 간단한 테스트 코드 추가

describe('MonthView', () => {
  ..초기 설정

  it('이벤트가 올바른 날짜에 표시되어야 한다', () => {
    renderWithChakra(<MonthView {...mockProps} />);
    
    const cells = screen.getAllByRole('cell');
    const eventCell = cells.find(cell => cell.textContent?.includes('15'));
    expect(eventCell).toHaveTextContent('팀 미팅');
  });

이렇게 구현하는 방식에 의문이 들어서 코치님께서 말씀해주신 리팩토링 과정을 하면서 기본 과제의 integration 테스트 코드를 더 구체화해보라! 라는 조언을 계속 고민하다가 다음과 같이 기본 과제의 통합 테스트 시나리오에 이어서, 컴포넌트 테스트를 추가해보았습니다.

2) 통합테스트와 함께 구현된 컴포넌트 테스트

describe('WeekView 컴포넌트 통합 테스트', () => {
  it('입력한 새로운 일정 정보에 맞춰 모든 필드가 이벤트 리스트에 정확히 저장되고, 주간 뷰에도 정확히 표시되어야 한다.', async () => {
    setupMockHandlerCreation();
    renderApp();

    await waitFor(() => {
      expect(screen.getByText(/검색 결과가 없습니다/i)).toBeInTheDocument();
    });

    const newEvent = {
      title: '해리와 과제하기',
      date: '2024-11-11',
      startTime: '18:00',
      endTime: '22:00',
      description: '항해 플러스 8주차 과제하기',
      location: '스파크플러스',
      category: '개인',
      repeat: { type: 'none', interval: 0 },
      notificationTime: 0,
    };

    await user.type(screen.getByLabelText(/제목/), newEvent.title);
..생략

    await user.click(screen.getByRole('button', { name: /일정 추가/ }));

    await waitFor(async () => {
      const eventList = await screen.getByTestId('event-list');
      expect(within(eventList).getByText('해리와 과제하기')).toBeInTheDocument();
      expect(within(eventList).getByText('2024-11-11')).toBeInTheDocument();
      expect(within(eventList).getByText('항해 플러스 8주차 과제하기')).toBeInTheDocument();
,,,생략
    });
    
<!----여기까지 medium 통합 테스트 시나리오--- 이어서 컴포넌트 테스트 추가----!>

// 컴포넌트 테스트 추가
    const mockProps = {
      currentDate: new Date('2024-11-10'),
      events: [newEvent],
    };

    renderWithComponent(<WeekView notifiedEvents={[]} filteredEvents={[]} {...mockProps} />);

    const eventTitles = screen.getAllByText('해리와 과제하기');
    expect(eventTitles.length).toBeGreaterThan(0);
  });

위와 같이 입력한 새로운 일정 정보에 맞춰 모든 필드가 이벤트 리스트에 정확히 저장되고나서 월간 뷰(MonthView)에도 해당 이벤트가 보이는 지 이런식으로 다양하게 통합테스트에 이어서 컴포넌트 테스트 코드를 작성해보게 되었습니다!

코치님 께서 말씀해주신 방향성에 맞게 제가 잘 작성한 것이었는지 궁금했습니다!

3) Cypress를 활용한 컴포넌트 테스트 코드

제가 컴포넌트 테스트코드를 작성한 MonthView와 WeekView를 제외한 UI 컴포넌트 등등에 대해서는 컴포넌트 테스팅을 어떻게 할까 고민하다가 cypress의 컴포넌트 테스트 옵션을 선택해서 컴포넌트 테스트 코드를 작성해보았습니다.

import CalendarNavigation from '../../src/components/schedule/CalendarNavigation';

describe('CalendarNavigation.cy.tsx', () => {
  it('이전 및 다음 버튼 클릭을 처리해야 한다.', () => {
    const onViewChange = cy.stub();
    const onNavigate = cy.stub();

    mount(
      <ChakraProvider>
        <CalendarNavigation view="week" onViewChange={onViewChange} onNavigate={onNavigate} />
      </ChakraProvider>
    );

    cy.get('button[aria-label="Previous"]').click();
    cy.wrap(onNavigate).should('have.been.calledOnceWith', 'prev');

    cy.get('button[aria-label="Next"]').click();
    cy.wrap(onNavigate).should('have.been.calledWith', 'next');
  });