AngularJS: Up and Running

Chapter 12. Unit Testing Directives

In Chapter 11, we saw how to create simple, reusable components using directives. We explored basic configuration of directives like template and templateUrl, the link function, scope, and restrict. We have also seen in previous chapters how we can unit test controllers and services. Both controllers and services are pure JavaScript functions at the end of the day, and thus we could easily instantiate them and test them in our unit tests. Directives, on the other hand, are directly associated with the DOM, because they create HTML elements or modify their behavior.

In this chapter, we deal with the distinctions that we have to keep in mind while unit testing directives. We see how we can instantiate instances of a directive in a unit test, and learn how AngularJS works under the covers at the same time. By the end of this chapter, we will have written a comprehensive unit test for our stock widget from the previous chapter, while still making sure it is stable and runs fast.

Steps Involved in Testing a Directive

At its core, there are a few key steps (some of which parallel the unit tests for our controllers) that you can use as a checklist when writing unit tests for a directive:

1. Get the $compile service injected into the unit test.
2. Create the HTML element that will trigger the directive you have created.
3. Create the scope against which you want the directive to be tested again.
4. Remember that there is no server in the unit test. If the directive ...