import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent } from "@testing-library/react";
import { Textarea } from "../../";

test("Textarea basic props", () => {
  const onChange = jest.fn();
  const onBlur = jest.fn();

  const { getByTestId, queryByTestId } = render(
    <Textarea
      className="my-class-name"
      name="name1"
      value="100"
      label="My label"
      onChange={onChange}
      onBlur={onBlur}
      data-testid="input1"
    />
  );

  const textarea = getByTestId("input1");
  expect(textarea).toBeTruthy();
  expect(textarea).toHaveTextContent("100");

  expect(onChange).toBeCalledTimes(0);
  fireEvent.change(textarea, { target: { value: "test" } });
  expect(onChange).toBeCalledTimes(1);
  expect(onChange).toHaveBeenLastCalledWith("test");

  expect(onBlur).toBeCalledTimes(0);
  fireEvent.blur(textarea);
  expect(onBlur).toBeCalledTimes(1);

  expect(getByTestId("input1")).not.toHaveClass("is-invalid");

  expect(queryByTestId("input1-error")).toBeNull();
  expect(queryByTestId("input1-help")).toBeNull();

  expect(getByTestId("input1").getAttribute("readonly")).toBeNull();
  expect(getByTestId("input1").getAttribute("disabled")).toBeNull();

  expect(getByTestId("input1")).toHaveClass("my-class-name");
});

test("should show default testid", () => {
  const { queryByTestId } = render(
    <Textarea name="name1" label="My label" value="100" onChange={() => {}} />
  );
  expect(queryByTestId("honeyui-input")).not.toBeNull();
});

test("should show label", () => {
  const { getByTestId, queryByTestId } = render(
    <Textarea name="name1" value="100" label="My label" onChange={() => {}} data-testid="input1" />
  );

  expect(getByTestId("input1").getAttribute("id")).toBe("name1");
  expect(getByTestId("input1-label")).toHaveTextContent("My label");
  expect(getByTestId("input1-label").getAttribute("for")).toBe("name1");
});

test("should show error", () => {
  const { getByTestId } = render(
    <Textarea
      className="my-class-name"
      name="1"
      value="100"
      label="My label"
      onChange={() => {}}
      data-testid="input1"
      error="error msg"
    />
  );

  expect(getByTestId("input1")).toHaveClass("is-invalid");
  expect(getByTestId("input1-error")).toHaveTextContent("error msg");
  expect(getByTestId("input1-error")).toHaveClass("invalid-feedback");
});

test("should show help", () => {
  const { getByTestId } = render(
    <Textarea
      className="my-class-name"
      name="1"
      value="100"
      label="My label"
      onChange={() => {}}
      data-testid="input1"
      help="help msg"
    />
  );

  expect(getByTestId("input1-help")).toHaveTextContent("help msg");
});

test("should be readOnly", () => {
  const { getByTestId } = render(
    <Textarea
      name="1"
      value="100"
      label="My label"
      onChange={() => {}}
      data-testid="input1"
      readOnly
    />
  );

  expect(getByTestId("input1").getAttribute("readonly")).toBe("");
});

test("should be disabled", () => {
  const { getByTestId } = render(
    <Textarea
      name="1"
      value="100"
      label="My label"
      onChange={() => {}}
      data-testid="input1"
      disabled
    />
  );

  expect(getByTestId("input1").getAttribute("disabled")).toBe("");
});

test("should be required", () => {
  const { getByTestId } = render(
    <Textarea
      name="input1"
      value=""
      label="My label"
      onChange={() => {}}
      data-testid="input1"
      required
    />
  );

  expect(getByTestId("input1").getAttribute("required")).toBe("");
});

test("Textarea specific props", () => {
  const onChange = jest.fn();

  const { getByTestId } = render(
    <Textarea
      className="my-class-name"
      name="name1"
      value="100"
      label="My label"
      onChange={onChange}
      data-testid="textarea1"
      rows={3}
    />
  );

  const textarea = getByTestId("textarea1");
  expect(textarea).toBeTruthy();
  expect(textarea).toHaveTextContent("100");
  expect(textarea.getAttribute("rows")).toBe("3");
});