How to send mocked response data to called through $http call? - angularjs

Question

I have a controller that calls a service and sets some variables. I want to test that those variables get set to the response.
My Controller:
tankService.getCurrentStats().success(function (response) {
$scope.stats.tankAvgHours = response.tankAvgHours;
$scope.stats.stillAvgHours = response.stillAvgHours;
$scope.stats.stillRemaining = response.stillRemaining;
$scope.stats.tankRemaining = response.tankRemaining;
$scope.stats.loaded = true;
});
My Test:
...
var STATS_RESPONSE_SUCCESS =
{
tankAvgHours:8,
stillAvgHours:2,
stillRemaining: 200,
tankRemaining:50
};
...
spyOn(tankService, "getCurrentStats").and.callThrough();
...
it('calls service and allocates stats with returned data', function () {
expect($scope.stats.loaded).toBeFalsy();
$httpBackend.whenPOST('../services/tanks/RelayTankService.asmx/getCurrentStats').respond(200, $q.when(STATS_RESPONSE_SUCCESS));
tankService.getCurrentStats()
.then(function(res){
result = res.data.$$state.value;
});
$httpBackend.flush();
expect($scope.stats.tankAvgHours).toEqual(result.tankAvgHours);
expect($scope.stats.stillAvgHours).toEqual(result.stillAvgHours);
expect($scope.stats.stillRemaining).toEqual(result.stillRemaining);
expect($scope.stats.tankRemaining).toEqual(result.tankRemaining);
expect($scope.stats.loaded).toBeTruthy();
});
The result is that my scope variables are undefined and don't equal my mocked response data. Is it possible to pass the mocked values so I can test the success function correctly populates the variables?
Thanks!

Answer 1

Since you're testing the controller, there's no need to mock $http's POST the way you've done in the test.
You just need to mock the tankService's getCurrentStats method.
Assuming that your tankService's getCurrentStats method returns a promise, this is how your test must be:
describe('controller: appCtrl', function() {
var $scope, tankService, appCtrl;
var response = {
tankAvgHours: 8,
stillAvgHours: 2,
stillRemaining: 200,
tankRemaining: 50
};
beforeEach(module('myApp'));
beforeEach(inject(function($controller, $rootScope, _tankService_) {
$scope = $rootScope.$new();
tankService = _tankService_;
spyOn(tankService, 'getCurrentStats').and.callFake(function() {
return {
then: function(successCallback) {
successCallback(response);
}
}
});
AdminController = $controller('appCtrl', {
$scope: $scope,
tankService: _tankService_
});
}));
describe('appCtrl initialization', function() {
it('calls service and allocates stats with returned data', function() {
expect(tankService.getCurrentStats).toHaveBeenCalled();
expect($scope.stats.tankAvgHours).toEqual(response.tankAvgHours);
expect($scope.stats.stillAvgHours).toEqual(response.stillAvgHours);
expect($scope.stats.stillRemaining).toEqual(response.stillRemaining);
expect($scope.stats.tankRemaining).toEqual(response.tankRemaining);
expect($scope.stats.loaded).toBeTruthy();
});
});
});
Hope this helps.

Answer 2

I think you're testing the wrong thing. A service should be responsible for returning the data only. If you want to test the service, then by all means mock the httpbackend and call the service, but then verify the data returned by the service, not the $scope. If you want to test that your controller calls the service and adds the data to the scope, then you need to create your controller in the test, give it scope that you create, and then test that those variables get added. I didn't test this so the syntax might be off, but this is probably the direction you want to go in.
var scope, $httpBackend, controller;
beforeEach(inject(function(_$httpBackend_, $controller, $rootScope) {
$httpBackend = _$httpBackend_;
$httpBackend.whenPOST('../services/tanks/RelayTankService.asmx/getCurrentStats').respond(200, $q.when(STATS_RESPONSE_SUCCESS));
scope = $rootScope.$new();
controller = $controller('myController', {
$scope: scope
});
}));
it('calls service and allocates stats with returned data', function () {
expect(scope.stats.loaded).toBeFalsy();
$httpBackend.flush();
expect(scope.stats.tankAvgHours).toEqual(result.tankAvgHours);
expect(scope.stats.stillAvgHours).toEqual(result.stillAvgHours);
expect(scope.stats.stillRemaining).toEqual(result.stillRemaining);
expect(scope.stats.tankRemaining).toEqual(result.tankRemaining);
expect(scope.stats.loaded).toBeTruthy();
});