chore: update unit testing cursor rule for theme mocks#27825
chore: update unit testing cursor rule for theme mocks#27825georgewrmarshall merged 5 commits intomainfrom
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. |
| ### Theme Mocking Rules | ||
|
|
||
| - **Prefer shared `mockTheme` from `app/util/theme`** instead of hard-coded color literals in tests. | ||
| - **Never hardcode design token hex values** in assertions or theme mocks (enforced by `@metamask/design-tokens/color-no-hex`). |
| ``` | ||
|
|
||
| ```ts | ||
| // ✅ CORRECT: mock useTailwind with the right shape |
There was a problem hiding this comment.
This useTailwind mock is intentionally minimal because most components only call tw.style; adding extra helpers tends to diverge across tests and makes future token changes harder to standardize.
| ``` | ||
|
|
||
| ```ts | ||
| // ✅ ALSO CORRECT: match real useTailwind() return type (callable function + helpers) |
There was a problem hiding this comment.
Some tests treat the useTailwind return value as callable plus a .style helper (see existing patterns like ManualBackupStep1), so this optional shape helps avoid mismatch bugs; we intentionally don’t mention tw.color since it’s rarely used.
|
✅ E2E Fixture Validation — Schema is up to date |
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Performance Test Selection: |
|
Description
Updates
.cursor/rules/unit-testing-guidelines.mdcwith clearer guidance for theme-related mocks in unit tests:mockTheme(real design tokens) instead of hardcoded hex values.useTailwind()with the correct return shape (supportstw.style(...), and only addtw.color(...)when the component under test uses it).This is intended to reduce churn and align new tests with the
@metamask/design-tokens/color-no-hexESLint rule.Related / prior
color-no-hexPRs:Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
N/A
After
N/A
Pre-merge author checklist
Note
Low Risk
Low risk: documentation-only change that updates testing guidance without affecting runtime behavior.
Overview
Updates
.cursor/rules/unit-testing-guidelines.mdcto add Theme Mocking Rules that steer tests toward using the sharedmockThemeand away from hardcoded hex design tokens (to align with@metamask/design-tokens/color-no-hex).Adds concrete mock examples for
useTheme,useStyles, anduseTailwind()(including the correct return shape), plus an explicit anti-pattern example of local hex color mock objects.Written by Cursor Bugbot for commit 6227068. This will update automatically on new commits. Configure here.