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

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

  const { getByTestId, queryByTestId } = render(
    <Range
      className="my-class-name"
      name="name1"
      value="1"
      max="10"
      min="0"
      step="0.1"
      showNumber="left"
      label="My label"
      onChange={onChange}
      data-testid="range1"
    />
  );

  const range = getByTestId("range1");
  expect(range).toBeTruthy();
  expect(range.getAttribute("value")).toBe("100");
  expect(range.getAttribute("max")).toBe("10");
  expect(range.getAttribute("showNumber")).toBe("left");
  expect(range.getAttribute("label")).toBe("My label");
  expect(range.getAttribute("step")).toBe("0.1");

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

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

  expect(getByTestId("range1")).toHaveClass("my-class-name");
  expect(getByTestId("range1").getAttribute("type")).toBe("range");
});