How to check AngularJS directives

Question

How to check AngularJS directives

I am working on a Rails 3.2 application that will use AngularJS. I can get Angular to do what I need, but it is very difficult for me to figure out how to check what I am doing. I am using guard-jasmine to run Jasmine specs using PhantomJS.

Here is the (relevant) html:

<html id="ng-app" ng-app="app"> <div id="directive-element" class="directive-element"> </div> </html>

javascript (in coffeescript) looks like this:

 window.Project = App: angular.module('app', []) Directive: {} Project.Directive.DirectiveElement = -> restrict: 'C' link: (scope, element, attrs) -> element.html 'hello world' Project.App.directive 'directiveElement', Project.Directive.DirectiveElement

The code above does exactly what it should do. Trials are a problem. I can not get them to work at all. This is one thing I have tried. Posting is basically just to start a conversation somewhere.

 describe 'App.Directive.DirectiveElement', -> it 'updates directive-element', -> inject ($compile, $rootScope) -> element = $compile('<div id="app" ng-app="app"><div id="directive'element" class="directive-element"></div></div>') expect(element.text()).toEqual('hello world')

As an aside, I'm new to AngularJS, so if there are any best practices regarding namespaces, modules, etc. that I don't follow, the guide will be appreciated.

How do I get a test for this?

+44

angularjs testing angularjs-directive

toadjamb Oct 05

source share

2 answers

Andrew Joslin · Answer 1 · 2012-10-06 14:21

Here as a warning directive is tested in angular -ui / bootstrap .

Here is another simple set of tests for the button directive.

Here are some suggestions:

Be sure to tell the tester which module you are testing with beforeEach(module('myModule')) .
If you have external templates in your directives, you need to somehow pre-cache them for a test runner. Test runner cannot asynchronously get GET patterns. In bootstrap, we insert templates into javascript with a build step and make each template a module. We use the grunt-html2js grunt task.
In your tests, use the inject helper in beforeEach to enter $ compile and $ rootScope and any other services you need. Use var myScope = $rootScope.$new() to create a new scope for each test. You can do var myElement = $compile('<my-directive></my-directive>')(myScope); to create an instance of your directive and access its element.
If the directive creates its own scope and you want to test it, you can access this scope by doing var directiveScope = myElement.children().scope() - it will receive a child element (the directive itself) and get for this .
To test timeouts, you can use $timeout.flush() to complete all waiting times.
For testing promises, remember that when resolving a promise, it will not call its then callbacks until the next digest. Therefore, you should do this a lot in tests: deferred.resolve(); scope.$apply(); deferred.resolve(); scope.$apply(); .

You can find tests for directives of varying complexity in the boot repo . Just take a look at src/{directiveName}/test/ .

daniellmb · Answer 2 · 2013-09-17 21:34

Angular Test Patterns can help you, there are examples in both coffeescript and javascript.

Here is a test pattern for checking the directive that presents the expected result .

How to check AngularJS directives

More articles: