MetaMask / MetaMask/metamask-design-system

Create a testing utility to assert Tailwind (twrnc) classnames

Open
#691 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.