Testing Directives in Angular

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();
        });
    });
});

You might read http://blog.ninja-squad.com/2015/01/27/5-tricks-about-directives-and-tests/ — JB Nizet, Jan 27 '15 at 07:34

Paul Sweatte · Answer 1 · 2015-02-04T16:27:33.753

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

Testing Directives in Angular

1 Answers1