Unit Test large number of injected services using Jasmine - angularjs

Question

I'm very new to the AngularJs unit testing with Jasmine.So could you tell me how can I test below mentioned controller and countyService.getAllCountiesAsync() method using Jasmine.Thanks in advance.
Note : The controller below is having more than 50 injected services (I have shown few below).So I don't know which method is good for mock those also ?
Controller :
(function () {
appModule.controller('myController', [
'$scope', '$modalInstance', 'abp.services.app.property', 'abp.services.app.county', 'abp.services.app.propertyClass', 'abp.services.app.schoolDistrict'
function ($scope, $modalInstance, propertyService, countyService, propertyClassService, schoolDistrictService) {
vm.getAllCounties = function () {
countyService.getAllCountiesAsync().success(function (result) {
vm.counties = result.items;
});
};
vm.getAllCounties();
} ]);
})();
WebApi method :
public async Task<ListResultOutput<CountyListDto>> GetAllCountiesAsync()
{
var counties = await _countyRepository
.GetAllListAsync();
return new ListResultOutput<CountyListDto>(counties.OrderBy(o => o.Name).MapTo<List<CountyListDto>>());
}

Answer 1

You should write test cases for service and controller.
For services 'Daan van Hulst' has already given answer and for controller see below code:
describe('service tests', function () {
var $compile,$controller,myController, $rootScope, propertyService, countyService, propertyClassService, schoolDistrictService;
//All module dependencies
beforeEach(module('your-app-name'));
//inject required services and _$controller_ to create controller
beforeEach(inject(function(_$compile_,_$controller_, _$rootScope_, _propertyService_, _countyService_, _propertyClassService_, _schoolDistrictService_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$controller = _$controller_; // This is IMP
countyService = _countyService_;
// remianig services
// Now create controller
myController = $controller('myController', {
$scope : scope,
propertyService : propertyService // all other services
});}
it('should test something', function() {
spyOn(countyService, 'getAllCountiesAsync').and.callFake(function () {
var d = q.defer();
d.resolve({ items: [{data:'somedata'}] });
return d.promise;
});
myController.getAllCounties();
expect(myController.counties).not.toBe(null);
});
Update
I might have made mistakes, but this is the idea:
describe('service tests', function () {
var $compile, $rootScope, scope, vm, propertyService, countyService, propertyClassService, schoolDistrictService;
beforeEach(module('your-app-name'));
beforeEach(inject(function(_$compile_, _$rootScope_, $controller, _propertyService_, _countyService_, _propertyClassService_, _schoolDistrictService_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
scope = $rootScope.$new();
propertyService = _propertyService_;
countyService = _countyService_;
propertyClassService = _propertyClassService_;
schoolDistrictService = _schoolDistrictService_;
vm = $controller('myController', {'$scope': scope})
spyOn(countyService, "getAllCountiesAsync").and.callFake(function() {
var deferred = $q.defer();
deferred.resolve({data: [{id:0}]});
return deferred.promise;
});
}));
it('can do remote call', inject(function() {
//Arrange
result = [{id:0}];
// Act
vm.getAllCounties();
// Assert
expect(vm.counties).toBe(result); //assert to whatever is resolved in the spyOn function
});
});
}

Answer 2

I assume that you create Angular services for all your services and that you app is working. Then, you can inject them in your tests:
describe('service tests', function () {
var $compile, $rootScope, propertyService, countyService, propertyClassService, schoolDistrictService;
beforeEach(module('your-app-name'));
beforeEach(inject(function(_$compile_, _$rootScope_, _propertyService_, _countyService_, _propertyClassService_, _schoolDistrictService_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
propertyService = _propertyService_;
countyService = _countyService_;
propertyClassService = _propertyClassService_;
schoolDistrictService = _schoolDistrictService_;
}));
it('should test something', function() {
expect(propertyService).toBeDefined();
expect(countyService).toBeDefined();
expect(propertyClassService).toBeDefined();
expect(schoolDistrictService).toBeDefined();
});
});
Update
I accidentally posted my solution in the answer above, so corrected it now. You can create your controller with $controller and pass in a scope object. You can also pass in any other dependencies. Then create a spy on the service, and once it gets called, call a different function which resolves a promise with mock data:
describe('service tests', function () {
var $compile, $rootScope, scope, vm, propertyService, countyService, propertyClassService, schoolDistrictService;
beforeEach(module('your-app-name'));
beforeEach(inject(function(_$compile_, _$rootScope_, $controller, _propertyService_, _countyService_, _propertyClassService_, _schoolDistrictService_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
scope = $rootScope.$new();
propertyService = _propertyService_;
countyService = _countyService_;
propertyClassService = _propertyClassService_;
schoolDistrictService = _schoolDistrictService_;
// Create the controller, and pass in the scope with possible variables that you want to mock.
vm = $controller('myController', {'$scope': scope})
//Create a spy on your getAllCountiesAsync function and make it return a mock promise with mock data.
spyOn(countyService, "getAllCountiesAsync").and.callFake(function() {
var deferred = $q.defer();
deferred.resolve({data: [{id:0}]});
return deferred.promise;
});
}));
it('can do remote call', inject(function() {
//Arrange
result = [{id:0}];
// Act
vm.getAllCounties();
//I think that you also have to do this, but I am not a 100% sure.
scope.$apply();
// Assert
expect(vm.counties).toBe(result); //assert to whatever is resolved in the spyOn function
});
});
}