60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
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");
|
|
});
|
|
});
|