i'm trying to write test case for custom directives with Jasmine. Currently, I have a directive that is setup as shown here:
This is my code in fiddler
http://jsfiddle.net/aHmPV/33/
app.directive('focusMe', function ($timeout) {
return {
scope: { trigger: '=focusMe' },
link: function (scope, element) {
scope.$watch('trigger', function (value) {
if (value === true) {
element[0].focus();
}
});
}
};
});
My Jasmine code is in fiddler
I tried different ways to test $watch function unable to achieve it , please help
You are set $watch on scope.trigger, but it is passed in focus-me.
You can use spyOn to element[0].focus and create test for focus-me="true" and focus-me="false":
describe('Directive: focusMe', function() {
var element,
scope;
beforeEach(module('CommonBusInfo'));
beforeEach(inject(function($rootScope) {
scope = $rootScope.$new();
}));
it("should focus if focus-me is true", inject(function($compile) {
element = angular.element('<input type="text" focus-me="true" value="chaitu">');
element = $compile(element)(scope);
spyOn(element[0], 'focus');
scope.$digest();
expect(element).toBeDefined();
expect(element[0].focus).toHaveBeenCalled();
}));
it("should NOT focus if focus-me is falsy", inject(function($compile) {
element = angular.element('<input type="text" focus-me="" value="chaitu">');
element = $compile(element)(scope);
spyOn(element[0], 'focus');
scope.$digest();
expect(element).toBeDefined();
expect(element[0].focus).not.toHaveBeenCalled();
}));
});
Related
Directive:
angular
.module('tdsapp')
.directive('focus', focus);
focus.$inject = ['$timeout'];
// Used to set focus on element
function focus($timeout) {
return {
scope: { focus: '#'},
link: function (scope, element) {
scope.$watch('focus',
function (value) {
if (value) {
$timeout(function () {
element[0].focus();
console.log('focus called');
});
}
}
);
}
};
Test Spec:
describe('directive: focus', function () {
var $timeout, element, $scope, $compile;
beforeEach(function () {
module('tdsapp');
inject(function (_$timeout_, $rootScope, _$compile_) {
$timeout = _$timeout_;
$compile = _$compile_;
$scope = $rootScope.$new();
});
});
it('should call focus on element', function () {
var elm = angular.element('<input type="text" name="second" focus="true" />');
spyOn(elm[0], 'focus');
$timeout.flush();
expect(elm[0].focus).toHaveBeenCalled();
});
});
I have looked at AngularJS: how to test directive which gives focus to element? and at How do I check if my element has been focussed in a unit test and neither works. I either get the expect failing or $timeout.flush() - No deferred tasks to be flushed.
EDIT:
As I stated in the text - the above two examples do not work.
I'm trying to unit test my directive that set form validity depending on a controller variable.
My directive code :
angular.module('myModule',[])
.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attr, ctrl) {
scope.$watch("mailExist", function(){
if(scope.mailExist) {
ctrl.$setValidity('existingMailValidator', false);
} else {
ctrl.$setValidity('existingMailValidator', true);
}
});
}
};
});
When trying to unit test this directive, I'm trying to isolate the controller ctrl with this code:
describe('directive module unit test implementation', function() {
var $scope,
ctrl,
form;
beforeEach(module('myModule'));
beforeEach(inject(function($compile, $rootScope) {
$scope = $rootScope;
var element =angular.element(
'<form name="testform">' +
'<input name="testinput" user-mail-check>' +
'</form>'
);
var ctrl = element.controller('userMailCheck');
$compile(element)($scope);
$scope.$digest();
form = $scope.testform;
}));
describe('userMailCheck directive test', function() {
it('should test initial state', function() {
expect(form.testinput.$valid).toBe(true);
});
});
});
Running this test, I still obtain:
Cannot read property '$setValidity' of undefined
that's mean I haven't really inject a controller.
What is wrong in my test?
Finally in found the solution:
first in code I have add :
require: 'ngModel',
and then modified the unit test as follow:
describe('directive module unit test implementation', function() {
var scope,
ngModel,
form;
beforeEach(module('myModule'));
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
var element =angular.element(
'<form name="testform">' +
'<input name="testinput" ng-model="model" user-mail-check>' +
'</form>'
);
var input = $compile(element)(scope);
ngModel = input.controller('ngModel');
scope.$digest();
form = scope.testform;
}));
describe('userMailCheck directive test', function() {
it('should test initial state', function() {
expect(form.testinput.$valid).toBe(true);
});
});
});
and everything works fined.
I am planning to unit test a angular directive using jasmine. My directive looks like this
angular.module('xyz.directive').directive('sizeListener', function ($scope) {
return {
link: function(scope, element, attrs) {
scope.$watch(
function() {
return Math.max(element[0].offsetHeight, element[0].scrollHeight);
},
function(newValue, oldValue) {
$scope.sizeChanged(newValue);
},
true
);
}
};
});
My unit test case is as follows
describe('Size listener directive', function () {
var $rootScope, $compile, $scope, element;
beforeEach(inject(function(_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
$scope = $rootScope.$new();
element = angular.element('<span size-listener><p></p></span>');
$compile(element)($scope);
$scope.$digest();
}));
describe("Change in size", function () {
it("should call sizeChanged method", function () {
element[0].offsetHeight = 1;
$compile(element)($scope);
$scope.$digest();
$scope.$apply(function() {});
expect($scope.sizeChanged).toHaveBeenCalled();
});
});
});
The code works fine. But the unit test fails. The watch function gets called but element[0].offsetHeight in watch always returns 0. How can we update the element so that watch can observe the new height. Is there a way to even test this, because we don't really have a DOM here. Please guide me on changes that need to be done with unit test.
To get the offsetHeight of an element, it needs to be on the page, so you need to attach it to the document:
it("should call sizeChanged method", function () {
element[0].style.height = '10px';
$compile(element)($scope);
angular.element($document[0].body).append(element);
$scope.$apply();
expect($scope.sizeChanged).toHaveBeenCalled();
});
By the way, offsetHeight is read-only property so use style.height.
For more info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
This post helped me find the answer: Set element height in PhantomJS
I'm trying to set the $scope.sang property to an instance of SangService in a directive. Problem is, it doesn't appear to be getting set.
The Setup
sang-player.directive.js:
angular.module('sang').directive('sangPlayer', [
'SangService',
function(SangService) {
return {
restrict: 'EA',
scope: true,
link: function(scope, _elem, attr) {
window.console.log('link');
scope.sang = SangService.$new();
}
};
}]);
sang-player.directive.spec.js:
describe('The Sang Directive', function() {
var compile, scope, element, sang;
beforeEach(function() {
sang = jasmine.createSpyObj('sang',
['play', 'pause', 'playPause', 'previous', 'next', 'seek']);
module(function($provide) {
$provide.value('Sang', sang);
});
inject(function($compile, $rootScope) {
compile = $compile;
scope = $rootScope.$new();
element = getCompiledElement();
});
});
function getCompiledElement() {
var element = angular.element('<div sang-player></div>');
var compiledElement = compile(element)(scope);
scope.$digest();
return compiledElement;
}
it('creates a scope.sang object', function() {
expect(scope.sang).toBeDefined();
expect(typeof scope.sang).toBe('object');
});
});
Output from failed Jasmine spec run:
The Sang Directive
X creates a scope.sang object
Expected undefined to be defined. (1)
Expected 'undefined' to be 'object'. (2)
Not sure why there's no output from the link callback. I would expect this to get called within compile(element)(scope) or scope.$digest().
The Deets
Angular 1.4.1
Jasmine 2.4.1
grunt-contrib-jasmine 0.9.1
The full project repo lives here if you want to tinker.
I have a custom directive that uses a service. When I run my unit tests, I keep getting the thrown error 'Library does not exist on window'. How can I avoid getting that error in my Unit test?
example service
angular.module('example')
.factory('thirdParty', ['$window', function($window) {
if (typeof $window.thirdParty === 'undefined') {
throw new Error('Library does not exist on window');
} else {
return $window.thirdParty;
}
}]);
custom directive
angular.module('example')
.directive('customDirective', ['thirdParty',
function(thirdParty) {
var defaults, link;
link = function(scope, element, attrs, ctrls) {
// do something with thirdParty
};
return {
restrict: 'A',
require: 'ngModel',
link: link,
};
}]);
test
describe('customDirective', function() {
var element, compile, scope;
beforeEach(module('example'));
beforeEach(inject(function($compile, $rootScope) {
compile = $compile;
scope = $rootScope.$new();
}));
// Manually compile and link our directive
function getCompiledElement(template) {
var compiledElement;
var validTemplate = '<input ng-model="example.data" custom-directive />';
compiledElement = compile(template || validTemplate)(scope);
scope.$digest();
return compiledElement;
}
it('should do something', function() {
element = getCompiledElement();
// expects
});
});
You need to inject $window (stub that out too, for good measure) and stub/mock out the thirdParty lib.
var $window;
beforeEach(function () {
$window = {};
module('yourmodule', function ($provide) {
$provide.value('$window', $window);
});
$window.thirdParty = {};
});
it('throws', function () {
delete $window.thirdParty;
function fn () {
getCompiledElement();
}
expect(fn).to.throw(/does not exist on window/i);
});
it('just works™', function () {
function fn () {
getCompiledElement();
}
expect(fn).to.not.throw;
});