Building and Testing
Excellent, predictable mocks for the asynchronous services are one
of the reasons why AngularJS tests can run blazing fast.On many platforms there are often fundamental, global services that are rather
difficult to test. Logging and exception handling code are examples of such logic
that causes testing headaches. Luckily, AngularJS has a remedy here; it provides
services addressing those infrastructural concerns alongside with accompanying
mock objects. You've probably noticed that the test example makes use of one more
mock, namely, $log. The mock for the $log service will accumulate all the logging
statements and store them for further assertions. Using a mock object assures that
we are not invoking real platform services; especially the ones that are potentially
expensive in terms of performance and could have side-effects (for example, one
could imagine that the $log service sends logs to a server over HTTP, and it would
be very bad idea to perform network calls while executing tests).
End-to-end tests
AngularJS introduced its own end-to-end testing solution called Scenario
Runner. The Scenario Runner can execute integration tests by driving actions
in a real browser. It automatically executes actions (filling in forms, clicking on
buttons, and links and so on) and verifies UI responses (page change, proper
information displayed, and so on), thus greatly reducing the need for the
manual verifications traditionally performed by the quality assurance teams.
AngularJS solution has similar functionality as other existing tools (for
example, the very popular Selenium), but it tightly integrates with the
framework. More specifically:
- The Scenario Runner is aware of asynchronous events (most importantly
XHR calls). It can pause the execution of a test until the asynchronous event
completes. In practice this means that the test code doesn't have to use any
explicit waiting instructions. Anyone who has tried to test an Ajax-heavy
web application using traditional tools will highly appreciate this feature. - We can take advantage of binding information already available in the
AngularJS templates to select DOM elements for further manipulations and
verifications. Essentially it is possible to locate DOM elements and form
inputs based on model to which those elements are bound. This means that
we neither need to embed superfluous HTML attributes (usually IDs or CSS
classes) nor rely on fragile XPath expressions so the testing framework can
locate the DOM elements.