chore(tests): add msw for mocking api http requests #19
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.
This PR adds MSW, but you'll also notice one or two other things that were touched while I was working on this.
First, here's a rundown of the little stuff:
.editorconfigThe settings on editors tend to differ and cause issues when things get auto-formatted. I added an EditorConfig file so that things get autoconfigured and contributors don't have to worry about updating their editor settings when working on the project.
src/utils/user.tsThere was a bug where the class
.userstuffexisted in multiple places on the page. I updated the selector to look for.bio .userstuffwhich should always only get the actual bio. However, when saving the file it got hit by the formatter. However, it should now be in line with the other code in the codebase. Though, let me know if you'd like me to revert this :PNow, on to how MSW is setup to work:
Jest is now configured to load a setup file
jest.setup.js. This file configures MSW to start up, handle requests for each test, and then shutdown at the end of testing.The MSW server lives in
src/mocks/server.js. Really all that happens there is that it creates an MSW server using the handlers defined insrc/mocks/handlers/*.Handlers! MSW can mock REST calls pretty easily. To do so, you call
msw.rest.METHODwhere theMETHODis an http method likeget,put, and so on. For now, I have this set torest.allwhich will handle every method since I wasn't sure of some of the internals of the library. If these are only ever GET requests, then we can swap this torest.getpretty easily.The responses that the handlers return are stored in
src/mocks/data. I've gone through each resource that was being tested against and saved a copy of the request in the appropriate directory. Here's an example of this:With the handlers created and the data saved, each handler can dynamically load the appropriate cached response and reply with it.
Finally, I'd like to point out the
src/mocks/handlers/all.jshandler. I've added this as a catch-all which makes it easier to recognize when something isn't mocked and surfaces the URL associated. If you ever see this in the future, that means you'll need to add a cached copy of the resource.resolves #16