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

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

describe("rendering ModalCloseButton", () => {
  describe("initial state", () => {
    it("renders button with class btn", () => {
      const { getByTestId } = render(
        <ModalCloseButton data-testid="test-id" />,
      );
      expect(getByTestId("test-id").tagName).toBe("BUTTON");
      expect(getByTestId("test-id")).toHaveClass("btn");
    });
    it("renders icon with class icon--small", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).toHaveClass("icon--small");
    });
    it("renders span with class visually-hidden", () => {
      const { container } = render(<ModalCloseButton>test</ModalCloseButton>);
      expect(container.querySelector("span")).toBeInTheDocument();
      expect(container.querySelector("span")).toHaveClass("visually-hidden");
    });
    it("icon has class modal__close", () => {
      const { getByTestId } = render(
        <ModalCloseButton data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("modal__close");
    });
    it("use element inside svg has /sprite.svg#delete xlinkhref", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("svg").children.length).toBe(1);
      expect(container.querySelector("svg").children[0].tagName).toBe("use");
      expect(
        container.querySelector("svg").children[0].getAttribute("xlink:href"),
      ).toBe("/sprite.svg#delete");
    });
    it("icon has class icon--small", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).toHaveClass("icon--small");
    });
    it("button has class btn--small", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button")).toHaveClass("btn--small");
    });
    it("button has class btn--square", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button")).toHaveClass("btn--square");
    });
    it("button has class btn--ghost", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button")).toHaveClass("btn--ghost");
    });
    it("button has attribute data-a11y-dialog-hide set to true", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(
        container.querySelector("button").getAttribute("data-a11y-dialog-hide"),
      ).toBe("true");
    });
    it("button has attribute aria-label set to Zatvoriť", () => {
      const { container } = render(<ModalCloseButton />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button").getAttribute("aria-label")).toBe(
        "Zatvoriť",
      );
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<ModalCloseButton>test</ModalCloseButton>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("children are rendered inside span element", () => {
      const { container } = render(<ModalCloseButton>test</ModalCloseButton>);
      expect(container.querySelector("span")).toBeInTheDocument();
      expect(container.querySelector("span").textContent).toBe("test");
    });
  });
});