Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular Directive Unit Test Template
'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);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.