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

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

//legend is required
describe("rendering Fieldset", () => {
  describe("initial state", () => {
    it("has default class fieldset", () => {
      const { getByTestId } = render(
        <Fieldset data-testid="test-id" legend="test" />,
      );
      expect(getByTestId("test-id")).toHaveClass("fieldset");
    });
  });
  describe("passed props", () => {
    const messages = [
      { type: "info", text: "message-1", isMain: true },
      { type: "info", text: "message-2" },
    ];
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Fieldset data-testid="test-id" legend="test" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("fieldset");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders legend", () => {
      const { container } = render(<Fieldset legend="test" />);
      expect(container.querySelector("legend")).toBeInTheDocument();
      expect(container.querySelector("legend").textContent).toBe("test");
    });
    it("renders children", () => {
      const { getByText } = render(
        <Fieldset legend="test">test-child</Fieldset>,
      );
      expect(getByText("test-child")).toBeInTheDocument();
    });
    it("renders description", () => {
      const { getByText } = render(
        <Fieldset legend="test" description="test-description" />,
      );
      expect(getByText("test-description")).toBeInTheDocument();
    });
    it("passes props to legend", () => {
      const { container } = render(
        <Fieldset legend="test" legendProps={{ id: "test" }} />,
      );
      expect(container.querySelector("legend")).toBeInTheDocument();
      expect(container.querySelector("legend").id).toBe("test");
    });
    it("renders messages", () => {
      const { container } = render(
        <Fieldset legend="test" messages={messages} />,
      );
      expect(container.getElementsByClassName("message").length).toBe(2);
      for (let i in messages) {
        expect(container.getElementsByClassName("message")[i].textContent).toBe(
          `message-${parseInt(i) + 1}`,
        );
      }
    });
  });
});