@dxc-technology/halstack-react 0.0.0-ff43881 → 0.0.0-ff5083e

package/number-input/NumberInput.test.js

@@ -0,0 +1,506 @@
+"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"));
+
+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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "1");
+
+    _userEvent["default"].clear(input);
+
+    _react2.fireEvent.blur(input);
+
+    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 _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      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;
+
+    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;
+
+    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 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 5.");
+    });
+    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 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;
+
+    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;
+
+    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;
+
+    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;
+
+    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 _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      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;
+
+    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;
+
+    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;
+
+    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(function (_ref3) {
+      var value = _ref3.value,
+          error = _ref3.error;
+      expect(value).toBe("1");
+      expect(error).toBe("Value must be greater than or equal to 5.");
+    });
+
+    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;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.blur(number);
+
+    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;
+
+    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;
+
+    var number = getByLabelText("Number input label");
+    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");
+  });
+});

package/number-input/types.d.ts

@@ -14,6 +14,10 @@ declare type Props = {
      * Name attribute of the input element.
      */
     name?: string;
+    /**
+     * Initial value of the input element, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
@@ -50,7 +54,7 @@ declare type Props = {
      * lower than min, the onBlur and onChange functions will be called with
      * the current value and an internal error informing that the current
      * value is not correct. If a valid state is reached, the error parameter
-     * will be null in both events.
+     * will not be defined in both events.
      */
     min?: number;
     /**
@@ -58,7 +62,7 @@ declare type Props = {
      * surpasses max, the onBlur and onChange functions will be called with
      * the current value and an internal error informing that the current
      * value is not correct. If a valid state is reached, the error parameter
-     * will be null in both events.
+     * will not be defined in both events.
      */
     max?: number;
     /**
@@ -69,26 +73,29 @@ declare type Props = {
      * This function will be called when the user types within the input
      * element of the component. An object including the current value and
      * the error (if the value entered is not valid) will be passed to this
-     * function. If there is no error, error will be null.
+     * function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the input element loses the focus.
      * An object including the input value and the error (if the value
      * entered is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the input component. If
+     * the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -102,7 +109,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-ff43881",
+  "version": "0.0.0-ff5083e",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -18,7 +18,7 @@
     "styled-components": "^5.0.1"
   },
   "dependencies": {
-    "@date-io/date-fns": "^1.3.9",
+    "@date-io/dayjs": "^1.3.9",
     "@material-ui/core": "4.11.1",
     "@material-ui/icons": "4.4.3",
     "@material-ui/lab": "4.0.0-alpha.17",
@@ -27,17 +27,17 @@
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",
-    "date-fns": "^2.0.0-beta.4",
-    "moment": "2.24.0",
+    "dayjs": "^1.11.1",
     "prop-types": "^15.7.2",
     "rgb-hex": "^3.0.0",
+    "slugify": "^1.6.5",
     "uuid": "^8.3.2"
   },
   "scripts": {
     "test": "jest",
     "test:watch": "npm test -- --watch --coverage",
     "build": "babel src --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose && node ../scripts/build/copy-package.js && tsc ",
-    "build:watch": "babel src --watch --out-dir ../dist --copy-files --verbose",
+    "build:watch": "babel src --watch --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -57,6 +57,7 @@
     "@storybook/testing-library": "0.0.7",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "@types/react": "16.9.5",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "chromatic": "^6.3.3",