[TWRNC] Added typography test by brianacnguyen · Pull Request #752 · MetaMask/metamask-design-system

brianacnguyen · 2025-06-12T00:42:08Z

Description

This PR adds tests to the typography in the @metamask/design-system-twrnc-preset package

Related issues

Fixes:

Manual testing steps

Run yarn test from package/design-system-twrnc-preset

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2025-06-12T00:43:44Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-06-12T00:50:22Z

📖 Storybook Preview

View PR Storybook

…o chore/twrnc-typography-test

github-actions · 2025-06-12T00:57:05Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-06-12T00:57:22Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-06-12T01:03:17Z

📖 Storybook Preview

View PR Storybook

…onfig.js

github-actions · 2025-06-12T01:07:15Z

📖 Storybook Preview

View PR Storybook

cursor

✅ BugBot reviewed your changes and found no bugs!

Was this report helpful? Give feedback by reacting with 👍 or 👎

Copilot

Pull Request Overview

This PR adds comprehensive type and runtime tests for typography definitions in the @metamask/design-system-twrnc-preset package and updates Jest configuration to focus coverage on the typography implementation.

Added typography.types.test.ts to validate TypeScript unions and structure for typography types.
Added typography.test.ts to verify the runtime typographyTailwindConfig object matches design token expectations.
Updated jest.config.js to collect coverage only from src/typography.ts and ignore pure type files.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/design-system-twrnc-preset/src/typography.types.test.ts	New type-level tests covering `TypographyVariant`, `FontWeight`, `FontStyle`, and `TypographyTailwindConfigProps`.
packages/design-system-twrnc-preset/src/typography.test.ts	New runtime tests validating the actual config object for font sizes, families, letter spacing, and line heights.
packages/design-system-twrnc-preset/jest.config.js	Jest configuration tweaks: restrict coverage to `typography.ts`, exclude type files, and merge array options.

Comments suppressed due to low confidence (2)

packages/design-system-twrnc-preset/src/typography.types.test.ts:79

This test only checks the length of testWeights; add assertions such as toStrictEqual([...]) to verify the actual set of weight values is correct and in the expected order.

      expect(testWeights).toHaveLength(11);

packages/design-system-twrnc-preset/src/typography.types.test.ts:228

[nitpick] The variable requiredFontFamilyKeys here differs from expectedFontFamilies in the runtime tests; consider harmonizing naming conventions across test suites for clarity.

      const requiredFontFamilyKeys = [

Copilot · 2025-07-16T21:42:25Z

+describe('typography types', () => {
+  describe('TypographyVariant', () => {
+    it('includes all expected typography variants', () => {
+      const expectedVariants = [
+        'display-lg',
+        'display-md',
+        'heading-lg',
+        'heading-md',
+        'heading-sm',
+        'body-lg',
+        'body-md',
+        'body-sm',
+        'body-xs',
+      ];
+
+      const testVariants: TypographyVariant[] =
+        expectedVariants as TypographyVariant[];
+      expect(testVariants).toHaveLength(9);
+      expect(testVariants).toStrictEqual(expectedVariants);
+    });
+
+    it('can be used as union type', () => {
+      const testFunction = (variant: TypographyVariant): string => variant;
+
+      expect(testFunction('display-lg')).toBe('display-lg');
+      expect(testFunction('display-md')).toBe('display-md');
+      expect(testFunction('heading-lg')).toBe('heading-lg');
+      expect(testFunction('heading-md')).toBe('heading-md');
+      expect(testFunction('heading-sm')).toBe('heading-sm');
+      expect(testFunction('body-lg')).toBe('body-lg');
+      expect(testFunction('body-md')).toBe('body-md');
+      expect(testFunction('body-sm')).toBe('body-sm');
+      expect(testFunction('body-xs')).toBe('body-xs');
+    });
+
+    it('can be used as object keys', () => {
+      const testObject: Record<TypographyVariant, string> = {
+        'display-lg': 'test',
+        'display-md': 'test',
+        'heading-lg': 'test',
+        'heading-md': 'test',
+        'heading-sm': 'test',
+        'body-lg': 'test',
+        'body-md': 'test',
+        'body-sm': 'test',
+        'body-xs': 'test',
+      };


[nitpick] The expectedVariants array is duplicated across multiple test files; consider extracting it into a shared constant or fixture to reduce duplication and improve maintainability.

Suggested change

describe('typography types', () => {

describe('TypographyVariant', () => {

it('includes all expected typography variants', () => {

const expectedVariants = [

'display-lg',

'display-md',

'heading-lg',

'heading-md',

'heading-sm',

'body-lg',

'body-md',

'body-sm',

'body-xs',

];

const testVariants: TypographyVariant[] =

expectedVariants as TypographyVariant[];

expect(testVariants).toHaveLength(9);

expect(testVariants).toStrictEqual(expectedVariants);

});

it('can be used as union type', () => {

const testFunction = (variant: TypographyVariant): string => variant;

expect(testFunction('display-lg')).toBe('display-lg');

expect(testFunction('display-md')).toBe('display-md');

expect(testFunction('heading-lg')).toBe('heading-lg');

expect(testFunction('heading-md')).toBe('heading-md');

expect(testFunction('heading-sm')).toBe('heading-sm');

expect(testFunction('body-lg')).toBe('body-lg');

expect(testFunction('body-md')).toBe('body-md');

expect(testFunction('body-sm')).toBe('body-sm');

expect(testFunction('body-xs')).toBe('body-xs');

});

it('can be used as object keys', () => {

const testObject: Record<TypographyVariant, string> = {

'display-lg': 'test',

'display-md': 'test',

'heading-lg': 'test',

'heading-md': 'test',

'heading-sm': 'test',

'body-lg': 'test',

'body-md': 'test',

'body-sm': 'test',

'body-xs': 'test',

};

const EXPECTED_VARIANTS = [

'display-lg',

'display-md',

'heading-lg',

'heading-md',

'heading-sm',

'body-lg',

'body-md',

'body-sm',

'body-xs',

];

describe('typography types', () => {

describe('TypographyVariant', () => {

it('includes all expected typography variants', () => {

const testVariants: TypographyVariant[] =

EXPECTED_VARIANTS as TypographyVariant[];

expect(testVariants).toHaveLength(9);

expect(testVariants).toStrictEqual(EXPECTED_VARIANTS);

});

it('can be used as union type', () => {

const testFunction = (variant: TypographyVariant): string => variant;

EXPECTED_VARIANTS.forEach((variant) => {

expect(testFunction(variant)).toBe(variant);

});

});

it('can be used as object keys', () => {

const testObject: Record<TypographyVariant, string> = Object.fromEntries(

EXPECTED_VARIANTS.map((variant) => [variant, 'test'])

) as Record<TypographyVariant, string>;

github-actions · 2025-07-16T21:43:25Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-07-06T16:54:38Z

@cursoragent update PR with latest and fix failing ci tests

cursor · 2026-07-06T16:54:45Z

Merged latest main into branch chore/twrnc-typography-test and pushed.
Fixed the failing package tests by dropping the react-native Jest preset in @metamask/design-system-twrnc-preset, adding an explicit babel-jest transform, and updating tests to align with current tokens (Geist font family) and API (no fontWeight in style tuple).
Enabled Flow parsing for tests (added @babel/preset-flow and updated babel.config.js). Verified yarn test passes for packages/design-system-twrnc-preset.

I also updated PR #752 to base main.

…y-test Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

…bel-jest transform Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

…current API Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

…ependency Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

socket-security · 2026-07-06T17:03:41Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@babel/preset-flow@8.0.1

View full report

github-actions · 2026-07-06T17:03:44Z

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🖥️ React
📱 React Native

🌳 Main Branch (Latest)

🖥️ React
📱 React Native

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-07-06T17:06:44Z

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🖥️ React
📱 React Native

🌳 Main Branch (Latest)

🖥️ React
📱 React Native

Add typography tests

88a79a4

brianacnguyen requested a review from a team as a code owner June 12, 2025 00:42

brianacnguyen self-assigned this Jun 12, 2025

brianacnguyen added the team-design-system label Jun 12, 2025

This comment was marked as outdated.

Sign in to view

brianacnguyen added 2 commits June 11, 2025 17:47

Configure ESLint jest rules for twrnc-preset typography tests

8efb038

Updated comments

fda10b4

This comment was marked as outdated.

Sign in to view

brianacnguyen added 2 commits June 11, 2025 17:54

Remove specific ESLint typography jest config, keep Jest coverage config

a5ca648

Merge branch 'main' of github.com:MetaMask/metamask-design-system int…

6557bff

…o chore/twrnc-typography-test

This comment was marked as outdated.

Sign in to view

brianacnguyen added 2 commits June 11, 2025 18:00

Revert package.json and yarn.lock to main branch versions

455868b

Updated coverage for twrnc-preset

b140fe2

This comment was marked as outdated.

Sign in to view

Fix ESLint error: prefix unused parameters with underscores in jest.c…

eebcd49

…onfig.js

cursor Bot reviewed Jun 12, 2025

View reviewed changes

georgewrmarshall marked this pull request as draft June 30, 2025 15:27

georgewrmarshall requested a review from Copilot July 16, 2025 21:41

Merge branch 'main' into chore/twrnc-typography-test

8aa74d7

Copilot AI reviewed Jul 16, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into chore/twrnc-typograph…

f5c09cd

…y-test Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

cursoragent and others added 4 commits July 6, 2026 17:00

build: add @babel/preset-flow and enable in test env

c7da922

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

test(twrnc-preset): drop react-native jest preset and use explicit ba…

0a88d51

…bel-jest transform Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

test(twrnc-preset): update typography tests to match Geist fonts and …

0875a45

…current API Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

build: enable Flow preset in test env and add @babel/preset-flow devD…

c72e3d3

…ependency Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

test(twrnc-preset): fix Prettier formatting in typography.types.test.ts

81a186e

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Uh oh!

Uh oh!

Conversation

brianacnguyen commented Jun 12, 2025

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jun 12, 2025

📖 Storybook Preview

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions Bot commented Jun 12, 2025

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 12, 2025

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 12, 2025

📖 Storybook Preview

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions Bot commented Jun 12, 2025

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 12, 2025

📖 Storybook Preview

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

✅ BugBot reviewed your changes and found no bugs!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 16, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Jul 6, 2026

Uh oh!

cursor Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 6, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

github-actions Bot commented Jul 6, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cursor Bot commented Jul 6, 2026 •

edited

Loading

socket-security Bot commented Jul 6, 2026 •

edited

Loading