Feat: 민혁) 공통 컴포넌트 테스트 코드 작성

[BeMatthewsong]

📝 설명

• [x] BoxSelect, BoxSelectGroup
• [ ] Modal (ProfilEdit, Review, MakeGathering) -> E2E 테스트로 빼는 게 좋을 것 같습니다!
• [x] Popup
• [x] Progress Bar

뷰 렌더링 테스트

[BeMatthewsong]

https://tecoble.techcourse.co.kr/post/2021-10-22-react-testing-library/

[BeMatthewsong]

AAA패턴이란 준비(arrange), 실행(act), 검증(assert) 세 단계로 Test를 작성하는 패턴을 의미한다.

• 준비(arrange) : 테스트에 필요한 변수나 객체를 생성한다. 필요에 따라 mock 객체를 만든다.
• 실행(act) : 테스트 할 코드를 실행해 본다.
• 검증(assert) : 실행한 코드가 설계한대로 정확하게 동작했는지를 검증해본다. Unit Test의 Api인 assertEqals() 등의 코드를 사용하여 검증한다.

[BeMatthewsong]

지금 이거 반영하도록 할게요

[BeMatthewsong]

유닛테스트로는 안 되는 코드

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import MakeGatheringModal from './MakeGatheringModal';

describe('MakeGatheringModal Component Test', () => {
  beforeEach(() => {
    render(<MakeGatheringModal onClose={() => {}} />);
  });

  // 기본 렌더링 확인
  it('should render MakeGatheringModal Component', () => {
    const modalElement = screen.getByTestId('make-gathering-modal');
    const headerElement = screen.getByTestId('modal-header');
    const placeDropdownElement = screen.getByTestId('place-dropdown');
    const imageUploaderElement = screen.getByTestId('image-uploader');
    const boxSelectGroupElement = screen.getByTestId('box-select-group');
    const calendarSelectElement = screen.getByTestId('calendar-select');
    const selectTimeChipElement = screen.getByTestId('select-time-chip');
    const recruitmentNumberElement = screen.getByTestId('recruitment-number');
    const buttonElement = screen.getByTestId('make-gathering-button');

    expect(modalElement).toBeInTheDocument();
    expect(headerElement).toBeInTheDocument();
    expect(imageUploaderElement).toBeInTheDocument();
    expect(placeDropdownElement).toBeInTheDocument();
    expect(boxSelectGroupElement).toBeInTheDocument();
    expect(calendarSelectElement).toBeInTheDocument();
    expect(selectTimeChipElement).toBeInTheDocument();
    expect(recruitmentNumberElement).toBeInTheDocument();
    expect(buttonElement).toBeInTheDocument();
  });

  // 버튼 클릭 시 모달이 닫히는지 확인
  it('should close modal when button clicked', () => {
    const buttonElement = screen.getByRole('button', { name: '모임 만들기' });

    fireEvent.click(buttonElement);
    expect(
      screen.queryByTestId('make-gathering-modal'),
    ).not.toBeInTheDocument();
  });

  // 폼에 필요한 데이터 없을 시 버튼 비활성화 확인
  it('should disable button when form is invalid', () => {
    // PlaceDropdown에 선택된 값이 없을 때
    const placeDropdownElement = screen.getByTestId('place-dropdown-value');
    expect(placeDropdownElement).toHaveTextContent('장소를 선택해주세요');

    // 이미지 업로더에 이미지가 없을 때
    const imageUploaderElement = screen.getByTestId('image-uploader-file-name');
    expect(imageUploaderElement).toHaveTextContent(
      '이미지를 첨부해 주세요 (1MB 이하)',
    );

    // BoxSelectGroup에 선택된 값이 없을 때

    // 비활성화 확인
    const buttonElement = screen.getByTestId('make-gathering-button');
    fireEvent.click(buttonElement);
    expect(buttonElement).toBeDisabled();
  });
});