@dxc-technology/halstack-react 0.0.0-aa03ee1 → 0.0.0-aa15b96

package/textarea/Textarea.test.js

@@ -0,0 +1,436 @@
+"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 _Textarea = _interopRequireDefault(require("./Textarea"));
+
+describe("Textarea component tests", function () {
+  test("Renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Example label")).toBeTruthy();
+  });
+  test("Renders with correct label and helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      helperText: "Example helper text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+  });
+  test("Renders with correct label and optional", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      helperText: "Example helper text",
+      optional: true
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+    expect(textarea.getAttribute("aria-required")).toBe("false");
+  });
+  test("Renders with correct placeholder", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      placeholder: "Placeholder"
+    })),
+        getByRole = _render4.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
+  });
+  test("Renders with error message and correct aria attributes", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      error: "Error message."
+    })),
+        getByText = _render5.getByText,
+        getByLabelText = _render5.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    var errorMessage = getByText("Error message.");
+    expect(errorMessage).toBeTruthy();
+    expect(textarea.getAttribute("aria-errormessage")).toBe(errorMessage.id);
+    expect(textarea.getAttribute("aria-invalid")).toBe("true");
+    expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+  });
+  test("Renders with correct default rows", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      rows: 10
+    })),
+        getByLabelText = _render6.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.rows).toBe(10);
+  });
+  test("Renders with correct accesibility attributes", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label"
+    })),
+        getByLabelText = _render7.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-disabled")).toBe("false");
+    expect(textarea.getAttribute("aria-invalid")).toBe("false");
+    expect(textarea.getAttribute("aria-describedBy")).toBeNull();
+    expect(textarea.getAttribute("aria-required")).toBe("true");
+  });
+  test("Disabled textarea renders with correct aria and can not be modified", function () {
+    var onChange = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onChange: onChange,
+      disabled: true
+    })),
+        getByLabelText = _render8.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-disabled")).toBe("true");
+
+    _userEvent["default"].type(textarea, "Test");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Not optional constraint (onBlur)", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByLabelText = _render9.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.focus(textarea);
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Test",
+      error: null
+    });
+  });
+  test("Not optional constraint (onChange)", function () {
+    var onChange = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange
+    })),
+        getByLabelText = _render10.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.focus(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Test",
+      error: null
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+  });
+  test("Pattern constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+    })),
+        getByLabelText = _render11.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "pattern test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "pattern4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern4&",
+      error: null
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern4&",
+      error: null
+    });
+  });
+  test("Length constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByLabelText = _render12.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "length"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "length",
+      error: null
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "length",
+      error: null
+    });
+  });
+  test("Pattern and length constraints", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByLabelText = _render13.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "tests"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "tests4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests4&",
+      error: null
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests4&",
+      error: null
+    });
+  });
+  test("onBlur function is called correctly", function () {
+    var onBlur = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onBlur: onBlur
+    })),
+        getByLabelText = _render14.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Blur test"
+      }
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Blur test",
+      error: null
+    });
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      value: "Test value",
+      onChange: onChange
+    })),
+        getByLabelText = _render15.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Controlled test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Controlled test",
+      error: null
+    });
+    expect(textarea.value).toBe("Test value");
+  });
+});

package/toggle-group/ToggleGroup.test.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
+
+var options = [{
+  value: 1,
+  label: "Amazon"
+}, {
+  value: 2,
+  label: "Ebay"
+}, {
+  value: 3,
+  label: "Apple"
+}, {
+  value: 4,
+  label: "Google"
+}];
+describe("Toggle group component tests", function () {
+  test("Toggle group renders with correct labels", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      label: "Toggle group label",
+      helperText: "Toggle group helper text",
+      options: options
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
+    expect(getByText("Amazon")).toBeTruthy();
+    expect(getByText("Ebay")).toBeTruthy();
+    expect(getByText("Apple")).toBeTruthy();
+    expect(getByText("Google")).toBeTruthy();
+  });
+  test("Uncontrolled toggle group calls correct function on change with value", function () {
+    var onChange = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange
+    })),
+        getByText = _render2.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+  test("Controlled toggle group calls correct function on change with value", function () {
+    var onChange = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      value: 1
+    })),
+        getByText = _render3.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+  test("Function on change is not called when disable", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      disabled: true
+    })),
+        getByText = _render4.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render5.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith([2]);
+  });
+  test("Controlled multiple toggle returns always same values", function () {
+    var onChange = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      value: [1],
+      multiple: true
+    })),
+        getByText = _render6.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith([1, 2]);
+    var option2 = getByText("Google");
+
+    _react2.fireEvent.click(option2);
+
+    expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
+  });
+});

package/wizard/Wizard.test.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Wizard = _interopRequireDefault(require("./Wizard"));
+
+describe("Wizard components tests", function () {
+  test("Wizard renders with correct steps", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      steps: [{
+        label: "first-step"
+      }, {
+        label: "second-step"
+      }]
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("first-step")).toBeTruthy();
+    expect(getByText("second-step")).toBeTruthy();
+  });
+  test("Click on step text", function () {
+    var onClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }]
+    })),
+        getByText = _render2.getByText;
+
+    var step = getByText("first-step");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Click on step description", function () {
+    var onClick = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step",
+        description: "step-description"
+      }]
+    })),
+        getByText = _render3.getByText;
+
+    var step = getByText("step-description");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Click on step number", function () {
+    var onClick = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }]
+    })),
+        getByText = _render4.getByText;
+
+    var step = getByText("1");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Click on disable step", function () {
+    var onClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }, {
+        label: "second-step",
+        disabled: true
+      }]
+    })),
+        getByText = _render5.getByText;
+
+    var step = getByText("second-step");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Controlled wizard function is called", function () {
+    var onClick = jest.fn(function (i) {
+      return i;
+    });
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      currentStep: 1,
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }, {
+        label: "second-step"
+      }]
+    })),
+        getByText = _render6.getByText;
+
+    var step1 = getByText("first-step");
+    var step2 = getByText("second-step");
+
+    _react2.fireEvent.click(step1);
+
+    _react2.fireEvent.click(step2);
+
+    _react2.fireEvent.click(step1);
+
+    expect(onClick).toHaveBeenCalledTimes(3); //Test the received value in the onClick function
+
+    expect(onClick).toHaveBeenNthCalledWith(1, 0);
+    expect(onClick).toHaveBeenNthCalledWith(2, 1);
+    expect(onClick).toHaveBeenNthCalledWith(3, 0);
+  });
+});