Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: add getRenderFn utility #1819

Merged
merged 2 commits into from
Jun 3, 2024
Merged

test: add getRenderFn utility #1819

merged 2 commits into from
Jun 3, 2024

Conversation

ze-flo
Copy link
Contributor

@ze-flo ze-flo commented May 31, 2024

Description

Adds a small utility fn to garden-test-utils to simplify testing across color modes. getRenderFn returns the correct render fn for the mode.

Detail

getRenderFn aims to reduce boilerplate code when testing colors in multiple modes using it.each().

See this comment.

@coveralls
Copy link

coveralls commented May 31, 2024

Coverage Status

coverage: 96.084%. remained the same
when pulling bfeeed6 on ze-flo/get-renderer-test-util
into fcf7892 on next.

@@ -34,6 +34,29 @@ const customRtlRender = (ui: React.ReactElement, options?: any) =>
const customDarkRender = (ui: React.ReactElement, options?: any) =>
render(ui, { wrapper: DarkThemeWrapper, ...options });

const MODE_TO_RENDER_FN_MAP = {
dark: customDarkRender,
light: customRender
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using a map to better scale as we introduce more modes in the future.

* @param mode {string} The color mode.
* @returns {Function} Render function associated with the mode.
*/
export function getRenderFn(mode: string) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mode is loosely typed to avoid having to explicitly define the type for mode in tests.

With strict mode type 🙅

it.each<['light' | 'dark', string]>([
      ['light', PALETTE.grey[700]],
      ['dark', PALETTE.grey[500]]
    ])('applies the default colors in "%s mode', (mode, color) => {
      const { container } = getRenderFn(mode)(<Component ... />);
      ...
})

With loose mode type 🚀

Less verbose and replies on type inferences. ✅

it.each([
      ['light', PALETTE.grey[700]],
      ['dark', PALETTE.grey[500]]
    ])('applies the default colors in "%s mode', (mode, color) => {
      const { container } = getRenderFn(mode)(<Component ... />);
      ...
})

* @param mode {string} The color mode.
* @returns {Function} Render function associated with the mode.
*/
export function getRenderFn(mode: string) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should renderRtl also be incorporated in this convenience function? Perhaps a getRenderFn({ mode, rtl }: { string, boolean }) type signature 🤷

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! 🔥

chore: add isRTL support

@ze-flo ze-flo merged commit cffdb06 into next Jun 3, 2024
5 checks passed
@ze-flo ze-flo deleted the ze-flo/get-renderer-test-util branch June 3, 2024 19:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

None yet

4 participants