@ukhomeoffice/cop-react-form-renderer 4.43.0 → 4.44.0-alpha

package/dist/utils/Component/getComponentTests/getComponent.textarea.test.js

@@ -73,4 +73,61 @@ describe('utils.Component.get', function () {
       value: 'Some text'
     });
   });
+  it('should return an appropriately rendered textarea component with a character count', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var ROWS = 13;
+    var ON_CHANGE_CALLS = [];
+
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+
+    var COMPONENT = {
+      type: _models.ComponentTypes.TEXT_AREA,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      rows: ROWS,
+      onChange: ON_CHANGE,
+      'data-testid': ID,
+      showCharacterCount: true
+    };
+
+    var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render2.container;
+
+    var _getAllByTestId3 = (0, _react.getAllByTestId)(container, ID),
+        _getAllByTestId4 = _slicedToArray(_getAllByTestId3, 2),
+        formGroup = _getAllByTestId4[0],
+        textarea = _getAllByTestId4[1];
+
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
+    expect(label.innerHTML).toContain(LABEL);
+    expect(label.getAttribute('for')).toEqual(ID);
+    expect(textarea.tagName).toEqual('TEXTAREA');
+    expect(textarea.classList).toContain('govuk-textarea');
+    expect(textarea.getAttribute('rows')).toEqual("".concat(ROWS));
+    expect(textarea.id).toEqual(ID);
+
+    _react.fireEvent.change(textarea, {
+      target: {
+        name: FIELD_ID,
+        value: 'Some text'
+      }
+    });
+
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(ON_CHANGE_CALLS[0]).toMatchObject({
+      name: FIELD_ID,
+      value: 'Some text'
+    });
+    var characterCount = formGroup.childNodes[0].childNodes[2];
+    expect(characterCount.tagName).toEqual('DIV');
+    expect(characterCount.classList).toContain('govuk-hint');
+    expect(characterCount.textContent).toEqual('You have 1000 characters remaining');
+  });
 });

package/dist/utils/Validate/validateComponent.js

@@ -25,6 +25,8 @@ var _validateRegex = _interopRequireDefault(require("./validateRegex"));
 
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
+var _validateTextarea = _interopRequireDefault(require("./validateTextarea"));
+
 var _validateTime = _interopRequireDefault(require("./validateTime"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -102,6 +104,10 @@ var validateComponent = function validateComponent(component, outerData, formDat
         error = (0, _validateMultifile.default)(value, component.custom_errors);
         break;
 
+      case _models.ComponentTypes.TEXT_AREA:
+        error = (0, _validateTextarea.default)(component.label, value, component.showCharacterCount, component.custom_errors, component.maxLength);
+        break;
+
       default:
         break;
     }

package/dist/utils/Validate/validateTextarea.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Validates a text area when showCharacterCount property has been set.
+ * 
+ * @param {string} label The label to use in any error message.
+ * @param {*} value The value to validate.
+ * @param {string} showCharacterCount The flag to enable character count validation.
+ * @param {array} customErrors An array of custom errors for the component.
+ * @param {number} maxLength The maximum allowable number of characters (by default, this is 1000 characters).
+ * @returns An error if the value exceeds the maximum allowable number of characters.
+ */
+var validateTextarea = function validateTextarea(label, value, showCharacterCount, customErrors) {
+  var maxLength = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1000;
+
+  if (!showCharacterCount) {
+    return undefined;
+  }
+
+  var hasError = value.length > maxLength;
+
+  if (hasError) {
+    if (Array.isArray(customErrors)) {
+      var result = customErrors.filter(function (error) {
+        return error.type === 'length';
+      });
+
+      if (result && result.length > 0 && result[0].message) {
+        return result[0].message;
+      }
+    }
+
+    return "".concat(label, " must be ").concat(maxLength, " characters or less");
+  }
+
+  return undefined;
+};
+
+var _default = validateTextarea;
+exports.default = _default;

package/dist/utils/Validate/validateTextarea.test.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _validateTextarea = _interopRequireDefault(require("./validateTextarea"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils', function () {
+  describe('Validate', function () {
+    describe('textarea', function () {
+      var MAX_LENGTH = 10;
+      var LABEL = 'This is a custom label';
+      var CUSTOM_ERROR = "The value must be ".concat(MAX_LENGTH, " characters or less");
+      var ERROR_MSG = "".concat(LABEL, " must be ").concat(MAX_LENGTH, " characters or less");
+      var CUSTOM_ERRORS = [{
+        type: 'length',
+        message: CUSTOM_ERROR
+      }];
+      it('should return no error when the character count flag is disabled', function () {
+        var VALUE = 'ALPHA BRAVO';
+        expect((0, _validateTextarea.default)(LABEL, VALUE, false, CUSTOM_ERRORS, MAX_LENGTH)).toBeUndefined();
+      });
+      it('should return no error when value length has not exceeded the maximum allowable character length', function () {
+        var VALUE = 'ALPHA BRA';
+        expect((0, _validateTextarea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, MAX_LENGTH)).toBeUndefined();
+      });
+      it('should return no error when value length has not exceeded the default maximum allowable character length', function () {
+        var VALUE = 'ALPHA BRAVO';
+        expect((0, _validateTextarea.default)(LABEL, VALUE, true, undefined)).toBeUndefined();
+      });
+      it('should return an error when value length has exceeded the maximum allowable character length', function () {
+        var VALUE = 'ALPHA BRAVO';
+        var error = (0, _validateTextarea.default)(LABEL, VALUE, true, undefined, MAX_LENGTH);
+        expect(error).toBeDefined();
+        expect(error).toEqual(ERROR_MSG);
+      });
+      it('should return a custom error when one is provided', function () {
+        var VALUE = 'ALPHA BRAVO CHARLIE';
+        var error = (0, _validateTextarea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, MAX_LENGTH);
+        expect(error).toBeDefined();
+        expect(error).toEqual(CUSTOM_ERROR);
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.43.0",
+  "version": "4.44.0-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "2.9.1",
+    "@ukhomeoffice/cop-react-components": "2.10.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",