Module 8 Summary

[00:00 - 00:09] This lesson is a summary of what we have covered in module 8. In this module, we learned what is the purpose of end-to-end tests and how Cypress does it better.

[00:10 - 00:35] End-to-end tests are one more form of automated testing that we can use to give us confidence that our app will work as intended. Unlike unit tests that focus on small pieces of an app's functionality and try to test as many possible scenarios as they can, E2Es are designed to test the whole flow through an application and due to their increased runtime and complexity, generally they only test happy path scenarios.

[00:36 - 00:56] And Cypress is what's made end-to-end testing much more palatable in recent times. Prior to Cypress, E2E testing was tough to set up, tough to write and debug tests, and tough to cover all possible front-end scenarios, be they multi-browser compatibility, or working with many different front-end frameworks.

[00:57 - 01:12] In 2015, Cypress came out swinging, and in short order, it became the favorite for E2E testing for good reason. With one extra NPM library and a locally running instance of an app, Cypress is ready to roll, and its ease of use just keeps getting better.

[01:13 - 01:29] We learned how to add Cypress to our app and get us ready to test hardware handler. Cypress makes end-to-end testing much easier than it used to be, but there is still some initial configuration required and some nuances to learn to make the most of all that the framework has to offer.

[01:30 - 01:45] We downloaded Cypress, checked out its recommended E2E testing structure, and added a few new NPM scripts and config files to ensure that our E2E tests were of the best quality they can be. We learned how to write traditional end-to-end tests with Cypress.

[01:46 - 02:06] End-to-end testing is more of an art than unit integration testing, because it involves more thought about what is critical system functionality, and then striving to set up the data to recreate those scenarios. We focused on setting up mocked data and API calls in our first few tests to ensure that different necessary paths through the app work.

[02:07 - 02:23] This gave us a taste of how Cypress interacts with the DOM and how we need to set up data to give the tests what they need each time they run, independent of what the production data looks like at the time. We also learned how to use the experimental Cypress Studio feature to create E2E tests.

[02:24 - 02:42] Finally, we looked at a relatively new feature Cypress has unveiled still behind an experimental feature flag. Cypress Studio, again, makes the act of E2E test writing even easier by allowing us to demonstrate what we want it to test and recording our actions into a working E2E test.

[02:43 - 03:01] It's not quite perfect because mocked test data setup is still required, and after the test actions are written, we need to fill in extra assertions to make sure everything is working, but it's still a marked improvement. This is definitely something that I will use in the future to help make my testing efforts go quicker.

[03:02 - 03:12] So our next module is actually a bonus module and it's adding a component library to our app. So at this point in time, I'd say that you could call this course complete.

[03:13 - 03:28] We've modernized an Enterprise React app from stem to stern. Over the course of these many modules and lessons, we've upgraded an app, rewritten components to use hooks, added configuration, added integration tests, added end-to-end tests, and more.

[03:29 - 04:01] It's pretty crazy to look back and see how far we've come already, but there's one more module I want to share with you because especially when it comes to large, long-running applications, there's a good chance you could encounter it, and that is using a component library. Component libraries can provide us with a whole host of ready-made, already styled, highly functional components that we can plug into our apps to speed up the design and development time, and I'll show you how to get started with it in the next bonus module.