[TWRNC] Added typography test #752

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

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

+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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[TWRNC] Added typography test #752

[TWRNC] Added typography test #752

Uh oh!

brianacnguyen commented Jun 12, 2025

Uh oh!

github-actions bot commented Jun 12, 2025

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

Uh oh!

github-actions bot commented Jun 12, 2025

Uh oh!

github-actions bot commented Jun 12, 2025

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

Uh oh!

github-actions bot commented Jun 12, 2025

Uh oh!

cursor bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 16, 2025

Uh oh!

github-actions bot commented Jul 16, 2025

Uh oh!

Uh oh!

Uh oh!

[TWRNC] Added typography test #752

Are you sure you want to change the base?

[TWRNC] Added typography test #752

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!

Uh oh!