import { describe, expect, it } from "vitest";
import { render } from "@testing-library/svelte";
import ResultsSpinner from "./ResultsSpinner.svelte";

describe("ResultsSpinner", () => {
  it("renders with default props", () => {
    const { container } = render(ResultsSpinner);

    const wrapper = container.querySelector(".rs");
    expect(wrapper).toBeInTheDocument();
    expect(wrapper).toHaveStyle("width: 36px");
    expect(wrapper).toHaveStyle("height: 36px");
  });

  it("renders with custom size", () => {
    const { container } = render(ResultsSpinner, {
      props: { size: 48 },
    });

    const wrapper = container.querySelector(".rs");
    expect(wrapper).toHaveStyle("width: 48px");
    expect(wrapper).toHaveStyle("height: 48px");
  });

  it("renders with custom color", () => {
    const { container } = render(ResultsSpinner, {
      props: { color: "#ff0000" },
    });

    const arc = container.querySelector(".arc");
    expect(arc).toHaveAttribute("stroke", "#ff0000");
  });

  it("has aria-hidden attribute", () => {
    const { container } = render(ResultsSpinner);

    const wrapper = container.querySelector(".rs");
    expect(wrapper).toHaveAttribute("aria-hidden", "true");
  });

  it("contains SVG with circles and path", () => {
    const { container } = render(ResultsSpinner);

    expect(container.querySelector("svg")).toBeInTheDocument();
    expect(container.querySelector("circle.bg")).toBeInTheDocument();
    expect(container.querySelector("path.arc")).toBeInTheDocument();
  });
});
