@dxc-technology/halstack-react 0.0.0-75be8bf → 0.0.0-75cb2b9

package/number-input/NumberInput.test.js

@@ -1,725 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
-
-describe("Number input component tests", function () {
-  test("Number input renders with label, helper text, placeholder and increment/decrement action buttons", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      helperText: "Helper text",
-      placeholder: "Placeholder"
-    })),
-        getByLabelText = _render.getByLabelText,
-        getByText = _render.getByText,
-        queryAllByRole = _render.queryAllByRole;
-
-    var number = getByLabelText("Number input label");
-    expect(getByText("Number input label")).toBeTruthy();
-    expect(getByText("Helper text")).toBeTruthy();
-    expect(number.getAttribute("placeholder")).toBe("Placeholder");
-    expect(queryAllByRole("button").length).toBe(2);
-  });
-  test("Number input buttons' tooltip is correct", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label"
-    })),
-        getByTitle = _render2.getByTitle;
-
-    expect(getByTitle("Decrement value")).toBeTruthy();
-    expect(getByTitle("Increment value")).toBeTruthy();
-  });
-  test("Number input is disabled", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label",
-      disabled: true
-    })),
-        getByLabelText = _render3.getByLabelText;
-
-    var number = getByLabelText("Number label");
-    expect(number.disabled).toBeTruthy();
-  });
-  test("Number input is optional", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label",
-      optional: true
-    })),
-        getByText = _render4.getByText;
-
-    expect(getByText("(Optional)")).toBeTruthy();
-  });
-  test("Number input is not optional: required field, displays error if not filled in", function () {
-    var onBlur = jest.fn();
-    var onChange = jest.fn();
-
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByLabelText = _render5.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _userEvent["default"].clear(number);
-
-    _react2.fireEvent.blur(number);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, enter a value."
-    });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, enter a value."
-    });
-  });
-  test("Suffix and prefix must be shown", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      prefix: "+34",
-      suffix: "USD"
-    })),
-        getByText = _render6.getByText;
-
-    expect(getByText("+34")).toBeTruthy();
-    expect(getByText("USD")).toBeTruthy();
-  });
-  test("Invalid number input renders error", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      error: "Error message."
-    })),
-        getByText = _render7.getByText;
-
-    expect(getByText("Error message.")).toBeTruthy();
-  });
-  test("onChange function is called correctly", function () {
-    var onChange = jest.fn();
-
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      onChange: onChange
-    })),
-        getByLabelText = _render8.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "t");
-
-    expect(onChange).not.toHaveBeenCalledWith({
-      value: "t"
-    });
-    expect(number.value).toBe("");
-
-    _userEvent["default"].type(number, "1");
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "1"
-    });
-    expect(number.value).toBe("1");
-  });
-  test("Error message is shown if the typed value is less than the min value", function () {
-    var onChange = jest.fn(function (_ref) {
-      var value = _ref.value,
-          error = _ref.error;
-      expect(value).toBe("-1");
-      expect(error).toBe("Value must be greater than or equal to 0.");
-    });
-    var onBlur = jest.fn(function (_ref2) {
-      var value = _ref2.value,
-          error = _ref2.error;
-      expect(value).toBe("-1");
-      expect(error).toBe("Value must be greater than or equal to 0.");
-    });
-
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 0,
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByLabelText = _render9.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "-1");
-
-    _react2.fireEvent.blur(number);
-  });
-  test("Cannot decrement the value if it is less than the min value", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5
-    })),
-        getByLabelText = _render10.getByLabelText,
-        getAllByRole = _render10.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("1");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("1");
-  });
-  test("Increment the value when it is less than the min value", function () {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5
-    })),
-        getByLabelText = _render11.getByLabelText,
-        getAllByRole = _render11.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("1");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("5");
-  });
-  test("Error message is shown if the typed value is greater than the max value", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      max: 10,
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByLabelText = _render12.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "12");
-
-    expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveBeenCalledWith({
-      value: "12",
-      error: "Value must be less than or equal to 10."
-    });
-
-    _react2.fireEvent.blur(number);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "12",
-      error: "Value must be less than or equal to 10."
-    });
-  });
-  test("Cannot increment the value if it is greater than the max value", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      max: 10
-    })),
-        getByLabelText = _render13.getByLabelText,
-        getAllByRole = _render13.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "12");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("12");
-    var decrement = getAllByRole("button")[1];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("12");
-  });
-  test("Decrement the value when it is greater than the max value", function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      max: 10
-    })),
-        getByLabelText = _render14.getByLabelText,
-        getAllByRole = _render14.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "120");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("120");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("10");
-  });
-  test("Increment and decrement the value with min and max values", function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      max: 10
-    })),
-        getByLabelText = _render15.getByLabelText,
-        getAllByRole = _render15.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("1");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("1");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("10");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("10");
-  });
-  test("Increment and decrement the value with an integer step", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      step: 5
-    })),
-        getByLabelText = _render16.getByLabelText,
-        getAllByRole = _render16.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "10");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("10");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("15");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("20");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("15");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("10");
-  });
-  test("Increment and decrement the value with a decimal step", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      step: 0.5
-    })),
-        getByLabelText = _render17.getByLabelText,
-        getAllByRole = _render17.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "-9");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("-9");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("-8.5");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("-8");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    _userEvent["default"].click(decrement);
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("-9.5");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("-10");
-  });
-  test("Increment and decrement the value with min, max and step", function () {
-    var onBlur = jest.fn();
-
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      max: 20,
-      step: 8,
-      onBlur: onBlur
-    })),
-        getByLabelText = _render18.getByLabelText,
-        getAllByRole = _render18.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "1",
-      error: "Value must be greater than or equal to 5."
-    });
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("13");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("13");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("13");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(decrement);
-  });
-  test("Start incrementing from 0 when the min value is less than 0 and the max value is bigger than 0", function () {
-    var onBlur = jest.fn();
-
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: -10,
-      max: 10,
-      step: 1,
-      onBlur: onBlur
-    })),
-        getByLabelText = _render19.getByLabelText,
-        getAllByRole = _render19.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("1");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("2");
-  });
-  test("Start incrementing from 0 when the min value is less than 0 and the max is 0", function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: -10,
-      max: 0,
-      step: 1
-    })),
-        getByLabelText = _render20.getByLabelText,
-        getAllByRole = _render20.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("0");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("0");
-  });
-  test("Start incrementing from the min value when it is bigger than 0", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 2,
-      max: 10,
-      step: 0.5
-    })),
-        getByLabelText = _render21.getByLabelText,
-        getAllByRole = _render21.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("2");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("2.5");
-  });
-  test("Start incrementing from the max value when it is less than 0", function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: -10,
-      max: -1,
-      step: 0.5
-    })),
-        getByLabelText = _render22.getByLabelText,
-        getAllByRole = _render22.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("-1");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("-1");
-  });
-  test("Start decrementing from 0 when the min value is less than 0 and the max value is bigger than 0", function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: -10,
-      max: 10,
-      step: 1
-    })),
-        getByLabelText = _render23.getByLabelText,
-        getAllByRole = _render23.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("-1");
-  });
-  test("Start decrementing from 0 when the min value is 0 and the max value is bigger than 0", function () {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 0,
-      max: 10,
-      step: 1
-    })),
-        getByLabelText = _render24.getByLabelText,
-        getAllByRole = _render24.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("0");
-  });
-  test("Start decrementing from the min value when it is bigger than 0", function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 2,
-      max: 10,
-      step: 0.5
-    })),
-        getByLabelText = _render25.getByLabelText,
-        getAllByRole = _render25.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("2");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("2");
-  });
-  test("Start decrementing from the max value when it is less than 0", function () {
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: -10,
-      max: -1,
-      step: 0.5
-    })),
-        getByLabelText = _render26.getByLabelText,
-        getAllByRole = _render26.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("-1");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("-1.5");
-  });
-  test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      max: 20,
-      step: 5
-    })),
-        getByLabelText = _render27.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("5");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("10");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("15");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("20");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("20");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("15");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("10");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("5");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("5");
-  });
-  test("Number has correct accessibility attributes", function () {
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label"
-    })),
-        getByLabelText = _render28.getByLabelText,
-        getAllByRole = _render28.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    expect(number.getAttribute("type")).toBe("number");
-    expect(number.getAttribute("aria-autocomplete")).toBeNull();
-    expect(number.getAttribute("aria-controls")).toBeNull();
-    expect(number.getAttribute("aria-expanded")).toBeNull();
-    var decrement = getAllByRole("button")[0];
-    expect(decrement.getAttribute("aria-label")).toBe("Decrement value");
-    var increment = getAllByRole("button")[1];
-    expect(increment.getAttribute("aria-label")).toBe("Increment value");
-  });
-  test("Number input submits correct values inside a form and actions don't trigger the submit event", function () {
-    var handlerOnSubmit = jest.fn(function (e) {
-      e.preventDefault();
-      var formData = new FormData(e.target);
-      var formProps = Object.fromEntries(formData);
-      expect(formProps).toStrictEqual({
-        data: "0"
-      });
-    });
-
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
-      onSubmit: handlerOnSubmit
-    }, /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      name: "data"
-    }), /*#__PURE__*/_react["default"].createElement("button", {
-      type: "submit"
-    }, "Submit"))),
-        getByText = _render29.getByText,
-        getAllByRole = _render29.getAllByRole;
-
-    var less = getAllByRole("button")[0];
-    var more = getAllByRole("button")[1];
-    var submit = getByText("Submit");
-
-    _userEvent["default"].click(more);
-
-    expect(handlerOnSubmit).not.toHaveBeenCalled();
-
-    _userEvent["default"].click(less);
-
-    expect(handlerOnSubmit).not.toHaveBeenCalled();
-
-    _userEvent["default"].click(submit);
-
-    expect(handlerOnSubmit).toHaveBeenCalled();
-  });
-});