-
Notifications
You must be signed in to change notification settings - Fork 92
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
Conversation
utils/test/garden-test-utils.tsx
Outdated
@@ -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 |
There was a problem hiding this comment.
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.
utils/test/garden-test-utils.tsx
Outdated
* @param mode {string} The color mode. | ||
* @returns {Function} Render function associated with the mode. | ||
*/ | ||
export function getRenderFn(mode: string) { |
There was a problem hiding this comment.
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 ... />);
...
})
utils/test/garden-test-utils.tsx
Outdated
* @param mode {string} The color mode. | ||
* @returns {Function} Render function associated with the mode. | ||
*/ | ||
export function getRenderFn(mode: string) { |
There was a problem hiding this comment.
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 🤷
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea! 🔥
Description
Adds a small utility fn to
garden-test-utils
to simplify testing across color modes.getRenderFn
returns the correctrender
fn for themode
.Detail
getRenderFn
aims to reduce boilerplate code when testing colors in multiple modes usingit.each()
.See this comment.