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

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

describe("rendering TabPanel", () => {
  describe("initial state", () => {
    it("has generated id", () => {
      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
      const pattern = /id-\d+/;
      expect(
        pattern.test(getByTestId("test-id").getAttribute("id")),
      ).toBeTruthy();
    });
    it("has role set to tabpanel", () => {
      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
      expect(getByTestId("test-id").getAttribute("role")).toBe("tabpanel");
    });
    it("has tabIndex set to '0'", () => {
      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
      expect(getByTestId("test-id").getAttribute("tabIndex")).toBe("0");
    });
    it("has hidden attribute set to true", () => {
      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
      expect(getByTestId("test-id").hidden).toBe(true);
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByTestId } = render(
        <TabPanel data-testid="test-id">test</TabPanel>,
      );
      expect(getByTestId("test-id").textContent).toBe("test");
    });
    it("has class when className is set", () => {
      const { getByTestId } = render(
        <TabPanel data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("has id set to id prop when this prop is passsed", () => {
      const { getByTestId } = render(
        <TabPanel data-testid="test-id" id="id-test" />,
      );
      expect(getByTestId("test-id").getAttribute("id")).toBe("id-test");
    });
    it("has hidden attribute set to false when isActive prop is passed", () => {
      const { getByTestId } = render(
        <TabPanel data-testid="test-id" isActive />,
      );
      expect(getByTestId("test-id").hidden).toBe(false);
    });
  });
});