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

package/textarea/Textarea.test.js

@@ -1,43 +1,37 @@
 "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 _Textarea = _interopRequireDefault(require("./Textarea"));
-
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
 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;
-
+        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;
-
+        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;
-
+        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();
@@ -46,21 +40,19 @@ describe("Textarea component tests", function () {
   });
   test("Renders with correct placeholder", function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      placeholder: "Placeholder"
-    })),
-        getByRole = _render4.getByRole;
-
+        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;
-
+        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();
@@ -70,86 +62,115 @@ describe("Textarea component tests", function () {
   });
   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;
-
+        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 () {
+  test("Renders with correct accessibility attributes", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label"
-    })),
-        getByLabelText = _render7.getByLabelText;
-
+        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("Renders with correct initial value", function () {
     var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label",
-      placeholder: "Placeholder",
-      defaultValue: "Example text"
-    })),
-        getByLabelText = _render8.getByLabelText;
-
+        label: "Example label",
+        placeholder: "Placeholder",
+        defaultValue: "Example text"
+      })),
+      getByLabelText = _render8.getByLabelText;
     var textarea = getByLabelText("Example label");
     expect(textarea.value).toBe("Example text");
   });
-  test("Disabled textarea renders with correct aria and can not be modified", function () {
+  test("Disabled textarea can not be modified", function () {
     var onChange = jest.fn();
-
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label",
-      onChange: onChange,
-      disabled: true
-    })),
-        getByLabelText = _render9.getByLabelText;
-
+        label: "Example label",
+        onChange: onChange,
+        disabled: true
+      })),
+      getByLabelText = _render9.getByLabelText;
+    var textarea = getByLabelText("Example label");
+    _userEvent["default"].type(textarea, "Test");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only textarea does not trigger onChange function", function () {
+    var onChange = jest.fn();
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        onChange: onChange,
+        readOnly: true
+      })),
+      getByLabelText = _render10.getByLabelText;
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("true");
-
     _userEvent["default"].type(textarea, "Test");
-
     expect(onChange).not.toHaveBeenCalled();
   });
+  test("Read-only textarea sends its value on submit", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var handlerOnSubmit, _render11, getByText, submit;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.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: "Comments"
+            });
+          });
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            name: "data",
+            defaultValue: "Comments",
+            readOnly: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render11.getByText;
+          submit = getByText("Submit");
+          _context.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+          expect(handlerOnSubmit).toHaveBeenCalled();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
   test("Not optional constraint (onBlur)", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label",
-      placeholder: "Placeholder",
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByLabelText = _render10.getByLabelText;
-
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        placeholder: "Placeholder",
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByLabelText = _render12.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"
@@ -157,31 +178,24 @@ describe("Textarea component tests", function () {
   });
   test("Not optional constraint (onChange)", function () {
     var onChange = jest.fn();
-
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label",
-      placeholder: "Placeholder",
-      onChange: onChange
-    })),
-        getByLabelText = _render11.getByLabelText;
-
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        placeholder: "Placeholder",
+        onChange: onChange
+      })),
+      getByLabelText = _render13.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"
     });
-
     _userEvent["default"].clear(textarea);
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "",
@@ -191,57 +205,46 @@ describe("Textarea component tests", function () {
   test("Pattern 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"
-      },
-      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
-    })),
-        getByLabelText = _render12.getByLabelText;
-
+    var _render14 = (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 = _render14.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&"
     });
-
     _react2.fireEvent.blur(textarea);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "pattern4&"
@@ -250,58 +253,47 @@ describe("Textarea component tests", function () {
   test("Length constraint", 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"
-      },
-      minLength: 5,
-      maxLength: 10
-    })),
-        getByLabelText = _render13.getByLabelText;
-
+    var _render15 = (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 = _render15.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"
     });
-
     _react2.fireEvent.blur(textarea);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "length"
@@ -310,77 +302,63 @@ describe("Textarea component tests", function () {
   test("Pattern and length constraints", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render14 = (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 = _render14.getByLabelText;
-
+    var _render16 = (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 = _render16.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&"
     });
-
     _react2.fireEvent.blur(textarea);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "tests4&"
@@ -388,23 +366,18 @@ describe("Textarea component tests", function () {
   });
   test("onBlur function is called correctly", function () {
     var onBlur = jest.fn();
-
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label",
-      onBlur: onBlur
-    })),
-        getByLabelText = _render15.getByLabelText;
-
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        onBlur: onBlur
+      })),
+      getByLabelText = _render17.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"
@@ -412,22 +385,18 @@ describe("Textarea component tests", function () {
   });
   test("onChange function is called correctly", function () {
     var onChange = jest.fn();
-
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
-      label: "Example label",
-      value: "Test value",
-      onChange: onChange
-    })),
-        getByLabelText = _render16.getByLabelText;
-
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        value: "Test value",
+        onChange: onChange
+      })),
+      getByLabelText = _render18.getByLabelText;
     var textarea = getByLabelText("Example label");
-
     _react2.fireEvent.change(textarea, {
       target: {
         value: "Controlled test"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "Controlled test"

package/textarea/types.d.ts

@@ -1,11 +1,11 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Props = {
+type Props = {
     /**
      * Text to be placed above the textarea.
      */
@@ -34,6 +34,10 @@ declare type Props = {
      * If true, the component will be disabled.
      */
     disabled?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
     /**
      * If true, the textarea will be optional, showing '(Optional)'
      * next to the label. Otherwise, the field will be considered required
@@ -92,7 +96,7 @@ declare type Props = {
      */
     pattern?: string;
     /**
-     * Specifies the minimun length allowed by the textarea.
+     * Specifies the minimum length allowed by the textarea.
      * This will be checked both when the textarea loses the
      * focus and while typing within it. If the string entered does not
      * comply the minimum length, the onBlur and onChange functions will be called
@@ -133,5 +137,5 @@ declare type Props = {
 /**
  * Reference to the component.
  */
-export declare type RefType = HTMLDivElement;
+export type RefType = HTMLDivElement;
 export default Props;