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

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

describe("rendering Tab", () => {
  describe("initial state", () => {
    it("list element has class tab-list__item", () => {
      const { container } = render(<Tab />);
      expect(container.querySelector("li")).toBeInTheDocument();
      expect(container.querySelector("li")).toHaveClass("tab-list__item");
    });
    it("list element has role presentation", () => {
      const { container } = render(<Tab />);
      expect(container.querySelector("li")).toBeInTheDocument();
      expect(container.querySelector("li").getAttribute("role")).toBe(
        "presentation",
      );
    });
    it("button element has class tab-list__tab", () => {
      const { container } = render(<Tab />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button")).toHaveClass("tab-list__tab");
    });
    it("button element has role tab", () => {
      const { container } = render(<Tab />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button").getAttribute("role")).toBe(
        "tab",
      );
    });
    it("button element has type button", () => {
      const { container } = render(<Tab />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button").getAttribute("type")).toBe(
        "button",
      );
    });
    it("button attribute tabIndex is set to -1", () => {
      const { container } = render(<Tab />);
      expect(container.querySelector("button")).toBeInTheDocument();
      expect(container.querySelector("button").getAttribute("tabIndex")).toBe(
        "-1",
      );
    });
  });
  describe("passed props", () => {
    it("passes other props", () => {
      const { getByTestId } = render(<Tab data-testid="test-id" />);
      expect(getByTestId("test-id")).toBeInTheDocument();
    });
    it("renders children", () => {
      const { getByText } = render(<Tab>test</Tab>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { container } = render(<Tab className="test-class" />);
      expect(container.querySelector("button")).toHaveClass("tab-list__tab");
      expect(container.querySelector("button")).toHaveClass("test-class");
    });
    it("button has aria-selected attribute set to 'true' when isActive is passed", () => {
      const { container } = render(<Tab isActive />);
      expect(
        container.querySelector("button").getAttribute("aria-selected"),
      ).toBe("true");
    });
    it("button has tabIndex attribute set to '0' when isActive is passed", () => {
      const { container } = render(<Tab isActive />);
      expect(container.querySelector("button").getAttribute("tabIndex")).toBe(
        "0",
      );
    });
    it("button has aria-controls attribute set to controls prop value", () => {
      const { container } = render(<Tab controls="test" />);
      expect(
        container.querySelector("button").getAttribute("aria-controls"),
      ).toBe("test");
    });
    it("button has aria-disabled attribute set to 'true' when isDisables is passed", () => {
      const { container } = render(<Tab isDisabled />);
      expect(
        container.querySelector("button").getAttribute("aria-disabled"),
      ).toBe("true");
    });
  });
});