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를 초과했습니다!");
  });
});