feat(dx): add MSW for local development without a backend - #606
Open
Vic-Soso wants to merge 1 commit into
Open
Conversation
Local dev required a running Rust backend, which new contributors often could not run. - lib/msw/handlers.ts: Mock Service Worker handlers for every api.* call in lib/api.ts (29 endpoints), with realistic seed data -- a pre-authenticated demo merchant/wallet, a mix of confirmed/ detected/failed payments across several assets and days (so the dashboard and kellymusk#494's revenue chart have something real to show), pending/paid payment requests, a completed withdrawal, KYC, offramp order lifecycle, and SEP-24 deposit/withdraw responses - components/demo-mode-provider.tsx: starts the worker before rendering children when NEXT_PUBLIC_DEMO_MODE=true, so nothing (in particular SessionProvider's getSession call) can race the worker's readiness. A no-op otherwise -- the mock worker code isn't even imported outside demo mode - README: new 'Demo Mode (No Backend Required)' section under Quick Start - public/mockServiceWorker.js generated via Copying the worker script at "/Users/joseph/Dev/aframp-vicsoso/public"... Worker script successfully copied! - public/ Continue by describing the network in your application: https://mswjs.io/docs/quick-start INFO In order to ease the future updates to the worker script, we recommend saving the path to the worker directory in your package.json. ? Do you wish to save "public" as the worker directory? (Y/n)�[63G �[G�[?25h lib/msw/__tests__/handlers.test.ts calls every api.* method against the handler set through msw/node with onUnhandledRequest: 'error', which is what actually proves each method has a matching handler rather than falling through to a real network call. That test caught a real, previously-untested bug in lib/api.ts unrelated to MSW itself: stringifyWithBigInts's marker-stripping regex searched for a literal NUL byte in the JSON.stringify output, but JSON.stringify always escapes a raw NUL in a string value as a six-character text escape sequence -- so the regex never matched, and every bigint field (amount_stroops on createPaymentRequest and createWithdrawal) went out over the wire as a quoted string wrapping that escape sequence around the digits instead of a bare JSON integer. This would have broken those two calls against the real backend too, not just the mocks. Fixed the regex and added lib/__tests__/api.test.ts as a dedicated regression test. Closes kellymusk#486
|
@Vic-Soso Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
@Vic-Soso is attempting to deploy a commit to the kelly musk's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Local dev required a running Rust backend, which new contributors often could not run.
lib/msw/handlers.ts: Mock Service Worker handlers for everyapi.*call inlib/api.ts(29 endpoints), with realistic seed data — a pre-authenticated demo merchant/wallet, a mix of confirmed/detected/failed payments across several assets and days (so the dashboard and feat(home): add 7-day revenue chart to the dashboard #494's revenue chart have something real to show), pending/paid payment requests, a completed withdrawal, KYC, an offramp order lifecycle, and SEP-24 deposit/withdraw responses.components/demo-mode-provider.tsx: starts the worker before rendering children whenNEXT_PUBLIC_DEMO_MODE=true, so nothing (in particularSessionProvider'sgetSessioncall) can race the worker's readiness. A no-op otherwise — the mock worker code isn't even imported outside demo mode.public/mockServiceWorker.jsgenerated vianpx msw init public/.Also fixes (pre-existing, unrelated, but found while building this)
lib/msw/__tests__/handlers.test.tscalls everyapi.*method against the handler set throughmsw/nodewithonUnhandledRequest: 'error', which is what actually proves each method has a matching handler rather than falling through to a real network call. That test caught a real, previously-untested bug inlib/api.tsunrelated to MSW itself:stringifyWithBigInts's marker-stripping regex searched for a literal NUL byte in theJSON.stringifyoutput, butJSON.stringifyalways escapes a raw NUL in a string value as a six-character text escape sequence — so the regex never matched, and every bigint field (amount_stroopsoncreatePaymentRequestandcreateWithdrawal) went out over the wire as a quoted string wrapping that escape sequence around the digits instead of a bare JSON integer. This would have broken those two calls against the real backend too, not just the mocks. Fixed the regex and addedlib/__tests__/api.test.tsas a dedicated regression test.Type of Change
Related Issues
Closes #486
Testing
lib/msw/__tests__/handlers.test.ts: exercises all 29api.*methods against the handler set, asserting no request falls through unhandledlib/__tests__/api.test.ts: regression test for thestringifyWithBigIntsfix, asserting the wire format is a bare JSON integercomponents/__tests__/demo-mode-provider.test.tsx: renders immediately when demo mode is off; shows a loading state → starts the worker → renders children when on; still renders children if the worker fails to startnpm run type-check— no new errors from any file this PR touchesnpx eslintclean on all changed files;npx prettier --checkcleanChecklist
lib/msw/handlers.tsitself is fully exercised by the completeness test