코드 리뷰 사이트 개인 회고 9일차

<회고록>

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다.

 

1. 페이지네이션 테스트 코드

 : 페이지네이션 테스트 코드를 작성하면서 어떻게 테스트를 해야 할지에 대한 궁금중이 많았다. 여기서 궁금중을 설명하기 위해서 한가지 예시를 들겠다. 만약 페이지가 1~100개까지 있다고 하자. 이때 1~100개를 다 클릭했을 때 확인하는 테스트 코드를 작성하는 것이 맞을 것인지 아님 다른 방법이 있는지에 대한 궁금중이 있었다. 나는 이 부분을 다음과 같이 해결했다. 만약 1~100까지가 있다면 3가지만 체크하면 모든 것을 체크할 수 있을 것이라고 생각한다. 

• 첫번째 : 첫번째 페이지를 눌렀을 때 이전 페이지는 disabled , 다음 페이지는 abled처리가 이루어지는지
• 두번째 : 첫번째와 마지막 페이지를 제외한 나머지 페이지를 눌렀을 때 이전 페이지 , 다음 페이지가 모두 abled처리가 이루어지는지
• 세번째 : 마지막 페이지를 눌렀을 때 이전 페이지는 abled , 다음 페이지는 disabled처리가 이루어지는지

여기서 만약 두번째 경우에서 하나의 버튼이 가능하다는 말은 모든 버튼들이 가능하다고 판단했다.

이를 통한 결과는 다음과 같다.

describe("Pagnation", () => {
  test("Pagnation 컴포넌트가 정상적으로 렌더링 되는지 확인", () => {
    render(<Pagnation totalPages={6} itemPerPages={3} />);

    const prevButton = screen.getByTestId("prev-button");
    const nextButton = screen.getByTestId("next-button");

    const pageNumbers = screen.getAllByTestId("page-number");

    pageNumbers.forEach((page, i) => {
      expect(page).toHaveTextContent(`${i + 1}`);
    });

    expect(prevButton).toBeInTheDocument();
    expect(nextButton).toBeInTheDocument();
  });

  test("Pagnation 첫번째 페이지에서 이전 페이지가 갈 수 없는 지 확인", () => {
    render(<Pagnation totalPages={6} itemPerPages={3} />);

    const prevButton = screen.getByTestId("prev-button");
    const nextButton = screen.getByTestId("next-button");

    fireEvent.click(prevButton);

    expect(prevButton).toHaveClass("disabled");
    expect(nextButton).not.toHaveClass("disabled");
  });

  test("Pagnation 마지막 페이지에서 다음 페이지로 갈 수 없는 지 확인", () => {
    render(<Pagnation totalPages={6} itemPerPages={3} />);

    const prevButton = screen.getByTestId("prev-button");
    const nextButton = screen.getByTestId("next-button");

    fireEvent.click(nextButton);

    expect(prevButton).not.toHaveClass("disabled");
    expect(nextButton).toHaveClass("disabled");
  });

  test("Pagnation 중간 페이지를 눌렀을 때 해당 페이지로 이동하는지 확인", () => {
    render(<Pagnation totalPages={6} itemPerPages={2} />);

    const prevButton = screen.getByTestId("prev-button");
    const nextButton = screen.getByTestId("next-button");

    fireEvent.click(nextButton);

    expect(prevButton).not.toHaveClass("disabled");
    expect(nextButton).not.toHaveClass("disabled");
  });
});

이 코드가 정확하게 좋은 코드인지라고 하면 그건 어렵다. 하지만 모든 케이스를 테스트 하는 것이 아니라 일반화된 테스트 케이스를 통해서 판단하는 것이 좋다고 생각합니다.