@ukhomeoffice/cop-react-form-renderer 1.0.0 → 2.0.0

package/dist/utils/FormPage/showFormPage.test.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _showFormPage = _interopRequireDefault(require("./showFormPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils', function () {
+  describe('FormPage', function () {
+    describe('showFormPage', function () {
+      var DATA = {
+        alpha: 'Alpha',
+        bravo: 'Bravo'
+      };
+      var HTML = {
+        type: 'html',
+        tagName: 'p',
+        content: 'Alpha'
+      };
+      var INSET_TEXT = {
+        type: 'inset-text',
+        content: 'Bravo'
+      };
+      var HEADING = {
+        type: 'heading',
+        size: 'm',
+        content: 'Charlie'
+      };
+      it('should NOT be shown when the page is null', function () {
+        expect((0, _showFormPage.default)(null, DATA)).toBeFalsy();
+      });
+      it('should NOT be shown when the page has a single show_when condition that is NOT matched', function () {
+        var PAGE = {
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
+      it('should NOT be shown when the page has a multiple show_when conditions and at least one is NOT matched', function () {
+        var PAGE = {
+          show_when: [{
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }, {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
+      it('SHOULD be shown when the page has a single show_when condition that IS matched', function () {
+        var PAGE = {
+          show_when: {
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('SHOULD be shown when the page has a multiple show_when conditions that are ALL matched', function () {
+        var PAGE = {
+          show_when: [{
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }, {
+            field: 'charlie',
+            op: '!=',
+            value: 'Charlie'
+          }]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('SHOULD be shown when the page has NO show_when conditions and NO editable components', function () {
+        var PAGE = {
+          components: [HTML, INSET_TEXT, HEADING]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('should NOT be shown when the page has NO show_when conditions and NO SHOWN editable components', function () {
+        var TEXT = {
+          type: 'text',
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        var RADIOS = {
+          type: 'radios',
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        var PAGE = {
+          components: [TEXT, RADIOS]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
+      it('SHOULD be shown when the page has NO show_when conditions and AT LEAST ONE SHOWN editable components', function () {
+        var TEXT = {
+          type: 'text',
+          show_when: {
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }
+        };
+        var RADIOS = {
+          type: 'radios',
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        var PAGE = {
+          components: [TEXT, RADIOS]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+    });
+  });
+});

package/dist/utils/Validate/validateComponent.js

@@ -7,10 +7,12 @@ exports.default = void 0;
 
 var _models = require("../../models");
 
-var _validateRequired = _interopRequireDefault(require("./validateRequired"));
+var _showComponent = _interopRequireDefault(require("../Component/showComponent"));
 
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
+var _validateRequired = _interopRequireDefault(require("./validateRequired"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -25,7 +27,7 @@ var validateComponent = function validateComponent(component, formData) {
   var error = undefined;
   var data = formData && _typeof(formData) === 'object' ? formData : {};
 
-  if (component) {
+  if (component && (0, _showComponent.default)(component, formData)) {
     var value = data[component.fieldId];
 
     if (component.required) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -13,10 +13,10 @@
     "storybook": "yarn storybook:start",
     "deploy-storybook": "storybook-to-ghpages -e storybook-static",
     "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
-    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/json dist/assets"
+    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "^0.7.0",
+    "@ukhomeoffice/cop-react-components": "1.1.2",
     "axios": "^0.21.1",
     "govuk-frontend": "^3.13.0",
     "web-vitals": "^1.0.1"
@@ -75,8 +75,12 @@
     ],
     "overrides": [
       {
-        "files": [ "**/*.stories.*" ],
-        "rules": { "import/no-anonymous-default-export": "off" }
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
       }
     ]
   },

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

@@ -1,361 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-
-var _models = require("../../models");
-
-var _getComponent = _interopRequireDefault(require("./getComponent"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-describe('utils', function () {
-  describe('Component', function () {
-    describe('get', function () {
-      it('should return null for an unknown type', function () {
-        expect((0, _getComponent.default)({
-          type: 'unknown'
-        })).toBeNull();
-      });
-      it('should return a p tag by default for an HTML component', function () {
-        var ID = 'test-id';
-        var CONTENT = 'HTML content';
-        var COMPONENT = {
-          type: _models.ComponentTypes.HTML,
-          content: CONTENT,
-          'data-testid': ID
-        };
-
-        var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render.container;
-
-        var p = (0, _react.getByTestId)(container, ID);
-        expect(p.innerHTML).toContain(CONTENT);
-        expect(p.tagName).toEqual('P');
-      });
-      it('should return an appropriate tag for an HTML component', function () {
-        var ID = 'test-id';
-        var TAG_NAME = 'hr';
-        var COMPONENT = {
-          type: _models.ComponentTypes.HTML,
-          tagName: TAG_NAME,
-          'data-testid': ID
-        };
-
-        var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render2.container;
-
-        var hr = (0, _react.getByTestId)(container, ID);
-        expect(hr.tagName).toEqual('HR');
-      });
-      it('should return an appropriately rendered heading component', function () {
-        var ID = 'test-id';
-        var SIZE = 'm';
-        var CONTENT = 'Heading text';
-        var COMPONENT = {
-          type: _models.ComponentTypes.HEADING,
-          size: SIZE,
-          content: CONTENT,
-          'data-testid': ID
-        };
-
-        var _render3 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render3.container;
-
-        var heading = (0, _react.getByTestId)(container, ID);
-        expect(heading.innerHTML).toContain(CONTENT);
-        expect(heading.tagName).toEqual('H2');
-        expect(heading.classList).toContain("govuk-heading-".concat(SIZE));
-      });
-      it('should return an appropriately rendered inset-text component', function () {
-        var ID = 'test-id';
-        var CONTENT = 'Heading text';
-        var COMPONENT = {
-          type: _models.ComponentTypes.INSET_TEXT,
-          content: CONTENT,
-          'data-testid': ID
-        };
-
-        var _render4 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render4.container;
-
-        var insetText = (0, _react.getByTestId)(container, ID);
-        expect(insetText.innerHTML).toContain(CONTENT);
-        expect(insetText.tagName).toEqual('DIV');
-        expect(insetText.classList).toContain('govuk-inset-text');
-      });
-      it('should return an appropriately rendered text component', function () {
-        var ID = 'test-id';
-        var FIELD_ID = 'field-id';
-        var LABEL = 'label';
-        var COMPONENT = {
-          type: _models.ComponentTypes.TEXT,
-          id: ID,
-          fieldId: FIELD_ID,
-          label: LABEL,
-          'data-testid': ID
-        };
-
-        var _render5 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render5.container;
-
-        var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
-            _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
-            formGroup = _getAllByTestId2[0],
-            input = _getAllByTestId2[1];
-
-        expect(formGroup.tagName).toEqual('DIV');
-        expect(formGroup.classList).toContain('govuk-form-group');
-        var label = undefined;
-        formGroup.childNodes.forEach(function (node) {
-          // Check if it's an element.
-          if (node instanceof Element && node.tagName === 'LABEL') {
-            label = node;
-          }
-        });
-        expect(label).toBeDefined();
-        expect(label.innerHTML).toContain(LABEL);
-        expect(label.getAttribute('for')).toEqual(ID);
-        expect(input.tagName).toEqual('INPUT');
-        expect(input.classList).toContain('govuk-input');
-        expect(input.id).toEqual(ID);
-      });
-      it('should return an appropriately rendered email component', function () {
-        var ID = 'test-id';
-        var FIELD_ID = 'field-id';
-        var LABEL = 'label';
-        var COMPONENT = {
-          type: _models.ComponentTypes.EMAIL,
-          id: ID,
-          fieldId: FIELD_ID,
-          label: LABEL,
-          'data-testid': ID
-        };
-
-        var _render6 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render6.container;
-
-        var _getAllByTestId3 = (0, _react.getAllByTestId)(container, ID),
-            _getAllByTestId4 = _slicedToArray(_getAllByTestId3, 2),
-            formGroup = _getAllByTestId4[0],
-            input = _getAllByTestId4[1];
-
-        expect(formGroup.tagName).toEqual('DIV');
-        expect(formGroup.classList).toContain('govuk-form-group');
-        var label = undefined;
-        formGroup.childNodes.forEach(function (node) {
-          // Check if it's an element.
-          if (node instanceof Element && node.tagName === 'LABEL') {
-            label = node;
-          }
-        });
-        expect(label).toBeDefined();
-        expect(label.innerHTML).toContain(LABEL);
-        expect(label.getAttribute('for')).toEqual(ID);
-        expect(input.tagName).toEqual('INPUT');
-        expect(input.classList).toContain('govuk-input');
-        expect(input.id).toEqual(ID);
-      });
-      it('should return an appropriately rendered phone-number component', function () {
-        var ID = 'test-id';
-        var FIELD_ID = 'field-id';
-        var LABEL = 'label';
-        var COMPONENT = {
-          type: _models.ComponentTypes.PHONE_NUMBER,
-          id: ID,
-          fieldId: FIELD_ID,
-          label: LABEL,
-          'data-testid': ID
-        };
-
-        var _render7 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render7.container;
-
-        var _getAllByTestId5 = (0, _react.getAllByTestId)(container, ID),
-            _getAllByTestId6 = _slicedToArray(_getAllByTestId5, 2),
-            formGroup = _getAllByTestId6[0],
-            input = _getAllByTestId6[1];
-
-        expect(formGroup.tagName).toEqual('DIV');
-        expect(formGroup.classList).toContain('govuk-form-group');
-        var label = undefined;
-        formGroup.childNodes.forEach(function (node) {
-          // Check if it's an element.
-          if (node instanceof Element && node.tagName === 'LABEL') {
-            label = node;
-          }
-        });
-        expect(label).toBeDefined();
-        expect(label.innerHTML).toContain(LABEL);
-        expect(label.getAttribute('for')).toEqual(ID);
-        expect(input.tagName).toEqual('INPUT');
-        expect(input.classList).toContain('govuk-input');
-        expect(input.id).toEqual(ID);
-      });
-      it('should return an appropriately rendered autocomplete component', function () {
-        var ID = 'test-id';
-        var FIELD_ID = 'field-id';
-        var LABEL = 'label';
-        var OPTIONS = [];
-        var COMPONENT = {
-          type: _models.ComponentTypes.AUTOCOMPLETE,
-          id: ID,
-          fieldId: FIELD_ID,
-          label: LABEL,
-          data: {
-            options: OPTIONS
-          },
-          'data-testid': ID
-        };
-
-        var _render8 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render8.container;
-
-        var formGroup = (0, _react.getByTestId)(container, ID);
-        expect(formGroup.tagName).toEqual('DIV');
-        expect(formGroup.classList).toContain('govuk-form-group');
-        var label = undefined;
-        var autocompleteWrapper = undefined;
-        var autocomplete = undefined;
-        var autocompleteInput = undefined;
-        formGroup.childNodes.forEach(function (node) {
-          // Check if it's an element.
-          if (node instanceof Element) {
-            if (node.tagName === 'LABEL') {
-              label = node;
-            } else if (node.classList.contains('hods-autocomplete__outer-wrapper')) {
-              autocompleteWrapper = node;
-              var autocompleteInner = node.childNodes[0];
-
-              if (autocompleteInner instanceof Element) {
-                autocomplete = autocompleteInner;
-                autocomplete.childNodes.forEach(function (grandchild) {
-                  if (grandchild instanceof Element) {
-                    if (grandchild.tagName === 'INPUT') {
-                      autocompleteInput = grandchild;
-                    }
-                  }
-                });
-              }
-
-              ;
-            }
-          }
-        });
-        expect(label).toBeDefined();
-        expect(label.innerHTML).toContain(LABEL);
-        expect(label.getAttribute('for')).toEqual(ID);
-        expect(autocompleteWrapper).toBeDefined();
-        expect(autocompleteWrapper.tagName).toEqual('DIV');
-        expect(autocomplete).toBeDefined();
-        expect(autocomplete.tagName).toEqual('DIV');
-        expect(autocompleteInput).toBeDefined();
-        expect(autocompleteInput.id).toEqual(ID);
-      });
-      it('should return an appropriately rendered radios component', function () {
-        var ID = 'test-id';
-        var FIELD_ID = 'field-id';
-        var LABEL = 'label';
-        var OPTIONS = [{
-          value: 'a',
-          label: 'Alpha'
-        }];
-        var COMPONENT = {
-          type: _models.ComponentTypes.RADIOS,
-          id: ID,
-          fieldId: FIELD_ID,
-          label: LABEL,
-          data: {
-            options: OPTIONS
-          },
-          'data-testid': ID
-        };
-
-        var _render9 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-            container = _render9.container;
-
-        var _getAllByTestId7 = (0, _react.getAllByTestId)(container, ID),
-            _getAllByTestId8 = _slicedToArray(_getAllByTestId7, 2),
-            formGroup = _getAllByTestId8[0],
-            radios = _getAllByTestId8[1];
-
-        expect(formGroup.tagName).toEqual('DIV');
-        expect(formGroup.classList).toContain('govuk-form-group');
-        var label = undefined;
-        formGroup.childNodes.forEach(function (node) {
-          // Check if it's an element.
-          if (node instanceof Element) {
-            if (node.tagName === 'LABEL') {
-              label = node;
-            }
-          }
-        });
-        expect(label).toBeDefined();
-        expect(label.innerHTML).toContain(LABEL);
-        expect(label.getAttribute('for')).toEqual(ID);
-        expect(radios.tagName).toEqual('DIV');
-        expect(radios.classList).toContain('govuk-radios');
-        expect(radios.childNodes.length).toEqual(OPTIONS.length);
-        var radioItems = [];
-        OPTIONS.forEach(function (_, index) {
-          var radio = radios.childNodes[index];
-          expect(radio instanceof Element).toBeTruthy();
-
-          if (radio instanceof Element) {
-            radioItems.push(radio);
-          }
-        });
-        expect(radioItems.length).toEqual(OPTIONS.length);
-        OPTIONS.forEach(function (option, index) {
-          var radio = radioItems[index];
-          expect(radio.tagName).toEqual('DIV');
-          expect(radio.classList).toContain('govuk-radios__item');
-          expect(radio.innerHTML).toContain(option.label);
-        });
-      });
-    });
-    it('should return an appropriately rendered textarea component', function () {
-      var ID = 'test-id';
-      var FIELD_ID = 'field-id';
-      var LABEL = 'label';
-      var ROWS = 13;
-      var COMPONENT = {
-        type: _models.ComponentTypes.TEXT_AREA,
-        id: ID,
-        fieldId: FIELD_ID,
-        label: LABEL,
-        rows: ROWS,
-        'data-testid': ID
-      };
-
-      var _render10 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
-          container = _render10.container;
-
-      var _getAllByTestId9 = (0, _react.getAllByTestId)(container, ID),
-          _getAllByTestId10 = _slicedToArray(_getAllByTestId9, 2),
-          formGroup = _getAllByTestId10[0],
-          textarea = _getAllByTestId10[1];
-
-      expect(formGroup.tagName).toEqual('DIV');
-      expect(formGroup.classList).toContain('govuk-form-group');
-      var label = formGroup.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);
-    });
-  });
-});