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

package/dist/components/FormComponent/Collection.test.js

@@ -1,381 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _testUtils = require("react-dom/test-utils");
-
-var _models = require("../../models");
-
-var _setupTests = require("../../setupTests");
-
-var _utils = _interopRequireDefault(require("../../utils"));
-
-var _Collection = require("./Collection");
-
-var _Container = require("./Container");
-
-var _FormComponent = _interopRequireDefault(require("./FormComponent"));
-
-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; }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-describe('components.FormComponent.Collection', function () {
-  var ID = 'collection';
-  var TEXT_ID = 'text';
-  var TEXT_VALUE = 'alpha';
-
-  var FORM_DATA = _defineProperty({}, ID, [_defineProperty({
-    id: '1'
-  }, TEXT_ID, TEXT_VALUE)]);
-
-  var TEXT_COMPONENT = {
-    id: TEXT_ID,
-    fieldId: TEXT_ID,
-    type: _models.ComponentTypes.TEXT,
-    label: 'Text component',
-    hint: 'Text hint'
-  };
-  it('should render a collection component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var COLLECTION, _renderWithValidation, container, c, item, _item$childNodes, title, itemContainer, formGroup, label, hint, input;
-
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            COLLECTION = {
-              id: ID,
-              fieldId: ID,
-              type: _models.ComponentTypes.COLLECTION,
-              item: [TEXT_COMPONENT]
-            };
-            _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
-              component: COLLECTION,
-              value: FORM_DATA[ID],
-              formData: FORM_DATA
-            })), container = _renderWithValidation.container; // Check the container itself.
-
-            c = container.childNodes[0];
-            expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now check the single text component within it.
-
-            item = c.childNodes[0];
-            expect(item.tagName).toEqual('DIV');
-            expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
-            _item$childNodes = _slicedToArray(item.childNodes, 2), title = _item$childNodes[0], itemContainer = _item$childNodes[1];
-            expect(title.tagName).toEqual('LABEL');
-            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
-            expect(itemContainer.tagName).toEqual('DIV');
-            expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
-            formGroup = itemContainer.childNodes[0];
-            expect(formGroup.tagName).toEqual('DIV');
-            expect(formGroup.classList).toContain('govuk-form-group');
-            label = formGroup.childNodes[0];
-            expect(label.tagName).toEqual('LABEL');
-            expect(label.classList).toContain('govuk-label');
-            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
-            expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-            hint = formGroup.childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
-            expect(hint.classList).toContain('govuk-hint');
-            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
-            input = formGroup.childNodes[2];
-            expect(input.tagName).toEqual('INPUT');
-            expect(input.classList).toContain('govuk-input');
-            expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-            expect(input.value).toEqual(TEXT_VALUE);
-
-          case 30:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  })));
-  it('should handle a change to a component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-    var ON_CHANGE_EVENTS, ON_CHANGE, COLLECTION, _renderWithValidation2, container, c, item, formGroup, input, NEW_TEXT_VALUE, EVENT;
-
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            ON_CHANGE_EVENTS = [];
-
-            ON_CHANGE = function ON_CHANGE(e) {
-              ON_CHANGE_EVENTS.push(e);
-            };
-
-            COLLECTION = {
-              id: ID,
-              fieldId: ID,
-              type: _models.ComponentTypes.COLLECTION,
-              item: [{
-                id: TEXT_ID,
-                fieldId: TEXT_ID,
-                type: _models.ComponentTypes.TEXT,
-                label: 'Text component'
-              }]
-            };
-            _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
-              component: COLLECTION,
-              value: FORM_DATA[ID],
-              formData: FORM_DATA,
-              onChange: ON_CHANGE
-            })), container = _renderWithValidation2.container; // Get hold of the text input.
-
-            c = container.childNodes[0];
-            item = c.childNodes[0];
-            formGroup = item.childNodes[1].childNodes[0];
-            input = formGroup.childNodes[2];
-            NEW_TEXT_VALUE = 'bravo';
-            EVENT = {
-              target: {
-                name: TEXT_ID,
-                value: NEW_TEXT_VALUE
-              }
-            };
-
-            _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
-
-
-            expect(ON_CHANGE_EVENTS.length).toEqual(1);
-            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
-            expect(ON_CHANGE_EVENTS[0].target.value[0][TEXT_ID]).toEqual(NEW_TEXT_VALUE);
-
-          case 14:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-  it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-    var COLLECTION, _renderWithValidation3, container, c, buttonGroup, button;
-
-    return regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            COLLECTION = {
-              id: ID,
-              fieldId: ID,
-              type: _models.ComponentTypes.COLLECTION,
-              item: [TEXT_COMPONENT]
-            };
-            _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
-              component: COLLECTION
-            })), container = _renderWithValidation3.container; // Check the container itself.
-
-            c = container.childNodes[0];
-            expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
-
-            expect(c.childNodes.length).toEqual(1);
-            buttonGroup = c.childNodes[0];
-            expect(buttonGroup.tagName).toEqual('DIV');
-            expect(buttonGroup.classList).toContain('hods-button-group');
-            button = buttonGroup.childNodes[0];
-            expect(button.tagName).toEqual('BUTTON');
-            expect(button.classList).toContain('hods-button');
-            expect(button.classList).toContain('hods-button--secondary');
-            expect(button.textContent).toContain(_models.CollectionLabels.add);
-
-          case 14:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  })));
-  it('should handle a collection label appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-    var LABEL, COLLECTION, _renderWithValidation4, container, c, _c$childNodes, title, buttonGroup, button;
-
-    return regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            LABEL = 'Alpha Collection';
-            COLLECTION = {
-              id: ID,
-              fieldId: ID,
-              type: _models.ComponentTypes.COLLECTION,
-              item: [TEXT_COMPONENT],
-              label: LABEL
-            };
-            _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
-              component: COLLECTION
-            })), container = _renderWithValidation4.container; // Check the container itself.
-
-            c = container.childNodes[0];
-            expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
-
-            expect(c.childNodes.length).toEqual(2);
-            _c$childNodes = _slicedToArray(c.childNodes, 2), title = _c$childNodes[0], buttonGroup = _c$childNodes[1];
-            expect(title.tagName).toEqual('LABEL');
-            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__title"));
-            expect(title.getAttribute('for')).toEqual(ID);
-            expect(title.textContent).toContain(LABEL);
-            expect(buttonGroup.tagName).toEqual('DIV');
-            expect(buttonGroup.classList).toContain('hods-button-group');
-            button = buttonGroup.childNodes[0];
-            expect(button.tagName).toEqual('BUTTON');
-            expect(button.classList).toContain('hods-button');
-            expect(button.classList).toContain('hods-button--secondary');
-            expect(button.textContent).toContain(_models.CollectionLabels.add);
-
-          case 19:
-          case "end":
-            return _context4.stop();
-        }
-      }
-    }, _callee4);
-  })));
-  it('should handle the addition and removal of an item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-    var COLLECTION, container, c, addButton, item, label, removeButton;
-    return regeneratorRuntime.wrap(function _callee6$(_context6) {
-      while (1) {
-        switch (_context6.prev = _context6.next) {
-          case 0:
-            COLLECTION = {
-              id: ID,
-              fieldId: ID,
-              type: _models.ComponentTypes.COLLECTION,
-              item: [TEXT_COMPONENT]
-            };
-            container = document.createElement('div');
-            document.body.appendChild(container);
-            _context6.next = 5;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-              return regeneratorRuntime.wrap(function _callee5$(_context5) {
-                while (1) {
-                  switch (_context5.prev = _context5.next) {
-                    case 0:
-                      (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
-                        component: COLLECTION
-                      }), container);
-
-                    case 1:
-                    case "end":
-                      return _context5.stop();
-                  }
-                }
-              }, _callee5);
-            })));
-
-          case 5:
-            // Check the container itself.
-            c = container.childNodes[0];
-            expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
-
-            expect(c.childNodes.length).toEqual(1); // Get hold of that "Add another" button and click it.
-
-            addButton = c.childNodes[0].childNodes[0];
-
-            _react.fireEvent.click(addButton, {}); // Make sure an item has been added.
-
-
-            expect(c.childNodes.length).toEqual(2);
-            item = c.childNodes[0];
-            label = item.childNodes[0];
-            expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
-              index: 1
-            })); // Get hold of the newly-add item's "Remove" button.
-
-            removeButton = label.childNodes[1];
-            expect(removeButton.tagName).toEqual('BUTTON');
-            expect(removeButton.classList).toContain('hods-button--secondary');
-            expect(removeButton.textContent).toContain(_models.CollectionLabels.remove); // Click the "Remove" button
-
-            _react.fireEvent.click(removeButton, {}); // Make sure the item has been removed.
-
-
-            expect(c.childNodes.length).toEqual(1);
-            expect(c.childNodes[0].classList).toContain('hods-button-group');
-
-          case 22:
-          case "end":
-            return _context6.stop();
-        }
-      }
-    }, _callee6);
-  })));
-  it('should appropriately make child components of items readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
-    var COLLECTION, _renderWithValidation5, container, c, item, _item$childNodes2, title, itemContainer, formGroup, label, hint, input;
-
-    return regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            COLLECTION = {
-              id: ID,
-              fieldId: ID,
-              type: _models.ComponentTypes.COLLECTION,
-              item: [TEXT_COMPONENT],
-              readonly: true
-            };
-            _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
-              component: COLLECTION,
-              value: FORM_DATA[ID],
-              formData: FORM_DATA
-            })), container = _renderWithValidation5.container; // Check the container itself.
-
-            c = container.childNodes[0];
-            expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now check the single text component within it.
-
-            item = c.childNodes[0];
-            expect(item.tagName).toEqual('DIV');
-            expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
-            _item$childNodes2 = _slicedToArray(item.childNodes, 2), title = _item$childNodes2[0], itemContainer = _item$childNodes2[1];
-            expect(title.tagName).toEqual('LABEL');
-            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
-            expect(itemContainer.tagName).toEqual('DIV');
-            expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
-            formGroup = itemContainer.childNodes[0];
-            expect(formGroup.tagName).toEqual('DIV');
-            expect(formGroup.classList).toContain('govuk-form-group');
-            label = formGroup.childNodes[0];
-            expect(label.tagName).toEqual('LABEL');
-            expect(label.classList).toContain('govuk-label');
-            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
-            expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-            hint = formGroup.childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
-            expect(hint.classList).toContain('govuk-hint');
-            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
-            input = formGroup.childNodes[2];
-            expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
-
-            expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
-
-            expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-            expect(input.textContent).toEqual(TEXT_VALUE);
-
-          case 30:
-          case "end":
-            return _context7.stop();
-        }
-      }
-    }, _callee7);
-  })));
-});