diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ecb21284e5d81..903f6329ec1cb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,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) diff --git a/packages/components/src/date-time/test/date.js b/packages/components/src/date-time/test/date.tsx similarity index 100% rename from packages/components/src/date-time/test/date.js rename to packages/components/src/date-time/test/date.tsx diff --git a/packages/components/src/date-time/test/time.js b/packages/components/src/date-time/test/time.tsx similarity index 85% rename from packages/components/src/date-time/test/time.js rename to packages/components/src/date-time/test/time.tsx index 5d62ff73fcc02..b6e2660a34ca5 100644 --- a/packages/components/src/date-time/test/time.js +++ b/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', () => { ); - 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', () => { ); - 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 ); diff --git a/packages/components/src/date-time/test/utils.js b/packages/components/src/date-time/test/utils.ts similarity index 91% rename from packages/components/src/date-time/test/utils.js rename to packages/components/src/date-time/test/utils.ts index 0f7d7a78ae390..b301b3ebde333 100644 --- a/packages/components/src/date-time/test/utils.js +++ b/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', () => { diff --git a/packages/components/src/date-time/utils.ts b/packages/components/src/date-time/utils.ts index d222b79254148..6c4f4fd217cb7 100644 --- a/packages/components/src/date-time/utils.ts +++ b/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; } diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index eeaeebf7d31d3..dbc64e1aac7b0 100644 --- a/packages/components/tsconfig.json +++ b/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. diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md index f121e560f763d..d6a688937e6c3 100644 --- a/packages/jest-console/CHANGELOG.md +++ b/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 diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json index e270170bb8062..f25848f6f808c 100644 --- a/packages/jest-console/package.json +++ b/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", diff --git a/packages/jest-console/types/index.d.ts b/packages/jest-console/types/index.d.ts new file mode 100644 index 0000000000000..817fd407c4e9d --- /dev/null +++ b/packages/jest-console/types/index.d.ts @@ -0,0 +1,46 @@ +// Definitions originally written by Damien Sorel 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; + } +}