import { render, screen } from "@testing-library/react";
import LoadingSpinner from "@/components/LoadingSpinner";

describe("LoadingSpinner Component", () => {
  it("should render with default props", () => {
    render(<LoadingSpinner />);
    // 检查是否有 SVG 元素存在
    const svg = document.querySelector("svg");
    expect(svg).toBeTruthy();
  });

  it("should render with custom text", () => {
    render(<LoadingSpinner text="Loading..." />);
    const text = screen.getByText("Loading...");
    expect(text).toBeTruthy();
  });

  it("should render with different sizes", () => {
    const { rerender } = render(<LoadingSpinner size="sm" />);
    let spinner = document.querySelector(".w-4.h-4");
    expect(spinner).toBeTruthy();

    rerender(<LoadingSpinner size="lg" />);
    spinner = document.querySelector(".w-12.h-12");
    expect(spinner).toBeTruthy();
  });

  it("should render with different colors", () => {
    const { rerender } = render(<LoadingSpinner color="blue" />);
    let spinner = document.querySelector(".text-blue-500");
    expect(spinner).toBeTruthy();

    rerender(<LoadingSpinner color="red" />);
    spinner = document.querySelector(".text-red-500");
    expect(spinner).toBeTruthy();
  });

  it("should apply correct size classes", () => {
    const { rerender } = render(<LoadingSpinner size="sm" />);
    let spinner = document.querySelector(".w-4.h-4");
    expect(spinner?.className).toContain("w-4");
    expect(spinner?.className).toContain("h-4");

    rerender(<LoadingSpinner size="lg" />);
    spinner = document.querySelector(".w-12.h-12");
    expect(spinner?.className).toContain("w-12");
    expect(spinner?.className).toContain("h-12");
  });

  it("should apply correct color classes", () => {
    const { rerender } = render(<LoadingSpinner color="blue" />);
    let spinner = document.querySelector(".text-blue-500");
    expect(spinner?.className).toContain("text-blue-500");

    rerender(<LoadingSpinner color="red" />);
    spinner = document.querySelector(".text-red-500");
    expect(spinner?.className).toContain("text-red-500");
  });
});