@dxc-technology/halstack-react 0.0.0-c796a1b → 0.0.0-c8b251f

package/paginator/Paginator.test.js

@@ -0,0 +1,266 @@
+"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 _Paginator = _interopRequireDefault(require("./Paginator"));
+
+describe("Paginator component tests", function () {
+  test("Paginator renders with default values", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], null)),
+        getByText = _render.getByText;
+
+    expect(getByText("1 to 1 of 1")).toBeTruthy();
+    expect(getByText("Page: 1 of 1")).toBeTruthy();
+  });
+  test("Paginator renders with currentPage", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Page: 2 of 1")).toBeTruthy();
+  });
+  test("Paginator renders with itemsPerPageOptions", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      itemsPerPageOptions: [10, 15],
+      totalItems: 20
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("Items per page")).toBeTruthy();
+  });
+  test("Paginator renders with itemsPerPageOptions", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render4.getByText;
+
+    expect(getByText("1 to 10 of 20")).toBeTruthy();
+    expect(getByText("Page: 1 of 2")).toBeTruthy();
+  });
+  test("Paginator renders with totalItems", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      totalItems: 20
+    })),
+        getByText = _render5.getByText;
+
+    expect(getByText("1 to 5 of 20")).toBeTruthy();
+    expect(getByText("Page: 1 of 4")).toBeTruthy();
+  });
+  test("Paginator renders with correct text in second page", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render6.getByText;
+
+    expect(getByText("11 to 20 of 20")).toBeTruthy();
+    expect(getByText("Page: 2 of 2")).toBeTruthy();
+  });
+  test("Paginator renders goToPage select", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2,
+      showGoToPage: true,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render7.getByText;
+
+    expect(getByText("Go to page:")).toBeTruthy();
+  });
+  test("Paginator goToPage call correct function", function () {
+    var onClick = jest.fn();
+
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+
+    window.HTMLElement.prototype.scrollTo = function () {};
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 27,
+      showGoToPage: true,
+      onPageChange: onClick
+    })),
+        getByText = _render8.getByText,
+        getAllByRole = _render8.getAllByRole,
+        getByRole = _render8.getByRole;
+
+    var goToPageSelect = getAllByRole("combobox")[0];
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(goToPageSelect);
+    });
+    var goToPageOption = getByText("2");
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(goToPageOption);
+    });
+    expect(onClick).toHaveBeenCalledWith(2);
+  });
+  test("Call correct goToPageFunction", function () {
+    var onClick = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render9.getAllByRole;
+
+    var nextButton = getAllByRole("button")[2];
+
+    _userEvent["default"].click(nextButton);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Call correct itemsPerPageFunction", function () {
+    var onClick = jest.fn();
+
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+
+    window.HTMLElement.prototype.scrollTo = function () {};
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      itemsPerPageOptions: [10, 15],
+      itemsPerPageFunction: onClick,
+      totalItems: 20
+    })),
+        getAllByText = _render10.getAllByText,
+        getByText = _render10.getByText;
+
+    var select = getAllByText("10")[0];
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(select);
+    });
+    var itemPerPageOption = getByText("15");
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(itemPerPageOption);
+    });
+    expect(onClick).toHaveBeenCalledWith(15);
+  });
+  test("Next button is disable in last page", function () {
+    var onClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render11.getAllByRole;
+
+    var nextButton = getAllByRole("button")[2];
+    expect(nextButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(nextButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Last button is disable in last page", function () {
+    var onClick = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render12.getAllByRole;
+
+    var lastButton = getAllByRole("button")[3];
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(lastButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("First button is disable in first page", function () {
+    var onClick = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render13.getAllByRole;
+
+    var lastButton = getAllByRole("button")[0];
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(lastButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Previous button is disable in first page", function () {
+    var onClick = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render14.getAllByRole;
+
+    var lastButton = getAllByRole("button")[1];
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(lastButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Last and next buttons are disable in last page", function () {
+    var onClick = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render15.getAllByRole;
+
+    var firstButton = getAllByRole("button")[0];
+    var prevButton = getAllByRole("button")[1];
+    var nextButton = getAllByRole("button")[2];
+    var lastButton = getAllByRole("button")[3];
+    expect(firstButton.hasAttribute("disabled")).toBeFalsy();
+    expect(prevButton.hasAttribute("disabled")).toBeFalsy();
+    expect(nextButton.hasAttribute("disabled")).toBeTruthy();
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+  });
+  test("First and previous buttons are disable in first page", function () {
+    var onClick = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render16.getAllByRole;
+
+    var firstButton = getAllByRole("button")[0];
+    var prevButton = getAllByRole("button")[1];
+    var nextButton = getAllByRole("button")[2];
+    var lastButton = getAllByRole("button")[3];
+    expect(firstButton.hasAttribute("disabled")).toBeTruthy();
+    expect(prevButton.hasAttribute("disabled")).toBeTruthy();
+    expect(nextButton.hasAttribute("disabled")).toBeFalsy();
+    expect(lastButton.hasAttribute("disabled")).toBeFalsy();
+  });
+});

package/password-input/PasswordInput.stories.tsx

@@ -53,7 +53,7 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcPasswordInput label="Xxsmmall" margin="xxsmall" />
+      <DxcPasswordInput label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />
@@ -100,7 +100,7 @@ export const Chromatic = () => (
 );
 
 const Password = () => (
-  <ExampleContainer>
+  <ExampleContainer expanded>
     <Title title="Show password" theme="light" level={4} />
     <DxcPasswordInput label="Password input" value="Password" />
   </ExampleContainer>
@@ -108,7 +108,7 @@ const Password = () => (
 const PasswordDark = () => (
   <BackgroundColorProvider color="#333333">
     <DarkContainer>
-      <ExampleContainer>
+      <ExampleContainer expanded>
         <Title title="Show password" theme="dark" level={4} />
         <DxcPasswordInput label="Password input" value="Password" />
       </ExampleContainer>

package/password-input/PasswordInput.test.js

@@ -0,0 +1,181 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
+
+describe("Password input component tests", function () {
+  test("Password input renders with label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Password input label")).toBeTruthy();
+  });
+  test("Password input renders with helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      helperText: "Helper text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Helper text")).toBeTruthy();
+  });
+  test("Password input renders error", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      error: "Error message."
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("Error message.")).toBeTruthy();
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      onChange: onChange
+    })),
+        getByRole = _render4.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "P"
+    });
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+  });
+  test("onBlur function is called correctly", function () {
+    var onBlur = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      onBlur: onBlur
+    })),
+        getByRole = _render5.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    _react2.fireEvent.blur(passwordInput);
+
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Pa$$w0rd"
+    });
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+  });
+  test("Clear password input value", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      clearable: true
+    })),
+        getAllByRole = _render6.getAllByRole,
+        getByRole = _render6.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    var clearButton = getAllByRole("button")[0];
+
+    _userEvent["default"].click(clearButton);
+
+    expect(passwordInput.value).toBe("");
+  });
+  test("Non clearable password input has no clear icon", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input"
+    })),
+        getAllByRole = _render7.getAllByRole,
+        getByRole = _render7.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    var buttons = getAllByRole("button");
+    expect(buttons.length).toBe(1);
+  });
+  test("Show/hide password input button works correctly", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      clearable: true
+    })),
+        getAllByRole = _render8.getAllByRole,
+        getByRole = _render8.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    expect(passwordInput.type).toBe("password");
+    var showButton = getAllByRole("button")[1];
+
+    _userEvent["default"].click(showButton);
+
+    expect(passwordInput.type).toBe("text");
+  });
+  test("Password tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render9, getAllByRole, getByTitle, queryByTitle, showButton;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+              label: "Password input",
+              clearable: true,
+              value: "Password"
+            })), getAllByRole = _render9.getAllByRole, getByTitle = _render9.getByTitle, queryByTitle = _render9.queryByTitle;
+            showButton = getAllByRole("button")[1];
+
+            _userEvent["default"].hover(showButton);
+
+            expect(getByTitle("Show password")).toBeTruthy();
+
+            _userEvent["default"].unhover(showButton);
+
+            expect(queryByTitle("Hide password")).toBeFalsy();
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test("Password input has correct accesibility attributes", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input"
+    })),
+        getByRole = _render10.getByRole;
+
+    var passwordInput = getByRole("textbox");
+    expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
+    expect(passwordInput.getAttribute("aria-controls")).toBeNull();
+    var showButton = getByRole("button");
+    expect(showButton.getAttribute("aria-expanded")).toBe("false");
+    expect(showButton.getAttribute("aria-label")).toBe("Show password");
+
+    _userEvent["default"].click(showButton);
+
+    expect(showButton.getAttribute("aria-expanded")).toBe("true");
+    expect(showButton.getAttribute("aria-label")).toBe("Hide password");
+  });
+});

package/password-input/types.d.ts

@@ -30,25 +30,28 @@ 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.
+     * not valid) will be passed to this function. If there is no error, 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 password 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 password 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;
     /**
@@ -58,7 +61,7 @@ declare type Props = {
      * the pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -68,7 +71,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -78,7 +81,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**

package/progress-bar/ProgressBar.js

@@ -59,9 +59,9 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
     overlay: overlay,
     showValue: showValue,
     backgroundType: backgroundType
-  }, value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
+  }, value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
     variant: showValue ? "determinate" : "indeterminate",
-    value: value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
+    value: value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
   }), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     overlay: overlay,
     backgroundType: backgroundType

package/progress-bar/ProgressBar.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+
+describe("ProgressBar component tests", function () {
+  test("ProgressBar renders with label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      label: "test-label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("test-label")).toBeTruthy();
+  });
+  test("Overlay progressBar renders with label", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      label: "test-label",
+      overlay: true
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("test-label")).toBeTruthy();
+  });
+  test("ProgressBar renders with default value", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      showValue: true
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("0 %")).toBeTruthy();
+  });
+  test("Overlay progressBar renders with default value", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      showValue: true,
+      overlay: true
+    })),
+        getByText = _render4.getByText;
+
+    expect(getByText("0 %")).toBeTruthy();
+  });
+  test("ProgressBar renders with value", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      showValue: true,
+      value: 25
+    })),
+        getByText = _render5.getByText;
+
+    expect(getByText("25 %")).toBeTruthy();
+  });
+  test("Overlay progressBar renders with value", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      showValue: true,
+      value: 25,
+      overlay: true
+    })),
+        getByText = _render6.getByText;
+
+    expect(getByText("25 %")).toBeTruthy();
+  });
+});

package/quick-nav/QuickNav.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import QuickNavTypes from "./types";
+declare const DxcQuickNav: ({ title, links }: QuickNavTypes) => JSX.Element;
+export default DxcQuickNav;