@dxc-technology/halstack-react 0.0.0-e9d5d69 → 0.0.0-ea9b3a2

package/number-input/NumberInput.test.js

@@ -0,0 +1,989 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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"));
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+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 read only and cannot be incremented or decremented using the actions", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render4, getByLabelText, getAllByRole, number, decrement, increment;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number label",
+            readOnly: true
+          })), getByLabelText = _render4.getByLabelText, getAllByRole = _render4.getAllByRole;
+          number = getByLabelText("Number label");
+          expect(number.readOnly).toBeTruthy();
+          decrement = getAllByRole("button")[0];
+          _context.next = 6;
+          return _userEvent["default"].click(decrement);
+        case 6:
+          expect(number.value).toBe("");
+          increment = getAllByRole("button")[1];
+          _context.next = 10;
+          return _userEvent["default"].click(increment);
+        case 10:
+          expect(number.value).toBe("");
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Number input is read only and cannot be incremented or decremented using the arrow keys", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label",
+        readOnly: true
+      })),
+      getByLabelText = _render5.getByLabelText;
+    var number = getByLabelText("Number label");
+    expect(number.readOnly).toBeTruthy();
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("");
+  });
+  test("Number input is optional", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number label",
+        optional: true
+      })),
+      getByText = _render6.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 _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByLabelText = _render7.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 _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        prefix: "+34",
+        suffix: "USD"
+      })),
+      getByText = _render8.getByText;
+    expect(getByText("+34")).toBeTruthy();
+    expect(getByText("USD")).toBeTruthy();
+  });
+  test("Invalid number input renders error", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        error: "Error message."
+      })),
+      getByText = _render9.getByText;
+    expect(getByText("Error message.")).toBeTruthy();
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        onChange: onChange
+      })),
+      getByLabelText = _render10.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 (_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 onBlur = jest.fn(function (_ref3) {
+      var value = _ref3.value,
+        error = _ref3.error;
+      expect(value).toBe("-1");
+      expect(error).toBe("Value must be greater than or equal to 0.");
+    });
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 0,
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByLabelText = _render11.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", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render12, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 5
+          })), getByLabelText = _render12.getByLabelText, getAllByRole = _render12.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "1");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("1");
+          decrement = getAllByRole("button")[0];
+          _context2.next = 8;
+          return _userEvent["default"].click(decrement);
+        case 8:
+          expect(number.value).toBe("1");
+        case 9:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Increment the value when it is less than the min value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render13, getByLabelText, getAllByRole, number, increment;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 5
+          })), getByLabelText = _render13.getByLabelText, getAllByRole = _render13.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "1");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("1");
+          increment = getAllByRole("button")[1];
+          _context3.next = 8;
+          return _userEvent["default"].click(increment);
+        case 8:
+          expect(number.value).toBe("5");
+        case 9:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  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 _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        max: 10,
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByLabelText = _render14.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", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render15, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            max: 10
+          })), getByLabelText = _render15.getByLabelText, getAllByRole = _render15.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "12");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("12");
+          decrement = getAllByRole("button")[1];
+          _context4.next = 8;
+          return _userEvent["default"].click(decrement);
+        case 8:
+          expect(number.value).toBe("12");
+        case 9:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  test("Decrement the value when it is greater than the max value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var _render16, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            max: 10
+          })), getByLabelText = _render16.getByLabelText, getAllByRole = _render16.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "120");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("120");
+          decrement = getAllByRole("button")[0];
+          _context5.next = 8;
+          return _userEvent["default"].click(decrement);
+        case 8:
+          expect(number.value).toBe("10");
+        case 9:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  test("Increment and decrement the value with min and max values", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var _render17, getByLabelText, getAllByRole, number, decrement, increment;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 5,
+            max: 10
+          })), getByLabelText = _render17.getByLabelText, getAllByRole = _render17.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "1");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("1");
+          decrement = getAllByRole("button")[0];
+          _context6.next = 8;
+          return _userEvent["default"].click(decrement);
+        case 8:
+          expect(number.value).toBe("1");
+          increment = getAllByRole("button")[1];
+          _context6.next = 12;
+          return _userEvent["default"].click(increment);
+        case 12:
+          expect(number.value).toBe("5");
+          _context6.next = 15;
+          return _userEvent["default"].click(increment);
+        case 15:
+          _context6.next = 17;
+          return _userEvent["default"].click(increment);
+        case 17:
+          _context6.next = 19;
+          return _userEvent["default"].click(increment);
+        case 19:
+          _context6.next = 21;
+          return _userEvent["default"].click(increment);
+        case 21:
+          _context6.next = 23;
+          return _userEvent["default"].click(increment);
+        case 23:
+          expect(number.value).toBe("10");
+          _context6.next = 26;
+          return _userEvent["default"].click(increment);
+        case 26:
+          expect(number.value).toBe("10");
+        case 27:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  test("Increment and decrement the value with an integer step", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var _render18, getByLabelText, getAllByRole, number, increment, decrement;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            step: 5
+          })), getByLabelText = _render18.getByLabelText, getAllByRole = _render18.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "10");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("10");
+          increment = getAllByRole("button")[1];
+          _context7.next = 8;
+          return _userEvent["default"].click(increment);
+        case 8:
+          expect(number.value).toBe("15");
+          _context7.next = 11;
+          return _userEvent["default"].click(increment);
+        case 11:
+          expect(number.value).toBe("20");
+          decrement = getAllByRole("button")[0];
+          _context7.next = 15;
+          return _userEvent["default"].click(decrement);
+        case 15:
+          expect(number.value).toBe("15");
+          _context7.next = 18;
+          return _userEvent["default"].click(decrement);
+        case 18:
+          expect(number.value).toBe("10");
+        case 19:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  test("Increment and decrement the value with a decimal step", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var _render19, getByLabelText, getAllByRole, number, increment, decrement;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            step: 0.5
+          })), getByLabelText = _render19.getByLabelText, getAllByRole = _render19.getAllByRole;
+          number = getByLabelText("Number input label");
+          _userEvent["default"].type(number, "-9");
+          _react2.fireEvent.blur(number);
+          expect(number.value).toBe("-9");
+          increment = getAllByRole("button")[1];
+          _context8.next = 8;
+          return _userEvent["default"].click(increment);
+        case 8:
+          expect(number.value).toBe("-8.5");
+          _context8.next = 11;
+          return _userEvent["default"].click(increment);
+        case 11:
+          expect(number.value).toBe("-8");
+          decrement = getAllByRole("button")[0];
+          _context8.next = 15;
+          return _userEvent["default"].click(decrement);
+        case 15:
+          _context8.next = 17;
+          return _userEvent["default"].click(decrement);
+        case 17:
+          _context8.next = 19;
+          return _userEvent["default"].click(decrement);
+        case 19:
+          expect(number.value).toBe("-9.5");
+          _context8.next = 22;
+          return _userEvent["default"].click(decrement);
+        case 22:
+          expect(number.value).toBe("-10");
+        case 23:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+  test("Increment and decrement the value with min, max and step", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+    var onBlur, _render20, getByLabelText, getAllByRole, number, increment, decrement;
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          onBlur = jest.fn();
+          _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 5,
+            max: 20,
+            step: 8,
+            onBlur: onBlur
+          })), getByLabelText = _render20.getByLabelText, getAllByRole = _render20.getAllByRole;
+          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."
+          });
+          increment = getAllByRole("button")[1];
+          _context9.next = 9;
+          return _userEvent["default"].click(increment);
+        case 9:
+          expect(number.value).toBe("5");
+          _context9.next = 12;
+          return _userEvent["default"].click(increment);
+        case 12:
+          expect(number.value).toBe("13");
+          _context9.next = 15;
+          return _userEvent["default"].click(increment);
+        case 15:
+          expect(number.value).toBe("13");
+          _context9.next = 18;
+          return _userEvent["default"].click(increment);
+        case 18:
+          expect(number.value).toBe("13");
+          decrement = getAllByRole("button")[0];
+          _context9.next = 22;
+          return _userEvent["default"].click(decrement);
+        case 22:
+          expect(number.value).toBe("5");
+          _context9.next = 25;
+          return _userEvent["default"].click(decrement);
+        case 25:
+          expect(number.value).toBe("5");
+          _context9.next = 28;
+          return _userEvent["default"].click(decrement);
+        case 28:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  })));
+  test("Start incrementing from 0 when the min value is less than 0 and the max value is bigger than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var onBlur, _render21, getByLabelText, getAllByRole, number, increment;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          onBlur = jest.fn();
+          _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: -10,
+            max: 10,
+            step: 1,
+            onBlur: onBlur
+          })), getByLabelText = _render21.getByLabelText, getAllByRole = _render21.getAllByRole;
+          number = getByLabelText("Number input label");
+          increment = getAllByRole("button")[1];
+          _context10.next = 6;
+          return _userEvent["default"].click(increment);
+        case 6:
+          expect(number.value).toBe("1");
+          _context10.next = 9;
+          return _userEvent["default"].click(increment);
+        case 9:
+          expect(number.value).toBe("2");
+        case 10:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee10);
+  })));
+  test("Start incrementing from 0 when the min value is less than 0 and the max is 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    var _render22, getByLabelText, getAllByRole, number, increment;
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: -10,
+            max: 0,
+            step: 1
+          })), getByLabelText = _render22.getByLabelText, getAllByRole = _render22.getAllByRole;
+          number = getByLabelText("Number input label");
+          increment = getAllByRole("button")[1];
+          _context11.next = 5;
+          return _userEvent["default"].click(increment);
+        case 5:
+          expect(number.value).toBe("0");
+          _context11.next = 8;
+          return _userEvent["default"].click(increment);
+        case 8:
+          expect(number.value).toBe("0");
+        case 9:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  })));
+  test("Start incrementing from the min value when it is bigger than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+    var _render23, getByLabelText, getAllByRole, number, increment;
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 2,
+            max: 10,
+            step: 0.5
+          })), getByLabelText = _render23.getByLabelText, getAllByRole = _render23.getAllByRole;
+          number = getByLabelText("Number input label");
+          increment = getAllByRole("button")[1];
+          _context12.next = 5;
+          return _userEvent["default"].click(increment);
+        case 5:
+          expect(number.value).toBe("2");
+          _context12.next = 8;
+          return _userEvent["default"].click(increment);
+        case 8:
+          expect(number.value).toBe("2.5");
+        case 9:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee12);
+  })));
+  test("Start incrementing from the max value when it is less than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+    var _render24, getByLabelText, getAllByRole, number, increment;
+    return _regenerator["default"].wrap(function _callee13$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: -10,
+            max: -1,
+            step: 0.5
+          })), getByLabelText = _render24.getByLabelText, getAllByRole = _render24.getAllByRole;
+          number = getByLabelText("Number input label");
+          increment = getAllByRole("button")[1];
+          _context13.next = 5;
+          return _userEvent["default"].click(increment);
+        case 5:
+          expect(number.value).toBe("-1");
+          _context13.next = 8;
+          return _userEvent["default"].click(increment);
+        case 8:
+          expect(number.value).toBe("-1");
+        case 9:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee13);
+  })));
+  test("Start decrementing from 0 when the min value is less than 0 and the max value is bigger than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    var _render25, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee14$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: -10,
+            max: 10,
+            step: 1
+          })), getByLabelText = _render25.getByLabelText, getAllByRole = _render25.getAllByRole;
+          number = getByLabelText("Number input label");
+          decrement = getAllByRole("button")[0];
+          _context14.next = 5;
+          return _userEvent["default"].click(decrement);
+        case 5:
+          expect(number.value).toBe("-1");
+        case 6:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee14);
+  })));
+  test("Start decrementing from 0 when the min value is 0 and the max value is bigger than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+    var _render26, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee15$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
+        case 0:
+          _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 0,
+            max: 10,
+            step: 1
+          })), getByLabelText = _render26.getByLabelText, getAllByRole = _render26.getAllByRole;
+          number = getByLabelText("Number input label");
+          decrement = getAllByRole("button")[0];
+          _context15.next = 5;
+          return _userEvent["default"].click(decrement);
+        case 5:
+          expect(number.value).toBe("0");
+        case 6:
+        case "end":
+          return _context15.stop();
+      }
+    }, _callee15);
+  })));
+  test("Start decrementing from the min value when it is bigger than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+    var _render27, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: 2,
+            max: 10,
+            step: 0.5
+          })), getByLabelText = _render27.getByLabelText, getAllByRole = _render27.getAllByRole;
+          number = getByLabelText("Number input label");
+          decrement = getAllByRole("button")[0];
+          _context16.next = 5;
+          return _userEvent["default"].click(decrement);
+        case 5:
+          expect(number.value).toBe("2");
+          _context16.next = 8;
+          return _userEvent["default"].click(decrement);
+        case 8:
+          expect(number.value).toBe("2");
+        case 9:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee16);
+  })));
+  test("Start decrementing from the max value when it is less than 0", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
+    var _render28, getByLabelText, getAllByRole, number, decrement;
+    return _regenerator["default"].wrap(function _callee17$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
+        case 0:
+          _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            min: -10,
+            max: -1,
+            step: 0.5
+          })), getByLabelText = _render28.getByLabelText, getAllByRole = _render28.getAllByRole;
+          number = getByLabelText("Number input label");
+          decrement = getAllByRole("button")[0];
+          _context17.next = 5;
+          return _userEvent["default"].click(decrement);
+        case 5:
+          expect(number.value).toBe("-1");
+          _context17.next = 8;
+          return _userEvent["default"].click(decrement);
+        case 8:
+          expect(number.value).toBe("-1.5");
+        case 9:
+        case "end":
+          return _context17.stop();
+      }
+    }, _callee17);
+  })));
+  test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5
+      })),
+      getByLabelText = _render29.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("Value is unchanged when using the scroll wheel in mouse in a disabled input", function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        disabled: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render30.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Value is unchanged when using the arrows in keyboard in a disabled input", function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        disabled: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render31.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Value is unchanged when using the scroll wheel in mouse in a read-only input", function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        readOnly: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render32.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Value is unchanged when using the arrows in keyboard in a read-only input", function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        readOnly: true,
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5,
+        defaultValue: 10
+      })),
+      getByLabelText = _render33.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with min, max and step using the scroll wheel in mouse", function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label",
+        min: 5,
+        max: 20,
+        step: 5
+      })),
+      getByLabelText = _render34.getByLabelText;
+    var number = getByLabelText("Number input label");
+    _userEvent["default"].type(number, "1");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("5");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("15");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("20");
+    _react2.fireEvent.wheel(number, {
+      deltaY: -100
+    });
+    expect(number.value).toBe("20");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("15");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("10");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("5");
+    _react2.fireEvent.wheel(number, {
+      deltaY: 100
+    });
+    expect(number.value).toBe("5");
+  });
+  test("Number has correct accessibility attributes", function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+        label: "Number input label"
+      })),
+      getByLabelText = _render35.getByLabelText,
+      getAllByRole = _render35.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", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
+    var handlerOnSubmit, _render36, getByText, getAllByRole, less, more, submit;
+    return _regenerator["default"].wrap(function _callee18$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              data: "0"
+            });
+          });
+          _render36 = (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 = _render36.getByText, getAllByRole = _render36.getAllByRole;
+          less = getAllByRole("button")[0];
+          more = getAllByRole("button")[1];
+          submit = getByText("Submit");
+          _context18.next = 7;
+          return _userEvent["default"].click(more);
+        case 7:
+          expect(handlerOnSubmit).not.toHaveBeenCalled();
+          _context18.next = 10;
+          return _userEvent["default"].click(less);
+        case 10:
+          expect(handlerOnSubmit).not.toHaveBeenCalled();
+          _context18.next = 13;
+          return _userEvent["default"].click(submit);
+        case 13:
+          expect(handlerOnSubmit).toHaveBeenCalled();
+        case 14:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee18);
+  })));
+});