@ukhomeoffice/cop-react-form-renderer 4.10.0 → 4.11.1

package/dist/components/TaskList/Task.js

@@ -58,6 +58,7 @@ var Task = function Task(_ref) {
     setLinkActive(task.state !== _models.TaskStates.TYPES.CANNOT_START_YET);
     setCurrentState(task.state);
   }, [task.state, setLinkActive, setCurrentState]);
+  var displayName = task.displayName || task.name;
   return /*#__PURE__*/_react.default.createElement("li", {
     className: classes('item')
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -72,7 +73,7 @@ var Task = function Task(_ref) {
       }
     },
     tabIndex: "0"
-  }, task.name) : task.name), /*#__PURE__*/_react.default.createElement(_TaskState.default, {
+  }, displayName) : displayName), /*#__PURE__*/_react.default.createElement(_TaskState.default, {
     state: currentState
   }));
 };
@@ -81,7 +82,8 @@ Task.propTypes = {
   task: _propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     pages: _propTypes.default.array.isRequired,
-    state: _propTypes.default.string
+    state: _propTypes.default.string,
+    displayName: _propTypes.default.string
   }).isRequired,
   onClick: _propTypes.default.func.isRequired
 };

package/dist/components/TaskList/Task.test.js

@@ -35,13 +35,14 @@ describe('components', function () {
       var span = container.childNodes[0].childNodes[0];
       var state = container.childNodes[0].childNodes[1];
       expect(span.classList).toContain('hods-task-list__task-name');
+      expect(span.textContent).toEqual(TASK.name);
       expect(state.textContent).toEqual('Completed');
     });
-    it('should render a task with inactive link if state is cannotStartYet', function () {
-      var NAME = 'taskName';
-      var STATE = _models.TaskStates.TYPES.CANNOT_START_YET;
+    it('should render a task with a displayName', function () {
+      var STATE = _models.TaskStates.TYPES.COMPLETE;
       var TASK = {
         name: 'taskName',
+        displayName: 'Alpha Bravo',
         pages: ['pageName'],
         state: STATE
       };
@@ -54,9 +55,33 @@ describe('components', function () {
       })),
           container = _render2.container;
 
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-task-list__item');
+      var span = container.childNodes[0].childNodes[0];
+      var state = container.childNodes[0].childNodes[1];
+      expect(span.classList).toContain('hods-task-list__task-name');
+      expect(span.textContent).toEqual(TASK.displayName);
+      expect(state.textContent).toEqual('Completed');
+    });
+    it('should render a task with inactive link if state is cannotStartYet', function () {
+      var STATE = _models.TaskStates.TYPES.CANNOT_START_YET;
+      var TASK = {
+        name: 'taskName',
+        pages: ['pageName'],
+        state: STATE
+      };
+
+      var ON_CLICK = function ON_CLICK() {};
+
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
+        task: TASK,
+        onClick: ON_CLICK
+      })),
+          container = _render3.container;
+
       var span = container.childNodes[0].childNodes[0];
       expect(span.childNodes[0].tagName).toEqual(undefined);
-      expect(span.textContent).toEqual(NAME);
+      expect(span.textContent).toEqual(TASK.name);
     });
     it('should render a task with a link if state is not cannotStartYet', function () {
       var STATE = _models.TaskStates.TYPES.IN_PROGRESS;
@@ -68,17 +93,40 @@ describe('components', function () {
 
       var ON_CLICK = function ON_CLICK() {};
 
-      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
+      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
         task: TASK,
         onClick: ON_CLICK
       })),
-          container = _render3.container;
+          container = _render4.container;
 
       var span = container.childNodes[0].childNodes[0];
       expect(span.childNodes.length).toEqual(1);
       expect(span.childNodes[0].tagName).toEqual('A');
+      expect(span.textContent).toEqual(TASK.name);
     });
-    it('should call then given onClick function when the link is clicked', function () {
+    it('should render the displayName of a task with a link if state is not cannotStartYet', function () {
+      var STATE = _models.TaskStates.TYPES.IN_PROGRESS;
+      var TASK = {
+        name: 'taskName',
+        displayName: 'Charlie Delta',
+        pages: ['pageName'],
+        state: STATE
+      };
+
+      var ON_CLICK = function ON_CLICK() {};
+
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
+        task: TASK,
+        onClick: ON_CLICK
+      })),
+          container = _render5.container;
+
+      var span = container.childNodes[0].childNodes[0];
+      expect(span.childNodes.length).toEqual(1);
+      expect(span.childNodes[0].tagName).toEqual('A');
+      expect(span.textContent).toEqual(TASK.displayName);
+    });
+    it('should call the given onClick function when the link is clicked', function () {
       var STATE = _models.TaskStates.TYPES.IN_PROGRESS;
       var TASK = {
         name: 'taskName',
@@ -91,16 +139,50 @@ describe('components', function () {
         ON_CLICK_CALLS.push(value);
       };
 
-      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
         task: TASK,
         onClick: ON_CLICK
       })),
-          container = _render4.container;
+          container = _render6.container;
 
       var link = container.childNodes[0].childNodes[0].childNodes[0];
 
       _react.fireEvent.click(link);
 
+      expect(ON_CLICK_CALLS.length).toEqual(1);
+      expect(ON_CLICK_CALLS[0]).toEqual({
+        pages: ['pageName'],
+        name: "taskName",
+        state: STATE
+      });
+    });
+    it('should call the given onClick function when the enter key is pressed on the link', function () {
+      var STATE = _models.TaskStates.TYPES.IN_PROGRESS;
+      var TASK = {
+        name: 'taskName',
+        pages: ['pageName'],
+        state: STATE
+      };
+      var ON_CLICK_CALLS = [];
+
+      var ON_CLICK = function ON_CLICK(value) {
+        ON_CLICK_CALLS.push(value);
+      };
+
+      var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Task.default, {
+        task: TASK,
+        onClick: ON_CLICK
+      })),
+          container = _render7.container;
+
+      var link = container.childNodes[0].childNodes[0].childNodes[0]; // The keyPress event needs charCode: 13 or it fails; bug with the library.
+
+      _react.fireEvent.keyPress(link, {
+        key: 'Enter',
+        code: 13,
+        charCode: 13
+      });
+
       expect(ON_CLICK_CALLS.length).toEqual(1);
       expect(ON_CLICK_CALLS[0]).toEqual({
         pages: ['pageName'],

package/dist/components/TaskList/TaskList.js

@@ -67,7 +67,7 @@ var TaskList = function TaskList(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
     className: classes()
-  }), refNumber && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+  }), refNumber && refTitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
   }, /*#__PURE__*/_react.default.createElement("strong", {
     className: "tasklist-summary"
@@ -97,14 +97,15 @@ var TaskList = function TaskList(_ref) {
 };
 
 TaskList.propTypes = {
-  refNumber: _propTypes.default.string,
   refTitle: _propTypes.default.string,
+  refNumber: _propTypes.default.string,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
       name: _propTypes.default.string.isRequired,
       pages: _propTypes.default.array.isRequired,
-      state: _propTypes.default.string
+      state: _propTypes.default.string,
+      displayName: _propTypes.default.string
     })).isRequired
   })).isRequired,
   classBlock: _propTypes.default.string,

package/dist/components/TaskList/TaskList.test.js

@@ -163,6 +163,53 @@ describe('components', function () {
       expect(subSectionOne.childNodes[0].textContent).toEqual('');
       expect(subSectionOne.childNodes[1].textContent).toEqual('These are your tasks');
     });
+    it('should not display the reference if there is no reference title', function () {
+      var COP_REF = '123';
+      var sections = [{
+        name: 'These are your tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'inProgress',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'cannotStartYet',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'cannotStartYet',
+          pages: ['pageSix']
+        }]
+      }];
+
+      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+        refNumber: COP_REF,
+        sections: sections
+      })),
+          container = _render4.container;
+
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].childNodes.length).toEqual(6); // The first child is now the incomplete text.
+
+      var incompleteForm = container.childNodes[0].childNodes[0];
+      expect(incompleteForm.tagName).toEqual('P');
+      expect(incompleteForm.textContent).toEqual('Incomplete form');
+    });
   });
   it('should pass the the selected task to the given onTaskAction function', function () {
     var COP_REF = '123';
@@ -190,13 +237,13 @@ describe('components', function () {
       }]
     }];
 
-    var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+    var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
       refNumber: COP_REF,
       refTitle: REF_TITLE,
       sections: sections,
       onTaskAction: ON_CLICK
     })),
-        container = _render4.container;
+        container = _render5.container;
 
     var firstTask = container.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0];
     var secondTask = container.childNodes[0].childNodes[5].childNodes[1].childNodes[0].childNodes[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.10.0",
+  "version": "4.11.1",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",