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

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

//iconName prop is required
describe("rendering IconButton", () => {
  describe("initial state", () => {
    it("renders button with class btn", () => {
      const { getByTestId } = render(
        <IconButton data-testid="test-id" iconName="test-name" />,
      );
      expect(getByTestId("test-id").tagName).toBe("BUTTON");
      expect(getByTestId("test-id")).toHaveClass("btn");
    });
    it("renders icon with class btn__icon-left", () => {
      const { container } = render(<IconButton iconName="test-name" />);
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).toHaveClass("btn__icon-left");
    });
    it("renders icon with class icon--medium", () => {
      const { container } = render(<IconButton iconName="test-name" />);
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).toHaveClass("icon--medium");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(
        <IconButton iconName="test-name">test</IconButton>,
      );
      expect(getByText("test")).toBeInTheDocument();
    });
    it("icon has class btn__icon-right when iconPosition is set to right", () => {
      const { container } = render(
        <IconButton iconName="test-name" iconPosition="right" />,
      );
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).toHaveClass("btn__icon-right");
    });
    it("use element inside svg has /sprite.svg#test-name xlinkhref when name is set to test-name", () => {
      const { container } = render(<IconButton iconName="test-name" />);
      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#test-name");
    });
    ["small", "large"].map((size) => {
      const expectedIconSize = size === "large" ? "medium" : size;

      it(`icon has class icon--${expectedIconSize} when button size is set to ${size}`, () => {
        const { container } = render(
          <IconButton iconName="test-name" size={size} />,
        );
        expect(container.querySelector("svg")).toBeInTheDocument();
        expect(container.querySelector("svg")).toHaveClass(
          `icon--${expectedIconSize}`,
        );
      });
      it(`button has class btn--${size} when size is set to ${size}`, () => {
        const { container } = render(
          <IconButton iconName="test-name" size={size} />,
        );
        expect(container.querySelector("button")).toBeInTheDocument();
        expect(container.querySelector("button")).toHaveClass(`btn--${size}`);
      });
    });
    it("icon has additional class when iconClassName is set", () => {
      const { container } = render(
        <IconButton iconName="test-name" iconClassName="test-class" />,
      );
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).toHaveClass("btn__icon-left");
      expect(container.querySelector("svg")).toHaveClass("test-class");
    });
    it(`button has class btn--square when isSquare is set`, () => {
      const { container } = render(
        <IconButton iconName="test-name" isSquare />,
      );
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button")).toHaveClass(`btn--square`);
    });
    it("icon doesnt have class btn__icon-left or btn__icon-right when isSquare prop is passed", () => {
      const { container } = render(
        <IconButton iconName="test-name" isSquare />,
      );
      expect(container.querySelector("svg")).toBeInTheDocument();
      expect(container.querySelector("svg")).not.toHaveClass("btn__icon-left");
      expect(container.querySelector("svg")).not.toHaveClass("btn__icon-right");
    });
    it("renders children inside span when isSquare prop is passed", () => {
      const { container } = render(
        <IconButton iconName="test-name" isSquare>
          test
        </IconButton>,
      );
      expect(container.querySelector("span")).toBeInTheDocument();
      expect(container.querySelector("span").textContent).toBe("test");
    });
    it("renders span with class visually-hidden when isSquare prop is passed", () => {
      const { container } = render(
        <IconButton iconName="test-name" isSquare>
          test
        </IconButton>,
      );
      expect(container.querySelector("span")).toBeInTheDocument();
      expect(container.querySelector("span")).toHaveClass("visually-hidden");
    });
  });
});