unit test data arrived from service to controller (Jasmine) - angularjs

Question

Here is part of my code:
angular.module('mine',[]).factory('MyFactory', ['$http','$q', function
MyFactory($http,$q) {
return {
getData: function() {
var deferred = $q.defer(),
url = "http://...";
$http.jsonp(url)
.then(
function (response) {
deferred.resolve(response.data);
},
function (error) {
return $q.reject('Error retrieving data');
}
);
return deferred.promise;
}
};
}]);
function MyController(MyFactory) {
var self = this;
self.getData= function( ) {
MyFactory.getData().then(
function(result) {
self.contacts = result;
},
function(error) {
console.log('Error retrieving data: ', error);
}
);
};
self.getData();
}
angular.module('mine').component('myComponent', {
templateUrl: '..',
controller: MyController
});
I am trying to unit test if data from factory go correctly to controller. Here is my unit testing code using Jasmine:
describe('component', () => {
let $componentController,contactsList,ctrl,$q,$rootScope;
beforeEach(angular.mock.module('mine'));
beforeEach(inject((_$componentController_,_MyFactory_, _$q_, _$rootScope_) => {
$componentController = _$componentController_;
ctrl = $componentController('myComponent',null);
$q = _$q_;
contactsList = _MyFactory_;
$rootScope = _$rootScope_;
}));
it('should ... ', function() {
spyOn(contactsList, "getData").and.returnValue(
$q.when({
message: 'awesome message'
}));
ctrl.getData();
$rootScope.$apply();
expect(ctrl.contacts.message).toBe('awesome message');
});
});
For some reason, the above test is not running; I am getting the following error: Possibly unhandled rejection: Error retrieving data thrown. Do you have any idea why? What is wrong?

Answer 1

You should inject MyFactory to $componentController as second argument in your tests. So instead of this:
ctrl = $componentController('myComponent',null);
use this:
ctrl = $componentController('myComponent', {
MyFactory: _MyFactory_
});

Answer 2

angular.module('mine', []).factory('MyFactory', ['$http', '$q', function
MyFactory($http, $q) {
return {
getData: function() {
var deferred = $q.defer(),
url = "http://google.com";
$http.jsonp(url)
.then(
function(response) {
deferred.resolve(response.data);
},
function(error) {
return $q.reject('Error retrieving data');
}
);
return deferred.promise;
}
};
}
]);
function MyController(MyFactory) {
this.getData = function() {
MyFactory.getData().then(
function(result) {
this.contacts = result;
}.bind(this),
function(error) {
console.log('Error retrieving data: ', error);
}
);
};
this.getData();
}
angular.module('mine').component('myComponent', {
controller: MyController
});
describe('component', () => {
let $componentController, contactsList, $q, $rootScope, ctrlFactory;
beforeEach(angular.mock.module('mine'));
beforeEach(inject((_$componentController_, _MyFactory_, _$q_, _$rootScope_) => {
$componentController = _$componentController_;
ctrlFactory = () => {
return $componentController('myComponent', null, {
MyFactory: _MyFactory_
});
}
$q = _$q_;
contactsList = _MyFactory_;
$rootScope = _$rootScope_;
}));
it('should ... ', function() {
const message = 'awesome message'
spyOn(contactsList, "getData").and.returnValue(
$q.when({
message
}));
const ctrl = ctrlFactory()
ctrl.getData();
$rootScope.$apply();
expect(ctrl.contacts.message).toBe(message);
});
});
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-mocks.js"></script>