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

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

//control is required
describe("rendering Group", () => {
  describe("initial state", () => {
    it("has default class control-group", () => {
      const { getByTestId } = render(
        <Group data-testid="test-id" control={{ type: "text", id: "id" }} />,
      );
      expect(getByTestId("test-id")).toHaveClass("control-group");
    });
  });
  describe("passed props", () => {
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          className="test-class"
        />,
      );
      expect(getByTestId("test-id")).toHaveClass("control-group");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders Item component (class control-group__item) with text when addonPrefix of type string is set", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          addonPrefix="test"
        />,
      );
      expect(
        container.getElementsByClassName("control-group__item").length,
      ).toBe(1);
      expect(
        container.getElementsByClassName("control-group__item")[0].textContent,
      ).toBe("test");
    });
    it("renders Item component (class control-group__item) with text when addonSuffix of type string is set", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          addonSuffix="test"
        />,
      );
      expect(
        container.getElementsByClassName("control-group__item").length,
      ).toBe(1);
      expect(
        container.getElementsByClassName("control-group__item")[0].textContent,
      ).toBe("test");
    });
    it("renders Item component (class control-group__item) with child element when addonPrefix is set to html element", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          addonPrefix={<p>test</p>}
        />,
      );
      expect(
        container.getElementsByClassName("control-group__item").length,
      ).toBe(1);
      expect(
        container.getElementsByClassName("control-group__item")[0].children[0]
          .tagName,
      ).toBe("P");
      expect(
        container.getElementsByClassName("control-group__item")[0].children[0]
          .textContent,
      ).toBe("test");
    });
    it("renders Item component (class control-group__item) with child element when addonSuffix is set to html element", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          addonSuffix={<p>test</p>}
        />,
      );
      expect(
        container.getElementsByClassName("control-group__item").length,
      ).toBe(1);
      expect(
        container.getElementsByClassName("control-group__item")[0].children[0]
          .tagName,
      ).toBe("P");
      expect(
        container.getElementsByClassName("control-group__item")[0].children[0]
          .textContent,
      ).toBe("test");
    });
    it("renders TextInput component (text-input class) with id when control type is set to text ", () => {
      const { container } = render(
        <Group data-testid="test-id" control={{ type: "text", id: "id" }} />,
      );
      expect(container.getElementsByClassName("text-input").length).toBe(1);
      expect(
        container.getElementsByClassName("text-input")[0].getAttribute("id"),
      ).toBe("id");
    });
    it("renders Select component (select class) with id when control type is set to text ", () => {
      const { container } = render(
        <Group data-testid="test-id" control={{ type: "select" }} />,
      );
      expect(container.getElementsByClassName("select").length).toBe(1);
    });
    it("renders Autocomplete component (autocomplete class) when control type is set to autocomplete", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "autocomplete", options: ["", "apple"] }}
        />,
      );
      expect(container.getElementsByClassName("autocomplete").length).toBe(1);
    });
    it("addonPrefix Item has class control-group__item--large when size is set to large", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          addonPrefix="test"
          size="large"
        />,
      );
      expect(
        container.getElementsByClassName("control-group__item").length,
      ).toBe(1);
      expect(
        container.getElementsByClassName("control-group__item")[0],
      ).toHaveClass("control-group__item--large");
    });
    it("addonSuffix Item has class control-group__item--large when size is set to large", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          addonSuffix="test"
          size="large"
        />,
      );
      expect(
        container.getElementsByClassName("control-group__item").length,
      ).toBe(1);
      expect(
        container.getElementsByClassName("control-group__item")[0],
      ).toHaveClass("control-group__item--large");
    });
    it("TextInput has class text-input--large when size is set to large", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "text", id: "id" }}
          size="large"
        />,
      );
      expect(container.getElementsByClassName("text-input").length).toBe(1);
      expect(container.getElementsByClassName("text-input")[0]).toHaveClass(
        "text-input--large",
      );
    });
    it("Select has class select--large when size is set to large", () => {
      const { container } = render(
        <Group
          data-testid="test-id"
          control={{ type: "select" }}
          size="large"
        />,
      );
      expect(container.getElementsByClassName("select").length).toBe(1);
      expect(container.getElementsByClassName("select")[0]).toHaveClass(
        "select--large",
      );
    });
  });
});