We Keep Coding

Spying on recursive Angular controller method

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.

AngularJS testing controller with jasmine and spyOn gives error 'method undefined'

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/

Karma-Jasmine: How to properly spy on a Modal?

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();

Loading data inside config block in AngularJS

What would be the right (angular-wise) way to load data in the app.config block?
Would a boot module+provider help? i tried the following approach (streamlined) http://jsfiddle.net/Vd5Pg/1/ with no success.
angular.module('boot',[]).provider('test', function(){
this.$get = function() {
return {
getString: function() { return "i am a string"; }
}
};
});
angular.module('main',['boot']).config(['testProvider', function(test) {
//no luck with getString
}]);
The real life situation is that i'd like to load localized routes and determine current language before configuring the $routeProvider.
TIA.

Your current code returns a test service with the method getString. In order to getString() within the provider you should do the below.
angular.module('boot',[]).provider('test', function(){
// Method available in testProvider
this.getString = function () {
return "i am a string";
}
this.$get = function() {
return {
// Your test service.
}
};
});
angular.module('main',['boot']).config(['testProvider', function(test) {
var myString = testProvider.getString();
}]);

using setInterval in angularjs factory

I was trying the code given in angularjs docs (given here: http://jsfiddle.net/zGqB8/)
It just implements a time factory and uses $timeout to update the time object after each second.
angular.module('timeApp', [])
.factory('time', function($timeout) {
var time = {};
(function tick () {
time.now = new Date().toString();
$timeout(tick, 1000); // how to do it using setInterval() ?
})();
return time;
});
How would I do it using setInterval() function instead of $timeout() ?
I know that one need to use scope.$apply() to enter the angular execution context but how would that work in a factory function? I mean, in a controller, we have a scope, but we don't have scope in a factory function?

You can use $timeout as an interval.
var myIntervalFunction = function() {
cancelRefresh = $timeout(function myFunction() {
// do something
cancelRefresh = $timeout(myIntervalFunction, 60000);
},60000);
};
If the view is destroyed, you can destroy it with listening on $destroy:
$scope.$on('$destroy', function(e) {
$timeout.cancel(cancelRefresh);
});

Update
Angular has implemented an $interval feature in version 1.2 - http://docs.angularjs.org/api/ng.$interval
Legacy example below, disregard unless you're using a version older than 1.2.
A setInterval implementation in Angular -
I've created a factory called timeFunctions, which exposes $setInterval and $clearInterval.
Note that any time I've needed to modify scope in a factory I've passed it in. I am unsure if this meets the "Angular way" of doing things, but it works well.
app.factory('timeFunctions', [
"$timeout",
function timeFunctions($timeout) {
var _intervals = {}, _intervalUID = 1;
return {
$setInterval: function(operation, interval, $scope) {
var _internalId = _intervalUID++;
_intervals[ _internalId ] = $timeout(function intervalOperation(){
operation( $scope || undefined );
_intervals[ _internalId ] = $timeout(intervalOperation, interval);
}, interval);
return _internalId;
},
$clearInterval: function(id) {
return $timeout.cancel( _intervals[ id ] );
}
}
}
]);
Example Usage:
app.controller('myController', [
'$scope', 'timeFunctions',
function myController($scope, timeFunctions) {
$scope.startFeature = function() {
// scrollTimeout will store the unique ID for the $setInterval instance
return $scope.scrollTimeout = timeFunctions.$setInterval(scroll, 5000, $scope);
// Function called on interval with scope available
function scroll($scope) {
console.log('scroll', $scope);
$scope.currentPage++;
}
},
$scope.stopFeature = function() {
return timeFunctions.$clearInterval( $scope.scrollTimeout );
}
}
]);

Could you call a normal JavaScript method and then within that method wrap the Angular code with an $apply?
Example
timer = setInterval('Repeater()', 50);
var Repeater = function () {
// Get Angular scope from a known DOM element
var scope = angular.element(document.getElementById(elem)).scope();
scope.$apply(function () {
scope.SomeOtherFunction();
});
};

Latest release candidate (1.2.0 rc3) has interval support. See changelog