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

test("should show radiobutton", () => {
  const label = "Click the button";
  const { queryByTestId } = render(
    <RadioButton className="my-class-name" name="buttonName" value="100" label={label} checked />
  );

  expect(queryByTestId("honeyui-radio")).toBeTruthy();
  expect(queryByTestId("honeyui-radio")).toHaveClass("form-radio");
  expect(queryByTestId("honeyui-radio")).toHaveClass("my-class-name");

  expect(queryByTestId("honeyui-radio-input")).toBeTruthy();
  expect(queryByTestId("honeyui-radio-input")).toHaveClass("form-radio-input");
  expect((queryByTestId("honeyui-radio-input") as HTMLInputElement).checked).toBe(true);
  expect((queryByTestId("honeyui-radio-input") as HTMLInputElement).value).toBe("100");
  expect(queryByTestId("honeyui-radio-input").getAttribute("name")).toBe("buttonName");

  expect(queryByTestId("honeyui-radio-label")).toBeTruthy();
  expect(queryByTestId("honeyui-radio-label")).toHaveClass("form-radio-label");
  expect(queryByTestId("honeyui-radio-label")).toHaveTextContent(label);
});

test("should change radiobutton on click", () => {
  const onClick = jest.fn();
  const { queryByTestId } = render(
    <RadioButton
      className="my-class-name"
      name="buttonName"
      value="100"
      label="Click the button"
      onSelected={onClick}
    />
  );
  expect((queryByTestId("honeyui-radio-input") as HTMLInputElement).checked).toBe(false);

  expect(onClick).toHaveBeenCalledTimes(0);
  fireEvent.click(queryByTestId("honeyui-radio-input"));
  expect(onClick).toHaveBeenCalledTimes(1);
  expect(onClick).lastCalledWith("100");

  fireEvent.click(queryByTestId("honeyui-radio-input"));
  expect(onClick).toHaveBeenCalledTimes(2);
  expect(onClick).lastCalledWith("100");
});

test("should show inline radiobutton", () => {
  const { queryByTestId } = render(<RadioButton inline value="100" label="Click the button" />);

  expect(queryByTestId("honeyui-radio")).toHaveClass("form-radio-inline");
});