feat(coral): Setup msw to mock api [#144] #172
Merged
Conversation
This file contains 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
Closed
programmiri
force-pushed
the
144-setup-msw-as-mock-api
branch
2 times, most recently
from
924ffdd to
a9a4532
Compare
programmiri
force-pushed
the
144-setup-msw-as-mock-api
branch
2 times, most recently
from
f874a80 to
52337df
Compare
SmuliS
requested changes
Nov 3, 2022
There was a problem hiding this comment.
Couple of improvement suggestion of following areas:
- Implement deferred mounting for browser environment
- Define mocked handlers closer where they are used / needed instead in the API domain.
- Move
api-mocksfrom domain into services.
Also, we could discuss about if the mock server used in tests should have handlers that catch everything and raise an exception. That would prevent all outgoing API requests and nudge the developer to implement a proper mock. The following handlers could be initialized in the startup:
rest.get('*', throwError),
rest.put('*', throwError),
rest.post('*', throwError),
rest.delete('*', throwError),
efebc8c to
427c00e
Compare
- `mockServiceWorker.js` is not in `public` to avoid it being build for prod - `main.tsx` required a special handling to make sure msw is not build for prod
- to proof that setup works for app and tests.
- files and directories match architecture plan closer - remove unneeded handlers in mock handles - add typing
- bypass warning for HMR, setting was missing before (https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest) - updated msw directory in package.json
- expose a msw instance in global window to enable usage in components - move mocked api calls to actual api calls - mock API call in component HomePage directly instead of global
- add custom type for window - add types for usage of msw - only run mocked api call in component when msw is set on window (indicating a worker running in browser env) - update test for HomePage
programmiri
force-pushed
the
144-setup-msw-as-mock-api
branch
from
427c00e to
0a955cd
Compare
SmuliS
requested changes
Nov 3, 2022
|
Note |
SmuliS
reviewed
Nov 3, 2022
SmuliS
requested changes
Nov 3, 2022
.
programmiri
force-pushed
the
144-setup-msw-as-mock-api
branch
from
eaba02e to
1be693b
Compare
SmuliS
approved these changes
Nov 3, 2022
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.
Note
I created a follow up ticket for this epic to use the mocked API in
Logininstead ofHomePage. I removed that from the scope of this PR because it already has a lot of changes and I didn't want to make it too big.About this change - What it does
Resolves: #144
Why this way
There where a few tweaks needed to make it work properly with Vite:
mockServiceWorker.jsis not inpublicsince everything in public is in prod buildmain.tsxfollows solutions from this discussionNote: I checked the build files and msw is correctly not introduced there 🎉