Create a testing utility to assert Tailwind (twrnc) classnames

[georgewrmarshall]

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.

function flattenStyles(
  styleProp: StyleProp<ViewStyle> | undefined,
): ViewStyle[] {
  if (styleProp === null || styleProp === undefined) {
    return [];
  }
  if (Array.isArray(styleProp)) {
    return styleProp.flatMap((item) =>
      flattenStyles(item as StyleProp<ViewStyle>),
    );
  }
  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.