Testing + Tooling Drills
Prove high-stakes UI behavior with focused automated tests
This stage turns the state model into tests: typed API clients, MSW scenarios, reducer tests, Storybook hard states, and Playwright reload recovery.
Show that you can test the states users actually hit, including slow, duplicated, failed, and uncertain transfer flows.
API + Mock Boundaries
A clean API layer lets tests simulate backend and chain timing without making components know transport details.
Design a typed transfer API client
ArchitectureSenior40mDefine request IDs, idempotency keys, typed errors, retry policy, auth/network handling, and runtime validation.
Keep transport concerns out of React components.
Write MSW handlers for transfer lifecycle states
CodingSenior45mMock success, slow pending, backend empty while local pending exists, retryable error, and reconciliation completion.
The mock scenarios should map directly to user-visible states.
Unit + Integration Tests
Reducers, merge rules, and status selectors are small enough to test exhaustively and important enough to deserve it.
Test operation merge logic exhaustively
CodingSenior45mCover local-only pending, backend-only records, duplicate tx hashes, stale entries, and final reconciliation.
This is a better interview signal than shallow component snapshots.
Test accessible status announcements
CodingMid35mVerify labels, button states, focus movement, and live-region announcements across transfer state changes.
Accessibility is part of correctness for stressful financial workflows.
End-to-End Recovery
The most valuable E2E tests cover broken timing: reloads, duplicated clicks, delayed APIs, and wallet/provider interruptions.
Write the reload recovery Playwright scenario
CodingSenior50mSubmit a transfer, persist local pending state, reload, show pending, poll backend, and transition to reconciled.
This is the scenario that proves the architecture works for users.
Capture Storybook states for every transfer outcome
ArchitectureMid35mCreate stories for draft, validating, signing, pending, delayed, failed, reconciled, and blocked network states.
Storybook should make product/design review easier, not just document components.