bug/Checkbox declaration file inconsistency (#133)

* Add "strictNullChecks", fix two cases where typing needs updating in line with checks.

* Revert to .defaultProps

* Throw error on default HeadingLevel.tsx case

* Warn on invalid prop, test to cover

* Better dev warning for heading level

---------

Co-authored-by: Thomas Judd-Cooper <[email protected]>

Author: KaiSpencer

src/components/do-dont-list/__tests__/__snapshots__/DoDontList.test.tsx.snap

@@ -13,7 +13,6 @@ exports[`DoDontList matches snapshot: DoDontList-Do 1`] = `
 >
   <HeadingLevel
     className="nhsuk-do-dont-list__label"
-    headingLevel="h3"
   >
     Do
   </HeadingLevel>
@@ -33,7 +32,6 @@ exports[`DoDontList matches snapshot: DoDontList-Dont 1`] = `
 >
   <HeadingLevel
     className="nhsuk-do-dont-list__label"
-    headingLevel="h3"
   >
     Don't
   </HeadingLevel>

src/components/table/TableHelpers.ts

@@ -6,12 +6,11 @@ export const isTableCell = (child: ReactNode): child is ReactElement => {
 };
 
 export const getHeadingsFromChildren = (children: ReactNode): string[] => {
-  return React.Children
-    .map(children, child => {
-      if (isTableCell(child)) {
-        return child.props.children.toString();
-      }
-      return null;
-    })
-    .filter(Boolean);
+  const headings: string[] = [];
+  React.Children.map(children, (child) => {
+    if (isTableCell(child)) {
+      headings.push(child.props.children.toString());
+    }
+  });
+  return headings;
 };

src/components/warning-callout/__tests__/__snapshots__/WarningCallout.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`WarningCallout matches snapshot 1`] = `
     >
       <HeadingLevel
         className="nhsuk-warning-callout__label"
-        headingLevel="h3"
       >
         <h3
           className="nhsuk-warning-callout__label"

src/util/HeadingLevel.tsx

@@ -18,7 +18,7 @@ export type HeadingLevelType =
   | 'H5'
   | 'H6';
 
-const HeadingLevel: React.FC<HeadingLevelProps> = ({ headingLevel, ...rest }) => {
+const HeadingLevel: React.FC<HeadingLevelProps> = ({ headingLevel='h3', ...rest }) => {
   switch (headingLevel.toLowerCase()) {
     case 'h1':
       return <h1 {...rest} />;
@@ -32,10 +32,10 @@ const HeadingLevel: React.FC<HeadingLevelProps> = ({ headingLevel, ...rest }) =>
       return <h5 {...rest} />;
     case 'h6':
       return <h6 {...rest} />;
+    default:
+      console.error(`HeadingLevel: Invalid headingLevel prop: ${headingLevel}`);
+      return <h3 {...rest} />;
   }
 };
-HeadingLevel.defaultProps = {
-  headingLevel: 'h3',
-};
 
 export default HeadingLevel;

src/util/__tests__/HeadingLevel.test.tsx

@@ -43,4 +43,15 @@ describe('HeadingLevel', () => {
     h6Element.unmount();
     H6Element.unmount();
   });
+
+  it("console.warn when headingLevel is invalid", () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    // @ts-expect-error - testing invalid prop
+    shallow(<HeadingLevel headingLevel="h7" />);
+    expect(consoleSpy).toHaveBeenCalledTimes(1);
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'HeadingLevel: Invalid headingLevel prop: h7');
+    consoleSpy.mockRestore();
+  });
 });

tsconfig.json

@@ -12,7 +12,8 @@
         "types": ["react", "jest", "node"],
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "strictNullChecks": true
     },
     "include": ["src/**/*"],
     "exclude": [