@ukhomeoffice/cop-react-form-renderer 0.1.0-beta → 1.0.0-gamma

package/dist/components/FormPage/FormPage.js

@@ -5,28 +5,28 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DEFAULT_CLASS = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = _interopRequireDefault(require("../../utils"));
 
 var _FormComponent = _interopRequireDefault(require("../FormComponent"));
 
 var _PageActions = _interopRequireDefault(require("../PageActions"));
 
-var _utils = _interopRequireDefault(require("../../utils"));
-
 require("./FormPage.scss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -46,6 +46,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_CLASS = 'hods-form';
+exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var FormPage = function FormPage(_ref) {
   var page = _ref.page,
@@ -89,10 +90,10 @@ var FormPage = function FormPage(_ref) {
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
       key: index,
       component: component,
-      value: page.formData[component.fieldId] || '',
-      onChange: onPageChange
+      onChange: onPageChange,
+      value: page.formData[component.fieldId] || ''
     });
-  }), page.actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
+  }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
     actions: page.actions,
     onAction: function onAction(action) {
       return _onAction(action, patch, setErrors);
@@ -106,7 +107,7 @@ FormPage.propTypes = {
     title: _propTypes.default.string,
     components: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])).isRequired,
     actions: _propTypes.default.array,
-    formData: _propTypes.default.object
+    formData: _propTypes.default.object.isRequired
   }).isRequired,
   onAction: _propTypes.default.func.isRequired,
   classBlock: _propTypes.default.string,

package/dist/components/FormPage/FormPage.stories.mdx

@@ -0,0 +1,118 @@
+<!-- Global imports -->
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
+import withMock from 'storybook-addon-mock';
+
+<!-- Local imports -->
+import Utils from '../../utils';
+import FormPage from './FormPage';
+
+<!-- JSON documents -->
+import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
+import GRADE from '../../json/grade.json';
+import TEAMS from '../../json/team.json';
+import USER_PROFILE_DATA from '../../json/userProfile.data.json';
+import USER_PROFILE from '../../json/userProfile.json';
+
+<Meta title="Components/Form page" id="D-FormPage" component={ FormPage } decorators={[withMock]} />
+
+<Heading size="xl" caption="Components">Form page</Heading>
+
+Renders a page on a form with <Link href="https://ukhomeoffice.github.io/cop-react-components/?path=/docs/d-alert--default-story">COP React components</Link>,
+on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuration.
+
+<Canvas withToolbar>
+  <Story name="Default" parameters={{
+    mockData: [
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
+        method: 'GET',
+        status: 200,
+        response: CIVIL_SERVANT
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
+        method: 'GET',
+        status: 200,
+        response: GRADE
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
+        method: 'GET',
+        status: 200,
+        response: TEAMS
+      }
+    ]
+  }}>
+    {() => {
+      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'civil-servant-status');
+      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <FormPage page={PAGE} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+<Details summary="Properties" className="no-indent">
+  <ArgsTable of={ FormPage } />
+</Details>
+
+
+## Variants
+### With `autocomplete`
+<Canvas>
+  <Story name="With autocomplete" parameters={{
+    mockData: [
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
+        method: 'GET',
+        status: 200,
+        response: CIVIL_SERVANT
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
+        method: 'GET',
+        status: 200,
+        response: GRADE
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
+        method: 'GET',
+        status: 200,
+        response: TEAMS
+      }
+    ]
+  }}>
+    {() => {
+      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'team-name');
+      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <FormPage page={PAGE} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Without editable controls
+
+<Canvas>
+  <Story name="Without editable controls">
+    {() => {
+      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'add-or-change-line-manager');
+      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <FormPage page={PAGE} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>

package/dist/components/FormPage/FormPage.test.js

@@ -0,0 +1,255 @@
+"use strict";
+
+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); }
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _models = require("../../models");
+
+var _ActionButton = require("../PageActions/ActionButton");
+
+var _FormPage = _interopRequireWildcard(require("./FormPage"));
+
+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); }); }; }
+
+describe('components', function () {
+  describe('FormPage', function () {
+    var TEXT = {
+      id: 'text',
+      fieldId: 'text',
+      type: 'text',
+      label: 'Text component',
+      hint: 'Text hint'
+    };
+    var VALUE = 'Text value';
+    var PAGE = {
+      id: 'pageId',
+      title: 'Page 1',
+      components: [TEXT],
+      actions: ['submit'],
+      formData: {
+        text: VALUE
+      }
+    };
+    var ON_ACTION_CALLS = [];
+
+    var ON_ACTION = function ON_ACTION(action, patch, onError) {
+      ON_ACTION_CALLS.push({
+        action: action,
+        patch: patch,
+        onError: onError
+      });
+    };
+
+    beforeEach(function () {
+      PAGE.formData = {
+        text: VALUE
+      };
+      ON_ACTION_CALLS.length = 0;
+    });
+    it('should render a submit page correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render, container, page, heading, formGroup, label, hint, input, buttonGroup, button;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _render.container;
+              page = container.childNodes[0];
+              expect(page.tagName).toEqual('DIV');
+              expect(page.classList).toContain("".concat(_FormPage.DEFAULT_CLASS, "__page"));
+              heading = page.childNodes[0];
+              expect(heading.classList).toContain('govuk-heading-l');
+              expect(heading.textContent).toEqual(PAGE.title);
+              formGroup = page.childNodes[1];
+              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.label, " (optional)"));
+              expect(label.getAttribute('for')).toEqual(TEXT.fieldId);
+              hint = formGroup.childNodes[1];
+              expect(hint.tagName).toEqual('SPAN');
+              expect(hint.classList).toContain('govuk-hint');
+              expect(hint.textContent).toEqual(TEXT.hint);
+              input = formGroup.childNodes[2];
+              expect(input.tagName).toEqual('INPUT');
+              expect(input.classList).toContain('govuk-input');
+              expect(input.id).toEqual(TEXT.fieldId);
+              expect(input.value).toEqual(VALUE);
+              buttonGroup = page.childNodes[2];
+              expect(buttonGroup.tagName).toEqual('DIV');
+              expect(buttonGroup.classList).toContain('govuk-button-group');
+              button = buttonGroup.childNodes[0];
+              expect(button.tagName).toEqual('BUTTON');
+              expect(button.classList).toContain('govuk-button');
+              expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL);
+
+            case 31:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render2, container, page, input, NEW_VALUE, EVENT;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _render2.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.text).toEqual(NEW_VALUE);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _render3, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _render3.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.text).toEqual(NEW_VALUE);
+              expect(ON_ACTION_CALLS[0].action).toEqual(_models.PageAction.DEFAULTS.submit);
+              expect(ON_ACTION_CALLS[0].patch).toEqual({
+                text: NEW_VALUE
+              });
+
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+    it('should display errors appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var ERRORS, THROW_ERROR_ON_ACTION, _render4, container, page, input, NEW_VALUE, CHANGE_EVENT, button, errorSummary, errorList, error, errorLink;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              ERRORS = [{
+                id: TEXT.id,
+                error: 'Invalid value'
+              }];
+
+              THROW_ERROR_ON_ACTION = function THROW_ERROR_ON_ACTION(action, patch, onError) {
+                ON_ACTION_CALLS.push({
+                  action: action,
+                  patch: patch,
+                  onError: onError
+                });
+                onError(ERRORS);
+              };
+
+              _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: THROW_ERROR_ON_ACTION
+              })), container = _render4.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, which should call the onError callback method.
+
+
+              button = page.childNodes[2].childNodes[0];
+
+              _react.fireEvent.click(button, {}); // And confirm the page error is now displayed.
+
+
+              errorSummary = page.childNodes[1];
+              expect(errorSummary.tagName).toEqual('DIV');
+              expect(errorSummary.id).toEqual('error-summary');
+              expect(errorSummary.classList).toContain('govuk-error-summary');
+              errorList = errorSummary.childNodes[1].childNodes[0];
+              expect(errorList.tagName).toEqual('UL');
+              expect(errorList.classList).toContain('govuk-error-summary__list');
+              expect(errorList.childNodes.length).toEqual(ERRORS.length);
+              error = errorList.childNodes[0];
+              expect(error.tagName).toEqual('LI');
+              errorLink = error.childNodes[0];
+              expect(errorLink.tagName).toEqual('A');
+              expect(errorLink.textContent).toEqual(ERRORS[0].error);
+              expect(errorLink.getAttribute('href')).toEqual("#".concat(ERRORS[0].id));
+
+            case 24:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+  });
+});