I'm trying to work out the best way to unit test success and error callbacks in controllers. I am able to mock out service methods, as long as the controller only uses the default $q functions such as 'then' (see the example below). I'm having an issue when the controller responds to a 'success' or 'error' promise. (Sorry if my terminology is not correct).
Here is an example controller \ service
var myControllers = angular.module('myControllers');
myControllers.controller('SimpleController', ['$scope', 'myService',
function ($scope, myService) {
var id = 1;
$scope.loadData = function () {
myService.get(id).then(function (response) {
$scope.data = response.data;
});
};
$scope.loadData2 = function () {
myService.get(id).success(function (response) {
$scope.data = response.data;
}).error(function(response) {
$scope.error = 'ERROR';
});
};
}]);
cocoApp.service('myService', [
'$http', function($http) {
function get(id) {
return $http.get('/api/' + id);
}
}
]);
I have the following test
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var controller;
var getResponse = { data: 'this is a mocked response' };
beforeEach(angular.mock.module('myApp'));
beforeEach(angular.mock.inject(function($q, $controller, $rootScope, $routeParams){
scope = $rootScope;
var myServiceMock = {
get: function() {}
};
// setup a promise for the get
var getDeferred = $q.defer();
getDeferred.resolve(getResponse);
spyOn(myServiceMock, 'get').andReturn(getDeferred.promise);
controller = $controller('SimpleController', { $scope: scope, myService: myServiceMock });
}));
it('this tests works', function() {
scope.loadData();
expect(scope.data).toEqual(getResponse.data);
});
it('this doesnt work', function () {
scope.loadData2();
expect(scope.data).toEqual(getResponse.data);
});
});
The first test passes and the second fails with the error "TypeError: Object doesn't support property or method 'success'". I get that in this instance that getDeferred.promise
does not have a success function. Okay here is the question, what is a nice way to write this test so that I can test the 'success', 'error' & 'then' conditions of a mocked service ?
I'm starting to think that I should avoid the use of success() and error() in my controllers...
EDIT
So after thinking about this some more, and thanks to the detailed answer below, I've come to the conclusion that the handling the success and error callbacks in the controller is bad. As HackedByChinese mentions below success\error is syntactic sugar that is added by $http. So, in actual fact, by trying to handle success \ error I am letting $http concerns leak into my controller, which is exactly what I was trying to avoid by wrapping the $http calls in a service. The approach I'm going to take is to change the controller not to use success \ error:
myControllers.controller('SimpleController', ['$scope', 'myService',
function ($scope, myService) {
var id = 1;
$scope.loadData = function () {
myService.get(id).then(function (response) {
$scope.data = response.data;
}, function (response) {
$scope.error = 'ERROR';
});
};
}]);
This way I can test the error \ success conditions by calling resolve() and reject() on the deferred object:
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var controller;
var getResponse = { data: 'this is a mocked response' };
var getDeferred;
var myServiceMock;
//mock Application to allow us to inject our own dependencies
beforeEach(angular.mock.module('myApp'));
//mock the controller for the same reason and include $rootScope and $controller
beforeEach(angular.mock.inject(function($q, $controller, $rootScope, $routeParams) {
scope = $rootScope;
myServiceMock = {
get: function() {}
};
// setup a promise for the get
getDeferred = $q.defer();
spyOn(myServiceMock, 'get').andReturn(getDeferred.promise);
controller = $controller('SimpleController', { $scope: scope, myService: myServiceMock });
}));
it('should set some data on the scope when successful', function () {
getDeferred.resolve(getResponse);
scope.loadData();
scope.$apply();
expect(myServiceMock.get).toHaveBeenCalled();
expect(scope.data).toEqual(getResponse.data);
});
it('should do something else when unsuccessful', function () {
getDeferred.reject(getResponse);
scope.loadData();
scope.$apply();
expect(myServiceMock.get).toHaveBeenCalled();
expect(scope.error).toEqual('ERROR');
});
});
As someone had mentioned in a deleted answer, success and error are syntactic sugar added by $http so they aren't there when you create your own promise. You have two options:
1 - Don't mock the service and use $httpBackend to setup expectations and flush
The idea is to let your myService act like it normally would without knowing it's being tested. $httpBackend will let you set up expectations and responses, and flush them so you can complete your tests synchronously. $http won't be any wiser and the promise it returns will look and function like a real one. This option is good if you have simple tests with few HTTP expectations.
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var expectedResponse = { name: 'this is a mocked response' };
var $httpBackend, $controller;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$controller_, _$httpBackend_){
// the underscores are a convention ng understands, just helps us differentiate parameters from variables
$controller = _$controller_;
$httpBackend = _$httpBackend_;
scope = _$rootScope_;
}));
// makes sure all expected requests are made by the time the test ends
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
describe('should load data successfully', function() {
beforeEach(function() {
$httpBackend.expectGET('/api/1').response(expectedResponse);
$controller('SimpleController', { $scope: scope });
// causes the http requests which will be issued by myService to be completed synchronously, and thus will process the fake response we defined above with the expectGET
$httpBackend.flush();
});
it('using loadData()', function() {
scope.loadData();
expect(scope.data).toEqual(expectedResponse);
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.data).toEqual(expectedResponse);
});
});
describe('should fail to load data', function() {
beforeEach(function() {
$httpBackend.expectGET('/api/1').response(500); // return 500 - Server Error
$controller('SimpleController', { $scope: scope });
$httpBackend.flush();
});
it('using loadData()', function() {
scope.loadData();
expect(scope.error).toEqual('ERROR');
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.error).toEqual('ERROR');
});
});
});
2 - Return a fully-mocked promise
If the thing you're testing has complicated dependencies and all the set-up is a headache, you may still want to mock the services and the calls themselves as you have attempted. The difference is that you'll want to fully mock promise. The downside of this can be creating all the possible mock promises, however you could make that easier by creating your own function for creating these objects.
The reason this works is because we pretend that it resolves by invoking the handlers provided by success, error, or then immediately, causing it to complete synchronously.
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var expectedResponse = { name: 'this is a mocked response' };
var $controller, _mockMyService, _mockPromise = null;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$controller_){
$controller = _$controller_;
scope = _$rootScope_;
_mockMyService = {
get: function() {
return _mockPromise;
}
};
}));
describe('should load data successfully', function() {
beforeEach(function() {
_mockPromise = {
then: function(successFn) {
successFn(expectedResponse);
},
success: function(fn) {
fn(expectedResponse);
}
};
$controller('SimpleController', { $scope: scope, myService: _mockMyService });
});
it('using loadData()', function() {
scope.loadData();
expect(scope.data).toEqual(expectedResponse);
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.data).toEqual(expectedResponse);
});
});
describe('should fail to load data', function() {
beforeEach(function() {
_mockPromise = {
then: function(successFn, errorFn) {
errorFn();
},
error: function(fn) {
fn();
}
};
$controller('SimpleController', { $scope: scope, myService: _mockMyService });
});
it('using loadData()', function() {
scope.loadData();
expect(scope.error).toEqual("ERROR");
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.error).toEqual("ERROR");
});
});
});
I rarely go for option 2, even in big applications.
For what it's worth, your loadData and loadData2 http handlers have an error. They reference response.data but the handlers will be called with the parsed response data directly, not the response object (so it should be data instead of response.data).
Don't mix concerns!
Using $httpBackend inside a controller is a bad Idea since you are mixing concerns inside your Test. Whether you retrieve data from an Endpoint or not is not a concern of the Controller, is a concern of the DataService you are calling.
You can see this more clearly if you change the Endpoint Url inside the service you will then have to modify both tests: the service Test and the Controller Test.
Also as previously mentioned, the use of success and error are syntactic sugar and we should stick to the use of then and catch. But in reality you may find yourself in the need of testing "legacy" code. So for that I'm using this function:
function generatePromiseMock(resolve, reject) {
var promise;
if(resolve) {
promise = q.when({data: resolve});
} else if (reject){
promise = q.reject({data: reject});
} else {
throw new Error('You need to provide an argument');
}
promise.success = function(fn){
return q.when(fn(resolve));
};
promise.error = function(fn) {
return q.when(fn(reject));
};
return promise;
}
By calling this function you will get a true promise that respond to then and catch methods when you need to and will also work for the success or error callbacks. Note that the success and error returns a promise itself so it will work with chained then methods.
(NOTE: On the 4th and 6th line the function returns resolve and reject values inside the data property of an object. This is to mock the Behavior of $http since it returns the data, http Status etc.)
Yes, do not use $httpbackend in your controller, because we don't need to make real requests, you just need to make sure that one unit is doing it's job exactly as expected, have a look on this simple controller tests, it's easy to understand
/**
* #description Tests for adminEmployeeCtrl controller
*/
(function () {
"use strict";
describe('Controller: adminEmployeeCtrl ', function () {
/* jshint -W109 */
var $q, $scope, $controller;
var empService;
var errorResponse = 'Not found';
var employeesResponse = [
{id:1,name:'mohammed' },
{id:2,name:'ramadan' }
];
beforeEach(module(
'loadRequiredModules'
));
beforeEach(inject(function (_$q_,
_$controller_,
_$rootScope_,
_empService_) {
$q = _$q_;
$controller = _$controller_;
$scope = _$rootScope_.$new();
empService = _empService_;
}));
function successSpies(){
spyOn(empService, 'findEmployee').and.callFake(function () {
var deferred = $q.defer();
deferred.resolve(employeesResponse);
return deferred.promise;
// shortcut can be one line
// return $q.resolve(employeesResponse);
});
}
function rejectedSpies(){
spyOn(empService, 'findEmployee').and.callFake(function () {
var deferred = $q.defer();
deferred.reject(errorResponse);
return deferred.promise;
// shortcut can be one line
// return $q.reject(errorResponse);
});
}
function initController(){
$controller('adminEmployeeCtrl', {
$scope: $scope,
empService: empService
});
}
describe('Success controller initialization', function(){
beforeEach(function(){
successSpies();
initController();
});
it('should findData by calling findEmployee',function(){
$scope.findData();
// calling $apply to resolve deferred promises we made in the spies
$scope.$apply();
expect($scope.loadingEmployee).toEqual(false);
expect($scope.allEmployees).toEqual(employeesResponse);
});
});
describe('handle controller initialization errors', function(){
beforeEach(function(){
rejectedSpies();
initController();
});
it('should handle error when calling findEmployee', function(){
$scope.findData();
$scope.$apply();
// your error expectations
});
});
});
}());
Related
For specific purposes, I had to write a factory method that returns a $timeout promise that, inside of it, returns a $http.get promise.
I want to test if a call to my factory method will call the $http.get with the correct mocked URL (mocked-get-path).
Here is my factory code:
(function() {
'use strict';
angular.module('MyApp', []);
angular.module('MyApp')
.constant("ROUTES", {
get: "real-get-path"
});
angular.module('MyApp')
.factory('MyFactory', ['$http', '$timeout', 'ROUTES', MyFactory]);
function MyFactory($http, $timeout, ROUTES) {
return {
myGet: function(id) {
var random = Math.random() * 1000;
return $timeout(function () {
return $http.get(ROUTES.get, {
params: { id: id }
})
.then(function() {
return response.data;
});
}, random);
}
};
}
})();
And my test specification:
describe('simple factory test', function() {
var $http, $timeout, scope, MyFactory;
var ROUTES = {
get: 'mocked-get-path'
};
beforeEach(module('MyApp', function ($provide) {
$provide.constant('ROUTES', ROUTES);
}));
beforeEach(module('MyApp'));
beforeEach(inject(function(_$rootScope_, _$http_, _$timeout_, _MyFactory_) {
scope = _$rootScope_.$new();
$http = _$http_;
$timeout = _$timeout_;
MyFactory = _MyFactory_;
}));
it('should use ROUTES.get on method myGet', function(done) {
spyOn(Math, "random").and.returnValue(0.01);
MyFactory.myGet('elem1')
.then(function(res) {
expect($http.get).toHaveBeenCalledWith(ROUTES.get);
done();
});
$timeout.flush();
});
});
You can see that I tried to write a expect for the $http.get inside the then, but it didn't work.
I receive this error from Jasmine:
Error: Unexpected request: GET mocked-get-path?id=elem1
I made a Plunker: https://plnkr.co/edit/Ia6Q6GvKZOkNU2B8GrO1
What am I doing wrong?
When testing $http you are going to want to use $httpBackend.when
In your case:
it('should use ROUTES.get on method myGet', function(done) {
spyOn(Math, "random").and.returnValue(0.01);
spyOn($http, "get").and.callThrough();
MyFactory.myGet('elem1')
.then(function(res) {
expect($http.get).toHaveBeenCalledWith(ROUTES.get, {params: {id: 'elem1'}});
done();
});
$httpBackend
.when('GET', "mocked-get-path?id=elem1")
.respond(200, { foo: 'bar' });
$timeout.flush(100);
$timeout.verifyNoPendingTasks();
$httpBackend.flush();
});
This will cause $httpBackend to complete your request successfully allowing your .then with the expect to execute.
Plunkr showing solution
ngmock fundamentals
I hope this helps! Have a nice day!
One approach is to add expected calls to the httpBackend like this:
var $httpBackend;
beforeEach(function () {
inject(function ( _$httpBackend_ ) {
$httpBackend = _$httpBackend_;
}
....
it('....', function(){
//before the rest of the test
$httpBackend.expectGET('url').respond("OK");
});
https://docs.angularjs.org/api/ngMock/service/$httpBackend
So, your code will look like this:
describe('simple directive', function() {
var $http, $timeout, scope, MyFactory, $httpBackend;
var ROUTES = {
get: 'mocked-get-path'
};
beforeEach(module('MyApp', function ($provide) {
$provide.constant('ROUTES', ROUTES);
}));
beforeEach(module('MyApp'));
beforeEach(inject(function(_$rootScope_, _$http_, _$timeout_, _MyFactory_, _$httpBackend_) {
$httpBackend = _$httpBackend_;
scope = _$rootScope_.$new();
$http = _$http_;
$timeout = _$timeout_;
MyFactory = _MyFactory_;
}));
it('should use ROUTES.get on method myGet', function(done) {
spyOn(Math, "random").and.returnValue(0.01);
$httpBackend.expectGET("mocked-get-path?id=elem1").respond("OK");
MyFactory.myGet('elem1')
.then(function(res) {
expect($http.get).toHaveBeenCalledWith(ROUTES.get);
done();
});
$timeout.flush();
});
});
It will get you passed the unexpected GET error. But then there is another issue about not getting the call within the timeout period.
And, providing that now you are expecting a correct call at the $httpBackend, you can simplify your test case by removing the async nature of it like this:
(remove the paremeter done, and simplify the test code)
it('should use ROUTES.get on method myGet', function() {
spyOn(Math, "random").and.returnValue(0.01);
$httpBackend.expectGET("mocked-get-path?id=elem1").respond("OK");
MyFactory.myGet('elem1');
$timeout.flush();
});
I am using custom provider in my app.js to make backend call and then in controllers just injecting that provider and getting promise result (I make this because instead to call getLoggedUser in every controller I am just getting results from provider) and instead of making 10 calls for example I will make just one in provider). But I am unable to test this provider $get method and test is failing because backend call is never made.
I am getting error :
Error: Unexpected request: GET https://localhost:8443/user/current
app.js
angular.module('app', [
...
])
.config(config)
.run(run)
.controller('MainCtrl', MainCtrl)
.value('version', '1.1.0')
.provider('userProvider', function(){
this.$get = ['AuthenticationService',
function(AuthenticationService) {
return AuthenticationService.getLoggedUser();
}];
});
TEST
/* jshint undef:false*/
(function() {
'use strict';
describe('ListingController', function() {
var listingController, rootScope, scope, q, mockAuthenticationService, $httpBackend, service;
var provider = {};
var mockCurrentUser = {
id: 1782,
name: "One, Coordinator",
roleId: [
3, 10
],
eauthId: "coodinator1"
};
beforeEach(module('app'));
beforeEach(module('listing'));
beforeEach(function () {
module(function (userProviderProvider) {
provider = userProviderProvider;
});
});
beforeEach(inject(function($rootScope, $controller, $q, _$httpBackend_, _AuthenticationService_, userProvider, $injector) {
rootScope = $rootScope;
scope = rootScope.$new();
$httpBackend = _$httpBackend_;
q = $q;
mockAuthenticationService = _AuthenticationService_;
// provider = userProvider;
service = $injector.invoke(provider.$get);
rootScope.$digest();
listingController = $controller('ListingController', {
$scope : scope,
mockAuthenticationService : _AuthenticationService_
});
}));
describe('getLogged user and init',function(){
it("should call getLogged function", function() {
listingController.getLoggedUser();
rootScope.$digest();
expect(service).toHaveBeenCalled();
});
});
});
})();
Controller
function getLoggedUser() {
userProvider.then(function (data){
// Here I am getting result from back end call from provider which is good
});
If I make something like this in provider:
this.$get = function (AuthenticationService) {
return {
loggedUser : function() {
return AuthenticationService.getLoggedUser();
}
}
}
I can then make something like this in test:
spyOn(provider , 'loggedUser').and.callFake(function() {
var deferred = q.defer();
deferred.resolve(mockCurrentUser);
return deferred.promise;
});
and this will work test will pass, but with this approach in every controlle when I user userProvider.loggedUser().then it will make additional back end call and with above one only once back end call will be made.
Update for Ceylan
If I do like you suggest to call service and in method call getLoggedUser from another service additional calls are being made every time...not just one like I have without function.
.provider('userProvider', function(){
return {
$get: function(AuthenticationService) {
return new userService(AuthenticationService);
}
}
});
service
function userService(AuthenticationService) {
this.getLoggedUser = function() {
return AuthenticationService.getLoggedUser();
}
}
Here is the basic structure:
$httpBackend.when('GET', 'localhost:8443/user/current').respond(200, /*optional response callback function*/);
$httpBackend.expect('GET', 'localhost:8443/user/current');
//here goes the function that makes the actual http request
$httpBackend.flush();
Be sure that you define your httpBackend var - var httpBackend = $httpBackend;.
And also in order to check did the service was called, you must use spy.
spyOn(service, 'method').and.callThrough();
//here goes the function that calls the service
expect(service.method).toHaveBeenCalled();
You combine the two blocks above and you should be able to achieve what you want.
describe('something',function(){
it("should do something", function() {
spyOn(service, 'method').and.callThrough();
$httpBackend.when('GET', 'localhost:8443/user/current').respond(200,/*optional response callback function*/);
$httpBackend.expect('GET', 'localhost:8443/user/current');
//call the function that makes http request and calls your service
rootScope.$digest();
$httpBackend.flush();
expect(service.method).toHaveBeenCalled();
});
});
And about your service:
function myService(){
var svc = this;
svc.myMethod = function(){
return someDataOrPromise;
}
}
I am currently testing a controller in mocha. The controller has an activate function which should fire success/failure based on the response. I cannot get the failure or success functions to fire during my tests.
viewController.js:
(function() {
'use strict';
angular
.module('app')
.controller('viewCtrl', viewCtrl);
function viewCtrl(Service) {
vm.Service = Service;
activate();
function activate() {
vm.Service.get().then(success, failure);
function success(data) {
if (!data || data == 401) {
failure(data);
}
}
function failure(error) {
if (error) {
console.error("Loading question failed:", error);
vm.Service.set();
}
}
}
}
})();
viewControllerTest.js:
describe('question_view_controller', function() {
var httpBackend, controller;
var expect = chai.expect;
var assert = chai.assert;
var Service = {};
var createController;
beforeEach(function(){
angular.mock.module('ui.router');
angular.mock.module('question');
Service = {
set : sinon.stub(),
get : sinon.stub().returns(Promise.reject({error:{}}));
}
})
beforeEach(inject(function($httpBackend,$controller,$q){
httpBackend = $httpBackend;
createController = function(){
return $controller('ViewCtrl', {
$scope: scope,
Service: Service
});;
}
}));
afterEach(function(){
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
describe('activate', function () {
describe('get.then() error', function(){
beforeEach(function(){
Service.get.returns(Promise.reject({error:{}}))
})
it('should do nothing and setFailedQuestion should be called once', function(){
vm = createController();
scope.$digest();
expect(vm.Service.set.callCount).to.equal('1');
})
})
});
});
If anyone could point out my mistake or provide any insight that would be great. Anymore questions please ask.
UPDATE:
Edited code to reflect danday74's answer. Still not working.
UPDATE:
Edited code to reflect danday74's comment. Still not working.
you will need to call scope digest. you will need to inject $rootScope and then ...
vm = createController();
$rootScope.$digest();
expect(vm.Service.set.callCount).to.equal('1');
$digest() causes the THEN blocks to be executed.
similar approach to $httpBackend.flush() if you have ever used that.
I'm probably doing this wrong but I can't figure out how to fix it.
I want to test a controller that uses a resource (ngResource) and I want to use a Spy as a test double for the resource so it doesn't actually do the http call. In the code below I just want to test the search function in the controller.
Controller:
controllers = angular.module('app.controllers');
controllers.controller('landingCtrl', ['$scope', '$q', 'categoryResource', function ($scope, $q, categoryResource) {
$scope.search = function (text) {
console.log('searching for: ' + text);
var deferred = $q.defer();
categoryResource.query({ searchTerm: text }, function (result) {
if (result.length == 0) {
deferred.resolve(['No results found']);
} else {
deferred.resolve(result);
}
});
return deferred.promise;
}
}]);
Service:
var services = angular.module('app.services');
services.factory('categoryResource', ['$resource', function ($resource) {
var resource = $resource('/api/category');
return resource;
}]);
Spec for landingCtrl:
describe('Controller: landingCtrl ', function () {
var $q,
$rootScope,
$scope;
beforeEach(module('ngResource'));
beforeEach(module('app.services'));
beforeEach(module('app.controllers'));
beforeEach(inject(function (_$rootScope_, _$q_) {
$q = _$q_;
$rootScope = _$rootScope_;
}));
// mock any depencencies, like scope. $resource or $http
beforeEach(inject(function ($controller, $injector, categoryResource) {
$scope = $rootScope.$new();
spyOn(categoryResource, 'query').andCallFake(function (searchText) {
console.log('query fake being called');
var deferred = $q.defer();
deferred.resolve(['Test', 'Testing', 'Protester']);
return deferred.promise;
});
landingCtrl = $controller('landingCtrl', {
'$scope': $scope,
'$q': $q,
'categoryResource': categoryResource
});
}));
afterEach(inject(function ($rootScope) {
$rootScope.$apply();
}));
it('should return words with "test" in them"', function () {
$scope.search('test').then(function (results) {
console.log(results);
expect(results).toContain('Test');
});
$scope.$apply();
});
});
The test executes without errors but it passes without ever resolving the promise so my code inside the "then" function never gets called. What am I doing wrong?
I've created a plunker with the above and a test that should fail:
http://plnkr.co/edit/adE6fTajgbDoM33rtbZS?p=preview
Your spec is mocking categoryResource.query() so it returns a promise, but your controller isn't expecting that. It calls query() and passes a callback, and within that callback it does its thing. In other words, your spec isn't testing what your controller does.
Here's your fixed spec:
spyOn(categoryResource, 'query').andCallFake(function (searchText, callback) {
console.log('query fake being called');
callback(['Test', 'Testing', 'Protester']);
});
...
it('should return words with "test" in them"', function () {
var results;
$scope.search('test').then(function (_results_) {
console.log(results);
results = _results_;
});
$scope.$apply();
expect(results).toContain('Test');
});
Working Plunker
Notice that I have moved the expectation outside the then() callback, so your test breaks if the promise isn't resolved.
After much reading, it seems that the recommended way to call a web service from an AngularJS controller is to use a factory and return a promise from that.
Here I have a simple factory which calls a sample API.
myApp.factory('MyFactory', ['$http',function($http) {
var people = {
requestPeople: function(x) {
var url = 'js/test.json';
return $http.get(url);
}
};
return people;
}]);
And this is how I call it in the controller
myApp.controller('MyCtrl1', ['$scope', 'MyFactory', function ($scope, MyFactory) {
MyFactory.requestPeople(22).then(function(result) {
$scope.peopleList = result;
});
}]);
While it works fine, I would like to be able to mock the result that is passed in when then is called. Is this possible?
My attempt so far has produced nothing. This is my attempt:
//Fake service
var mockService = {
requestPeople: function () {
return {
then: function () {
return {"one":"three"};
}
}
}
};
//Some setup
beforeEach(module('myApp.controllers'));
var ctrl, scope;
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('MyCtrl1', { $scope: scope, MyFactory: mockService });
}));
//Test
it('Event Types Empty should default to false', inject(function () {
expect(scope.peopleList.one).toBe('three');
}));
The error that I get when running this in karma runner, is
TypeError: 'undefined' is not an object (evaluating 'scope.peopleList.one')
How can I get this test working with my mocked data?
I don't think $httpBackend is what you're after here, you want the whole factory to be mocked without it having a dependency on $http?
Take a look at $q, in particular the code sample under the Testing header. Your issue might be resolved with code that looks like this:
'use strict';
describe('mocking the factory response', function () {
beforeEach(module('myApp.controllers'));
var scope, fakeFactory, controller, q, deferred;
//Prepare the fake factory
beforeEach(function () {
fakeFactory = {
requestPeople: function () {
deferred = q.defer();
// Place the fake return object here
deferred.resolve({ "one": "three" });
return deferred.promise;
}
};
spyOn(fakeFactory, 'requestPeople').andCallThrough();
});
//Inject fake factory into controller
beforeEach(inject(function ($rootScope, $controller, $q) {
scope = $rootScope.$new();
q = $q;
controller = $controller('MyCtrl1', { $scope: scope, MyFactory: fakeFactory });
}));
it('The peopleList object is not defined yet', function () {
// Before $apply is called the promise hasn't resolved
expect(scope.peopleList).not.toBeDefined();
});
it('Applying the scope causes it to be defined', function () {
// This propagates the changes to the models
// This happens itself when you're on a web page, but not in a unit test framework
scope.$apply();
expect(scope.peopleList).toBeDefined();
});
it('Ensure that the method was invoked', function () {
scope.$apply();
expect(fakeFactory.requestPeople).toHaveBeenCalled();
});
it('Check the value returned', function () {
scope.$apply();
expect(scope.peopleList).toBe({ "one": "three" });
});
});
I've added some tests around what $apply does, I didn't know that until I started playing with this!
Gog