Test angular directive

Let’s define our directive:

Now let’s test it. But what exactly we would like to test?

In angular, directives are all about linking a model (scope) to a view (element). How do we get this element? we will use angular.element() + $compile

Here we are creating a jqLite element, compiling it with the relevant scope, and triggering the digest cycle.

Now we can test the element itself:

Another example.

Now, the directive is referring to parent’s scope:

the test setup will be:

 

checkout this live example:

See the Pen angular jasmine: directive test by ronapelbaum (@ronapelbaum) on CodePen.