@ukhomeoffice/cop-react-form-renderer 5.0.0-alpha → 5.0.0

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.test.js

@@ -0,0 +1,486 @@
+"use strict";
+
+var _models = require("../../models");
+var _setupTests = require("../../setupTests");
+var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
+  var OUTER_ID = 'a';
+  var INNER_ID = 'b';
+  it('should get an appropriate row for a container with a single readonly text component', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Bravo'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(1);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[index].fieldId,
+        key: CONTAINER.components[index].label,
+        action: null,
+        component: COMPONENT,
+        value: 'Bravo'
+      });
+    });
+  });
+  it('should get appropriate rows for a container with two editable text components', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Alpha Charlie',
+        b: 'Bravo Charlie'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT_A = {
+      type: 'text',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COMPONENT_B = {
+      type: 'text',
+      id: 'b',
+      fieldId: 'b',
+      label: 'Bravo'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT_A, COMPONENT_B],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(2);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[index].fieldId,
+        key: CONTAINER.components[index].label,
+        component: CONTAINER.components[index],
+        value: "".concat(CONTAINER.components[index].label, " Charlie")
+      });
+      (0, _setupTests.expectObjectLike)(row.action, {
+        onAction: ON_ACTION
+      });
+    });
+  });
+  it("should filter out any components that shouldn't be shown", function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Alpha Charlie',
+        b: 'Bravo Charlie'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT_A = {
+      type: 'text',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COMPONENT_B = {
+      type: 'text',
+      id: 'b',
+      fieldId: 'b',
+      label: 'Bravo'
+    };
+    var COMPONENT_C = {
+      type: 'heading',
+      content: 'Heading component'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT_A, COMPONENT_B, COMPONENT_C],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(2);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[index].fieldId,
+        key: CONTAINER.components[index].label,
+        component: CONTAINER.components[index],
+        value: "".concat(CONTAINER.components[index].label, " Charlie")
+      });
+      (0, _setupTests.expectObjectLike)(row.action, {
+        onAction: ON_ACTION
+      });
+    });
+  });
+  it('should get an appropriate row for a container with a single readonly text component inside a nested container', function () {
+    var FORM_DATA = {
+      container: {
+        nested: {
+          a: 'Bravo'
+        }
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var NESTED_CONTAINER = {
+      id: 'nested',
+      fieldId: 'nested',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT],
+      value: FORM_DATA.container.nested,
+      formData: FORM_DATA
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [NESTED_CONTAINER],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(1);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: NESTED_CONTAINER.components[index].fieldId,
+        key: NESTED_CONTAINER.components[index].label,
+        action: null,
+        component: COMPONENT,
+        value: 'Bravo'
+      });
+    });
+  });
+  it('should get an appropriate row for a container with a single readonly text component inside a nested container but no formData', function () {
+    var FORM_DATA = undefined;
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var NESTED_CONTAINER = {
+      id: 'nested',
+      fieldId: 'nested',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT]
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [NESTED_CONTAINER]
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, undefined, ON_ACTION);
+    expect(ROWS.length).toEqual(1);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: NESTED_CONTAINER.components[index].fieldId,
+        key: NESTED_CONTAINER.components[index].label,
+        action: null,
+        component: COMPONENT,
+        value: ''
+      });
+    });
+  });
+  it('should get an appropriate row for a collection with a single text component inside a container', function () {
+    var FORM_DATA = _defineProperty({}, OUTER_ID, [_defineProperty({}, INNER_ID, 'Bravo'), _defineProperty({}, INNER_ID, 'Charlie')]);
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {},
+      collection: 'collectionName'
+    };
+    var COLLECTION_COMPONENT = {
+      type: 'collection',
+      id: OUTER_ID,
+      fieldId: OUTER_ID,
+      label: 'Alpha',
+      item: [{
+        id: INNER_ID,
+        fieldId: INNER_ID,
+        label: INNER_ID,
+        type: 'text'
+      }]
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COLLECTION_COMPONENT],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA, function () {});
+    expect(ROWS.length).toEqual(4);
+    var checkTitleRow = function checkTitleRow(index, row) {
+      expect(row).toEqual({
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[0].fieldId,
+        key: "Item ".concat(index + 1),
+        action: null,
+        full_path: "".concat(OUTER_ID, "[").concat(index, "]"),
+        type: 'title'
+      });
+    };
+    var checkValueRow = function checkValueRow(index, row, value) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: INNER_ID,
+        key: INNER_ID,
+        id: INNER_ID,
+        component: {
+          fieldId: INNER_ID,
+          full_path: "".concat(OUTER_ID, "[").concat(index, "].").concat(INNER_ID),
+          id: INNER_ID,
+          label: INNER_ID,
+          type: 'text'
+        },
+        value: value,
+        full_path: "".concat(OUTER_ID, "[").concat(index, "].").concat(INNER_ID)
+      });
+    };
+    checkTitleRow(0, ROWS[0]);
+    checkValueRow(0, ROWS[1], 'Bravo');
+    checkTitleRow(1, ROWS[2]);
+    checkValueRow(1, ROWS[3], 'Charlie');
+  });
+  it('should conditionally show an appropriate row for a single text component inside a container belonging to a partial-collection', function () {
+    var FORM_DATA = {
+      collectionName: [{
+        container: _defineProperty({}, INNER_ID, 'Bravo'),
+        other_data: true
+      }, {
+        container: _defineProperty({}, INNER_ID, 'Charlie'),
+        other_data: false
+      }]
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {},
+      collection: 'collectionName'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [{
+        id: INNER_ID,
+        fieldId: INNER_ID,
+        label: INNER_ID,
+        type: 'text'
+      }],
+      formData: FORM_DATA,
+      show_when: {
+        field: 'other_data',
+        op: '=',
+        value: true
+      }
+    };
+    expect((0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.collectionName[0], function () {}).length).toEqual(1);
+    expect((0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.collectionName[1], function () {})).toBeFalsy();
+  });
+  it('should get the appropriate number for rows components with nested components inside a container', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'B',
+        nested: 'Bravo'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var NESTED_COMPONENT = {
+      id: 'nested',
+      fieldId: 'nested',
+      type: _models.ComponentTypes.TEXT
+    };
+    var COMPONENT = {
+      type: 'radios',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha',
+      data: {
+        options: [{
+          value: 'B',
+          label: 'B',
+          nested: [NESTED_COMPONENT]
+        }, {
+          value: 'A',
+          label: 'A'
+        }]
+      }
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(2);
+  });
+  it('should ignore the result of the override function if it returns nullish', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Alpha Charlie',
+        b: 'Bravo Charlie'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT_A = {
+      type: 'text',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COMPONENT_B = {
+      type: 'text',
+      id: 'b',
+      fieldId: 'b',
+      label: 'Bravo'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT_A, COMPONENT_B],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION, function () {
+      return null;
+    });
+    expect(ROWS.length).toEqual(2);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[index].fieldId,
+        key: CONTAINER.components[index].label,
+        component: CONTAINER.components[index],
+        value: "".concat(CONTAINER.components[index].label, " Charlie")
+      });
+      (0, _setupTests.expectObjectLike)(row.action, {
+        onAction: ON_ACTION
+      });
+    });
+  });
+  it('should use rows produced by the override function if provided', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Alpha Charlie',
+        b: 'Bravo Charlie'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT_A = {
+      type: 'text',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COMPONENT_B = {
+      type: 'text',
+      id: 'b',
+      fieldId: 'b',
+      label: 'Bravo'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT_A, COMPONENT_B],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    // eslint-disable-next-line arrow-body-style
+    var OVERRIDE = function OVERRIDE(page, comp) {
+      // This will be called for each component in the container,
+      // returning a custom row object.
+      return {
+        key: "CustomRowFor".concat(comp.label)
+      };
+    };
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION, OVERRIDE);
+    expect(ROWS.length).toEqual(2);
+    expect(ROWS).toEqual([{
+      key: 'CustomRowForAlpha'
+    }, {
+      key: 'CustomRowForBravo'
+    }]);
+  });
+});

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -21,24 +21,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * @param {object} page The page to show components for.
  * @param {Function} onAction A function to invoke if the change link on any row is clicked.
+ * @param {Function} fnOverride An optional override for getting the CYA rows for each component.
  *
  * @returns An array of configuration objects for Check your answers rows.
  */
 var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
+  var fnOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   if (_FormPage.default.showCYA(page, page.formData)) {
     var _page$groups;
     if (page.collection) {
-      return (0, _getCYARowsForCollectionPage.default)(page, onAction);
+      return (0, _getCYARowsForCollectionPage.default)(page, onAction, fnOverride);
     }
     var allComponents = (0, _elevateNestedComponents.default)(page.components, page.formData);
     var rows = allComponents.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
+      if (typeof fnOverride === 'function') {
+        var overrideRows = fnOverride(page, component, onAction);
+        if (overrideRows) {
+          return overrideRows;
+        }
+      }
       switch (component.type) {
         case _models.ComponentTypes.CONTAINER:
-          return (0, _getCYARowsForContainer.default)(page, component, page.formData[component.fieldId], onAction);
+          return (0, _getCYARowsForContainer.default)(page, component, page.formData[component.fieldId], onAction, fnOverride);
         case _models.ComponentTypes.COLLECTION:
-          return (0, _getCYARowsForCollection.default)(page, component, page.formData[component.fieldId], onAction);
+          return (0, _getCYARowsForCollection.default)(page, component, page.formData[component.fieldId], onAction, fnOverride);
         default:
           return (0, _getCYARow.default)(page, component, onAction);
       }