Investigate UI Integration testing tools

[ArendPeter]

Testing Strategy

After some research, here's all the testing I think we should support:

	Deployment	Production
Front End	jest + react-testing + mirage	-
Back End	jest unit tests	monitoring (infrastructure + api tests)

• Backend (during deployment): We already have this
• Backend (during production): We don't have testing on production yet. The backend should have monitoring to catch any issues that occur after the code has been released. It's also important to monitor the health of the infrastructure, as well as tests on the core functionality. This article gives more details on why it's important to have both. There's still a lot of open questions for deploying the monitors, setting up dashboard, and alerting/paging us, so I'm going to deprioritize this testing for now
• Frontend (during deployment): I think we should add this next, I'll detail that in a bit
• Frontend (during production): I'm not sure if we need frontend testing during production. This article had some good points for why api tests should be favored. I feel like the backend monitoring should be enough to catch most issues that come up during production

Front End Tests

Here's the tools I think we should use for the UI testing

• jest: This helps manage the tests. We already use this for the backend and it seems to be a common tool for react as well, so we may as well stay consistent
• react-testing: This seems to be the best tool for generating procedural interactions with a react based website
• mirage: This will create a mock backend so that we can test the front end in isolation. The other most common tool for this is json-server. I couldn't find any direct comparison (aside from the one supplied by mirage ), but it seems like json-server is primarily used to get a quick working server with no code, it would be difficult to make the apis exactly match an existing backend. Mirgae is created with more of a testing focus

Resources

react-testing Resources

• react-testing + jest + mirage
• react-testing + nock
• how best to query query when using react-testing

Dave Farley Vidoes:

• https://www.youtube.com/watch?v=Bq_oz7nCNUA
• https://www.youtube.com/watch?v=JDD5EEJgpHU
• https://www.youtube.com/watch?v=9P5WG8CkPrQ

Misc

• General UI + CICD article

Appendix A: Mock backend? or test End-to-End

Question: Do we want to mock out the server to isolate the UI in our tests? or should we see these as end to end tests? It would be kind of messy to constanly recreate and delete test data, but maybe that's fine for the dev environment

Looks like it was answered in the comment thread of the mirage video

and this video backs it up argument https://www.youtube.com/watch?v=QFCHSEHgqFE

Appendix B: What happened to Cucumber and Gherkin?

I initially planned to use cucumber here so that I could leverage gherkin , and create the tests in a more BDD fashion (bdd-vid1, bdd-vid2).

I still want to use BDD but getting cucumber + gherkin to work with js seemed a bit too clunky (based on what I saw in this article).

I can still use a BDD approach as described in this video

[ArendPeter]

I gave up on this at the time, but it could be good to consider again after the official release

[ArendPeter]

In progress #711