/**
 * @vitest-environment jsdom
 */

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

import { PaginationItem as Item } from "../PaginationItem.tsx";

describe("rendering Item", () => {
  describe("initial state", () => {
    it("has default class pagination__item", () => {
      const { container } = render(<Item />);
      expect(container.querySelector("li")).toHaveClass("pagination__item");
    });

    it("has default class pagination__link", () => {
      const { container } = render(<Item />);
      expect(container.querySelector("a")).toHaveClass("pagination__link");
    });

    it("has default class btn", () => {
      const { container } = render(<Item />);
      expect(container.querySelector("a")).toHaveClass("btn");
    });

    it("has default class btn--square", () => {
      const { container } = render(<Item />);
      expect(container.querySelector("a")).toHaveClass("btn--square");
    });
  });

  describe("passed props", () => {
    it("passes other props", () => {
      const { getByTestId } = render(<Item data-testid="test" />);
      expect(getByTestId("test")).toBeInTheDocument();
    });

    it("has link role when href is set", () => {
      const { getByRole } = render(<Item href="/" />);
      expect(getByRole("link")).toBeInTheDocument();
    });

    it("list item has additional class when className is set", () => {
      const { container } = render(<Item className="test-class" />);
      expect(container.querySelector("li")).toHaveClass("test-class");
    });

    it("anchor has pagination__link--active class when isActive is set to true", () => {
      const { container } = render(<Item isActive={true} />);
      expect(container.querySelector("a")).toHaveClass(
        "pagination__link--active",
      );
    });

    it("anchor attribute has pagination__link--active class when isActive is set to true", () => {
      const { container } = render(<Item isActive={true} />);
      expect(container.querySelector("a")).toHaveClass(
        "pagination__link--active",
      );
    });

    it("anchor shows label when hasIcon is falsy and label is truthy string", () => {
      const { getByText } = render(<Item label="test-label" />);
      expect(getByText("test-label")).toBeInTheDocument();
    });

    it('anchors aria-current attribute is set to "page" when isActive is true', () => {
      const { container } = render(<Item isActive={true} />);
      expect(container.querySelector("a").getAttribute("aria-current")).toBe(
        "page",
      );
    });

    it("anchors aria-label attribute is set to ariaLabel value", () => {
      const { container } = render(<Item ariaLabel="test-label" />);
      expect(container.querySelector("a").getAttribute("aria-label")).toBe(
        "test-label",
      );
    });

    it("first item with icon has a chevron-start icon", () => {
      const { container } = render(<Item hasIcon={true} isFirst={true} />);
      expect(container.querySelector("use").getAttribute("xlink:href")).toBe(
        "/sprite.svg#chevron-start",
      );
    });

    it("last item with icon has a chevron-end icon", () => {
      const { container } = render(<Item hasIcon={true} isLast={true} />);
      expect(container.querySelector("use").getAttribute("xlink:href")).toBe(
        "/sprite.svg#chevron-end",
      );
    });
  });
});