Skip to content

test: use mockTheme instead of hardcoded hex values in amount-keyboard assertions#26710

Merged
georgewrmarshall merged 1 commit intomainfrom
test/use-mocktheme-in-amount-keyboard-assertions
Mar 2, 2026
Merged

test: use mockTheme instead of hardcoded hex values in amount-keyboard assertions#26710
georgewrmarshall merged 1 commit intomainfrom
test/use-mocktheme-in-amount-keyboard-assertions

Conversation

@georgewrmarshall
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall commented Feb 27, 2026

Description

Updates amount-keyboard.test.tsx to use mockTheme design token references instead of hardcoded hex values in test assertions, unblocking the design tokens upgrade to v8.2.1 (#26639).

What this PR does:

  • Replaces hardcoded color hex values (#b7bbc8, #121314, #ca3542) with mockTheme.colors.* references in test assertions for getBackgroundColor and the disabled Next button

Why this is an improvement:

Changelog

CHANGELOG entry: null

Related issues

Dependency of: #26639
Related: #26657

Manual testing steps

Scenario: Verify updated tests pass
  Given the repository with design tokens v8.2.1
  When I run app/components/Views/confirmations/components/send/amount/amount-keyboard/amount-keyboard.test.tsx
  Then all 6 tests should pass

Screenshots/Recordings

N/A - Test-only changes

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
Test-only updates that swap fixed hex assertions for mockTheme token references, reducing brittleness during design token upgrades. No production logic changes; risk limited to potential mismatches with token names/structure.

Overview
Updates amount-keyboard.test.tsx to stop asserting on hardcoded hex colors for the disabled Next/Continue button and getBackgroundColor output.

Assertions now reference mockTheme.colors.text.* and mockTheme.colors.error.*, making the tests resilient to design token value changes while still verifying the correct token is used.

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

@georgewrmarshall georgewrmarshall requested a review from a team as a code owner February 27, 2026 20:45
@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.

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Mobile label Feb 27, 2026
@@ -162,7 +162,7 @@ describe('Amount', () => {
const { getByRole } = renderComponent(undefined, '');
expect(
getByRole('button', { name: 'Next' }).props.style.backgroundColor,
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.

The disabled-button state maps to text.muted (not a border token) because getBackgroundColor uses theme.colors.text.muted for the submitDisabled path. Asserting via the token reference keeps the test correct regardless of what hex value the design system assigns to that token.

@georgewrmarshall georgewrmarshall self-assigned this Feb 27, 2026
mockTheme.colors.error.default,
);
});
});
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.

These four assertions cover all branches of getBackgroundColor: default state (text.default), error only (error.default), disabled only (text.muted), and error taking precedence over disabled (error.default). The token references mean this test continues to validate correct branch logic even when token hex values change in future design system upgrades.

@georgewrmarshall georgewrmarshall force-pushed the test/use-mocktheme-in-amount-keyboard-assertions branch from 0a68c6e to 95e250e Compare February 27, 2026 20:48
@github-actions
Copy link
Copy Markdown
Contributor

🔍 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:
This PR only modifies a unit test file (amount-keyboard.test.tsx) in the confirmations/send flow. The changes are purely test assertion updates - replacing hardcoded color hex values (like '#b7bbc8', '#121314', '#ca3542') with references to the mockTheme object (mockTheme.colors.text.muted, mockTheme.colors.text.default, mockTheme.colors.error.default). This is a test code quality improvement that makes the tests more maintainable by using theme references instead of hardcoded values.

No application code is changed - the actual component (amount-keyboard.tsx) and styles (amount-keyboard.styles.ts) remain untouched. Since this is purely a unit test maintenance change with no functional impact on the application, no E2E tests are required to validate this change.

Performance Test Selection:
No performance tests are needed because this PR only modifies unit test assertions in a test file. No application code, rendering logic, or data loading functionality is changed. The modifications are purely test maintenance - replacing hardcoded color values with theme references in test assertions.

View GitHub Actions results

@georgewrmarshall georgewrmarshall changed the title test(send): use mockTheme instead of hardcoded hex values in amount-keyboard assertions test: use mockTheme instead of hardcoded hex values in amount-keyboard assertions Feb 27, 2026
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Mar 2, 2026
Merged via the queue into main with commit 3f7308f Mar 2, 2026
62 checks passed
@georgewrmarshall georgewrmarshall deleted the test/use-mocktheme-in-amount-keyboard-assertions branch March 2, 2026 09:02
@github-actions github-actions bot locked and limited conversation to collaborators Mar 2, 2026
@metamaskbot metamaskbot added the release-7.69.0 Issue or pull request that will be included in release 7.69.0 label Mar 2, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants