I have been facing challenges in creating accurate tests for my Angular services and controllers, even though they are functioning correctly. I have searched extensively for a solution to this problem.
Below is an example of my controller:
angular.module('wideCmsAngularApp').controller('UserListCtrl', [
'$scope',
'userService',
'$routeParams',
function ($scope, userService, $routeParams) {
// Retrieve quantity and offset from the URL format: /user/list/10/0
var quantity = typeof $routeParams.quantity !== 'undefined' ? $routeParams.quantity : 10;
var offset = typeof $routeParams.offset !== 'undefined' ? $routeParams.offset : 0;
$scope.users = userService.query({
'param1' : quantity,
'param2' : offset
});
}
]);
This controller relies on the following service:
angular.module('wideCmsAngularApp').factory('userService', [
'$resource',
function ($resource) {
return $resource('http://localhost:1337/api/v1/user/:param1/:param2', {}, {
'get' : {method : 'GET'},
'save' : {method : 'POST'},
'query' : {method : 'GET', isArray:true},
'remove' : {method : 'DELETE'},
'delete' : {method : 'DELETE'}
});
}
]);
Check out the test scenario created for the controller:
describe('UserListCtrl', function() {
beforeEach(module('wideCmsAngularApp'));
var $controller;
var $rootScope;
var userService;
beforeEach(inject(function(_$rootScope_, _$controller_, _userService_){
$controller = _$controller_;
$rootScope = _$rootScope_;
userService = _userService_;
}));
describe('when requesting a list of users', function() {
it('should contain 4 users', function() {
var $scope = [];
var controller = $controller('UserListCtrl', {
'$scope': $scope,
'userService': userService,
'$routeParams': {
'quantity' : 10,
'offset' : 0
}
});
expect($scope.users.length).toBe(4);
});
});
});
The outcome of the test (expecting an array with 4 users, but remains empty):
PhantomJS 1.9.8 (Mac OS X) UserListCtrl when asking for a list of users should return 4 users FAILED
Expected 0 to be 4.
at /somewhere/test/spec/controllers/user/list.js:31
Have you identified any missing elements here?
--UPDATE--
I managed to resolve the issue using a workaround solution, although it is not ideal as I preferred making actual API requests. Is there a way to achieve that or do I need to settle for mock responses?
New test configuration for UserListCtrl, utilizing $httpBackend:
var $httpBackend;
var $controller;
var $rootScope;
var userService;
describe('UserListCtrl', function() {
beforeEach(module('wideCmsAngularApp'));
beforeEach(inject(function ($injector) {
var uri = 'http://localhost:1337/api/v1/user/10/0';
var users = [
{
"id": "555daff2862a513508a52ecd",
"name": "Gru"
},
{
"id": "555daff3862a513508a52ece",
"name": "Kevin"
},
{
"id": "555daff3862a513508a52ece",
"name": "Ed"
},
{
"id": "555daff3862a513508a52ece",
"name": "Tim"
}
];
httpBackend = $injector.get('$httpBackend');
httpBackend.whenGET(uri).respond(users)
$controller = $injector.get('$controller');
$rootScope = $injector.get('$rootScope');
userService = $injector.get('userService');
}));
describe('when requesting a list of users', function() {
it('should contain 4 users', function() {
var $scope = $rootScope.$new();
var controller = $controller('UserListCtrl', {
'$scope': $scope,
'userService': userService,
'$routeParams': {
'quantity' : 10,
'offset' : 0
}
});
httpBackend.flush();
expect($scope.users.length).toBe(4);
});
});
});