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

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

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

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