Skip to content

test: enforce color-no-hex#26651

Merged
georgewrmarshall merged 8 commits intomainfrom
remove-static-hex-from-tests
Mar 27, 2026
Merged

test: enforce color-no-hex#26651
georgewrmarshall merged 8 commits intomainfrom
remove-static-hex-from-tests

Conversation

@georgewrmarshall
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall commented Feb 26, 2026

Description

Removes static hex color values from tests and replaces them with theme-aware color lookups.

Why: hardcoded hex values are brittle.

  • In production UI, hex literals can drift from the active theme, become incorrect as the color system evolves, and regress when token/theme mappings change.
  • In tests, hex literals in mocks/assertions can fail just because a token’s underlying value changed (noise during token upgrades; see PR chore: update unit testing cursor rule for theme mocks #27825).

Goal: no static hex colors anywhere inside app/components/ or app/component-library/ (including their tests and Storybook stories).

Enforcement:

  • ESLint: @metamask/design-tokens/color-no-hex is turned on as error only for app/components/** and app/component-library/**.
  • Cursor rule: .cursor/rules/unit-testing-guidelines.mdc explicitly calls out “Never hardcode design token hex values” (backed by the eslint rule).

Notable changes in this PR:

  • Tests: update theme mocks to reference mockTheme/design tokens instead of literals.
  • UI: replace a couple of production hex literals with token-backed values (e.g. SecurityTrustScreen, MarketInsights gradient).

Related: #26639
Related: #27825

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: static hex prevention in tests

  Scenario: tests pass after design token upgrade
    Given the design tokens package is upgraded
    When the test suite runs
    Then tests that check colors should not fail due to hex value changes

Screenshots/Recordings

Before

After

Screenshot 2026-03-25 at 10 05 41 PM

Pre-merge author checklist

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
Low risk: mostly lint configuration and test mock updates, with minor UI color token substitutions that could slightly change appearance if token mappings differ.

Overview
Removes hardcoded hex colors in multiple tests by switching mocks/props to mockTheme/design-token values, reducing flakiness when design tokens change; adds a targeted eslint disable for a #12345 token-id false positive.

Updates UI constants/components to use design tokens instead of hex literals (e.g., Market Insights gradient border colors and Security Trust distribution bar/dot). Also tightens linting by enabling @metamask/design-tokens/color-no-hex as an error across all app/components and app/component-library while turning the rule off globally (removing the prior test-only override).

Written by Cursor Bugbot for commit 1d8241e. This will update automatically on new commits. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

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.

Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments

github-merge-queue bot pushed a commit that referenced this pull request Feb 27, 2026
#26657)

## **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**

```gherkin
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**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I've properly set the pull request status:
  - [x] In case it's not yet "ready for review", I've set it to "draft".
- [x] 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.


<!-- CURSOR_SUMMARY -->
---

> [!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.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
04dc67e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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: useStyles mock returns wrong shape, breaking destructuring
    • Updated the test mock to return an object with { styles: {}, theme: mockTheme } matching useStyles’ expected shape.

Create PR

Or push these changes by commenting:

@cursor push 36f97aa38a
Preview (36f97aa38a)
diff --git a/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.test.tsx b/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.test.tsx
--- a/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.test.tsx
@@ -105,7 +105,10 @@
 jest.mock('../../../../../component-library/hooks', () => {
   const { mockTheme } = jest.requireActual('../../../../../util/theme');
   return {
-    useStyles: jest.fn(() => mockTheme),
+    useStyles: jest.fn(() => ({
+      styles: {},
+      theme: mockTheme,
+    })),
   };
 });
 jest.mock('../../components/PerpsTokenLogo', () => 'PerpsTokenLogo');

@georgewrmarshall georgewrmarshall force-pushed the remove-static-hex-from-tests branch from a888832 to f13cb70 Compare March 3, 2026 01:36
@georgewrmarshall georgewrmarshall force-pushed the remove-static-hex-from-tests branch from 5a338a2 to baa3065 Compare March 3, 2026 21:50
@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system in Mobile label Mar 3, 2026
@georgewrmarshall georgewrmarshall self-assigned this Mar 3, 2026
@georgewrmarshall georgewrmarshall mentioned this pull request Mar 3, 2026
7 tasks
This was referenced Mar 5, 2026
@georgewrmarshall georgewrmarshall changed the title chore: prevent static hex values in tests test: color-no-hex Mar 5, 2026
@georgewrmarshall georgewrmarshall force-pushed the remove-static-hex-from-tests branch from bad700f to 051ad2d Compare March 5, 2026 03:46
@github-actions github-actions bot added size-L and removed size-XL labels Mar 5, 2026
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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: mockTheme import is undefined from mocked module
    • Updated the Jest mock to use jest.requireActual and spread actual exports, ensuring useTheme returns actual.mockTheme and the mock re-exports mockTheme.

Create PR

Or push these changes by commenting:

@cursor push 37fb307880
Preview (37fb307880)
diff --git a/app/components/UI/AssetOverview/TronEnergyBandwidthDetail/ResourceRing.test.tsx b/app/components/UI/AssetOverview/TronEnergyBandwidthDetail/ResourceRing.test.tsx
--- a/app/components/UI/AssetOverview/TronEnergyBandwidthDetail/ResourceRing.test.tsx
+++ b/app/components/UI/AssetOverview/TronEnergyBandwidthDetail/ResourceRing.test.tsx
@@ -11,9 +11,13 @@
   },
 }));
 
-jest.mock('../../../../util/theme', () => ({
-  useTheme: () => mockTheme,
-}));
+jest.mock('../../../../util/theme', () => {
+  const actual = jest.requireActual('../../../../util/theme');
+  return {
+    ...actual,
+    useTheme: () => actual.mockTheme,
+  };
+});
 
 describe('ResourceRing', () => {
   it('renders the ring icon', () => {

github-merge-queue bot pushed a commit that referenced this pull request Mar 5, 2026
## **Description**

Continues the color-no-hex cleanup in small codeowner batches by
updating the Snaps (`@MetaMask/core-platform`) tests to remove hardcoded
hex color expectations and local hex theme mocks.

This follows the same pattern as the original PR:
- Original reference PR:
#26651
- use shared `mockTheme` from `util/theme`
- assert token-backed theme values (for example
`mockTheme.colors.info.default`) instead of literal hex strings

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
Related: #26651

## **Manual testing steps**

```gherkin
Feature: static hex prevention in tests

  Scenario: snaps tests rely on shared theme values
    Given the Snap UI Renderer test suite

    When user runs the updated copyable and link tests
    Then both tests pass without hardcoded hex color values in assertions or local theme mocks
```

## **Screenshots/Recordings**

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Low runtime risk since changes are limited to tests and ESLint config,
but enabling `color-no-hex` as an error for all `app/components/Snaps`
files could surface new lint failures across that folder.
> 
> **Overview**
> **Enables stricter linting for Snaps theming.** ESLint now enforces
`@metamask/design-tokens/color-no-hex` as an *error* for
`app/components/Snaps/**/*`.
> 
> **Updates Snaps tests to use token-backed theme values.** Snap UI
tests (`copyable`, `link`, and `SnapUISpinner`) stop using hardcoded hex
colors/local theme mocks and instead import the shared `mockTheme` and
assert against values like `mockTheme.colors.info.default` /
`mockTheme.colors.primary.default`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
468e216. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
github-merge-queue bot pushed a commit that referenced this pull request Mar 5, 2026
## **Description**

This PR is the Predict-only split of the `color-no-hex` batch work,
extracted from the original umbrella PR #26651 and the previously
combined batch branch.

Scope:
- Predict files only (`app/components/UI/Predict/**`)
- temporary eslint rollout override for
`app/components/UI/Predict/**/*.{js,jsx,ts,tsx}`

Reference PR: #26651

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: color-no-hex predict batch

  Scenario: validate predict lint and tests
    Given this branch is checked out
    When running eslint for Predict scope
    Then there are no lint errors

    When running jest for Predict scope with snapshot updates
    Then tests pass
```

## **Screenshots/Recordings**

### **Before**
N/A (test/lint/config updates only)

### **After**
N/A (test/lint/config updates only)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily test-only refactors plus an ESLint override for
`app/components/UI/Predict`; low runtime risk, but it may surface new
lint failures if any remaining hex colors exist in that folder.
> 
> **Overview**
> Enables `@metamask/design-tokens/color-no-hex` enforcement for
`app/components/UI/Predict/**/*` via an ESLint override.
> 
> Refactors Predict unit tests to comply by replacing inline hex strings
with a new shared `TEST_HEX_COLORS` fixture and by standardizing theme
mocks to reuse `mockTheme` from `app/util/theme` (including updating a
few toast/theme color mocks).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
99e9156. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
github-merge-queue bot pushed a commit that referenced this pull request Mar 6, 2026
## **Description**

This PR is the Rewards-only split of the `color-no-hex` batch work,
extracted from the original umbrella PR #26651.

Scope:
- Rewards files only (`app/components/UI/Rewards/**`)
- temporary eslint rollout override for
`app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}`
- includes replacing straightforward mock color suppressions with
`mockTheme` in a subset of Rewards tests

Reference PR: #26651

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: color-no-hex rewards batch

  Scenario: validate rewards lint and tests
    Given this branch is checked out
    When running eslint for Rewards scope
    Then there are no lint errors

    When running jest for Rewards scope with snapshot updates
    Then tests pass
```

## **Screenshots/Recordings**

### **Before**
N/A (test/lint/config updates only)

### **After**
N/A (test/lint/config updates only)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low runtime risk since changes are limited to ESLint configuration
plus test/story updates; main risk is CI/dev friction if any remaining
Rewards hex literals trigger the newly-enforced lint rule.
> 
> **Overview**
> **Enforces `@metamask/design-tokens/color-no-hex` for Rewards UI
code.** Updates `.eslintrc.js` to include
`app/components/UI/Rewards/**/*` in the folders where hex colors are
treated as lint errors.
> 
> **Aligns Rewards tests/stories with the rule.** Rewards tests now mock
`useTheme` by reusing the shared `mockTheme` (and remove a local
onboarding `mockTheme` helper), and a Rewards Storybook story
(`RewardPointsAnimation`) is refactored to use Tailwind/design-system
`Button`s instead of inline styles/hex colors, with a couple of tests
explicitly scoping hex-only mock API colors behind lint disables.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3a5d5c1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
@georgewrmarshall georgewrmarshall force-pushed the remove-static-hex-from-tests branch from fa66692 to ba97db8 Compare March 26, 2026 04:18
twClassName="flex-1"
>
<Box twClassName="w-3 h-3 rounded-full bg-[#6B7FFF]" />
<Box twClassName="w-3 h-3 rounded-full bg-primary-default" />
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After

Fixed static color #6B7FFF (blurple in Token distribution section) cc @sahar-fehri

ImageImage

@github-actions
Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - draft PR

All E2E tests pre-selected.

View GitHub Actions results

},
},
{
files: [
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scopes color-no-hex enforcement to app/components and app/component-library (including tests/stories there) this should cover all of the areas that effect the app UI and add friction to design token library upgrades


/** Gradient stop colors: pink/purple → orange */
export const BORDER_GRADIENT_COLORS = ['#D075FF', '#FF5C16'] as const;
export const BORDER_GRADIENT_COLORS = [
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uses design-tokens brandColor values for this gradient so the visual stays aligned with token SSOT while avoiding hardcoded hex literals.

},
})),
}));
jest.mock('../../../../../util/theme', () => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mocks success color via mockTheme (instead of a literal) so this test stays stable if the underlying token hex changes.

>
<Box twClassName="h-full bg-[#6B7FFF]" style={barFillStyle} />
<Box
twClassName="h-full bg-primary-default"
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaces a hardcoded fill color with the primary token class to satisfy color-no-hex and keep the indicator aligned with the current theme palette (see comment below for visual regression test screenshots).

@georgewrmarshall georgewrmarshall marked this pull request as ready for review March 26, 2026 05:11
@georgewrmarshall georgewrmarshall requested review from a team as code owners March 26, 2026 05:11
@georgewrmarshall georgewrmarshall changed the title test: color-no-hex test: enforce color-no-hex across all component and test code Mar 26, 2026
@georgewrmarshall georgewrmarshall changed the title test: enforce color-no-hex across all component and test code test: enforce color-no-hex Mar 26, 2026
@github-actions
Copy link
Copy Markdown
Contributor

E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

@sonarqubecloud
Copy link
Copy Markdown

Copy link
Copy Markdown
Contributor

@NicolasMassart NicolasMassart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love the lint rules exception removal!

@georgewrmarshall georgewrmarshall added this pull request to the merge queue Mar 27, 2026
Merged via the queue into main with commit ea2ca7f Mar 27, 2026
126 checks passed
@georgewrmarshall georgewrmarshall deleted the remove-static-hex-from-tests branch March 27, 2026 16:50
@github-actions github-actions bot locked and limited conversation to collaborators Mar 27, 2026
@metamaskbot metamaskbot added the release-7.73.0 Issue or pull request that will be included in release 7.73.0 label Mar 27, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.73.0 Issue or pull request that will be included in release 7.73.0 size-M team-design-system All issues relating to design system in Mobile

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants