This last test example wraps up our journey into unit testing with Angular 2, but keep in mind that we have barely scratched the surface. Testing web applications in general and Angular 2 applications in particular poses a myriad of scenarios that need a specific approach most of the times. Remember that if a specific test requires a cumbersome and convoluted solution, we are probably facing a good case for a module redesign instead.
Where should we go from here? There are several paths to compound our knowledge of web application testing in Angular 2 and become great testing ninjas.
So far, we have used the Jasmine HTML spec runner to execute our tests and get a results report. While this is perfectly fine for smaller projects, the HTML spec runner might not be the best solution for bigger projects, especially if we want our tests to be re-executed automatically when code changes or we need to hook up our tests layer with a continuous integration server.
At this point you will want to use a more powerful and faster spec runner without compromising your project. For that reason, your best bet might be picking up Karma as a spec runner. Used by the Angular team itself, it plays well with Jasmine and other testing frameworks such as Mocha or QUnit. It also features a simple but powerful configuration setup with support for automatic spec scanning, file watching, multiple report outputs, and advanced extensibility with plugins.
For those in need to hook up their application with continuous integration servers, Karma also provides adapters for Jenkins, Travis, or Semaphore.
You can find further information at https://karma-runner.github.io.
How can we know how far do our tests go on testing the application? Are we sure we are not leaving any piece of code untested and if so, is it relevant? How can we detect the pieces of code that fall outside the scope of our current tests so we can better assess if they are worth testing or not?
These concerns can be easily addressed by introducing code coverage reporting in our application tests stack. A code coverage tool aims to track down the scope of our unit testing layer and produce an educated report informing of the overall reach of your test specs and what pieces of code still remain uncovered.
There are several tools for implementing code coverage analysis in our applications, Blanket (http://blanketjs.org), and Istanbul (https://gotwarlost.github.io/istanbul) the most popular ones at this time. In both cases, the installation process is pretty quick and easy.
In this chapter, we saw how we could test certain parts of the UI by evaluating the state of the DOM. This gives us a good idea of how things would look like from the end user's point of view, but ultimately this is just an uneducated guess.
End-to-end (E2E) testing is a methodology for testing web applications using an automated agent that will programmatically follow the end user's flow from start to finish. Contrary to what unit testing poses, the nuances of the code implementation are not relevant here, since E2E testing entails testing our application from start to finish from the user's endpoint . This approach allows us to test the application in an integrated way. While unit testing focuses on the reliability of each particular piece of the puzzle, E2E testing does assess the integrity of the puzzle as a whole, finding integration issues between components that are frequently overlooked by unit tests.
The Angular team built for the previous incarnation of the Angular framework a powerful tool named Protractor (https://docs.angularjs.org/guide/e2e-testing), which is defined as follows:
"..an end to end test runner which simulates user interactions that will help you verify the health of your Angular application."
The tests syntax will become pretty familiar since it also uses Jasmine for putting together test specs. Unfortunately, E2E sits outside the scope of this book, but there are several resources you can rely on to expand your knowledge on the subject. In that sense, we recommend the book Angular 2 Test-driven development, Packt Publishing, which provides broad insights on the use of Protractor to create E2E test suites for our Angular 2 applications.