test: use mockTheme instead of hardcoded hex values in test assertions by georgewrmarshall · Pull Request #26657 · MetaMask/metamask-mobile

georgewrmarshall · 2026-02-26T20:17:17Z

Description

This PR updates test files to use design token references instead of hardcoded hex values, unblocking the design tokens upgrade to v8.2.1 (#26639).

What this PR does:

Replaces hardcoded color hex values with mockTheme.colors.* references in test assertions
Uses brandColor.* for static, non-theme-dependent colors (camera overlay)
Updates snapshots to reflect new design token values
Fixes template interpolation in inline snapshots

Why this is an improvement:

Makes tests resilient to design token value changes
Ensures tests validate correct token usage rather than specific hex values
Aligns with design system best practices

Changelog

CHANGELOG entry: null

Related issues

Dependency of: #26639
Related: #26651

Manual testing steps

Scenario: Verify all updated tests pass
  Given the repository with design tokens v8.2.1
  When I run the following test files:
    | Test File |
    | app/components/Snaps/SnapUIRenderer/components/input.test.ts |
    | app/components/UI/Bridge/components/TransactionDetails/BridgeStepDescription.test.tsx |
    | app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx |
    | app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx |
    | app/components/UI/Rewards/hooks/useRewardsToast.test.tsx |
    | app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx |
  Then all tests should pass
  And snapshots should match expected values

Screenshots/Recordings

N/A - Test-only changes

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
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.
I've properly set the pull request status:
- In case it's not yet "ready for review", I've set it to "draft".
- In case it's "ready for review", I've changed it from "draft" to "non-draft".

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.

Note

Low Risk
Test-only changes that update assertions to reference theme tokens, reducing brittleness during design-token updates. Low risk aside from potential snapshot/assertion adjustments if token mappings differ.

Overview
Updates several UI/unit tests to assert against theme design tokens (via mockTheme.colors.*) instead of hardcoded hex values, including Snap UI input borders, Bridge step text colors, Earn navbar background, and Rewards toast icon colors.

Adjusts tests that relied on inline snapshots/mocked theme shapes by switching to token-backed assertions (and using brandColors for static camera overlay colors in Veriff branding) to keep tests resilient to design-token value changes.

^{Written by Cursor Bugbot for commit 04dc67e. This will update automatically on new commits. Configure here.}

Replace hardcoded hex color values with design token references in test files to make tests resilient to future design token upgrades. This unblocks PR #26639 (design token upgrade to v8.2.1) by ensuring tests assert the correct design token is used rather than specific hex values that change between token versions. Updated test files: - app/components/Snaps/SnapUIRenderer/components/input.test.ts - app/components/UI/Bridge/components/TransactionDetails/BridgeStepDescription.test.tsx - app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx - app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx - app/components/UI/Rewards/hooks/useRewardsToast.test.tsx - app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx Approach: - Import lightTheme from @metamask/design-tokens - Replace hex values with lightTheme.colors.* references - Update theme mocks to use jest.requireActual('@metamask/design-tokens') - Update snapshots to reflect new token values

github-actions · 2026-02-26T20:17:28Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx

- Use mockTheme instead of lightTheme for consistency with codebase - Use correct brandColor tokens (grey900/grey000) for camera overlay in VerifyIdentity test - Remove template interpolation from inline snapshot in info-row-divider test (Jest cannot update snapshots with template literals) - Update snapshots to reflect design token values

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Mock doesn't re-export mockTheme, causing undefined access
- Updated the local theme mock to spread actual exports while overriding useAppThemeFromContext, preserving mockTheme for imports used in assertions.

Or push these changes by commenting:

@cursor push 3032f9806f

Preview (3032f9806f)

diff --git a/app/components/UI/Rewards/hooks/useRewardsToast.test.tsx b/app/components/UI/Rewards/hooks/useRewardsToast.test.tsx
--- a/app/components/UI/Rewards/hooks/useRewardsToast.test.tsx
+++ b/app/components/UI/Rewards/hooks/useRewardsToast.test.tsx
@@ -36,6 +36,7 @@
 jest.mock('../../../../util/theme', () => {
   const actualTheme = jest.requireActual('../../../../util/theme');
   return {
+    ...actualTheme,
     useAppThemeFromContext: () => actualTheme.mockTheme,
   };
 });

app/components/UI/Rewards/hooks/useRewardsToast.test.tsx

Fix `useRewardsToast` test mock to correctly re-export `mockTheme`, resolving `TypeError`s due to undefined access. ---  > [!NOTE] > **Low Risk** > Low risk: test-only change that fixes a Jest mock to include the real theme exports, preventing `mockTheme` from being `undefined`. No production logic is modified. > > **Overview** > Fixes `useRewardsToast.test.tsx` by updating the `../../../../util/theme` Jest mock to spread `jest.requireActual` exports, ensuring `mockTheme` and other module exports remain available while still overriding `useAppThemeFromContext`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 3032f98. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>  Co-authored-by: Cursor Agent <cursoragent@cursor.com>

georgewrmarshall · 2026-02-26T21:41:45Z

app/components/Snaps/SnapUIRenderer/components/input.test.ts

 describe('SnapUIInput', () => {
-  const clearBorderColor = '#b7bbc866';
-  const focusedBorderColor = '#b7bbc8';
+  const clearBorderColor = mockTheme.colors.border.muted;


Using mockTheme.colors.border references instead of hex values. Updated to use latest color conventions for focus

georgewrmarshall · 2026-02-26T21:42:34Z

app/components/UI/Bridge/components/TransactionDetails/BridgeStepDescription.test.tsx

-    expect(textElement.props.style).toHaveProperty('color', '#686e7d');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.alternative,


These test assertions verify the component uses correct design tokens for text colors. This pattern allows tests to validate token usage while automatically adapting when token values change in future design system updates.

georgewrmarshall · 2026-02-26T21:43:49Z

app/components/UI/Rewards/hooks/useRewardsToast.test.tsx

+  const actualTheme = jest.requireActual('../../../../util/theme');
+  return {
+    ...actualTheme,
+    useAppThemeFromContext: () => actualTheme.mockTheme,


The theme mock now uses jest.requireActual to import the real mockTheme object. This ensures tests use actual design token values rather than custom mock values that could drift from production.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Inline snapshot replacement drops non-color style assertions
- Restored individual assertions for height and margins in the test while keeping the backgroundColor token check.

Or push these changes by commenting:

@cursor push fa7d2eabc4

Preview (fa7d2eabc4)

diff --git a/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx b/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx
--- a/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx
+++ b/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx
@@ -15,5 +15,10 @@
     expect(result?.props?.style?.backgroundColor).toBe(
       mockTheme.colors.border.muted,
     );
+    // Verify static layout properties remain unchanged
+    expect(result?.props?.style?.height).toBe(1);
+    expect(result?.props?.style?.marginLeft).toBe(-8);
+    expect(result?.props?.style?.marginRight).toBe(-8);
+    expect(result?.props?.style?.marginVertical).toBe(8);
   });
 });

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx

georgewrmarshall · 2026-02-26T21:47:12Z

app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx

-            cameraOverlay: '#121314',
-            onCameraOverlay: '#ffffff',
+            cameraOverlay: mockTheme.brandColors.grey900,
+            onCameraOverlay: mockTheme.brandColors.grey000,


Camera overlay colors use mockTheme.brandColors instead of theme.colors because they are static values that should not change with theme. The camera overlay is always dark with white text regardless of light or dark theme mode.

georgewrmarshall · 2026-02-26T21:50:39Z

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx

+        marginLeft: -8,
+        marginRight: -8,
+        marginVertical: 8,
+      });


Changed from inline snapshot to explicit style assertion for better maintainability. This approach verifies all layout properties while using design token reference for backgroundColor. Jest cannot update snapshots with template interpolation, so explicit assertions allow automatic updates when token values change.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Conditional guard silently skips main style assertion
- Replaced the conditional guard with an explicit non-array assertion and an unconditional style assertion so the test fails loudly instead of skipping the main check.

Or push these changes by commenting:

@cursor push 84f6c90c14

Preview (84f6c90c14)

diff --git a/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx b/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx
--- a/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx
+++ b/app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx
@@ -12,14 +12,13 @@
 
     const result = toJSON();
     expect(result).toBeTruthy();
-    if (result && !Array.isArray(result)) {
-      expect(result.props.style).toEqual({
-        backgroundColor: mockTheme.colors.border.muted,
-        height: 1,
-        marginLeft: -8,
-        marginRight: -8,
-        marginVertical: 8,
-      });
-    }
+    expect(Array.isArray(result)).toBe(false);
+    expect((result as any).props.style).toEqual({
+      backgroundColor: mockTheme.colors.border.muted,
+      height: 1,
+      marginLeft: -8,
+      marginRight: -8,
+      marginVertical: 8,
+    });
   });
 });

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx

github-actions · 2026-02-26T23:57:50Z

🔍 Smart E2E Test Selection

Selected E2E tags: None (no tests recommended)
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 6 changed files are unit test files only (.test.ts/.test.tsx). The changes are purely test maintenance/refactoring - replacing hardcoded hex color values (like '#686e7d', '#121314', '#f3f5f9') with theme tokens from mockTheme (like mockTheme.colors.text.alternative, mockTheme.colors.border.muted). No production/application code is modified. The changes affect tests for: Snaps input component, Bridge step description, Card verify identity, Earn lending withdrawal, Rewards toast hook, and Confirmations info row divider. Since no application behavior is changed, E2E tests are not necessary - the unit tests themselves will validate the test refactoring is correct.

Performance Test Selection:
These changes are purely unit test refactoring - replacing hardcoded color values with theme tokens in test assertions. No production code is modified, so there is no impact on app performance. No performance tests are needed.

View GitHub Actions results

mcmire

LGTM!

georgewrmarshall requested review from a team as code owners February 26, 2026 20:17

metamaskbot added the team-design-system All issues relating to design system in Mobile label Feb 26, 2026

github-actions bot added the size-S label Feb 26, 2026

cursor bot reviewed Feb 26, 2026

View reviewed changes

app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx Outdated Show resolved Hide resolved

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx Outdated Show resolved Hide resolved

georgewrmarshall self-assigned this Feb 26, 2026

cursor bot reviewed Feb 26, 2026

View reviewed changes

app/components/UI/Rewards/hooks/useRewardsToast.test.tsx Show resolved Hide resolved

georgewrmarshall changed the title ~~test: use design tokens in test assertions~~ test: use mockTheme instead of static hex values in test assertions Feb 26, 2026

georgewrmarshall changed the title ~~test: use mockTheme instead of static hex values in test assertions~~ test: use mockTheme instead of hardcoded hex values in test assertions Feb 26, 2026

georgewrmarshall marked this pull request as draft February 26, 2026 21:20

georgewrmarshall and others added 2 commits February 26, 2026 13:26

style: fix prettier formatting

1af8240

github-actions bot added size-M and removed size-S labels Feb 26, 2026

georgewrmarshall added team-design-system All issues relating to design system in Mobile and removed team-design-system All issues relating to design system in Mobile labels Feb 26, 2026

georgewrmarshall commented Feb 26, 2026

View reviewed changes

cursor bot reviewed Feb 26, 2026

View reviewed changes

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx Outdated Show resolved Hide resolved

refactor: use mockTheme.brandColors instead of direct brandColor import

fd854fd

georgewrmarshall commented Feb 26, 2026

View reviewed changes

test: preserve layout assertions while using design tokens

d2964d8

georgewrmarshall commented Feb 26, 2026

View reviewed changes

cursor bot reviewed Feb 26, 2026

View reviewed changes

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx Show resolved Hide resolved

georgewrmarshall added 2 commits February 26, 2026 14:19

chore: update snapshots

5acb5c2

test: update EarnLendingWithdrawalConfirmationView snapshot

04dc67e

georgewrmarshall marked this pull request as ready for review February 27, 2026 00:20

OGPoyraz approved these changes Feb 27, 2026

View reviewed changes

Brunonascdev approved these changes Feb 27, 2026

View reviewed changes

Matt561 approved these changes Feb 27, 2026

View reviewed changes

sophieqgu approved these changes Feb 27, 2026

View reviewed changes

georgewrmarshall enabled auto-merge February 27, 2026 02:09

GeorgeGkas approved these changes Feb 27, 2026

View reviewed changes

mcmire approved these changes Feb 27, 2026

View reviewed changes

georgewrmarshall added this pull request to the merge queue Feb 27, 2026

Merged via the queue into main with commit 341cbba Feb 27, 2026
64 checks passed

georgewrmarshall deleted the test/use-design-tokens-in-assertions branch February 27, 2026 17:31

github-actions bot locked and limited conversation to collaborators Feb 27, 2026

metamaskbot added the release-7.69.0 Issue or pull request that will be included in release 7.69.0 label Feb 27, 2026

Uh oh!

Conversation

georgewrmarshall commented Feb 26, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Feb 26, 2026

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

georgewrmarshall Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Feb 26, 2026

🔍 Smart E2E Test Selection

Uh oh!

mcmire left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

georgewrmarshall commented Feb 26, 2026 •

edited by cursor bot

Loading

cursor bot left a comment •

edited

Loading

georgewrmarshall Feb 26, 2026 •

edited

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading