Testing Directives in Angular - unit-testing

Question

This is my first time testing directives. Does anyone know how I should get started on this or know of any good resources for finding out how to test directives? The angular docs where not a great help
angular.module('pb.campaigns.directives')
.directive('pbImagePicker', ['$window', '$document', function ($window, $document) {
return {
restrict: "E",
template: '<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />',
scope: {
fileId: '=pbFileId',
accountId: '=pbAccountId',
defaultSrc: '#pbDefaultSrc',
width: '#pbWidth',
height: '#pbHeight'
},
controller: 'pbImagePickerController',
link: function (scope, element, attrs) {
scope.$watch('defaultSrc', function (value) {
if (value !== undefined) {
scope.imageSource = value;
}
});
element.click(function () {
scope.pickImage(scope.accountId).then(function (image) {
scope.imageSource = image.storageUrl;
scope.fileId = image.fileId;
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
I was trying to do something like the following but im not sure if im on the right track or how to proceed.
describe('pbImagePicker', function () {
beforeEach(module('pb.campaigns.directives'));
beforeEach(module('ui.router'));
beforeEach(module('ui.bootstrap'));
var $compile;
var $rootScope;
beforeEach(inject(function (_$compile_, _$rootScope_, _$document_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$document = _$document_;
}));
describe('', function () {
it('Replaces the element with the appropriate content', function () {
// Compile a piece of HTML containing the directive
var element = $compile("<pb-image-picker></pb-image-picker>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toEqual('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
});
});
describe('element.click()', function () {
beforeEach(function () {
element = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
compiled = $compile(element)($rootScope);
compiled.triggerHandler('click');
expect().toEqual();
});
it('should resolve a promise when clicked', function () {
spyOn($rootScope, 'pickImage');
$rootScope.$digest();
expect($rootScope.pickImage).toHaveBeenCalled();
});
it('should assign data from resolved promise when clicked', function () {
$rootScope.$digest();
expect($rootScope.imageSource).toEqual();
expect($rootScope.fileId).toEqual();
});
});
});

Answer 1

Use the AngularJS tests specs as a reference. For example:
'use strict';
describe('style', function()
{
var element;
afterEach(function()
{
dealoc(element);
});
it('should compile style element without binding', inject(function($compile, $rootScope)
{
element = jqLite('<style type="text/css">.header{font-size:1.5em; h3{font-size:1.5em}}</style>');
$compile(element)($rootScope);
$rootScope.$digest();
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{font-size:1.5em; h3{font-size:1.5em}}');
}));
it('should compile style element with one simple bind', inject(function($compile, $rootScope)
{
element = jqLite('<style type="text/css">.some-container{ width: {{elementWidth}}px; }</style>');
$compile(element)($rootScope);
$rootScope.$digest();
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.some-container{ width: px; }');
$rootScope.$apply(function()
{
$rootScope.elementWidth = 200;
});
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.some-container{ width: 200px; }');
}));
it('should compile style element with one bind', inject(function($compile, $rootScope)
{
element = jqLite('<style type="text/css">.header{ h3 { font-size: {{fontSize}}em }}</style>');
$compile(element)($rootScope);
$rootScope.$digest();
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: em }}');
$rootScope.$apply(function()
{
$rootScope.fontSize = 1.5;
});
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: 1.5em }}');
}));
it('should compile style element with two binds', inject(function($compile, $rootScope)
{
element = jqLite('<style type="text/css">.header{ h3 { font-size: {{fontSize}}{{unit}} }}</style>');
$compile(element)($rootScope);
$rootScope.$digest();
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: }}');
$rootScope.$apply(function()
{
$rootScope.fontSize = 1.5;
$rootScope.unit = 'em';
});
// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: 1.5em }}');
}));
it('should compile content of element with style attr', inject(function($compile, $rootScope)
{
element = jqLite('<div style="some">{{bind}}</div>');
$compile(element)($rootScope);
$rootScope.$apply(function()
{
$rootScope.bind = 'value';
});
expect(element.text()).toBe('value');
}));
});
References
AngularJS source: ngStyleSpec
AngularJS test helpers: testabilityPatch.js