Conversation
|
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/Predict/components/PredictGTMModal/PredictGTMModal.test.tsx
Show resolved
Hide resolved
...n/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx
Outdated
Show resolved
Hide resolved
app/components/UI/Bridge/Views/BridgeView/BridgeView.view.test.tsx
Outdated
Show resolved
Hide resolved
georgewrmarshall
left a comment
There was a problem hiding this comment.
Some comments
app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.test.tsx
Outdated
Show resolved
Hide resolved
#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>
There was a problem hiding this comment.
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:
useStylesmock returns wrong shape, breaking destructuring- Updated the test mock to return an object with { styles: {}, theme: mockTheme } matching useStyles’ expected shape.
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');
app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.test.tsx
Show resolved
Hide resolved
a888832 to
f13cb70
Compare
5a338a2 to
baa3065
Compare
bad700f to
051ad2d
Compare
There was a problem hiding this comment.
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:
mockThemeimport isundefinedfrom 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.
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', () => {
app/components/UI/AssetOverview/TronEnergyBandwidthDetail/ResourceRing.test.tsx
Outdated
Show resolved
Hide resolved
## **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 -->
## **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 -->
## **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 -->
fa66692 to
ba97db8
Compare
| twClassName="flex-1" | ||
| > | ||
| <Box twClassName="w-3 h-3 rounded-full bg-[#6B7FFF]" /> | ||
| <Box twClassName="w-3 h-3 rounded-full bg-primary-default" /> |
There was a problem hiding this comment.
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - draft PR All E2E tests pre-selected. |
| }, | ||
| }, | ||
| { | ||
| files: [ |
There was a problem hiding this comment.
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 = [ |
There was a problem hiding this comment.
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', () => { |
There was a problem hiding this comment.
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" |
There was a problem hiding this comment.
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).
|
✅ E2E Fixture Validation — Schema is up to date |
|
NicolasMassart
left a comment
There was a problem hiding this comment.
I love the lint rules exception removal!






Description
Removes static hex color values from tests and replaces them with theme-aware color lookups.
Why: hardcoded hex values are brittle.
Goal: no static hex colors anywhere inside app/components/ or app/component-library/ (including their tests and Storybook stories).
Enforcement:
Notable changes in this PR:
Related: #26639
Related: #27825
Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
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.