@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/number-input/NumberInput.test.js

@@ -1,78 +1,96 @@
 "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"));
+
+var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
+
 describe("Number input component tests", function () {
   test("Number input renders with label", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label"
-      })),
-      getByText = _render.getByText;
+      label: "Number input label"
+    })),
+        getByText = _render.getByText;
+
     expect(getByText("Number input label")).toBeTruthy();
   });
   test("Number input renders with helper text", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        helperText: "Helper text"
-      })),
-      getByText = _render2.getByText;
+      helperText: "Helper text"
+    })),
+        getByText = _render2.getByText;
+
     expect(getByText("Helper text")).toBeTruthy();
   });
   test("Number input renders with placeholder", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number label",
-        placeholder: "Placeholder"
-      })),
-      getByLabelText = _render3.getByLabelText;
+      label: "Number label",
+      placeholder: "Placeholder"
+    })),
+        getByLabelText = _render3.getByLabelText;
+
     var number = getByLabelText("Number label");
     expect(number.getAttribute("placeholder")).toBe("Placeholder");
   });
   test("Number input renders increment and decrement buttons", function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number label"
-      })),
-      queryAllByRole = _render4.queryAllByRole;
+      label: "Number label"
+    })),
+        queryAllByRole = _render4.queryAllByRole;
+
     expect(queryAllByRole("button").length).toBe(2);
   });
   test("Number input buttons' tooltip is correct", function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number label"
-      })),
-      getByTitle = _render5.getByTitle;
+      label: "Number label"
+    })),
+        getByTitle = _render5.getByTitle;
+
     expect(getByTitle("Decrement value")).toBeTruthy();
     expect(getByTitle("Increment value")).toBeTruthy();
   });
   test("Number input is disabled", function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number label",
-        disabled: true
-      })),
-      getByLabelText = _render6.getByLabelText;
+      label: "Number label",
+      disabled: true
+    })),
+        getByLabelText = _render6.getByLabelText;
+
     var number = getByLabelText("Number label");
     expect(number.disabled).toBeTruthy();
   });
   test("Number input is optional", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number label",
-        optional: true
-      })),
-      getByText = _render7.getByText;
+      label: "Number label",
+      optional: true
+    })),
+        getByText = _render7.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 _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        onBlur: onBlur,
-        onChange: onChange
-      })),
-      getByRole = _render8.getByRole;
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByRole = _render8.getByRole;
+
     var input = getByRole("spinbutton");
+
     _userEvent["default"].type(input, "1");
+
     _userEvent["default"].clear(input);
+
     _react2.fireEvent.blur(input);
+
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "",
@@ -86,35 +104,43 @@ describe("Number input component tests", function () {
   });
   test("Suffix and prefix must be shown)", function () {
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        prefix: "+34",
-        suffix: "USD"
-      })),
-      getByText = _render9.getByText;
+      label: "Number input label",
+      prefix: "+34",
+      suffix: "USD"
+    })),
+        getByText = _render9.getByText;
+
     expect(getByText("+34")).toBeTruthy();
     expect(getByText("USD")).toBeTruthy();
   });
   test("Invalid number input renders error", function () {
     var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        error: "Error message."
-      })),
-      getByText = _render10.getByText;
+      error: "Error message."
+    })),
+        getByText = _render10.getByText;
+
     expect(getByText("Error message.")).toBeTruthy();
   });
   test("onChange function is called correctly", function () {
     var onChange = jest.fn();
+
     var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        onChange: onChange
-      })),
-      getByLabelText = _render11.getByLabelText;
+      label: "Number input label",
+      onChange: onChange
+    })),
+        getByLabelText = _render11.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"
     });
@@ -123,75 +149,97 @@ describe("Number input component tests", function () {
   test("Error message is shown if the value is less than the min value", function () {
     var onChange = jest.fn(function (_ref) {
       var value = _ref.value,
-        error = _ref.error;
+          error = _ref.error;
       expect(value).toBe("1");
       expect(error).toBe("Value must be greater than or equal to 5.");
     });
     var onBlur = jest.fn(function (_ref2) {
       var value = _ref2.value,
-        error = _ref2.error;
+          error = _ref2.error;
       expect(value).toBe("1");
       expect(error).toBe("Value must be greater than or equal to 5.");
     });
+
     var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        min: 5,
-        onBlur: onBlur,
-        onChange: onChange
-      })),
-      getByLabelText = _render12.getByLabelText;
+      label: "Number input label",
+      min: 5,
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByLabelText = _render12.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 _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        min: 5
-      })),
-      getByLabelText = _render13.getByLabelText,
-      getAllByRole = _render13.getAllByRole;
+      label: "Number input label",
+      min: 5
+    })),
+        getByLabelText = _render13.getByLabelText,
+        getAllByRole = _render13.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 _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        min: 5
-      })),
-      getByLabelText = _render14.getByLabelText,
-      getAllByRole = _render14.getAllByRole;
+      label: "Number input label",
+      min: 5
+    })),
+        getByLabelText = _render14.getByLabelText,
+        getAllByRole = _render14.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 value is greater than the max value", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
+
     var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        max: 10,
-        onBlur: onBlur,
-        onChange: onChange
-      })),
-      getByLabelText = _render15.getByLabelText;
+      label: "Number input label",
+      max: 10,
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByLabelText = _render15.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",
@@ -200,171 +248,251 @@ describe("Number input component tests", function () {
   });
   test("Cannot increment the value if it is greater than the max value", function () {
     var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        max: 10
-      })),
-      getByLabelText = _render16.getByLabelText,
-      getAllByRole = _render16.getAllByRole;
+      label: "Number input label",
+      max: 10
+    })),
+        getByLabelText = _render16.getByLabelText,
+        getAllByRole = _render16.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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        max: 10
-      })),
-      getByLabelText = _render17.getByLabelText,
-      getAllByRole = _render17.getAllByRole;
+      label: "Number input label",
+      max: 10
+    })),
+        getByLabelText = _render17.getByLabelText,
+        getAllByRole = _render17.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")[0];
+
     _userEvent["default"].click(decrement);
+
     expect(number.value).toBe("10");
   });
   test("Increment and decrement the value with min and max values", function () {
     var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        min: 5,
-        max: 10
-      })),
-      getByLabelText = _render18.getByLabelText,
-      getAllByRole = _render18.getAllByRole;
+      label: "Number input label",
+      min: 5,
+      max: 10
+    })),
+        getByLabelText = _render18.getByLabelText,
+        getAllByRole = _render18.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 step", function () {
     var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        step: 5
-      })),
-      getByLabelText = _render19.getByLabelText,
-      getAllByRole = _render19.getAllByRole;
+      label: "Number input label",
+      step: 5
+    })),
+        getByLabelText = _render19.getByLabelText,
+        getAllByRole = _render19.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 min, max and step", function () {
     var onBlur = jest.fn();
+
     var _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;
+      label: "Number input label",
+      min: 5,
+      max: 20,
+      step: 8,
+      onBlur: onBlur
+    })),
+        getByLabelText = _render20.getByLabelText,
+        getAllByRole = _render20.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("20");
+
     _userEvent["default"].click(increment);
+
     expect(number.value).toBe("20");
     var decrement = getAllByRole("button")[0];
+
     _userEvent["default"].click(decrement);
+
     expect(number.value).toBe("12");
+
     _userEvent["default"].click(decrement);
+
     expect(number.value).toBe("5");
+
     _userEvent["default"].click(decrement);
+
     expect(number.value).toBe("5");
   });
   test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
     var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label",
-        min: 5,
-        max: 20,
-        step: 5
-      })),
-      getByLabelText = _render21.getByLabelText;
+      label: "Number input label",
+      min: 5,
+      max: 20,
+      step: 5
+    })),
+        getByLabelText = _render21.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 accesibility attributes", function () {
     var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-        label: "Number input label"
-      })),
-      getByLabelText = _render22.getByLabelText,
-      getAllByRole = _render22.getAllByRole;
+      label: "Number input label"
+    })),
+        getByLabelText = _render22.getByLabelText,
+        getAllByRole = _render22.getAllByRole;
+
     var number = getByLabelText("Number input label");
     expect(number.getAttribute("aria-autocomplete")).toBeNull();
     expect(number.getAttribute("aria-controls")).toBeNull();
@@ -383,24 +511,32 @@ describe("Number input component tests", function () {
         data: "0"
       });
     });
+
     var _render23 = (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 = _render23.getByText,
-      getAllByRole = _render23.getAllByRole;
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      name: "data"
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render23.getByText,
+        getAllByRole = _render23.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();
   });
 });

package/number-input/NumberInputContext.js

@@ -1,14 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var defaultState = {
   stepNumber: 1
 };
+
 var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
+
 var _default = NumberInputContext;
 exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -1,4 +1,4 @@
-type Props = {
+declare type Props = {
     /**
      * Type of the input.
      */

package/number-input/types.d.ts

@@ -1,11 +1,11 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-type Props = {
+declare type Props = {
     /**
      * Text to be placed above the number.
      */
@@ -120,5 +120,5 @@ type Props = {
 /**
  * Reference to the component.
  */
-export type RefType = HTMLDivElement;
+export declare type RefType = HTMLDivElement;
 export default Props;