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

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

// id is required
describe("rendering Checkbox", () => {
  describe("initial state", () => {
    it("has default class checkbox", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("checkbox");
    });
    it("has type checkbox", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" />,
      );
      expect(getByTestId("test-id").getAttribute("type")).toBe("checkbox");
    });
    it("has div with class checkbox-display", () => {
      const { container } = render(<Checkbox id="id" />);
      expect(container.querySelector("div")).toBeInTheDocument();
      expect(container.querySelector("div")).toHaveClass("checkbox-display");
    });
  });
  describe("passed props", () => {
    it("has is-invalid class when isInvalid prop is passed", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" isInvalid />,
      );
      expect(getByTestId("test-id")).toHaveClass("is-invalid");
    });
    it("has checkbox--large class when size prop is set to large", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" size="large" />,
      );
      expect(getByTestId("test-id")).toHaveClass("checkbox--large");
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" className="test-class" id="id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("checkbox");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("id attribute is set to id prop", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" />,
      );
      expect(getByTestId("test-id").getAttribute("id")).toBe("id");
    });

    it("name attribute is set to name prop", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" name="test" />,
      );
      expect(getByTestId("test-id").getAttribute("name")).toBe("test");
    });
    it("name attribute is to id when name prop is not passed", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" />,
      );
      expect(getByTestId("test-id").getAttribute("name")).toBe("id");
    });
    it("disabled attribute is set to true when isDisabled prop is passed", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" isDisabled />,
      );
      expect(getByTestId("test-id").disabled).toBe(true);
    });

    it("checked attribute set to true when isChecked prop is passed", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" name="test" isChecked />,
      );
      expect(getByTestId("test-id").checked).toBe(true);
    });
    it("checkbox element is checked after click", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" />,
      );
      expect(getByTestId("test-id").checked).toBe(false);
      getByTestId("test-id").click();
      expect(getByTestId("test-id").checked).toBe(true);
    });
    it("checkbox element stays unchecked after click when isDisabled is passed", () => {
      const { getByTestId } = render(
        <Checkbox data-testid="test-id" id="id" isDisabled />,
      );
      expect(getByTestId("test-id").checked).toBe(false);
      getByTestId("test-id").click();
      expect(getByTestId("test-id").checked).toBe(false);
    });
  });
});