Develop Reference

Unit Testing a Controller with specific syntax

Whenever, I am testing a controller and have something like this in it.
$scope.isSomething = function (Item) {
return ItemCollection.someItem(Item.attachedItem);
};
giving error on karma console:
TypeError: undefined is not an object (evaluating 'Item.attachedItem')
I am simply calling the function from the test file like this:
scope.isSomething();
I need to mock the Item.attachedItem or I am missing something here.. Please Explain in details as this is happening in multiple files.. thanks in advance
Also, for this type of code
.controller('itemCtrl', function (itemCollection) {
var vm = this;
this.itemCollection= itemCollection;
itemCollection.someItem().then(function (Item) {
vm.pageUrl = Item.pageUrl;
vm.Item= Item.someItems;
});
});
Also, this is also part of the code for more broad view here it gives Item.pageUrl is not a object error

Refer angular unit testing docs
The ItemCollection being a service, you could inject a mock while initialising a controller using
var ItemCollection, ItemCrtl;
beforeEach(inject(function($controller, $rootScope) {
$scope = $rootScope.$new();
ItemCollection = jasmine.createSpyObj('ItemCollection', ['someItem']);
ItemCrtl = $controller('ItemCtrl', {
$scope: scope,
ItemCollection: ItemCollection
});
});
For Item, the method isSomething should take care of checking if Item is undefined before doing Item.attachedItem
Testing an aync block is tricky. someItem returns a promise. $q an angular service to which can be used create async functions while testing.
We need to resolve the deferred object to test the async task.
var ItemCollection, ItemCrtl, deferedObj;
beforeEach(inject(function($controller, $rootScope, $q) {
$scope = $rootScope.$new();
deferedObj = $q.defer();
ItemCollection = jasmine.createSpyObj('ItemCollection', ['someItem']);
ItemCollection.someItem.andReturn(deferedObj.promise);
ItemCtrl = $controller('ItemCtrl', {
$scope: scope,
ItemCollection: ItemCollection
});
});
it('sets page url', function() {
deferedObj.resolve({ pageUrl: 'http://url', someItems: [1,2,3] });
scope.$apply();
expect(ItemCtrl.pageUrl).toEqual('http://url');
});

you have to use mock Item data in test like this (assuming attachedItem value is boolean)
var item={attachedItem:true}
scope.isSomething(item)

$scope.isSomething = function (Item) {
if(!Item.attachedItem){
Item.attachedItem=YOUR_MOCK_VALUE;
}
return ItemCollection.someItem(Item.attachedItem);
};

Angular test Type Error

Have tried a test case in karma, Mocha chai and sinon.
Am getting a error once I use the service. This is my error. Please any help.
AssertionError: expected undefined to deeply equal 'strong'
at /var/www/html/Testing/mocha/node_modules/chai/chai.js:210
at assertEql (/var/www/html/Testing/mocha/node_modules/chai/chai.js:784)
at /var/www/html/Testing/mocha/node_modules/chai/chai.js:3854
at /var/www/html/Testing/mocha/www/index-controller.test.js:22
PhantomJS 1.9.8 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.043 secs / 0.002 secs)
This is my indexcontroller.js
'use strict';
angular.module('beatso.index-controller', [])
.controller('IndexController', function(
commanService) {
(function(vm){
angular.extend(vm, {
checkPassword: checkPassword
})
vm.headingTop = "Beatso A Music Fanatic Group";
vm.password = "verystrogpassword";
function checkPassword() {
return commanService.passwordValidator("vm.password");
}
})(this);
});
This is my test for indexcontroller.
indeccontroller.test.js
describe('Index Controller', function() {
var indexController;
var commanServiceMock;
var commanService;
beforeEach(module('beatso.index-controller'));
beforeEach(module(initMocks));
beforeEach(inject(initIndexController));
it('should return strong if password length is greater than equal to 8', function() {
expect(indexController.checkPassword()).to.eql('strong');
expect(commanServiceMock.passwordValidator.calledOnce).to.eql(true);
});
function initMocks ($provide){
commanServiceMock = {
passwordValidator: sinon.spy()
};
$provide.service('commanService', function(){
return commanServiceMock;
})
}
function initIndexController($controller) {
indexController = $controller('IndexController');
}
});
This is my common service
'use strict';
angular.module('beatso-comman.service', [])
.factory('commanService', function(){
var service = {
passwordValidator: passwordValidator
}
function passwordValidator(password){
if(password.length >= 8) {
return 'strong'
}else {
return 'weak'
}
}
return service;
})
Here is my test for the service.
'use strict'
describe('Test for my comman service', function(){
var cService;
beforeEach(module('beatso-comman.service'));
beforeEach(inject(initCommanService));
it('It should check the password strength', function(){
expect(cService.passwordValidator('amtoverystrongpassword')).to.eql('strong');
});
function initCommanService(commanService){
cService = commanService;
}
})

Your commanService mock has no method "passwordValidator", so trying to call it raise an "undefined" error.
If you do want to test your service, you should not mock it but actually really test it. You can get a reference to your service by injecting it (see inject() function in Jasmine).
Here's a piece of code from one of my project:
// inject the service itself
beforeEach(inject(function(nfcService){
service = nfcService;
}));
Where, obviously, "service" is the variable I am using to perform my unit tests (and really test my service).
Edit - details:
What I mean above is, the tests of your controller should not test your service... The tests of your controller should test your controller. It should, eventually, using a mock of your service (with a spy on the desired method), check that the appropriate method has been called.
For instance:
myServiceMock = {
expectedMethod: jasmine.createSpy('expectedMethod spy')
}
And in your test:
expect(myServiceMock.expectedMethod).toHaveBeenCalled();
When instantiating a controller with $controller, you can pass it (in a second parameter) an object literal providing its dependencies. This way, you can give it the mock you want.
An example, still from my project:
menuCtrl = $controller('MenuController', {
// where 'uiFeedbackService' is the name of the dependency
'uiFeedbackService': uiFeedbackServiceMock
});
Note: Regarding the declaration of your service, you can directly return an Object literal instead of creating a variable, declaring a private function (passwordValidator), and then returning the variable.
angular.module('beatso-comman.service', [])
.factory('commanService', function(){
return {
passwordValidator: function(password){
if(password.length >= 8) {
return 'strong'
}else {
return 'weak'
}
}
}
})

Test Angular scope variables inside ajax request with Jasmine

I would like to know how to test some Angular scope variables at my controller that was created inside an ajax request.
What I mean is... This is my controller:
app.controller('NewQuestionCtrl', function ($scope, Question) {
loadJsonAndSetScopeVariables($scope, Question);
});
function loadJsonAndSetScopeVariables(scope, Question) {
Question.loadJson().then(function(success) {
var result = success.data.variables;
scope.levels = result.levels;
scope.tags = result.tags;
scope.difficulties = result.difficulties;
scope.questionTypes = result.questionTypes;
scope.areas = result.areas;
},function(data){
});
}
One of the prerequisites is not to use mock.
At my test I was able to inject my Question service:
describe('Controller: NewQuestionCtrl', function () {
beforeEach(angular.mock.module('testmeApp'));
var NewQuestionCtrl, scope, QuestionService;
beforeEach(inject(function ($controller, $rootScope, Question) {
scope = $rootScope.$new();
QuestionService = Question;
NewQuestionCtrl = $controller('NewQuestionCtrl', {
$scope: scope
});
}));
it('should attach a list of areas to the scope', function (done) {
expect(scope.areas).toBeDefined();
done();
});
Please, someone could help me?

Create a mock for Question and use that. There are several ways to do this. This is just one of them.
You could alternatively inject a real instance of Question and spy on that instead, but a mock is preferred to isolate these unit tests from the Question unit tests.
var questionDeferred, myController, scope;
var mockQuestion = {
loadJson: angular.noop
};
beforeEach(inject(function($q, $rootScope, $controller) {
questionDeferred = $q.defer();
scope = $rootScope.$new();
spyOn(mockQuestion, 'loadJson').and.returnValue(questionDeferred);
// Because your function is run straight away, you'll need to create
// your controller in this way in order to spy on Question.loadJson()
myController = $controller('NewQuestionCtrl', {
$scope: scope,
Question: mockQuestion
});
}));
it('should attach a list of areas to the scope', function (done) {
questionDeferred.resolve({/*some data*/});
scope.$digest();
expect(scope.areas).toBeDefined();
done();
});

injector already created. can not register a module

I am a new bee to Angular JS and was trying to make something out of it in a proper TDD way, but while testing i am getting this error:
Injector already created, can not register a module!
This is the service i am talking about.
bookCatalogApp.service('authorService', ["$resource", "$q", function($resource, $q){
var Author =$resource('/book-catalog/author/all',{},{
getAll : { method: 'GET', isArray: true}
});
var authorService = {};
authorService.assignAuthors = function(data){
authorService.allAuthors = data;
};
authorService.getAll = function(){
if (authorService.allAuthors)
return {then: function(callback){callback(authorService.allAuthors)}}
var deferred = $q.defer();
Author.getAll(function(data){
deferred.resolve(data);
authorService.assignAuthors(data);
});
return deferred.promise;
};
return authorService;
}]);
This is the test for the above service
describe("Author Book Service",function(){
var authorService;
beforeEach(module("bookCatalogApp"));
beforeEach(inject(function($injector) {
authorService = $injector.get('authorService');
}));
afterEach(function() {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
describe("#getAll", function() {
it('should get all the authors for the first time', function() {
var authors = [{id:1 , name:'Prayas'}, {id:2 , name:'Prateek'}];
httpBackend.when('GET', '/book-catalog/author/all').respond(200, authors);
var promise = authorService.getAll();
httpBackend.flush();
promise.then(function(data){
expect(data.length).toBe(2)
});
});
it('should get all the authors as they have already cached', function() {
authorService.allAuthors = [{id:1 , name:'Prayas'}, {id:2 , name:'Prateek'}];
var promise = authorService.getAll();
promise.then(function(data){
expect(data.length).toBe(2)
});
});
});
})
Any help will be appreciated.

If you are mixing calls to module('someApp') and inject($someDependency) you will get this error.
All your calls to module('someApp') must occur before your calls to inject($someDependency).

You're using the inject function wrong. As the documentation states, the inject function already instantiates a new instance of $injector. My guess is that by passing $injector as a argument to the inject function you are asking it to instantiate the $injector service twice.
Just use inject to pass in the service you want to check. Underneath the covers, inject will use the $injector service it instantiates to grab services.
You can fix this problem by changing the second beforeEach statement to:
beforeEach(inject(function(_authorService_) {
authorService = _authorService_;
}));
One other thing to note. The argument authorService passed to the inject function has been wrapped with '_' so it's name does not hide the variable created within the describe function. Thats also documented in the inject documentation.

Not sure that this is the cause, but your beforeEach should be like this:
beforeEach(function() {
inject(function($injector) {
authorService = $injector.get('authorService');
}
});

AngularJS: Unit Testing Directive w/ Promise returned from a Service

I have a directive which uses a Service, calls a method of the service which returns a promise, and does work modifying the DOM inside the subsquent 'then' (myTestDirective below).
I'm trying to unit test this directive and when I run the test nothing inside of the 'then' is being called: the promise is rejected or the resolution not propagated?
I followed all the steps in this post to setup my unit test
When I load the directive in the browser I see both messages, OUTSIDE D3 then INSIDE D3, as you'd expect.
However in the unit test the element is updated only with the first message, like so:
<my-test-directive>***OUTSIDE D3***</my-test-directive> .
In the browser I see both messages.
Does anybody know what is going on here, do I need to inject mock or spyOn something? Is this an async problem where the test runs before script tag finished loading? I see the unit test accessing d3.v3.js, so it appears the script tag happens. I have also unit tested the d3Service on it's own, and it worked. Once in a while I actually see the correct results without changing the test at all.
I see clues in this question but unable to understand how to apply it in my situation: Angularjs promise not being resolved in unit test
Here is the code:
d3Service:
var d3 = angular.module('d3', []);
d3.factory('d3Service', ['$document', '$q', '$rootScope', '$window',
function($document, $q, $rootScope, $window) {
var d = $q.defer();
function onScriptLoad() {
$rootScope.$apply(function() { d.resolve(window.d3); });
}
var scriptTag = $document[0].createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = 'lib/d3.v3.js';
scriptTag.onreadystatechange = function () {
if (this.readyState == 'complete') onScriptLoad();
}
scriptTag.onload = onScriptLoad;
var s = $document[0].getElementsByTagName('body')[0];
s.appendChild(scriptTag);
return {
d3: function() { return d.promise; }
};
}]);
Directive
var myDirectives = angular.module('myDirectives', ['d3']);
myDirectives.directive('myTestDirective', ['d3Service', '$window',
function(d3Service, $window) {
return {
restrict: 'EA',
link: function(scope, ele, attrs) {
var f = angular.element(ele[0])
f.append('**OUTSIDE D3***')
d3Service.d3().then(function(d3){ // Nothing here runs at all.
var e = angular.element(ele[0]) // In browser it works, but
e.append('***INSIDE D3***') // not in the unit test.
})
}
}
}])
Unit Test
describe('Test Directive', function(){
var $scope, elem, compiled, html;
beforeEach(function (){
module('myDirectives');
html = '<my-test-directive></my-test-directive>';
inject(function($compile, $rootScope) {
$scope = $rootScope;
elem = angular.element(html);
compiled = $compile(elem)($scope);
$scope.$digest();
});
});
it('should create an svg element with its data', function(){
console.log(elem) //outputs the element with only ***OUTSIDE D3***
})
})
Thanks for any tips or information!!!!!

What I did was load d3.v3.js in my karma.conf and then create mockd3Service in unit test that return a promise. If anybody know better solution let me know.
Here is new unit test that is working:
describe('d3 Directives', function(){
var $compile, $rootScope, $window, mockd3Service, $q, html, element, data;
//setup test
beforeEach(function(){
mockd3Service = {}
module('myDirectives')
module(function($provide){
$provide.value('d3Service', mockd3Service)
})
inject(function(_$compile_, _$rootScope_, _$window_, _$q_) {
$window = _$window_;
$compile = _$compile_;
$rootScope = _$rootScope_;
$q = _$q_
});
mockd3Service.d3 = function() {
var deferred = $q.defer();
deferred.resolve($window.d3)
return deferred.promise;
}
});
//run test
it('make test', function(){
html = '<my-directive data="testData"></my-directive>'
element = angular.element(html)
element = $compile(html)($rootScope)
$rootScope.testData = somedata
$rootScope.$digest();
expect(element...)
})
})