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

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

// id is required
describe("rendering TextInput", () => {
  describe("initial state", () => {
    it("has default class text-input", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" />,
      );
      expect(getByTestId("test-id")).toHaveClass("text-input");
    });
    it("has default type text", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" />,
      );
      expect(getByTestId("test-id").getAttribute("type")).toBe("text");
    });
  });
  describe("passed props", () => {
    it("has is-invalid class when isInvalid prop is passed", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" isInvalid />,
      );
      expect(getByTestId("test-id")).toHaveClass("is-invalid");
    });
    it("has is-valid class when isValid prop is passed", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" isValid />,
      );
      expect(getByTestId("test-id")).toHaveClass("is-valid");
    });
    it("has text-input--large class when size prop is set to large", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" size="large" />,
      );
      expect(getByTestId("test-id")).toHaveClass("text-input--large");
    });
    ["3ch", "8ch", "12ch", "fullwidth"].map((width) => {
      it(`has text-input--${width} class when width prop is set to ${width}`, () => {
        const { getByTestId } = render(
          <TextInput data-testid="test-id" width={width} id="test" />,
        );
        expect(getByTestId("test-id")).toHaveClass(`text-input--${width}`);
      });
    });
    ["email", "hidden", "password", "search", "tel", "url"].map((type) => {
      it(`has type ${type} when htmltype is set to ${type}`, () => {
        const { getByTestId } = render(
          <TextInput data-testid="test-id" htmlType={type} id="test" />,
        );
        expect(getByTestId("test-id").getAttribute("type")).toBe(type);
      });
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("text-input");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("name attribute is set to id when name prop is not set", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" />,
      );
      expect(getByTestId("test-id").getAttribute("name")).toBe(
        getByTestId("test-id").getAttribute("id"),
      );
    });
    it("name attribute is set to name prop when prop is passed", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" name="test-name" />,
      );
      expect(getByTestId("test-id").getAttribute("name")).toBe("test-name");
    });
    it("disabled attribute is set to true when isDisabled prop is passed", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" isDisabled />,
      );
      expect(getByTestId("test-id").disabled).toBe(true);
    });
    it("has placeholder attribute when placeholder prop is set", () => {
      const { getByTestId } = render(
        <TextInput
          data-testid="test-id"
          id="test"
          placeholder="test-placeholder"
        />,
      );
      expect(getByTestId("test-id").getAttribute("placeholder")).toBe(
        "test-placeholder",
      );
    });
    it("has value attribute set to value prop", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" defaultValue="test-value" />,
      );
      expect(getByTestId("test-id").value).toBe("test-value");
    });
    it("has readOnly attribute set to true when readOnly prop is passed", () => {
      const { getByTestId } = render(
        <TextInput data-testid="test-id" id="test" readOnly />,
      );
      expect(getByTestId("test-id").readOnly).toBe(true);
    });
  });
});