Angular Directive Unit Test Template

directive.spec.js

'use strict';

describe('My Great Directive', function() {
    var $rootScope;
    var $controller;
    var $window;
    var $httpBackend;
    var $compile;
    var scope;
    var MyFancyService
    var MyGreatDirectiveController;

    beforeEach(function() {
        module('myApp.greatDirective');

        inject(function(_$rootScope_, _$httpBackend_, _$compile_, _$controller_, _$window_, _MyFancyService_) {
            // Native Angular Injections
            $rootScope   = _$rootScope_;
            $controller  = _$controller_;
            $window      = _$window_;
            $compile     = _$compile_;
            $httpBackend = _$httpBackend_;
            scope        = $rootScope.$new();

            // Custom Injections
            MyFancyService = _MyFancyService_;

            // Locals are the injections to the directive's controller
            var locals = {
                $window:     $window,
                MyFancyService: MyFancyService
            };

            // Bindings are the objects that are bound to the directive's scope
           var bindings = {
               fancyString: 'fancy-string'
            };

            MyGreatDirectiveController = $controller(
                'MyGreatDirectiveController',
                locals,
                bindings
            );
        });
    });

    describe('Directive Controller', function() {
        it('should be a proper contoller', function() {
            expect(MyGreatDirectiveController).toBeDefined();
        });
    });

    describe('Compiled Directive', function() {
        var responseText;

        beforeEach(function() {
            responseText = 'My Great Directive!';
            $httpBackend.whenGET('/app/partials/great.directive.html').respond(responseText);
        });

        it('should compile', function() {
            var element = $compile('<my-great-directive></my-great-directive>')(scope);
            scope.$digest();
            $httpBackend.flush();
            expect(element.html()).toContain(responseText);
        });
    });
});