Add jest-console typings and convert DateTimePicker tests to TypeScri…

…pt (#40957)

* Convert DateTimePicker tests to TypeScript

* Use correct return type

* Use typings from DefinitelyTyped

* Update CHANGELOG.md files

* Add attribution

packages/components/CHANGELOG.md

@@ -11,6 +11,7 @@
 ### Internal
 
 -   `DateTimePicker`: Convert to TypeScript ([#40775](https://github.com/WordPress/gutenberg/pull/40775)).
+-   `DateTimePicker`: Convert unit tests to TypeScript ([#40957](https://github.com/WordPress/gutenberg/pull/40957)).
 
 ## 19.10.0 (2022-05-04)
 

packages/components/src/date-time/test/time.js → packages/components/src/date-time/test/time.tsx

@@ -237,11 +237,21 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		expect( screen.getByLabelText( 'Month' ).value ).toBe( '07' );
-		expect( screen.getByLabelText( 'Day' ).value ).toBe( '13' );
-		expect( screen.getByLabelText( 'Year' ).value ).toBe( '2020' );
-		expect( screen.getByLabelText( 'Hours' ).value ).toBe( '06' );
-		expect( screen.getByLabelText( 'Minutes' ).value ).toBe( '00' );
+		expect(
+			( screen.getByLabelText( 'Month' ) as HTMLInputElement ).value
+		).toBe( '07' );
+		expect(
+			( screen.getByLabelText( 'Day' ) as HTMLInputElement ).value
+		).toBe( '13' );
+		expect(
+			( screen.getByLabelText( 'Year' ) as HTMLInputElement ).value
+		).toBe( '2020' );
+		expect(
+			( screen.getByLabelText( 'Hours' ) as HTMLInputElement ).value
+		).toBe( '06' );
+		expect(
+			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
+		).toBe( '00' );
 		/**
 		 * This is not ideal, but best of we can do for now until we refactor
 		 * AM/PM into accessible elements, like radio buttons.
@@ -267,14 +277,12 @@ describe( 'TimePicker', () => {
 			</form>
 		);
 
-		const form = screen.getByRole( 'form' );
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
 
-		let monthInputIndex = [].indexOf.call(
-			form.elements,
+		let monthInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Month' )
 		);
-		let dayInputIndex = [].indexOf.call(
-			form.elements,
+		let dayInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Day' )
 		);
 
@@ -290,12 +298,10 @@ describe( 'TimePicker', () => {
 			</form>
 		);
 
-		monthInputIndex = [].indexOf.call(
-			form.elements,
+		monthInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Month' )
 		);
-		dayInputIndex = [].indexOf.call(
-			form.elements,
+		dayInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Day' )
 		);
 
@@ -313,11 +319,20 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		const monthInput = screen.getByLabelText( 'Month' ).value;
-		const dayInput = screen.getByLabelText( 'Day' ).value;
-		const yearInput = screen.getByLabelText( 'Year' ).value;
-		const hoursInput = screen.getByLabelText( 'Hours' ).value;
-		const minutesInput = screen.getByLabelText( 'Minutes' ).value;
+		const monthInput = ( screen.getByLabelText(
+			'Month'
+		) as HTMLInputElement ).value;
+		const dayInput = ( screen.getByLabelText( 'Day' ) as HTMLInputElement )
+			.value;
+		const yearInput = ( screen.getByLabelText(
+			'Year'
+		) as HTMLInputElement ).value;
+		const hoursInput = ( screen.getByLabelText(
+			'Hours'
+		) as HTMLInputElement ).value;
+		const minutesInput = ( screen.getByLabelText(
+			'Minutes'
+		) as HTMLInputElement ).value;
 
 		expect( Number.isNaN( parseInt( monthInput, 10 ) ) ).toBe( false );
 		expect( Number.isNaN( parseInt( dayInput, 10 ) ) ).toBe( false );

packages/components/src/date-time/test/utils.js → packages/components/src/date-time/test/utils.ts

@@ -14,7 +14,7 @@ describe( 'getMomentDate', () => {
 		const momentDate = getMomentDate( currentDate );
 
 		expect( moment.isMoment( momentDate ) ).toBe( true );
-		expect( momentDate.isSame( moment( currentDate ) ) ).toBe( true );
+		expect( momentDate?.isSame( moment( currentDate ) ) ).toBe( true );
 	} );
 
 	it( 'should return null when given a null argument', () => {

packages/components/src/date-time/utils.ts

@@ -17,7 +17,7 @@ import type { ValidDateTimeInput } from './types';
  *                                    date or null to signify no selection.
  * @return {?moment.Moment} Moment object for selected date or null.
  */
-export const getMomentDate = ( date: ValidDateTimeInput | undefined ) => {
+export const getMomentDate = ( date?: ValidDateTimeInput ) => {
 	if ( null === date ) {
 		return null;
 	}

packages/components/tsconfig.json

@@ -8,7 +8,8 @@
 			"gutenberg-test-env",
 			"jest",
 			"@testing-library/jest-dom",
-			"snapshot-diff"
+			"snapshot-diff",
+			"@wordpress/jest-console"
 		],
 		// Some errors in Reakit types with TypeScript 4.3
 		// Remove the following line when they've been addressed.

packages/jest-console/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Added TypeScript definitions for package consumers ([#40957](https://github.com/WordPress/gutenberg/pull/40957)).
+
 ## 5.0.0 (2022-01-27)
 
 ### Breaking Changes

packages/jest-console/package.json

@@ -29,6 +29,7 @@
 	],
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"types": "types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"jest-matcher-utils": "^27.4.2",

packages/jest-console/types/index.d.ts

@@ -0,0 +1,46 @@
+// Definitions originally written by Damien Sorel <https://github.com/mistic100> under MIT license.
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f0b72c12f6b561e4342dc8a1cf87432d2ad40ae7/types/wordpress__jest-console/index.d.ts
+
+declare namespace jest {
+	interface Matchers< R, T > {
+		/**
+		 * Ensure that `console.error` function was called.
+		 */
+		toHaveErrored(): R;
+
+		/**
+		 * Ensure that `console.error` function was called with specific arguments.
+		 */
+		toHaveErroredWith( ...args: any[] ): R;
+
+		/**
+		 * Ensure that `console.info` function was called.
+		 */
+		toHaveInformed(): R;
+
+		/**
+		 * Ensure that `console.info` function was called with specific arguments.
+		 */
+		toHaveInformedWith( ...args: any[] ): R;
+
+		/**
+		 * Ensure that `console.log` function was called.
+		 */
+		toHaveLogged(): R;
+
+		/**
+		 * Ensure that `console.log` function was called with specific arguments.
+		 */
+		toHaveLoggedWith( ...args: any[] ): R;
+
+		/**
+		 * Ensure that `console.warn` function was called.
+		 */
+		toHaveWarned(): R;
+
+		/**
+		 * Ensure that `console.warn` function was called with specific arguments.
+		 */
+		toHaveWarnedWith( ...args: any[] ): R;
+	}
+}