Convert FocalPointPicker tests to TypeScript

[jpstevens]

What?

This PR converts the index and media tests for the FocalPointPicker to TypeScript.

Why?

Adding TypeScript support resolves this issue: #60529

How?

• converted both files to .tsx
• fixed missing property errors by passing default { ...props } to components (similar to this test)
• for "should handle legacy string values" test, cast string values as unknown as number to avoid changing FocalPoint type to officially support string values as well as number

If the preference is to officially support string values for focal points let me know and I'll update FocalPoint type to Record< FocalPointAxis, number | string > - however this will require further changes to the FocalPointPicker implementation.

Testing Instructions

npm run test:unit -- packages/components/src/focal-point-picker tests pass (see screenshot below)
npm run build:package-types returns a zero exit code

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jpstevens <[email protected]>
Co-authored-by: tyxla <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jpstevens! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[tyxla]

Thanks for working on it 👍

I think this looks good, I've only offered a couple of minor suggestions.

[tyxla]

Literally every test will have the data-testid="media" prop, should we add this to props and remove that prop from the tests?

We might need to add the data-testid prop to FocalPointPickerMediaProps since that prop doesn't exist there.

[jpstevens]

Good question - I've updated the default prop object to include 'data-testid': 'media'

The change is only required for testing, so I opted not to change the underlying FocalPointPickerMediaProps type definition.

The current implementation of Media uses pass-through props, which allow any prop to be passed to the child component, including data-testid

[jpstevens]

Interestingly, I couldn't find any tests in the codebase where the data-testid prop is not repeated on each component:

• Elevation repeats data-testid="elevation"
• Grid repeats data-testid="grid"
• Panel repeats data-testid="inner-content"

There is one example that extracts the data-testid value to a const, but it doesn't prevent the prop repetition on the components:

• Icon repeats data-testid={ testId }

[tyxla]

Thanks for taking such a thorough look! This was a very minor detail and TBH I'm good with you've come up with 👍

[tyxla]

Looks good. Happy to ship this for you, but could I ask you to rebase it to the latest trunk before that? Maybe that will solve the compressed size check failure.

[tyxla]

Thanks for taking such a thorough look! This was a very minor detail and TBH I'm good with you've come up with 👍

[jpstevens]

I synced with trunk, seems to have resolved the failing task. Thanks for the review @tyxla!