MetaMask / MetaMask/metamask-design-system
Create a testing utility to assert Tailwind (twrnc) classnames
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
Create a testing utility to assert Tailwind (twrnc) classnames used in design system React Native components. This utility will assist in unit testing by verifying the correct application of style classes through the transformation of the `style` prop.
### **Technical Details**
* Refactor the existing `flattenStyles` function to a shared test utility.
* This function recursively normalizes `style` props, including arrays, nested arrays, and single objects, into a flat array of `ViewStyle` objects.
* The utility should expose a clear API to assert the presence or absence of specific Tailwind classnames in the rendered component styles.
* Ensure compatibility with `twrnc`-styled components in the MetaMask mobile design system.
```ts
function flattenStyles(
styleProp: StyleProp | undefined,
): ViewStyle[] {
if (styleProp === null || styleProp === undefined) {
return [];
}
if (Array.isArray(styleProp)) {
return styleProp.flatMap((item) =>
flattenStyles(item as StyleProp),
);
}
if (typeof styleProp === 'object') {
return [styleProp as ViewStyle];
}
return [];
}
```
* Potential enhancements:
* Include helper functions to map classnames to their corresponding style object values.
* Add Jest matchers for easy test readability.
### **Acceptance Criteria**
* Utility successfully extracts and flattens styles from any `style` prop format.
* Developers can assert specific Tailwind classnames are applied in unit tests.
* Coverage for edge cases (e.g., null/undefined styles, nested arrays).
* Tests added for utility function itself.
### **References**
* Internal discussion on improving design system test coverage.
* Related utility logic seen in `flattenStyles` above.
* Use with twrnc and React Native components in the MetaMask design system.
Contributor guide
Research direction
Locate the existing flattenStyles function described in the issue and inspect how design system React Native tests currently handle style props. Extract the recursive normalization into a shared test utility, add assertions for Tailwind classnames, and cover null, undefined, nested-array, and object styles with utility tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile, testing
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100