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

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

describe("rendering InputStepper", () => {
  describe("initial state", () => {
    it("has default class radio", () => {
      const { getByTestId } = render(
        <InputStepper data-testid="test-id" id="id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("input-stepper");
    });
  });
  describe("passed props", () => {
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <InputStepper data-testid="test-id" className="test-class" id="id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("input-stepper");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("has input-stepper--disabled class and disabled controls when isDisabled prop is passed", () => {
      const { getByTestId, getByLabelText, getByRole } = render(
        <InputStepper data-testid="test-id" id="id" isDisabled />,
      );
      expect(getByTestId("test-id")).toHaveClass("input-stepper--disabled");
      expect(getByLabelText("znížiť počet")).toBeDisabled();
      expect(getByLabelText("zvýšiť počet")).toBeDisabled();
      expect(getByRole("spinbutton")).toBeDisabled();
    });
    it("has invalid classes when isInvalid prop is passed", () => {
      const { getByTestId, getByRole } = render(
        <InputStepper data-testid="test-id" id="id" isInvalid />,
      );

      expect(getByTestId("test-id")).toHaveClass("input-stepper--invalid");
      expect(getByRole("spinbutton")).toHaveClass("is-invalid");
    });
    it("has InputStepper removed input field, replaced it with text number and set defaultValue with when config prop is passed", () => {
      const { getByText } = render(
        <InputStepper
          data-testid="test-id"
          id="id"
          config={{
            nonEditableInput: true,
            min: 2,
            max: 10,
            defaultValue: 3,
          }}
        />,
      );

      expect(getByText("3")).toBeInTheDocument();
    });
  });
});