/**
 * @vitest-environment jsdom
 */

import { render } from "@testing-library/react";

import { StarRating } from "../StarRating";

describe("rendering StarRating", () => {
  it("has default class star-rating", () => {
    const { getByTestId } = render(
      <StarRating rating={4} data-testid="test-id" />,
    );

    expect(getByTestId("test-id")).toHaveClass("star-rating");
  });

  it("renders five icons by default", () => {
    const { container } = render(<StarRating rating={4} />);

    expect(container.querySelectorAll("svg.icon")).toHaveLength(5);
    expect(container.querySelector("svg")).not.toHaveClass("icon--large");
  });

  it("supports custom icon size", () => {
    const { container } = render(<StarRating rating={4} size="small" />);

    expect(container.querySelectorAll("svg.icon--small")).toHaveLength(5);
  });

  it("renders filled and empty stars from rating", () => {
    const { container } = render(<StarRating rating={3} />);
    const uses = container.querySelectorAll("use");

    expect(uses[0].getAttribute("xlink:href")).toBe(
      "/sprite.svg#star-favourite",
    );
    expect(uses[1].getAttribute("xlink:href")).toBe(
      "/sprite.svg#star-favourite",
    );
    expect(uses[2].getAttribute("xlink:href")).toBe(
      "/sprite.svg#star-favourite",
    );
    expect(uses[3].getAttribute("xlink:href")).toBe(
      "/sprite.svg#star-empty-thin",
    );
    expect(uses[4].getAttribute("xlink:href")).toBe(
      "/sprite.svg#star-empty-thin",
    );
  });

  it("rounds and clamps rating", () => {
    const { container } = render(<StarRating rating={5.7} />);
    const uses = container.querySelectorAll("use");

    uses.forEach((use) => {
      expect(use.getAttribute("xlink:href")).toBe("/sprite.svg#star-favourite");
    });
  });

  it("passes aria-label through", () => {
    const { getByTestId } = render(
      <StarRating rating={2} aria-label="2 out of 5" data-testid="test-id" />,
    );

    expect(getByTestId("test-id")).toHaveAttribute("aria-label", "2 out of 5");
  });
});