AngularJS: Up and Running

Chapter 14. End-to-End Testing

By now, we have covered all the moving parts that comprise an AngularJS application, including controllers, views, services, filters, and directives. We also talked about the importance of unit testing, and saw how we can individually test each part and component of AngularJS. A great set of unit tests can save an amazing amount of time for developers, from debugging to preventing bugs to catching regressions.

But unit tests are only great up to a certain point. They can test whether your application works correctly, assuming that the server behaves in a certain way. We saw this with the unit tests for services and XHRs in Chapter 7, in which we mocked out the server using the $httpBackend service in the unit test. This allowed us to write rapid unit tests that were reliable, stable, and super fast. These tests will catch the logic of your controllers and service, but what if the server changes its return value? Or what if the server URLs themselves have changed? What about formatting and display of the HTML, especially if we have made a typo in an ng-bind expression?

To catch these, we need to write end-to-end tests, which open the browser, navigate to a live running version of our web application, and click around using the application as a real-world user would. To accomplish this, we use Protractor.

In this chapter, we see how to set up a very simple end-to-end test for a demo application using Protractor. We create a Protractor config, write an end-to-end ...