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

package/dist/components/CollectionPage/CollectionPage.test.js

@@ -1,428 +0,0 @@
-"use strict";
-
-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); }
-
-var _react = require("@testing-library/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _models = require("../../models");
-
-var _setupTests = require("../../setupTests");
-
-var _ActionButton = require("../PageActions/ActionButton");
-
-var _CollectionPage = _interopRequireWildcard(require("./CollectionPage"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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.CollectionPage', function () {
-  describe('CollectionPage', function () {
-    var _formData, _formData2, _formData3;
-
-    var TEXT = {
-      id: 'text',
-      fieldId: 'text',
-      type: 'text',
-      label: 'Text component',
-      hint: 'Text hint'
-    }; // eslint-disable-next-line no-template-curly-in-string
-
-    var TEXT_WITH_EXPRESSION = {
-      id: 'text1',
-      fieldId: 'text1',
-      type: 'text',
-      label: 'Email to ${wrapper.email}',
-      hint: 'Text hint ${currentUser.givenName}'
-    }; // eslint-disable-next-line no-template-curly-in-string
-
-    var AUTO_WITH_EXPRESSION = {
-      id: 'text2',
-      fieldId: 'text2',
-      label: '${text2} ${currentUser.givenName}',
-      hint: '${wrapper.email}',
-      type: 'autocomplete',
-      required: true,
-      source: [],
-      disabled: false
-    };
-    var VALUE = 'Text value';
-    var COLLECTION_NAME = 'testCollection';
-    var ACTIVE_ID = '01';
-    var PAGE = {
-      id: 'pageId',
-      title: 'Page 1',
-      collection: {
-        name: COLLECTION_NAME
-      },
-      components: [TEXT],
-      actions: [_models.PageAction.TYPES.SUBMIT],
-      formData: (_formData = {}, _defineProperty(_formData, "".concat(COLLECTION_NAME, "ActiveId"), ACTIVE_ID), _defineProperty(_formData, COLLECTION_NAME, [{
-        id: ACTIVE_ID,
-        text: VALUE
-      }]), _formData)
-    };
-    var PAGE_WITH_BUTTON_ACTIONS = {
-      id: 'pageId',
-      // eslint-disable-next-line no-template-curly-in-string
-      title: '${title}',
-      collection: {
-        name: COLLECTION_NAME
-      },
-      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
-      actions: [// eslint-disable-next-line no-template-curly-in-string
-      {
-        type: 'submit',
-        validate: true,
-        label: 'Next ${wrapper.nextAction}'
-      }, // eslint-disable-next-line no-template-curly-in-string
-      {
-        type: 'navigate',
-        page: '1',
-        label: 'Go back ${wrapper.prevAction}'
-      }],
-      formData: (_formData2 = {}, _defineProperty(_formData2, "".concat(COLLECTION_NAME, "ActiveId"), ACTIVE_ID), _defineProperty(_formData2, COLLECTION_NAME, [{
-        id: ACTIVE_ID,
-        text1: "Text1 ".concat(VALUE),
-        text2: "Text2 ".concat(VALUE)
-      }]), _defineProperty(_formData2, "title", 'Order Form'), _defineProperty(_formData2, "wrapper", {
-        email: 'test@example.email',
-        nextAction: 'Payment',
-        prevAction: 'User Details'
-      }), _defineProperty(_formData2, "currentUser", {
-        givenName: 'Doe'
-      }), _formData2)
-    };
-    var PAGE_WITH_CONDITIONAL_BUTTONS = {
-      id: 'pageId',
-      // eslint-disable-next-line no-template-curly-in-string
-      title: '${title}',
-      collection: {
-        name: COLLECTION_NAME
-      },
-      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
-      actions: [{
-        type: 'submit',
-        validate: true,
-        label: 'Button 1',
-        show_when: [{
-          field: 'currentUser.givenName',
-          op: '!=',
-          value: 'Doe'
-        }]
-      }, {
-        type: 'submit',
-        validate: false,
-        label: 'Button 2',
-        show_when: [{
-          field: 'currentUser.givenName',
-          op: '=',
-          value: 'Doe'
-        }]
-      }],
-      formData: (_formData3 = {}, _defineProperty(_formData3, "".concat(COLLECTION_NAME, "ActiveId"), ACTIVE_ID), _defineProperty(_formData3, COLLECTION_NAME, [{
-        id: ACTIVE_ID,
-        text1: "Text1 ".concat(VALUE),
-        text2: "Text2 ".concat(VALUE)
-      }]), _defineProperty(_formData3, "title", 'Order Form'), _defineProperty(_formData3, "wrapper", {
-        email: 'test@example.email',
-        nextAction: 'Payment',
-        prevAction: 'User Details'
-      }), _defineProperty(_formData3, "currentUser", {
-        givenName: 'Doe'
-      }), _formData3)
-    };
-    var ON_ACTION_CALLS = [];
-
-    var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
-      expect(formGroup.tagName).toEqual('DIV');
-      expect(formGroup.classList).toContain('govuk-form-group');
-      var label = formGroup.childNodes[0];
-      expect(label.tagName).toEqual('LABEL');
-      expect(label.classList).toContain('govuk-label');
-      expect(label.textContent).toEqual(lbl);
-      expect(label.getAttribute('for')).toEqual(fieldId);
-      var hint = formGroup.childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
-      expect(hint.classList).toContain('govuk-hint');
-      expect(hint.textContent).toEqual(hnt);
-      var input = formGroup.childNodes[2];
-      expect(input.tagName).toEqual('INPUT');
-      expect(input.classList).toContain('govuk-input');
-      expect(input.id).toEqual(fieldId);
-      expect(input.value).toEqual(val);
-      return input;
-    };
-
-    var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {
-      expect(formGroup.tagName).toEqual('DIV');
-      expect(formGroup.classList).toContain('govuk-form-group');
-      var label = formGroup.childNodes[0];
-      expect(label.tagName).toEqual('LABEL');
-      expect(label.classList).toContain('govuk-label');
-      expect(label.textContent).toEqual(lbl);
-      expect(label.getAttribute('for')).toEqual(fieldId);
-      var hint = formGroup.childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
-      expect(hint.classList).toContain('govuk-hint');
-      expect(hint.textContent).toEqual(hnt);
-      var outerWrapper = formGroup.childNodes[2];
-      expect(outerWrapper.classList).toContain('hods-autocomplete__outer-wrapper');
-      var autocomplete = outerWrapper.childNodes[0];
-      expect(autocomplete.classList).toContain('hods-autocomplete__wrapper');
-      var input = [].concat(autocomplete.childNodes).filter(function (e) {
-        return e.tagName === 'INPUT';
-      })[0];
-      expect(input.classList).toContain('hods-autocomplete__input');
-      expect(input.tagName).toEqual('INPUT');
-      expect(input.id).toEqual(fieldId);
-      expect(input.value).toEqual(val);
-      return input;
-    };
-
-    var checkFormButtonGroup = function checkFormButtonGroup(buttonGroup, labels) {
-      var _buttonGroup$childNod;
-
-      var buttons = [];
-      expect(buttonGroup.tagName).toEqual('DIV');
-      expect(buttonGroup.classList).toContain('hods-button-group');
-      expect((_buttonGroup$childNod = buttonGroup.childNodes) === null || _buttonGroup$childNod === void 0 ? void 0 : _buttonGroup$childNod.length).toEqual(labels.length);
-      buttonGroup.childNodes.forEach(function (button, i) {
-        expect(button.tagName).toEqual('BUTTON');
-        expect(button.classList).toContain('hods-button');
-        expect(button.textContent).toEqual(labels[i]);
-        buttons.push(button);
-      });
-      return buttons;
-    };
-
-    var ON_ACTION = function ON_ACTION(action, patch, onError) {
-      ON_ACTION_CALLS.push({
-        action: action,
-        patch: patch,
-        onError: onError
-      });
-    };
-
-    beforeEach(function () {
-      var _PAGE$formData;
-
-      PAGE.formData = (_PAGE$formData = {}, _defineProperty(_PAGE$formData, "".concat(COLLECTION_NAME, "ActiveId"), ACTIVE_ID), _defineProperty(_PAGE$formData, COLLECTION_NAME, [{
-        id: ACTIVE_ID,
-        text: VALUE
-      }]), _PAGE$formData);
-      ON_ACTION_CALLS.length = 0;
-    });
-    it('should render a submit page correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _renderWithValidation, container, page, heading;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_CollectionPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation.container;
-              page = container.childNodes[0];
-              expect(page.tagName).toEqual('DIV');
-              expect(page.classList).toContain("".concat(_CollectionPage.DEFAULT_CLASS, "__page"));
-              heading = page.childNodes[0];
-              expect(heading.classList).toContain('govuk-heading-l');
-              expect(heading.textContent).toEqual(PAGE.title);
-              checkInputField(page.childNodes[1], TEXT.fieldId, "".concat(TEXT.label, " (optional)"), TEXT.hint, VALUE);
-              checkFormButtonGroup(page.childNodes[2], [_ActionButton.DEFAULT_LABEL]);
-
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-    it('should render a submit page correctly and submit action button has interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _renderWithValidation2, container, page, FORM_DATA, heading;
-
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_CollectionPage.default, {
-                page: PAGE_WITH_BUTTON_ACTIONS,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation2.container;
-              page = container.childNodes[0];
-              FORM_DATA = PAGE_WITH_BUTTON_ACTIONS.formData;
-              expect(page.tagName).toEqual('DIV');
-              expect(page.classList).toContain("".concat(_CollectionPage.DEFAULT_CLASS, "__page"));
-              heading = page.childNodes[0];
-              expect(heading.classList).toContain('govuk-heading-l');
-              expect(heading.textContent).toEqual(FORM_DATA.title);
-              checkInputField(page.childNodes[1], TEXT_WITH_EXPRESSION.fieldId, 'Email to test@example.email (optional)', 'Text hint Doe', 'Text1 Text value');
-              checkAutoCompleteField(page.childNodes[2], AUTO_WITH_EXPRESSION.fieldId, "".concat(FORM_DATA[COLLECTION_NAME][0].text2, " ").concat(FORM_DATA.currentUser.givenName), FORM_DATA.wrapper.email, "Text2 ".concat(VALUE));
-              checkFormButtonGroup(page.childNodes[3], ['Next Payment', 'Go back User Details']);
-
-            case 11:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _renderWithValidation3, container, page, input, NEW_VALUE, EVENT;
-
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_CollectionPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation3.container;
-              page = container.childNodes[0];
-              expect(page.tagName).toEqual('DIV'); // Change the input.
-
-              input = page.childNodes[1].childNodes[2];
-              NEW_VALUE = "".concat(VALUE, ".");
-              EVENT = {
-                target: {
-                  name: TEXT.fieldId,
-                  value: NEW_VALUE
-                }
-              };
-
-              _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
-
-
-              expect(PAGE.formData[COLLECTION_NAME][0].text).toEqual(NEW_VALUE);
-
-            case 8:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    })));
-    it('should handle a page action appropriately, updating the active entry if there is one', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var _renderWithValidation4, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
-
-      return regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_CollectionPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation4.container;
-              page = container.childNodes[0]; // Change the input.
-
-              input = page.childNodes[1].childNodes[2];
-              NEW_VALUE = "".concat(VALUE, ".");
-              CHANGE_EVENT = {
-                target: {
-                  name: TEXT.fieldId,
-                  value: NEW_VALUE
-                }
-              };
-
-              _react.fireEvent.change(input, CHANGE_EVENT); // Then click the action button.
-
-
-              button = page.childNodes[2].childNodes[0];
-
-              _react.fireEvent.click(button, {}); // And confirm an appropriate action was received.
-
-
-              expect(ON_ACTION_CALLS.length).toEqual(1);
-              expect(PAGE.formData[COLLECTION_NAME][0].text).toEqual(NEW_VALUE);
-              expect(ON_ACTION_CALLS[0].action).toEqual(_models.PageAction.DEFAULTS.submit);
-              expect(ON_ACTION_CALLS[0].patch).toEqual(_defineProperty({}, COLLECTION_NAME, [{
-                id: ACTIVE_ID,
-                text: NEW_VALUE
-              }]));
-
-            case 12:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    })));
-    it('should handle a page action appropriately, creating a new active entry if there isn\'t one', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var _renderWithValidation5, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
-
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              // Make sure there is no active entry.
-              PAGE.formData["".concat(COLLECTION_NAME, "ActiveId")] = 'newId';
-              _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_CollectionPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation5.container;
-              page = container.childNodes[0]; // Change the input.
-
-              input = page.childNodes[1].childNodes[2];
-              NEW_VALUE = "".concat(VALUE, ".");
-              CHANGE_EVENT = {
-                target: {
-                  name: TEXT.fieldId,
-                  value: NEW_VALUE
-                }
-              };
-
-              _react.fireEvent.change(input, CHANGE_EVENT); // Then click the action button.
-
-
-              button = page.childNodes[2].childNodes[0];
-
-              _react.fireEvent.click(button, {}); // And confirm an appropriate action was received.
-
-
-              expect(ON_ACTION_CALLS.length).toEqual(1);
-              expect(PAGE.formData[COLLECTION_NAME][1].text).toEqual(NEW_VALUE);
-              expect(PAGE.formData[COLLECTION_NAME][1].id).toBeTruthy();
-              expect(ON_ACTION_CALLS[0].action).toEqual(_models.PageAction.DEFAULTS.submit);
-
-            case 13:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    })));
-    it('should render only the conditionally shown button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-      var _renderWithValidation6, container, page;
-
-      return regeneratorRuntime.wrap(function _callee6$(_context6) {
-        while (1) {
-          switch (_context6.prev = _context6.next) {
-            case 0:
-              _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_CollectionPage.default, {
-                page: PAGE_WITH_CONDITIONAL_BUTTONS,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation6.container;
-              page = container.childNodes[0];
-              checkFormButtonGroup(page.childNodes[3], ['Button 2']); // Just the second button shown
-
-            case 3:
-            case "end":
-              return _context6.stop();
-          }
-        }
-      }, _callee6);
-    })));
-  });
-});