Unit Testing a Custom AngularJS Directive

Problem

You need to write a (Jasmine) unit test spec to test a custom AngularJS directive.

Solution

Write a fixture comprising the directive tag, inject the custom directive logic, and then test it.

// Simple AngularJS directive
var directives = angular.module('myNameSpace.directives', []);

directives.directive('directive', function() {
 var directive = {};

 directive.restrict = 'E'; // Indicates an element directive.
 directive.template = 'Hello World';

 return directive;
});

// Test
describe('myNameSpace.directives', function() {
 var element, scope;

 beforeEach(module('myNameSpace.directives'));

 beforeEach(inject(function($rootScope, $compile) {
 element = angular.element(
 '<directive>Old text</directive>'
 );

 scope = $rootScope.$new();
 $compile(element)(scope);
 scope.$digest();
 }));

 it('should display the text properly', function() {
 expect(element.html()).toBe('Hello World');
 });
});

Related protips

Have a fresh tip? Share with Coderwall community!