64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { describe, it, expect } from "vitest";
|
|
import { SampleCounter } from "./sample-counter";
|
|
|
|
describe("SampleCounter 컴포넌트 단위 및 통합 테스트", () => {
|
|
it("1. 기본 렌더링 상태를 정상적으로 표시하는지 확인", () => {
|
|
render(<SampleCounter />);
|
|
|
|
// 제목 텍스트 존재 확인
|
|
expect(screen.getByText("단위 테스트 샘플 카운터")).toBeInTheDocument();
|
|
|
|
// 카운터 초기값 0 확인
|
|
const counterVal = screen.getByTestId("counter-value");
|
|
expect(counterVal).toHaveTextContent("현재 값: 0");
|
|
|
|
// 경고 문구가 보이지 않아야 함
|
|
expect(screen.queryByTestId("warning-message")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("2. 증가 버튼 클릭 시 값이 1씩 올라가는지 확인 (상태 변경 및 이벤트 검증)", () => {
|
|
render(<SampleCounter />);
|
|
|
|
const increaseBtn = screen.getByRole("button", { name: "increase" });
|
|
const counterVal = screen.getByTestId("counter-value");
|
|
|
|
// 1회 클릭
|
|
fireEvent.click(increaseBtn);
|
|
expect(counterVal).toHaveTextContent("현재 값: 1");
|
|
|
|
// 2회 클릭
|
|
fireEvent.click(increaseBtn);
|
|
expect(counterVal).toHaveTextContent("현재 값: 2");
|
|
});
|
|
|
|
it("3. 감소 버튼 클릭 시 값이 1씩 내려가는지 확인", () => {
|
|
render(<SampleCounter />);
|
|
|
|
const decreaseBtn = screen.getByRole("button", { name: "decrease" });
|
|
const counterVal = screen.getByTestId("counter-value");
|
|
|
|
// 1회 클릭 (0 -> -1)
|
|
fireEvent.click(decreaseBtn);
|
|
expect(counterVal).toHaveTextContent("현재 값: -1");
|
|
});
|
|
|
|
it("4. 값이 5를 초과할 경우 경고 문구가 조건부로 렌더링되는지 확인 (통합 로직 검증)", () => {
|
|
render(<SampleCounter />);
|
|
|
|
const increaseBtn = screen.getByRole("button", { name: "increase" });
|
|
|
|
// 5번 클릭 -> 5 (경고 없음)
|
|
for (let i = 0; i < 5; i++) {
|
|
fireEvent.click(increaseBtn);
|
|
}
|
|
expect(screen.queryByTestId("warning-message")).not.toBeInTheDocument();
|
|
|
|
// 6번째 클릭 -> 6 (경고 노출되어야 함)
|
|
fireEvent.click(increaseBtn);
|
|
const warningMsg = screen.getByTestId("warning-message");
|
|
expect(warningMsg).toBeInTheDocument();
|
|
expect(warningMsg).toHaveTextContent("값이 5를 초과했습니다!");
|
|
});
|
|
});
|