@ukhomeoffice/cop-react-form-renderer 5.0.1 → 5.1.0

package/dist/utils/Component/getComponentTests/getComponent.radios.test.js

@@ -97,6 +97,92 @@ describe('utils.Component.get', function () {
     expect(ON_CHANGE_CALLS.length).toEqual(2); // No change, so no new event should have fired.
   });
 
+  it('should work correctly with the returnFullData property on the radios component', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var OPTIONS = [{
+      value: 'a',
+      label: 'Alpha'
+    }, {
+      value: 'b',
+      label: 'Bravo'
+    }];
+    var ON_CHANGE_CALLS = [];
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+    var COMPONENT = {
+      type: _models.ComponentTypes.RADIOS,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      data: {
+        options: OPTIONS
+      },
+      returnFullData: true,
+      onChange: ON_CHANGE,
+      'data-testid': ID
+    };
+    var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+      container = _render2.container;
+    var _getAllByTestId3 = (0, _react.getAllByTestId)(container, ID),
+      _getAllByTestId4 = _slicedToArray(_getAllByTestId3, 2),
+      formGroup = _getAllByTestId4[0],
+      radios = _getAllByTestId4[1];
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    var label;
+    formGroup.childNodes.forEach(function (node) {
+      // Check if it's an element.
+      if (node instanceof Element) {
+        if (node.tagName === 'LABEL') {
+          label = node;
+        }
+      }
+    });
+    expect(label).toBeDefined();
+    expect(label.innerHTML).toContain(LABEL);
+    expect(label.getAttribute('for')).toEqual(ID);
+    expect(radios.tagName).toEqual('DIV');
+    expect(radios.classList).toContain('govuk-radios');
+    expect(radios.childNodes.length).toEqual(OPTIONS.length);
+    var radioItems = [];
+    OPTIONS.forEach(function (_, index) {
+      var radio = radios.childNodes[index];
+      expect(radio instanceof Element).toBeTruthy();
+      if (radio instanceof Element) {
+        radioItems.push(radio);
+      }
+    });
+    expect(radioItems.length).toEqual(OPTIONS.length);
+    OPTIONS.forEach(function (option, index) {
+      var radio = radioItems[index];
+      expect(radio.tagName).toEqual('DIV');
+      expect(radio.classList).toContain('govuk-radios__item');
+      var _radio$childNodes2 = _slicedToArray(radio.childNodes, 2),
+        input = _radio$childNodes2[0],
+        inputLabel = _radio$childNodes2[1];
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.type).toEqual('radio');
+      expect(inputLabel.textContent).toEqual(option.label);
+    });
+    _react.fireEvent.click(radioItems[0].childNodes[0]); // alpha
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(ON_CHANGE_CALLS[0]).toMatchObject({
+      name: FIELD_ID,
+      value: OPTIONS[0]
+    });
+    _react.fireEvent.click(radioItems[1].childNodes[0]); // bravo
+    expect(ON_CHANGE_CALLS.length).toEqual(2);
+    expect(ON_CHANGE_CALLS[1]).toMatchObject({
+      name: FIELD_ID,
+      value: OPTIONS[1]
+    });
+    _react.fireEvent.click(radioItems[1].childNodes[0]); // bravo (already selected, above)
+    expect(ON_CHANGE_CALLS.length).toEqual(2); // No change, so no new event should have fired.
+  });
+
   it('should return an appropriately rendered radios component with nested components', function () {
     var ID = 'test-id';
     var FIELD_ID = 'field-id';
@@ -132,10 +218,10 @@ describe('utils.Component.get', function () {
     };
     var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getComponent.default)(COMPONENT)),
       container = _renderWithValidation.container;
-    var _getAllByTestId3 = (0, _react.getAllByTestId)(container, ID),
-      _getAllByTestId4 = _slicedToArray(_getAllByTestId3, 2),
-      formGroup = _getAllByTestId4[0],
-      radios = _getAllByTestId4[1];
+    var _getAllByTestId5 = (0, _react.getAllByTestId)(container, ID),
+      _getAllByTestId6 = _slicedToArray(_getAllByTestId5, 2),
+      formGroup = _getAllByTestId6[0],
+      radios = _getAllByTestId6[1];
     expect(formGroup.tagName).toEqual('DIV');
     expect(formGroup.classList).toContain('govuk-form-group');
     expect(radios.tagName).toEqual('DIV');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "^3.0.0",
+    "@ukhomeoffice/cop-react-components": "^3.1.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@monaco-editor/react": "^4.3.1",
@@ -44,6 +45,8 @@
     "@testing-library/user-event": "^12.1.10",
     "axios-mock-adapter": "^1.18.1",
     "cross-env": "^7.0.3",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.6.0",
     "html-react-parser": "^0.10.5",
     "node-sass": "^6.0.1",
     "prop-types": "^15.8.1",