Skip to content

Commit f8a78c9

Browse files
thgeethgee
committed
test: 공통컴포넌트 테스트
1 parent 2701fe5 commit f8a78c9

7 files changed

Lines changed: 254 additions & 0 deletions

File tree

‎src/components/atoms/page-title/PageTitle.test.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import "@testing-library/jest-dom";
2+
3+
import { render, screen } from "@testing-library/react";
4+
5+
import PageTitle from "./PageTitle";
6+
7+
describe("PageTitle Component", () => {
8+
test("제목이 정상적으로 렌더링되는지 확인", () => {
9+
render(<PageTitle title="테스트 제목" />);
10+
const heading = screen.getByText("테스트 제목");
11+
12+
expect(heading).toBeInTheDocument();
13+
});
14+
15+
test("기본 클래스가 올바르게 적용되는지 확인", () => {
16+
render(<PageTitle title="테스트 제목" />);
17+
const heading = screen.getByText("테스트 제목");
18+
19+
expect(heading).toHaveClass("text-base");
20+
expect(heading).toHaveClass("font-semibold");
21+
expect(heading).toHaveClass("text-slate-900");
22+
});
23+
24+
test("isMobileFixed 속성이 true일 때 fixed 클래스가 적용되는지 확인", () => {
25+
render(<PageTitle title="테스트 제목" isMobileFixed />);
26+
const heading = screen.getByText("테스트 제목");
27+
28+
expect(heading).toHaveClass("fixed");
29+
expect(heading).toHaveClass("top-0");
30+
expect(heading).toHaveClass("right-0");
31+
expect(heading).toHaveClass("left-10");
32+
expect(heading).toHaveClass("px-4");
33+
expect(heading).toHaveClass("py-3");
34+
});
35+
36+
test("사용자 정의 className이 올바르게 적용되는지 확인", () => {
37+
render(<PageTitle title="테스트 제목" className="custom-class" />);
38+
const heading = screen.getByText("테스트 제목");
39+
40+
expect(heading).toHaveClass("custom-class");
41+
});
42+
43+
test("title 속성이 정상적으로 표시되는지 확인", () => {
44+
render(<PageTitle title="Hello, World!" />);
45+
const heading = screen.getByText("Hello, World!");
46+
47+
expect(heading).toBeInTheDocument();
48+
});
49+
});

‎src/components/atoms/plus-icon/PlusIcon.test.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import "@testing-library/jest-dom";
2+
3+
import { render, screen } from "@testing-library/react";
4+
5+
import PageTitle from "../page-title/PageTitle";
6+
7+
describe("PageTitle Component", () => {
8+
test("제목이 정상적으로 렌더링되는지 확인", () => {
9+
render(<PageTitle title="테스트 제목" />);
10+
const heading = screen.getByText("테스트 제목");
11+
12+
expect(heading).toBeInTheDocument();
13+
});
14+
15+
test("기본적으로 h1 요소로 렌더링되는지 확인", () => {
16+
render(<PageTitle title="테스트 제목" />);
17+
const heading = screen.getByRole("heading", { level: 1 });
18+
19+
expect(heading).toBeInTheDocument();
20+
});
21+
22+
test("기본 클래스가 올바르게 적용되는지 확인", () => {
23+
render(<PageTitle title="테스트 제목" />);
24+
const heading = screen.getByText("테스트 제목");
25+
26+
expect(heading).toHaveClass("text-base");
27+
expect(heading).toHaveClass("font-semibold");
28+
expect(heading).toHaveClass("text-slate-900");
29+
});
30+
31+
test("isMobileFixed 속성이 true일 때 fixed 클래스가 적용되는지 확인", () => {
32+
render(<PageTitle title="테스트 제목" isMobileFixed />);
33+
const heading = screen.getByText("테스트 제목");
34+
35+
expect(heading).toHaveClass("fixed");
36+
expect(heading).toHaveClass("top-0");
37+
expect(heading).toHaveClass("right-0");
38+
expect(heading).toHaveClass("left-10");
39+
expect(heading).toHaveClass("px-4");
40+
expect(heading).toHaveClass("py-3");
41+
});
42+
43+
test("isMobileFixed 속성이 false일 때 fixed 클래스가 없는지 확인", () => {
44+
render(<PageTitle title="테스트 제목" isMobileFixed={false} />);
45+
const heading = screen.getByText("테스트 제목");
46+
47+
expect(heading).not.toHaveClass("fixed");
48+
expect(heading).not.toHaveClass("top-0");
49+
expect(heading).not.toHaveClass("right-0");
50+
expect(heading).not.toHaveClass("left-10");
51+
});
52+
53+
test("사용자 정의 className이 올바르게 적용되는지 확인", () => {
54+
render(<PageTitle title="테스트 제목" className="custom-class" />);
55+
const heading = screen.getByText("테스트 제목");
56+
57+
expect(heading).toHaveClass("custom-class");
58+
});
59+
60+
test("title 속성이 정상적으로 표시되는지 확인", () => {
61+
render(<PageTitle title="Hello, World!" />);
62+
const heading = screen.getByText("Hello, World!");
63+
64+
expect(heading).toBeInTheDocument();
65+
});
66+
67+
test("스냅샷 테스트", () => {
68+
const { container } = render(<PageTitle title="스냅샷 테스트" />);
69+
expect(container).toMatchSnapshot();
70+
});
71+
});

‎src/components/atoms/plus-icon/__snapshots__/PlusIcon.test.tsx.snap‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`PageTitle Component 스냅샷 테스트 1`] = `
4+
<div>
5+
<h1
6+
class="text-base font-semibold text-slate-900 sm:text-lg"
7+
>
8+
스냅샷 테스트
9+
</h1>
10+
</div>
11+
`;

‎src/components/atoms/progress-bar/ProgressBar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function ProgressBar({ progress }: ProgressBarProps) {
1212
initial={{ width: 0 }}
1313
animate={{ width: `${progress}%` }}
1414
transition={{ duration: 1, ease: "easeOut" }}
15+
data-testid="progress-fill"
1516
/>
1617
</div>
1718
);

‎src/components/atoms/todo-chip/TodoChip.test.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import "@testing-library/jest-dom";
2+
3+
import { render, screen } from "@testing-library/react";
4+
5+
import TodoChip from "./TodoChip";
6+
7+
describe("TodoChip Component", () => {
8+
test("기본적으로 'To do' 텍스트가 렌더링되는지 확인", () => {
9+
render(<TodoChip />);
10+
const chipElement = screen.getByText("To do");
11+
12+
expect(chipElement).toBeInTheDocument();
13+
});
14+
15+
test("isDone이 true일 때 'Done' 텍스트가 렌더링되는지 확인", () => {
16+
render(<TodoChip isDone />);
17+
const chipElement = screen.getByText("Done");
18+
19+
expect(chipElement).toBeInTheDocument();
20+
});
21+
22+
test("isDone이 false일 때 'To do' 텍스트가 렌더링되는지 확인", () => {
23+
render(<TodoChip isDone={false} />);
24+
const chipElement = screen.getByText("To do");
25+
26+
expect(chipElement).toBeInTheDocument();
27+
});
28+
29+
test("사용자 정의 className이 올바르게 적용되는지 확인", () => {
30+
render(<TodoChip className="custom-class" />);
31+
const chipElement = screen.getByText("To do");
32+
33+
expect(chipElement).toHaveClass("custom-class");
34+
});
35+
});

‎src/components/molecules/popup/Popup.test.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import "@testing-library/jest-dom";
2+
3+
import { fireEvent, render, screen } from "@testing-library/react";
4+
5+
import Popup from "./Popup";
6+
7+
describe("Popup Component", () => {
8+
const mockOnClose = jest.fn();
9+
const mockOnConfirm = jest.fn();
10+
11+
beforeEach(() => {
12+
jest.clearAllMocks();
13+
});
14+
15+
test("Popup이 정상적으로 렌더링되는지 확인", () => {
16+
render(
17+
<Popup onClose={mockOnClose} onConfirm={mockOnConfirm}>
18+
팝업 내용
19+
</Popup>,
20+
);
21+
const popupContent = screen.getByText("팝업 내용");
22+
23+
expect(popupContent).toBeInTheDocument();
24+
});
25+
26+
test("확인 버튼 클릭 시 onConfirm 핸들러가 호출되는지 확인", () => {
27+
render(
28+
<Popup onClose={mockOnClose} onConfirm={mockOnConfirm}>
29+
팝업 내용
30+
</Popup>,
31+
);
32+
const confirmButton = screen.getByText("확인");
33+
34+
fireEvent.click(confirmButton);
35+
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
36+
});
37+
38+
test("닫기 버튼(배경 클릭) 시 onClose 핸들러가 호출되는지 확인", () => {
39+
render(
40+
<Popup onClose={mockOnClose} onConfirm={mockOnConfirm}>
41+
팝업 내용
42+
</Popup>,
43+
);
44+
const overlay = screen.getByTestId("popup-overlay");
45+
fireEvent.click(overlay);
46+
expect(mockOnClose).toHaveBeenCalledTimes(1);
47+
});
48+
49+
test("isCancelEnabled가 true일 때 취소 버튼이 렌더링되는지 확인", () => {
50+
render(
51+
<Popup onClose={mockOnClose} onConfirm={mockOnConfirm} isCancelEnabled>
52+
팝업 내용
53+
</Popup>,
54+
);
55+
const cancelButton = screen.getByText("취소");
56+
57+
expect(cancelButton).toBeInTheDocument();
58+
});
59+
60+
test("isCancelEnabled가 false일 때 취소 버튼이 렌더링되지 않는지 확인", () => {
61+
render(
62+
<Popup
63+
onClose={mockOnClose}
64+
onConfirm={mockOnConfirm}
65+
isCancelEnabled={false}
66+
>
67+
팝업 내용
68+
</Popup>,
69+
);
70+
const cancelButton = screen.queryByText("취소");
71+
72+
expect(cancelButton).not.toBeInTheDocument();
73+
});
74+
75+
test("취소 버튼 클릭 시 onClose 핸들러가 호출되는지 확인", () => {
76+
render(
77+
<Popup onClose={mockOnClose} onConfirm={mockOnConfirm} isCancelEnabled>
78+
팝업 내용
79+
</Popup>,
80+
);
81+
const cancelButton = screen.getByText("취소");
82+
83+
fireEvent.click(cancelButton);
84+
expect(mockOnClose).toHaveBeenCalledTimes(1);
85+
});
86+
});

‎src/components/molecules/popup/Popup.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default function Popup({
2020
<div
2121
onClick={onClose}
2222
className="fixed inset-0 z-50 w-full bg-black/50"
23+
data-testid="popup-overlay"
2324
></div>
2425
<div
2526
className={cn(

0 commit comments

Comments
 (0)