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

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

import Base from "./BaseWrapper";

describe("rendering InfoTooltip", () => {
  describe("initial state", () => {
    let infoTooltip;

    beforeEach(() => {
      infoTooltip = render(
        <Base>
          <InfoTooltip />
        </Base>,
      );
    });

    it("renders button with class info-tooltip", () => {
      const { container } = infoTooltip;

      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button")).toHaveClass("info-tooltip");
    });
    it("renders button with type button", () => {
      const { container } = infoTooltip;

      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button").type).toBe("button");
    });
    it("renders button with generated aria-describeby", () => {
      const { container } = infoTooltip;
      const pattern = /id-\d+/;
      expect(container.querySelector("button")).toBeInTheDocument();

      expect(
        pattern.test(
          container.querySelector("button").getAttribute("aria-describedby"),
        ),
      ).toBeTruthy();
    });
    it("renders button with generated aria-owns", () => {
      const { container } = infoTooltip;
      const pattern = /id-\d+/;
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(
        pattern.test(
          container.querySelector("button").getAttribute("aria-owns"),
        ),
      ).toBeTruthy();
    });
    it("renders button with data-tooltip-trigger set to true", () => {
      const { container } = infoTooltip;

      expect(container.querySelector("button")).toBeInTheDocument();
      expect(
        container.querySelector("button").getAttribute("data-tooltip-trigger"),
      ).toBe("true");
    });
    it("renders text Info inside span with class sr-only", () => {
      const { getByText } = infoTooltip;
      expect(getByText("Info")).toBeInTheDocument();
      expect(getByText("Info").tagName).toBe("SPAN");
      expect(getByText("Info")).toHaveClass("sr-only");
    });
    it("svg element has classes info-tooltip__icon", () => {
      const { container } = infoTooltip;
      expect(container.querySelector("svg")).toHaveClass("info-tooltip__icon");
    });
    it("use element inside svg has /sprite.svg#assistance xlinkhref", () => {
      const { container } = infoTooltip;
      expect(
        container
          .querySelector("svg")
          .querySelector("use")
          .getAttribute("xlink:href"),
      ).toBe("/sprite.svg#assistance");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(
        <Base>
          <InfoTooltip>test</InfoTooltip>
        </Base>,
      );
      expect(getByText("test")).toBeInTheDocument();
    });
    it("passes other props", () => {
      const { getByTestId } = render(
        <Base>
          <InfoTooltip data-testid="test-id" />
        </Base>,
      );
      expect(getByTestId("test-id")).toBeInTheDocument();
    });
  });
});