So I am writing unit tests for an application in angularJS using Jasmine.
I have a controller with an "init" method which calls "secondMethod" and "thirdMethod"
I want to test with a jasmine spyOn whether "secondMethod" is called correctly.
My controller looks like this:
function init() {
secondMethod().then(function () {
thirdMethod();
});
}
init();
function secondMethod(){
//do something
}
function thirdMethod(){
//do something
}
and my test file looks like this:
describe("nameOfTheController", function () {
var $rootScope,
$controller,
$scope,
controller;
beforeEach(function () {
angular.mock.module("myModule");
inject(function (_$controller_, _$rootScope_) {
$rootScope = _$rootScope_;
$controller = _$controller_;
$scope = $rootScope.$new();
controller = $controller('nameOfTheController', {
'$scope': $scope
});
});
});
describe("init", function(){
it('should run secondMethod', function(){
spyOn(controller, 'secondMethod');
expect(controller.secondMethod).toHaveBeenCalled();
});
it('should run thirdMethod', function(){
spyOn(controller, 'thirdMethod');
expect(controller.thirdMethod).toHaveBeenCalled();
});
As you can see I inject the controller in beforeEach but I get error that method "secondMethod" and "thirdMethod" are not defined and I am not quite sure why.
I have also tried doing something like the following but to no avail
controller:
var vm = this;
vm.init = function() {
vm.secondMethod().then(function () {
vm.thirdMethod();
});
}
vm.init();
vm.secondMethod = function(){
//do something
}
vm.thirdMethod = function(){
//do something
}
testfile:
describe("nameOfTheController", function () {
var $rootScope,
$controller,
$scope,
controller;
beforeEach(function () {
angular.mock.module("myModule");
inject(function (_$controller_, _$rootScope_) {
$rootScope = _$rootScope_;
$controller = _$controller_;
$scope = $rootScope.$new();
controller = $controller('nameOfTheController', {
'$scope': $scope
});
});
});
describe("init", function(){
it('should run secondMethod', function(){
spyOn(controller, 'secondMethod');
expect(controller.secondMethod).toHaveBeenCalled();
});
it('should run thirdMethod', function(){
spyOn(controller, 'thirdMethod');
expect(controller.thirdMethod).toHaveBeenCalled();
});
Does anyone know why second and third method are undefined?
EDIT:
The reason why second and third method returned undefined when prefixing with "vm." was that the init function was called before the second and third method had been defined.
Moving the call of init to be below the second and third method definitions solved the problem. Now I just have the problem that the spy expects the method to be called but it doesn't get called
var vm = this;
vm.init = function() {
vm.secondMethod().then(function () {
vm.thirdMethod();
});
}
vm.secondMethod = function(){
//do something
}
vm.thirdMethod = function(){
//do something
}
vm.init();
The controller is initiated in beforeEach(), and that is when you init() => seconMethod(), while you spy on it only in the it() block.
On the other hand, you can't spy before, since you won't have the controller object.
IMO, the solution will be to revise your code and call init() explicitally:
it('should run secondMethod', function() {
spyOn(controller, 'secondMethod');
expect(controller.secondMethod).not.toHaveBeenCalled();
controller.init();
expect(controller.secondMethod).toHaveBeenCalled();
});
https://jsfiddle.net/ronapelbaum/v9vyLpws/
Related
I have a recursive method that, if a flag is set, will call itself every five seconds. I'm trying to write a test that spies on the method, calls it, waits six seconds and then expects the method to have been called twice. My test fails, as the spy reports the method only being called once (the initial call).
I'm using the Angular style guide, so am attaching these methods to a placeholder for this. I suspect there may be an issue with scoping of the controller returned from angular-mocks $controller(), but I'm not sure—most people are attaching methods to $scope.
Without attaching methods to $scope, how can I create a spy to verify that my method has been called twice?
app.js:
'use strict';
angular
.module('MyApp', [
//...
]);
angular
.module('MyApp')
.controller('MyController', MyController);
MyController.$inject = [
//...
];
function MyController() {
var vm = this;
vm.callMyself = callMyself;
vm.flag = false;
function callMyself () {
console.log('callMyself');
if (vm.flag) {
console.log('callMyself & flag');
setTimeout(vm.callMyself, 5000);
}
}
}
appSpec.js:
describe('MyController', function () {
var $scope;
beforeEach(function () {
module('MyApp');
});
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
controllerInstance = $controller('MyController', {$scope: $scope});
}));
it('should call itself within 6 seconds if flag is true', function (done) {
controllerInstance.flag = true;
spyOn(controllerInstance, 'callMyself');
controllerInstance.callMyself();
setTimeout(function () {
expect(controllerInstance.callMyself).toHaveBeenCalledTimes(2);
done();
}, 6000);
}, 7000);
});
Working Plunker
You need to use .and.callThrough() to further execute the function that would call itself:
By chaining the spy with and.callThrough, the spy will still track all calls to it but in addition it will delegate to the actual implementation.
spyOn(controllerInstance, 'callMyself').and.callThrough();
Tested in the plunker - it works.
I'm trying to test my login controller, which looks like this:
describe('LoginController', function() {
beforeEach(module('task6'));
var $controller, LoginService;
beforeEach(inject(function(_$controller_, _LoginService_) {
$controller = _$controller_;
LoginService = _LoginService_;
}));
describe('LoginController.submitLogin', function() {
it('tests if such user exists', function(done) {
var $scope = {};
var controller = $controller('LoginController', {$scope: $scope});
var resultValue;
controller.loginField = 'John';
controller.password = 'Smith';
LoginService.signIn(controller.loginField,
controller.password)
.then(function() {
expect(true).toBe(true);
done();
});
});
});
});
Where signIn function is:
function signIn(loginField, password) {
var defer = $q.defer();
if (loginField && password) {
defer.resolve("nice one");
} else {
defer.reject("oh dear");
}
return defer.promise;
}
But it always fails with "Async callback was not invoken within timeout specified..."
You need to call $scope.$digest() once at the end of your test. A promise will never be resolved within the same digest cycle it has been created in.
Explanation
While it would be possible for the framework to allow this, the developers chose not to. See this example while it could be problematic:
function login(login, password) {
LoginService.signIn(login, password)
.then(function() {
cancelLoadingAnimation();
});
startLoadingAnimation();
}
Usually a promise is resolved asynchronously, so we don't have a problem here. The loading animation is started in the login function and cancelled when signing in succeeded. But imagine the promise was instantly resolved (for instance in a test like yours)! It would now be possible that the animation was cancelled before it was even started.
Of course this can be cured by moving the call of startLoadingAnimation() above the call to signIn(). However, it is much easier to reason about your code when promises are always resolved asynchronously.
Update: As #gnerkus states in his answer, you have to create the $scope as a child of the $rootScope. However, this alone will not solve the problem. You will have to do both.
You need to create the scope object for the controller as an instance of $rootScope:
describe('LoginController', function() {
beforeEach(module('task6'));
var $controller, LoginService;
// Inject the $rootScope service for use in creating new scope objects.
beforeEach(inject(function($rootScope, _$controller_, _LoginService_) {
$controller = _$controller_;
LoginService = _LoginService_;
}));
describe('LoginController.submitLogin', function() {
it('tests if such user exists', function(done) {
// Create a new scope for the controller.
var scope = $rootScope.$new();
var controller = $controller('LoginController', {$scope: scope});
var resultValue;
controller.loginField = 'John';
controller.password = 'Smith';
LoginService.signIn(controller.loginField,
controller.password)
.then(function() {
expect(true).toBe(true);
done();
});
});
});
});
I guess, #gnerkus and #lex82 were both right - I need to run $digest cycle for promises, but I still need a reference to a real scope to do this. Here is the final, working version of my code:
describe('LoginController', function() {
beforeEach(module('task6'));
var $rootScope, $controller, LoginService;
beforeEach(inject(function(_$rootScope_, _$controller_, _LoginService_) {
$rootScope = _$rootScope_;
$controller = _$controller_;
LoginService = _LoginService_;
}));
describe('LoginController.submitLogin', function() {
it('tests if such user exists', function(done) {
var $scope = $rootScope.$new();
var controller = $controller('LoginController',
{$scope: $scope});
controller.loginField = 'John';
controller.password = 'Smith';
LoginService.signIn(controller.loginField,
controller.password)
.then(function(logged) {
expect(true).toBe(true);
done();
})
$scope.$digest();
});
});
});
Thank you, guys!
I am pretty new to Karma and Jasmine which I am using to write unit tests for my AngularJs application.
While running the test suite functions which I have called to initialize data in my controller is getting called by default. Is there any way to avoid this call while running the test suite?
Find the code snippet below:
BaseCtrl.js
App.controller('BaseCtrl', ['$scope', '$rootScope', 'Data', function($scope, $rootScope, Data){
//initialize
$rootScope.loader = false;
$rootScope.data = false;
$scope.init = function(){
$rootScope.loader = true;
Data.init(function(data){
$rootScope.loader = false;
$rootScope.data = data;
});
};
$scope.init();
}])
Data.js
App.service('Data', ['$http', function($http){
return {
init:function(callback){
$http.get('/url').success(function(response){
callback(response);
});
}
};
}]);
BaseCtrl.spec.js
describe('BaseCtrl', function(){
beforeEach(module('app'));
var $controller, $rootScope, $scope;
beforeEach(inject(function(_$controller_, _$rootScope_){
$controller = _$controller_;
$rootScope = _$rootScope_.$new();
}));
describe('Loader', function(){
var controller, $scope = {};
beforeEach(function(){
controller = $controller('BaseCtrl', {$scope:$scope, $rootScope:$rootScope});
});
it('should be false by default', function(){
// Check the default value
expect($rootScope.loader).toBe(false);
// Some code to determine the call, then
expect($rootScope.loader).toBe(true);
// Some code to determine the call is done, then
expect($rootScope.loader).toBe(false);
});
});
});
Yes, use $httpBackend to create a mock and return whatever you want.
$httpBackend.when('GET', '/url').respond({});
I have a factory defined like this:
angular.module("myServices")
.factory("$service1", ["$rootScope", "$service2", function($rootScope, $service2){...})];
Now, I want to test it, but just injecting $service1 is not working because i get an 'unknown provider' error. So I tried something like that. But I still can't make it work. Why?
beforeEach(function() {
module("myServices");
inject(function ($injector) {
dependencies["$service2"] = $injector.get("$service2");
});
module(function($provide) {
$provide.value("$service1", dependencies["$service2"]);
});
inject(function($injector) {
factory = $injector.get("$service1");
});
});
This is what's working in my tests, using underscores:
describe('Service: $service1', function () {
var $service2, scope;
beforeEach(inject(function (_$service2_, $rootScope) {
$service2 = _$service2_;
scope = $rootScope;
}));
//tests
});
If that still doesn't work, then maybe you're not loading the relevant files (such as service2.js) in your tests.
THE SITUATION:
I am unit testing my Angular / Ionic app.
I am having troubles with the modal.
At the moment i can test that the modal has been called. That's all so far. I cannot test the proper show() and hide() method of the modal.
I am getting the following errors:
TypeError: $scope.modal_login.show is not a function
Error: show() method does not exist
TypeError: $scope.modal_login.hide is not a function
Error: hide() method does not exist
I think it depends entirely on the spy. I don't know how to properly spy on the modal, and i think that once that is done, everything will work fine.
THE CODE:
The controller:
$scope.open_login_modal = function()
{
var temp = $ionicModal.fromTemplateUrl('templates/login.html',{scope: $scope});
temp.then(function(modal) {
$scope.modal_login = modal;
$scope.modal_login.show();
$scope.for_test_only = true;
});
};
$scope.close_login_modal = function()
{
$scope.modal_login.hide();
};
Note: the code of open_login_modal function has been refactored to facilitate the test. The original code was:
$scope.open_login_modal = function()
{
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal_login = modal;
$scope.modal_login.show();
});
};
The test:
describe('App tests', function()
{
beforeEach(module('my_app.controllers'));
function fakeTemplate()
{
return {
then: function(modal){
$scope.modal_login = modal;
}
}
}
beforeEach(inject(function(_$controller_, _$rootScope_)
{
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl').and.callFake(fakeTemplate)
};
var controller = $controller('MainCtrl', { $scope: $scope, $rootScope: $rootScope, $ionicModal: $ionicModal });
}));
describe('Modal tests', function()
{
beforeEach(function()
{
$scope.open_login_modal();
spyOn($scope.modal_login, 'show'); // NOT WORKING
spyOn($scope.modal_login, 'hide'); // NOT WORKING
});
it('should open login modal', function()
{
expect($ionicModal.fromTemplateUrl).toHaveBeenCalled(); // OK
expect($ionicModal.fromTemplateUrl.calls.count()).toBe(1); // OK
expect($scope.modal_login.show()).toHaveBeenCalled(); // NOT PASS
expect($scope.for_test_only).toEqual(true); // NOT PASS
});
it('should close login modal', function()
{
$scope.close_login_modal();
expect($scope.modal_login.hide()).toHaveBeenCalled(); // NOT PASS
});
});
});
As you can see from the code $scope.for_test_only it should be equal to true but is not recognized. I get this error message instead:
Expected undefined to equal true.
The same happens to the show() and hide() method. They are not seen by the test.
And i think because they are not declared in the spy.
THE QUESTION:
How can i properly spy on a modal?
Thank you very much!
The question here could be extrapolated to how to properly spy on a promise. You are very much on the right track here.
However, if you want to test that whatever your callback to the success of the promise is called, you have to execute two steps:
Mock the service (in your case $ionicModal) and return some fake function
In that fake function, execute the callback that is passed to you by the production code.
Here is an illustration:
//create a mock of the service (step 1)
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create an example response which just calls your callback (step2)
var successCallback = {
then: function(callback){
callback.apply(arguments);
}
};
$ionicModal.fromTemplateUrl.and.returnValue(successCallback);
Of course, you can always use $q if you don't want to be maintaining the promise on your own:
//in your beforeeach
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create a mock of the modal you gonna pass and resolve at your fake resolve
var modalMock = jasmine.createSpyObj('modal', ['show', 'hide']);
$ionicModal.fromTemplateUrl.and.callFake(function(){
return $q.when(modalMock);
});
//in your test
//call scope $digest to trigger the angular digest/apply lifecycle
$scope.$digest();
//expect stuff to happen
expect(modalMock.show).toHaveBeenCalled();