diff --git a/src/app/components/Pagination/Pagination.test.tsx b/src/app/components/Pagination/Pagination.test.tsx index 8d8f3b32..fe8e5366 100644 --- a/src/app/components/Pagination/Pagination.test.tsx +++ b/src/app/components/Pagination/Pagination.test.tsx @@ -5,14 +5,29 @@ import '@testing-library/jest-dom'; // icon mocking jest.mock('@/public/icons', () => ({ - IconChevronLeft: ({ onClick }: { onClick?: () => void }) => ( -
- ), - IconChevronRight: ({ onClick }: { onClick?: () => void }) => ( -
+ IconChevronLeft: ({ + onClick, + className, + }: { + onClick?: () => void; + className?: string; + }) => ( +
), })); +// 이전 페이지 버튼과 다음 페이지 버튼을 가져오는 유틸 함수 +const getIconButton = () => { + const icons = screen.getAllByTestId('IconChevronLeft'); + const prevButton = icons[0]; + const nextButton = icons[1]; + return { icons, prevButton, nextButton }; +}; + describe('Pagination Component', () => { // 렌더링 시 이전 페이지 버튼과 다음 페이지 버튼이 표시되는지 확인 it('should display the previous and next page buttons when rendered', () => { @@ -20,8 +35,15 @@ describe('Pagination Component', () => { {}} />, ); - expect(screen.getByTestId('IconChevronLeft')).toBeInTheDocument(); - expect(screen.getByTestId('IconChevronRight')).toBeInTheDocument(); + const { icons, prevButton, nextButton } = getIconButton(); + + expect(icons).toHaveLength(2); + + // 이전 페이지 버튼은 rotate-180 클래스를 갖지 않음 + expect(prevButton).not.toHaveClass('rotate-180'); + + // 다음 페이지 버튼은 rotate-180 클래스를 가져야 함 + expect(nextButton).toHaveClass('rotate-180'); }); // 현재 페이지가 1일 때 이전 페이지 버튼이 비활성화되는지 확인 @@ -30,7 +52,8 @@ describe('Pagination Component', () => { {}} />, ); - const prevButton = screen.getByTestId('IconChevronLeft').parentElement; + const { prevButton: prev } = getIconButton(); + const prevButton = prev.parentElement; expect(prevButton).toBeDisabled(); }); @@ -41,7 +64,8 @@ describe('Pagination Component', () => { {}} />, ); - const nextButton = screen.getByTestId('IconChevronRight').parentElement; + const { nextButton: next } = getIconButton(); + const nextButton = next.parentElement; expect(nextButton).toBeDisabled(); }); @@ -64,7 +88,7 @@ describe('Pagination Component', () => { , ); - const prevButton = screen.getByTestId('IconChevronLeft'); + const { prevButton } = getIconButton(); fireEvent.click(prevButton); expect(onPageChange).toHaveBeenCalledWith(2); @@ -77,7 +101,7 @@ describe('Pagination Component', () => { , ); - const nextButton = screen.getByTestId('IconChevronRight'); + const { nextButton } = getIconButton(); fireEvent.click(nextButton); expect(onPageChange).toHaveBeenCalledWith(4);