Add Type Coverage Checker

.github/workflows/tests-js.yml

@@ -30,5 +30,7 @@ jobs:
  run: npm run lint
  - name: Unit Test
  run: npm run test
+ - name: Type Coverage
+ run: npm run type-coverage
  - name: Build
  run: npm run build

package.json

@@ -25,7 +25,8 @@
  "lint:js:fix": "turbo run lint:js:fix",
  "test": "turbo run test",
  "test:unit": "turbo run test:unit",
- "test:snapshots": "turbo run test:snapshots"
+ "test:snapshots": "turbo run test:snapshots",
+ "type-coverage": "turbo run type-coverage"
  },
  "devDependencies": {
  "turbo": "^1.13.3"

packages/iconography/package.json

@@ -14,7 +14,8 @@
  "test": "wp-scripts test-unit-js",
  "test:snapshots": "wp-scripts test-unit-js --updateSnapshot",
  "packages-update": "wp-scripts packages-update",
- "start": "wp-scripts start"
+ "start": "wp-scripts start",
+ "type-coverage": "type-coverage --strict --at-least 99.83"
  },
  "author": "",
  "license": "ISC",
@@ -26,6 +27,7 @@
  "@wordpress/icons": "^9.44.0",
  "@wordpress/interface": "^5.30.0",
  "@wordpress/scripts": "^27.4.0",
- "react": "^18.2.0"
+ "react": "^18.2.0",
+ "type-coverage": "^2.28.2"
  }
 }

packages/iconography/src/IconToolbarButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 /* WordPress Dependencies */
 import { __ } from '@wordpress/i18n';

packages/iconography/src/tests/utils.test.ts

@@ -25,7 +25,7 @@ describe( 'Should generate a rich-text format from icon', () => {
  text: 'zoom_out',
  formats: new Array( 8 ).fill( [
  { type: 'content-only/ms-outlined' },
- ] ),
+ ] ) as { type: 'content-only/ms-outlined' }[],
  start: 0,
  end: 8,
  replacements: [],
@@ -43,7 +43,7 @@ describe( 'Should generate a rich-text format from icon', () => {
  text: 'something_else',
  formats: new Array( 14 ).fill( [
  { type: 'content-only/ms-outlined' },
- ] ),
+ ] ) as { type: 'content-only/ms-outlined' }[],
  start: 0,
  end: 14,
  replacements: [],

packages/iconography/src/utils.ts

@@ -37,11 +37,11 @@ export function generateRichTextFormat(
  * @return {IconGroupIcon[]} Array of { name, value } objects.
  */
 export const getIconOptions = ( suffix: string ): IconGroupIcon[] => {
- const iconNames = IconData.filter( ( iconName ) =>
+ const iconNames = IconData.filter( ( iconName: string ) =>
  iconName.endsWith( suffix )
  );
 
- return iconNames.map( ( name ) => {
+ return iconNames.map( ( name: string ) => {
  const value = snakeCase( name.replace( suffix, '' ) );
  return { name, value };
  } );

turbo.json

@@ -23,6 +23,7 @@
  },
  "test": {},
  "test:unit": {},
- "test:snapshots": {}
+ "test:snapshots": {},
+ "type-coverage": {}
  }
 }