@ukhomeoffice/cop-react-form-renderer 5.90.1 → 5.91.0

package/dist/components/CollectionSummary/RenderListView.test.js

@@ -5,13 +5,16 @@ var _react2 = _interopRequireDefault(require("react"));
 var _setupTests = require("../../setupTests");
 var _RenderListView = _interopRequireDefault(require("./RenderListView"));
 var _models = require("../../models");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Global imports.
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); } // Global imports.
 // Local imports.
-
-describe('components.CollectionSummary.RenderListView', () => {
-  const ENTRY = {
+describe('components.CollectionSummary.RenderListView', function () {
+  var ENTRY = {
     id: '001',
     item1: 'Value 1',
     item2: 'Value 2',
@@ -22,7 +25,7 @@ describe('components.CollectionSummary.RenderListView', () => {
     condition: 'test',
     index: 0
   };
-  const MASTER_PAGE = {
+  var MASTER_PAGE = {
     childPages: [{
       summaryLayout: {
         sections: [{
@@ -67,7 +70,7 @@ describe('components.CollectionSummary.RenderListView', () => {
       }]
     }]
   };
-  const CONFIG = {
+  var CONFIG = {
     title: 'Title text 1',
     listView: true,
     changeAction: {
@@ -78,134 +81,167 @@ describe('components.CollectionSummary.RenderListView', () => {
       label: 'Delete label'
     }
   };
-  const ID = 'testListView';
-  let onChangeArgs = [];
-  let onChangeCalls = 0;
-  const ON_CHANGE = (page, id) => {
+  var CONFIG_ERROR = _objectSpread({
+    className: 'error',
+    banners: [{
+      "text": "MORE DETAILS NEEDED",
+      "classModifiers": ["red"]
+    }]
+  }, CONFIG);
+  var ID = 'testListView';
+  var onChangeArgs = [];
+  var onChangeCalls = 0;
+  var ON_CHANGE = function ON_CHANGE(page, id) {
     onChangeArgs.push({
-      page,
-      id
+      page: page,
+      id: id
     });
     onChangeCalls += 1;
   };
-  beforeEach(() => {
+  beforeEach(function () {
     onChangeArgs = [];
   });
-  let onDeleteArgs = [];
-  let onDeleteCalls = 0;
-  const ON_DELETE = entry => {
+  var onDeleteArgs = [];
+  var onDeleteCalls = 0;
+  var ON_DELETE = function ON_DELETE(entry) {
     onDeleteArgs.push(entry);
     onDeleteCalls += 1;
   };
-  beforeEach(() => {
+  beforeEach(function () {
     onDeleteArgs = [];
   });
-  const getComponentRow = () => /*#__PURE__*/_react2.default.createElement("div", {
-    className: "govuk-summary-list__row"
-  }, /*#__PURE__*/_react2.default.createElement("dt", {
-    className: "govuk-summary-list__key"
-  }, "Test Key"), /*#__PURE__*/_react2.default.createElement("dd", {
-    className: "govuk-summary-list__value"
-  }, /*#__PURE__*/_react2.default.createElement("div", null, "Test Value")));
+  var getComponentRow = function getComponentRow() {
+    return /*#__PURE__*/_react2.default.createElement("div", {
+      className: "govuk-summary-list__row"
+    }, /*#__PURE__*/_react2.default.createElement("dt", {
+      className: "govuk-summary-list__key"
+    }, "Test Key"), /*#__PURE__*/_react2.default.createElement("dd", {
+      className: "govuk-summary-list__value"
+    }, /*#__PURE__*/_react2.default.createElement("div", null, "Test Value")));
+  };
 
   // Setup function to check rendered elements
-  const checkSetup = container => {
-    const listViewDiv = container.children[0];
+  var checkSetup = function checkSetup(container) {
+    var listViewDiv = container.children[0];
     expect(listViewDiv.tagName).toEqual('DIV');
     expect(listViewDiv.classList).toContain('govuk-summary-card');
     return listViewDiv;
   };
-  it('should correctly render RenderListView component', () => {
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
-      id: ID,
-      entryData: ENTRY,
-      config: CONFIG,
-      onFullEdit: ON_CHANGE,
-      onDelete: ON_DELETE,
-      masterPage: MASTER_PAGE,
-      getComponentRow: getComponentRow
-    }));
-    const listViewDiv = checkSetup(container);
+  it('should correctly render RenderListView component', function () {
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+        id: ID,
+        entryData: ENTRY,
+        config: CONFIG,
+        onFullEdit: ON_CHANGE,
+        onDelete: ON_DELETE,
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
+      })),
+      container = _renderWithValidation.container;
+    var listViewDiv = checkSetup(container);
 
     // Check title wrapper and title text
-    const titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
+    var titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
     expect(titleWrapper).not.toBeNull();
-    const title = titleWrapper.querySelector('.govuk-summary-card__title');
+    var title = titleWrapper.querySelector('.govuk-summary-card__title');
     expect(title.textContent).toEqual(CONFIG.title);
 
     // Logic to check the rendered rows
-    const rows = container.querySelectorAll('.govuk-summary-list__row');
+    var rows = container.querySelectorAll('.govuk-summary-list__row');
     expect(rows.length).toEqual(3);
 
     // Check the first row
-    const firstRowKey = rows[0].querySelector('.govuk-summary-list__key');
-    const firstRowValue = rows[0].querySelector('.govuk-summary-list__value');
+    var firstRowKey = rows[0].querySelector('.govuk-summary-list__key');
+    var firstRowValue = rows[0].querySelector('.govuk-summary-list__value');
     expect(firstRowKey.textContent).toEqual('Item 1');
     expect(firstRowValue.textContent).toEqual('Value 1');
 
     // Check the second row
-    const secondRowKey = rows[1].querySelector('.govuk-summary-list__key');
-    const secondRowValue = rows[1].querySelector('.govuk-summary-list__value');
+    var secondRowKey = rows[1].querySelector('.govuk-summary-list__key');
+    var secondRowValue = rows[1].querySelector('.govuk-summary-list__value');
     expect(secondRowKey.textContent).toEqual('Item 2 (optional)');
     expect(secondRowValue.textContent).toEqual('Value 2');
 
     // Check the third row
-    const thirdRowKey = rows[2].querySelector('.govuk-summary-list__key');
-    const thirdRowValue = rows[2].querySelector('.govuk-summary-list__value');
+    var thirdRowKey = rows[2].querySelector('.govuk-summary-list__key');
+    var thirdRowValue = rows[2].querySelector('.govuk-summary-list__value');
     expect(thirdRowKey.textContent).toEqual('Item 3');
     expect(thirdRowValue.textContent).toEqual('Value 3');
   });
-  it('should render the index correctly in the title', () => {
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
-      id: ID,
-      entryData: ENTRY,
-      config: CONFIG,
-      onFullEdit: ON_CHANGE,
-      onDelete: ON_DELETE,
-      masterPage: MASTER_PAGE,
-      getComponentRow: getComponentRow
-    }));
-    const listViewDiv = checkSetup(container);
+  it('should render the index correctly in the title', function () {
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+        id: ID,
+        entryData: ENTRY,
+        config: CONFIG,
+        onFullEdit: ON_CHANGE,
+        onDelete: ON_DELETE,
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
+      })),
+      container = _renderWithValidation2.container;
+    var listViewDiv = checkSetup(container);
 
     // Check title wrapper and title text
-    const titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
+    var titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
     expect(titleWrapper).not.toBeNull();
-    const title = titleWrapper.querySelector('.govuk-summary-card__title');
+    var title = titleWrapper.querySelector('.govuk-summary-card__title');
     expect(title.textContent).toEqual(CONFIG.title);
 
     // Check if the index is rendered as expected in the title
-    expect(title.textContent).toContain(`Title text ${ENTRY.index + 1}`);
+    expect(title.textContent).toContain("Title text ".concat(ENTRY.index + 1));
   });
-  describe('Action buttons in RenderListView', () => {
-    beforeEach(() => {
-      onChangeArgs = [];
-      onChangeCalls = 0;
-      onDeleteArgs = [];
-      onDeleteCalls = 0;
-    });
-    it('should render and handle action buttons correctly', () => {
-      const {
-        container
-      } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+  it('should render an Error Tag with Error className when passed an error in the Banner and ClassName', function () {
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
         id: ID,
         entryData: ENTRY,
-        config: CONFIG,
+        config: CONFIG_ERROR,
         onFullEdit: ON_CHANGE,
         onDelete: ON_DELETE,
         masterPage: MASTER_PAGE,
         getComponentRow: getComponentRow
-      }));
-      const listViewDiv = container.querySelector('.govuk-summary-card');
+      })),
+      container = _renderWithValidation3.container;
+    var listViewDiv = checkSetup(container);
+
+    // Check className
+    expect(listViewDiv.classList).toContain('error');
+
+    // Check for presence of Banner Strip
+    var bannerStrip = listViewDiv.querySelector('.hods-form-banner-strip');
+    expect(bannerStrip).not.toBeNull();
+    expect(bannerStrip.id).toEqual('BannerStrip001');
+
+    // Check for presence of Error Tag with correct tagName, className, and Text content
+    var errorTag = listViewDiv.querySelector('.hods-form-banner-strip__tag--red');
+    expect(errorTag).not.toBeNull();
+    expect(errorTag.tagName).toBe('STRONG');
+    expect(errorTag.innerHTML).toContain('MORE DETAILS NEEDED');
+  });
+  describe('Action buttons in RenderListView', function () {
+    beforeEach(function () {
+      onChangeArgs = [];
+      onChangeCalls = 0;
+      onDeleteArgs = [];
+      onDeleteCalls = 0;
+    });
+    it('should render and handle action buttons correctly', function () {
+      var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+          id: ID,
+          entryData: ENTRY,
+          config: CONFIG,
+          onFullEdit: ON_CHANGE,
+          onDelete: ON_DELETE,
+          masterPage: MASTER_PAGE,
+          getComponentRow: getComponentRow
+        })),
+        container = _renderWithValidation4.container;
+      var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 
       // Check for change button
-      const changeLink = listViewDiv.querySelector('.govuk-link');
+      var changeLink = listViewDiv.querySelector('.govuk-link');
       expect(changeLink.textContent).toEqual(CONFIG.changeAction.label);
-      expect(changeLink.getAttribute('aria-label')).toEqual(`${CONFIG.changeAction.label} ${CONFIG.title}`);
+      expect(changeLink.getAttribute('aria-label')).toEqual("".concat(CONFIG.changeAction.label, " ").concat(CONFIG.title));
       _react.fireEvent.click(changeLink, {});
       expect(onChangeCalls).toEqual(1);
       expect(onChangeArgs[0]).toMatchObject({
@@ -214,9 +250,9 @@ describe('components.CollectionSummary.RenderListView', () => {
       });
 
       // Check for delete button
-      const deleteButton = listViewDiv.querySelector('[id$=".deleteButton"]');
+      var deleteButton = listViewDiv.querySelector('[id$=".deleteButton"]');
       expect(deleteButton.textContent).toEqual(CONFIG.deleteAction.label);
-      expect(deleteButton.getAttribute('aria-label')).toEqual(`${CONFIG.deleteAction.label} ${CONFIG.title}`);
+      expect(deleteButton.getAttribute('aria-label')).toEqual("".concat(CONFIG.deleteAction.label, " ").concat(CONFIG.title));
       _react.fireEvent.click(deleteButton, {});
       expect(onDeleteCalls).toEqual(1);
       expect(onDeleteArgs[0]).toEqual(ENTRY);