Ensure error property is remove from props before passing to checkbox div (Radios does this currently) (#120)

Use jest `arrayContaining` to ensure index test does not consider array order when running test
Pin TypeScript version, as tests were not running on latest 4.x that was installed automatically

Author: benwilliamsBJSS

package.json

@@ -52,7 +52,7 @@
     "sass-loader": "10.1.1",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",
-    "typescript": "^4.2.4"
+    "typescript": "4.2.4"
   },
   "peerDependencies": {
     "nhsuk-frontend": ">=4.0.0",

src/__tests__/index.test.ts

@@ -2,66 +2,68 @@ import * as index from '../index';
 
 describe('Index', () => {
   it('contains all expected elements', () => {
-    expect(Object.keys(index)).toEqual([
-      'ActionLink',
-      'BackLink',
-      'Breadcrumb',
-      'Button',
-      'DefaultButton',
-      'ButtonLink',
-      'Card',
-      'CareCard',
-      'Checkboxes',
-      'ContentsList',
-      'DateInput',
-      'Details',
-      'DoDontList',
-      'ErrorMessage',
-      'ErrorSummary',
-      'Fieldset',
-      'Footer',
-      'Form',
-      'useFormContext',
-      'Header',
-      'Hero',
-      'Hint',
-      'Icons',
-      'ArrowLeftIcon',
-      'ArrowRightIcon',
-      'ArrowRightCircleIcon',
-      'ChevronLeftIcon',
-      'ChevronRightIcon',
-      'CloseIcon',
-      'CrossIcon',
-      'SmallEmdashIcon',
-      'EmdashIcon',
-      'MinusIcon',
-      'PlusIcon',
-      'SearchIcon',
-      'TickIcon',
-      'Images',
-      'Input',
-      'InsetText',
-      'Label',
-      'Container',
-      'Col',
-      'Row',
-      'ListPanel',
-      'NavAZ',
-      'Pagination',
-      'Radios',
-      'ReviewDate',
-      'Select',
-      'SkipLink',
-      'SummaryList',
-      'Table',
-      'Tag',
-      'Textarea',
-      'LedeText',
-      'BodyText',
-      'WarningCallout',
-      'Clearfix',
-      'ReadingWidth',
-    ]);
+    expect(Object.keys(index)).toEqual(
+      expect.arrayContaining([
+        'ActionLink',
+        'BackLink',
+        'Breadcrumb',
+        'Button',
+        'DefaultButton',
+        'ButtonLink',
+        'Card',
+        'CareCard',
+        'Checkboxes',
+        'ContentsList',
+        'DateInput',
+        'Details',
+        'DoDontList',
+        'ErrorMessage',
+        'ErrorSummary',
+        'Fieldset',
+        'Footer',
+        'Form',
+        'useFormContext',
+        'Header',
+        'Hero',
+        'Hint',
+        'Icons',
+        'ArrowLeftIcon',
+        'ArrowRightIcon',
+        'ArrowRightCircleIcon',
+        'ChevronLeftIcon',
+        'ChevronRightIcon',
+        'CloseIcon',
+        'CrossIcon',
+        'SmallEmdashIcon',
+        'EmdashIcon',
+        'MinusIcon',
+        'PlusIcon',
+        'SearchIcon',
+        'TickIcon',
+        'Images',
+        'Input',
+        'InsetText',
+        'Label',
+        'Container',
+        'Col',
+        'Row',
+        'ListPanel',
+        'NavAZ',
+        'Pagination',
+        'Radios',
+        'ReviewDate',
+        'Select',
+        'SkipLink',
+        'SummaryList',
+        'Table',
+        'Tag',
+        'Textarea',
+        'LedeText',
+        'BodyText',
+        'WarningCallout',
+        'Clearfix',
+        'ReadingWidth',
+      ]),
+    );
   });
 });

src/components/checkboxes/Checkboxes.tsx

@@ -81,14 +81,8 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
     const { children, ...rest } = this.props;
     return (
       <FormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
-        {({
-          className,
-          name,
-          id,
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          idPrefix,
-          ...restRenderProps
-        }) => {
+        {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
+        {({ className, name, id, idPrefix, error, ...restRenderProps }) => {
           this.resetBoxIds();
           const containsConditional = this.state.conditionalBoxes.length > 0;
           const contextValue: ICheckboxContext = {

src/components/checkboxes/__tests__/Checkboxes.test.tsx

@@ -0,0 +1,41 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import Checkboxes from '../Checkboxes';
+
+describe('Checkboxes', () => {
+  it('matches snapshot', () => {
+    const element = mount(
+      <Checkboxes id="example" name="example">
+        <Checkboxes.Box value="animal">Waste from animal carcasses</Checkboxes.Box>
+        <Checkboxes.Box value="mines">Waste from mines or quarries</Checkboxes.Box>
+        <Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>
+      </Checkboxes>,
+    );
+    expect(element).toMatchSnapshot();
+    element.unmount();
+  });
+
+  it('matches snapshot with string error', () => {
+    const element = mount(
+      <Checkboxes id="example" name="example" error="Example error">
+        <Checkboxes.Box value="animal">Waste from animal carcasses</Checkboxes.Box>
+        <Checkboxes.Box value="mines">Waste from mines or quarries</Checkboxes.Box>
+        <Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>
+      </Checkboxes>,
+    );
+    expect(element).toMatchSnapshot();
+    element.unmount();
+  });
+
+  it('matches snapshot with boolean error', () => {
+    const element = mount(
+      <Checkboxes id="example" name="example" error={true}>
+        <Checkboxes.Box value="animal">Waste from animal carcasses</Checkboxes.Box>
+        <Checkboxes.Box value="mines">Waste from mines or quarries</Checkboxes.Box>
+        <Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>
+      </Checkboxes>,
+    );
+    expect(element).toMatchSnapshot();
+    element.unmount();
+  });
+});