Below is my directive--
define(['jquery', 'angular'],function($, angular){
var publishToolSummaryDirective = angular.module('sdm.publishTool.directives').directive('krnPublishToolSummary',
function($compile){
return {
restrict: 'EA',
templateUrl: "apps/sdm/pages/partials/publishToolSummary.html",
link : function(scope, element){
var elem =$(element);
scope.previousComment = "";
scope.displayPublishingCommentText = false;
scope.displayCommentBox = function(event){
event.preventDefault();
scope.displayPublishingCommentText = true;
};
scope.displayCommentLink = function(event){
if(event.target.textContent === "cancel"){
scope.publishingCommentText = scope.previousComment;
}else{
scope.previousComment = scope.publishingCommentText;
}
scope.displayPublishingCommentText = false;
}
}
}
});
return publishToolSummaryDirective;
})
Below is my Unit Test--
define([
'apps/sdm/app',
'angular',
'jquery',
'angular-mocks'
], function ($, angular) {
describe("Unit testing Summary directive", function() {
angular.mock.module('sdm.publishTool.directives');
var compile,scope, q,url,elm;
beforeEach(inject(["$templateCache", "$compile","$rootScope", "$q","$httpBackend",function($templateCache, $compile, $rootScope, $q, $httpBackend) {
q = $q;
compile = $compile;
scope = $rootScope.$new();
var html='<krn-publish-tool-summary></krn-publish-tool-summary>';
elm = compile(html)(scope);
scope.$digest();
console.log(elm);
}]));
it("should compile", function(){
expect(elm.find('button').length).toEqual(3);
expect(elm.className).toContain('publishTool-summary');
});
})
})
It is not building my templateURL mentioned in the directive.
console o/p is
Object{0: <krn-publish-tool-summary class="ng-scope"></krn-publish-tool-summary>, length: 1}
Coverage report shows that it is not even going inside the directive 2nd line.
Any help please!
The html variable is not an angular element so it is not giving desired result.
Try changing
var html='<krn-publish-tool-summary></krn-publish-tool-summary>';
to
var html=angular.element('<krn-publish-tool-summary></krn-publish-tool-summary>');
Related
I used a directive to add a listener function on input file change, I'm going to create a unit test case for this in jasmine, but I'm not able to trigger function in unit case.
unit test code:
describe('customOnChange', function () {
beforeEach(module('app'));
beforeEach(inject(function ($rootScope, $compile, $parse) {
this.$rootScope = $rootScope;
this.compile = $compile;
this.parse = $parse;
this.initDirective = function (config) {
this.scope = this.$rootScope.$new();
this.scope.listnerFunction = function($event){
console.log("event called : ",$event);
};
this.element = angular.element('<input type="text" name="textField" id="textField" dynamic-data-editor-custom-on-change="listnerFunction($event)" ng-model="testText"/>');
this.compile(this.element)(this.scope);
this.$rootScope.$digest();
$('body').append(this.element);
this.$rootScope.$digest();
};
}));
fit('Applied directive successfully', function() {
this.initDirective();
spyOn(this.scope,'listnerFunction');
var ele = this.element.find("input#textField").eq(0);
console.log('element', ele);
ele.triggerHandler('change');
this.$rootScope.$apply();
expect(this.scope.listnerFunction).toHaveBeenCalled();
});
});
The main directive code:
function () {
'use strict';
angular.module('app')
.directive('customOnChange', function ($parse) {
return {
restrict: 'A',
link: function ($scope, element, attrs, ngModel) {
var attrHandler = $parse(attrs.dynamicDataEditorCustomOnChange);
var handler = function (e) {
$scope.$apply(function () {
attrHandler($scope, { $event: e });
});
};
element[0].addEventListener('change', handler, false);
}
};
});
})();
I got the error on running test
Expected spy listnerFunction to have been called.
Please help me to resolve the test case for the directive.
In your test the problem is: spy is created after the method listnerFunction function is called, so you see the error.
You should replace:
this.scope.listnerFunction = function($event){
console.log("event called : ",$event);
};
with (andCallFake for jasmine < 2)
this.scope.listnerFunction =
jasmine.createSpy("listnerFunction")
.and.callfake(function($event){
console.log("event called : ",$event);
});
I have the following directive. This Directive will trigger after animation end triggers. I now just want to add test for this directive. I have created the test case for this. But it's failing. Can anybody help on this? This is plunker
angular.module('movieApp')
.directive('animationend', function() {
return {
restrict: 'A',
scope: {
animationend: '&'
},
link: function(scope, element) {
var callback = scope.animationend(),
events = 'animationend webkitAnimationEnd MSAnimationEnd' +
'transitionend webkitTransitionEnd';
element.on(events, function(event) {
console.log('[animationend directive] callback');
callback.call(element[0], event);
});
}
};
});
And my test case is
describe('Directive: animationend', function () {
// load the directive's module
beforeEach(module('movieApp'));
var elements,
scope,
compile;
beforeEach(inject(function ($rootScope, _$compile_) {
scope = $rootScope.$new();
compile = _$compile_;
elements = angular.element('<div animationend="" ></div>');
elements = compile(elements)(scope);
scope.$digest();
}));
it('should trigger the callback once animationclass is added ', function () {
scope.ctrl = {
animationend: jasmine.createSpy('animationend')
};
scope.$digest();
var events = 'animationend webkitAnimationEnd MSAnimationEnd' +
'transitionend webkitTransitionEnd';
angular.element(elements).triggerHandler(events);
// element.trigger(events);
expect(scope.ctrl.animationend).toHaveBeenCalled();
});
});
I'm trying to test scope function which will check due amount, but while running the test I'm getting validateAmount is not a function.
app.js
var ManagmentApp = angular.module("ManagemntApp", ['ngRoute', 'angularModalService', 'ng-fusioncharts']);
ManagmentApp.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/CandidateForm.html',
controller: 'cntrlrCandidate'
}).when('/CandidateList',{
templateUrl: 'templates/CandidateList.html',
controller: 'cntrlrCandidateList'
}).when('/CandidatesProfile', {
templateUrl: 'templates/CandidateProfiles.html',
controller: 'cntrlrCandidateProfile'
}).when('/HostelStatistics', {
templateUrl: 'templates/HostelStatistics.html',
controller: 'cntrlHostelStatistics'
}).when('/:id', {
templateUrl: 'templates/CandidateForm.html',
controller: 'cntrlrCandidate'
});
}]);
cntrlrCandidate.js
ManagmentApp.controller("cntrlrCandidate", ["$scope", "$routeParams", "HostelManagementService", "$filter","HostelManagementIndexDBService", function ($scope, $routeParams, HostelManagementService, $filter,HostelManagementIndexDBService) {
$scope.validateAmount = function () {
var vrAmount = $scope.Candidate.Amount;
var vrTotalAmount = $scope.PerMonthCharge;
if (+vrAmount < +vrTotalAmount) {
$scope.IsValidAmount = false;
$scope.Candidate.DueAmount = (+vrTotalAmount - +vrAmount);
} else {
$scope.IsValidAmount = true;
$scope.Candidate.DueAmount = 0;
}
}
}]);
test.js
describe("ManagemntApp ", function() {
beforeEach(module('ManagemntApp'));
var scope;
var cntrlrCandidate,
$location;
beforeEach(inject(function ($controller,$rootScope){
scope = $rootScope.$new();
cntrlrCandidate = function() {
return $controller('cntrlrCandidate', {
'$scope': scope
});
};;
}));
it('test amount', function() {
scope.Candidate={};
scope.Candidate.Amount=2000;
scope.validateAmount();
expect(scope.IsValidAmount).toEqual(true);
});
});
I couldn't figure out what making notice.
This is the error I'm getting.
Update1:
When I wrote like this the error message is below.
beforeEach(inject(function ($controller,$rootScope){
scope = $rootScope.$new();
// cntrlrCandidate = function() {
cntrlrCandidate= $controller('cntrlrCandidate', {
'$scope': scope
});
// };;
}));
Please check this error:
Update 2:
I tried this way, please correct me if I did anything wrong.
describe("ManagemntApp ", function() {
var HostelManagementIndexDBService,HostelManagementService;
beforeEach(module('ManagemntApp'));
var scope;
var cntrlrCandidate,
$location;
beforeEach(inject(function ($controller,$rootScope){
scope = $rootScope.$new();
// cntrlrCandidate = function() {
HostelManagementService = {};
HostelManagementIndexDBService = {};
module(function($provide) {
$provide.value('HostelManagementService', HostelManagementService);
$provide.value('HostelManagementIndexDBService', HostelManagementIndexDBService);
});
cntrlrCandidate= $controller('cntrlrCandidate', {
'$scope': scope
});
// };;
}));
it('return will pass the Amount', function() {
scope.Candidate={};
scope.Candidate.Amount=2000;
scope.validateAmount();
expect(scope.IsValidAmount).toEqual(true);
});
});
cntrlrCandidate = function() {
return $controller('cntrlrCandidate', {
'$scope': scope
});
};
You have defined the function cntrlrCandidate but not calling anywhere.
You need to call it first then you will get your controller;
Add this line after the cntrlrCandidate defination;
var ctrlCandidate =cntrlrCandidate ();
OR
better if you define like this instead of defining above function.
cntrlrCandidate = $controller('cntrlrCandidate', {'$scope': scope});
EDIT :
Your controller required following Dependency HostelManagementService and HostelManagementIndexDBService which you not provided.So,you need to mock up it.
Add the following script.
var HostelManagementIndexDBService,HostelManagementService; //declare at top
// add in beforeEach
HostelManagementIndexDBService = {};
HostelManagementIndexDBService = {};
module(function($provide) {
$provide.value('HostelManagementService', HostelManagementService);
$provide.value('HostelManagementIndexDBService', HostelManagementIndexDBService);
});
UPDATE :
describe("ManagemntApp ", function() {
var HostelManagementIndexDBService, HostelManagementService;
beforeEach(module('ManagemntApp'));
var scope;
var cntrlrCandidate,
$location;
beforeEach(function() {
HostelManagementService = {};
HostelManagementIndexDBService = {};
module(function($provide) {
$provide.value('HostelManagementService', HostelManagementService);
$provide.value('HostelManagementIndexDBService', HostelManagementIndexDBService);
});
inject(function($controller, $rootScope) {
scope = $rootScope.$new();
cntrlrCandidate = $controller('cntrlrCandidate', { '$scope': scope });
})
});
it('return will pass the Amount', function() {
scope.Candidate = {};
scope.Candidate.Amount = 2000;
scope.validateAmount();
expect(scope.IsValidAmount).toEqual(true);
});
});
I want to test the following directive "spinInput" which requires ngModel, but I can't access the directive's scope. All I get is an empty scope. Angularjs 1.3.13 is used.
Directive:
angular.module('charts.spinInput',[]).directive('spinInput', function() {
return {
restrict: 'E',
replace: true,
require:'ngModel',
scope: {
min:"#"
},
controller:function($scope)
{
$scope.test=12;
$scope.calcAngle=function(point)
{
var xDif=point.x-50;
var yDif=point.y-50;
return (Math.atan2(yDif, xDif) * 180 / Math.PI);
};
},
templateUrl: 'charts/directive/spinInput/spinInput.html',
link:function(scope, element, attr,ngModel) {
...
}
};
});
Unit Test:
throws following error: TypeError: 'undefined' is not an object (evaluating 'innerScope.min')
describe('spinInput', function() {
beforeEach(module('charts'));
var $httpBackend;
var element;
var outerScope;
var innerScope;
beforeEach(inject(function($rootScope, $compile , $injector) {
element = angular.element('<spin-input min="12"></spin-input>');
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('charts/directive/spinInput/spinInput.html').respond(200, '');
outerScope = $rootScope.$new();
$compile(element)(outerScope);
innerScope = element.isolateScope();
outerScope.$digest();
}));
it('scope.min should be defined', function() {
expect(innerScope.min).toBeDefined();
});
});
The way you are constructing your test seems to be causing issues.
I have been able to successfully test the isolated scope as per below.
You can view the test running on this jsfiddle (with templates code commented out).
describe('Directive: spinInput', function() {
var scope, compile, validHTML, templateHtml;;
validHTML = '<spin-input min="12"></spin-input>';
beforeEach(module('myApp'));
beforeEach(inject(function($compile, $rootScope, $templateCache){
templateHtml = $templateCache.get('charts/directive/spinInput/spinInput.html');
if(!templateHtml) {
templateHtml = $.ajax('charts/directive/spinInput/spinInput.html', {async: false}).responseText;
$templateCache.put('charts/directive/spinInput/spinInput.html', templateHtml)
}
scope = $rootScope.$new();
compile = $compile;
}));
function create() {
var elem, compiledElem;
elem = angular.element(validHTML);
compiledElem = compile(elem)(scope);
scope.$digest();
return compiledElem;
}
it('scope.min should be defined', function() {
var el = create();
expect(el.isolateScope().min).toBeDefined();
});
it('scope.min should equal 12', function() {
var el = create();
expect(el.isolateScope().min).toEqual('12');
});
});
Try putting the outerScope.$digest() before element.isolateScope()
I am trying to unit test a directive that uses ngModel and having difficulties. It seems that the link function of my directive is never being called...
Here is my directive code:
coreModule.directive('coreUnit', ['$timeout', function ($timeout) {
return {
restrict: 'E',
require: '?ngModel',
template: "{{output}}",
link: function (scope, elem, attrs, ngModelCtrl) {
ngModelCtrl.$render = function () {
render(ngModelCtrl.$modelValue);
};
console.log("called");
function render(unit) {
if (unit) {
var output = '(' +
unit.numerator +
(unit.denominator == '' ? '' : '/') +
unit.denominator +
(unit.rate == 'NONE' || unit.rate == '' ? '' : '/' + unit.rate) +
')';
scope.output = output == '()' ? '' : output;
}
}
}
}
}]);
Here is my test spec:
describe('core', function () {
describe('coreUnitDirective', function () {
beforeEach(module('core'));
var scope,
elem;
var tpl = '<core-unit ng-model="myUnit"></core-unit>';
beforeEach(inject(function ($rootScope, $compile) {
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));
it('the unit should be empty', function () {
expect(elem.html()).toBe('');
});
it('should show (boe)', function () {
scope.myUnit = {
numerator: 'boe',
denominator: "",
rate: ""
};
scope.$digest();
expect(elem.html()).toContain('(boe)');
});
});
});
The console log output "called" is never occurring and obviously the elem in my test spec is never updating.
What am I doing wrong??
Turns out that I wasn't including the directive in my karma.config file :S. Adding it in resolved all of my issues.
You can try out two things.
First, instead of using just a string tpl, try angular.element().
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
Second, place the tpl in the beforeEach block. So the result should look like this:
beforeEach(inject(function ($rootScope, $compile) {
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));