I'm attempted to unit test a service. I've injected the service however the method call getAllProducts() doesn't appear to run however the test still passes!
Plnkr
service.js
angular.module('vsApp')
.factory('productsDataService', function($http) {
var service = {
getAllProducts: getAllProducts
};
// get all products
function getAllProducts() {
return $http.get('/apiv1/getAllProducts/').then(function(data) {
return (data);
});
}
return service;
});
spec.js
// jasmine
describe('products data service', function () {
var $httpBackend, productsDataService;
beforeEach(module('vsApp'));
beforeEach(inject(function(_$httpBackend_, _productsDataService_) {
$httpBackend = _$httpBackend_;
productsDataService = _productsDataService_;
}));
it('should get all products', inject(function() {
console.info("get all");
// mock response for the http call in the service
$httpBackend.when('GET', '/apiv1/getAllProducts/')
.respond({name: 'item', price: '932'});
//this doesn't seem to run??
productsDataService.getAllProducts().then(function(response) {
expect(response.data.length).toBeGreaterThan(1);
});
}));
});
Ok, you have to make it sync. (all pending request will get resolved) using $http.flush();
Working demo as expected
productsDataService.getAllProducts().then(function(response) {
console.log(response);
expect(response.data.length).toBeGreaterThan(999);
});
$httpBackend.flush(); // <=============== here.
Related
I am using AngularJS 1.7 with Karma and Jasmine. And I have started learning Unit Test cases.
I have a sample method below in my controller
_this.method = function () {
Service.getData().then(function (response) {
if (response.productId === "ClientAPI") {
// Some code
}
else {
// Some Code
}
}, function (error) {
_this.inProgress = false;
if (error.status === 400) {
// Some Code
} else {
// Some Code
}
})
}
Below is my test case :
describe('Some Route :: Controller => ', function () {
var $componentController;
var Service;
beforeEach(module('app'));
beforeEach(inject(function (_$componentController_, _Service_) {
Service = _Service_;
spyOn(Service, 'getData').and.callFake(function() {
var deferred = $q.defer();
var response = {};
response.productId = "ClientAPI";
deferred.resolve(result);
return deferred.promise;
});
ctrl = $componentController('controllerName', { Service: Service });
}));
it('Ctrl Method : should true', function () {
ctrl.method();
expect(Service.getData).toHaveBeenCalled();
Service.getData().then(function (response) {
expect(response.productId).toBe("ClientAPI")
})
});
});
But my branch coverage is not showing for this condition if (response.productId === "ClientAPI") {
Not sure what I am doing wrong while testing in a promise.
You need to call $scope.$apply() to trigger the call of the promise callbacks:
beforeEach(inject(function (_$componentController_, _Service_) {
Service = _Service_;
spyOn(Service, 'getData').and.returnValue($q.resolve({ productId: 'ClientAPI' }));
ctrl = $componentController('controllerName', { Service: Service });
}));
it('Ctrl Method : should true', inject(function($rootScope) {
ctrl.method();
expect(Service.getData).toHaveBeenCalled();
$rootScope.$apply();
// now test that the ctrl state has been changed as expected.
// testing that the service has returned ClientAPI is completely useless:
// the service is a mock, and you have told the mock to return that
// this should test the component, based on what you've told the service
// to return. It's not supposed to test the mock service.
// testing what the service returns tests jasmine, not your code.
});
I am trying to write the test cass for the factory which is returing a JSON response.
But I am getting the error:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=serviceProvider%20%3C-%20service
at Error (native)
Here is my code:
(function () {
angular.module('uspDeviceService',[]).factory('getDevice', GetDevice);
GetDevice.$inject = ['$http'];
function GetDevice($http) {
getDeviceList = function() {
return $http.get("static/test-json/devices/device-list.json");
}
return {
getDeviceList: getDeviceList
}
}
}());
Code for Test case:
describe('Get Product test', function() {
beforeEach(module('uspDeviceService'));
var service, httpBackend, getDevice ;
beforeEach(function () {
angular.mock.inject(function ($injector) {
//Injecting $http dependencies
httpBackend = $injector.get('$httpBackend');
service = $injector.get('service');
getDevice = $injector.get('getDevice');
})
});
console.log('Injection Dependencies is done');
describe('get Device List', function () {
it("should return a list of devices", inject(function () {
httpBackend.expectGET("static/test-json/devices/device-list.json").respond("Response found!");
httpBackend.flush();
}))
})
});
I am new to Angular Unit testing, can anyone please help me, where I am going wrong..
Two things that jump out at me:
Your angular.module declaration is defining a module, not getting the module. I would encourage you to split that up so that it's a fair bit more clear what your intent is.
angular.module('uspDeviceService', []);
angular.module('uspDeviceService').factory('getDevice', GetDevice);
It likely works as-is, but clarity is important.
What is...service? It's not defined anywhere in your code, and Angular can't find it either, hence the error message. You may be looking to get getDevice instead. Also, name your test variable with respect to what it actually is, so you don't confuse yourself.
// defined above
var getDevice;
// while injecting
getDevice = $injector.get('getDevice');
Supposing that you have an angularjs controller myController defined in myModule. The controller do some action when the api call is success and shows a flash message when api returns success = false. The your controller code would be something like
angular.module('myModule')
.controller( 'myController', function ( $scope,flashService, Api ) {
Api.get_list().$promise.then(function(data){
if(data.success) {
$scope.data = data.response
}
else{
flashService.createFlash(data.message, "danger");
}
});
});
Now to test both success = true and success = false we
describe('myController', function(){
var $rootScope, $httpBackend, controller, flashService;
var apilink = 'http://apilink';
beforeEach(module('myModule'));
beforeEach(inject(function(_$httpBackend_,_$rootScope_, _$controller_, _flashService_) {
$rootScope = _$rootScope_;
$httpBackend = _$httpBackend_;
flashService = _flashService_;
controller = _$controller_("myController", {$scope: $rootScope});
}));
it('init $scope.data when success = true', function(){
$httpBackend.whenGET(apilink)
.respond(
{
success: true,
response: {}
});
$httpBackend.flush();
expect($rootScope.data).toBeDefined();
});
it('show flash when api request failure', function(){
spyOn(flashService, 'createFlash');
$httpBackend.whenGET(apilink)
.respond(
{
success: false
});
$httpBackend.flush();
expect(flashService.createFlash).toHaveBeenCalled();
});
});
You are always going to mock the response because here we are testing the javascript code behaviour and we are not concerned with the Api. You can see when success the data is initialized and when success is false createFlash is called.
As far as test for factory is concerned you can do
describe('Get Product test', function() {
beforeEach(module('uspDeviceService'));
var service, httpBackend, getDevice ;
beforeEach(function () {
inject(function ($injector) {
httpBackend = $injector.get('$httpBackend');
service = $injector.get('service');
getDevice = $injector.get('getDevice');
});
});
describe('get Device List', function () {
it("should return a list of devices", inject(function () {
httpBackend.expectGET("static/test-json/devices/device- list.json").respond("Response found!");
var result = getDevice.getDeviceList();
httpBackend.flush();
expect(result).toEqual('Response found!');
}));
});
});
I want to test the following method in my controller class:
// getIds() {
// this.api.getIds()
// .then((response)=> {
// this.ids = response.data;
// this.doSomethingElse();
// });
// }
I'm not sure how to handle the promise using jasmine and karma. The project is written in ES6. api.getIds() returns a $http.get().
beforeEach(function() {
inject(function($controller, $rootScope, _api_) {
vm = $controller('MainController', {
api: _api_,
$scope:$rootScope.$new()
});
});
});
beforeEach(function () {
vm.getIds();
});
it('should set the ids', function () {
expect(vm.ids).toBeDefined(); //error
});
How do I wait for the promise to complete before running the expect() ?
First of all, you should use the done callback provided by the jasmine; see async support in Jasmine.
Then, you should mock your getIds on the api so that it returns a resolved promise with an expected value. The asserts should be done after the then promise is called - se bellow the full example.
beforeEach(function () {
var $q, vm, api, $controller, $rootScope;
inject(function (_$controller_, _$rootScope_, _$q_) {
$q = _$q_;
$controller = _$controller_;
$rootScope = _$rootScope_;
api = jasmine.createSpyObj('api', ['getIds']);
api.getIds.and.returnValue($q.when([]));
vm = $controller('MainController', {
api: api,
$scope: $rootScope.$new()
});
});
});
it('should set the ids', function (done) {
vm
.getIds()
.then(function (ids) {
expect(ids).toBeDefined();
// add more asserts
done();
});
});
As a side note, if the this.doSomethingElse(); is a promise too, you have to return it in the first then so that you can test the final result.
Still rather new to angular unit testing. I have a service in module 'example' that loads a local JSON file through the $http service and asynchronously returns the response data.
I figured out that I need to test (using Jasmine) that
the http GET connects with the local resource
the http service loads the JSON and gets the correct json content
the service fulfills its promise to return the response data
my service code
/**
* Service to load JSON data.
*/
.service('jsonLoader', ['$http','$timeout', 'TABLE_DATA_LOC', function($http, $timeout, TABLE_DATA_LOC) {
this.load = function() {
return $timeout(function() {
return $http.get(TABLE_DATA_LOC).then(function(response) {
return response.data;
});
}, 30);
};
what I have for the test currently:
describe('jsonLoader service', function() {
var jsonLoader, httpBackend;
beforeEach(module("example"));
beforeEach(inject(function(_jsonLoader_, $httpBackend) {
jsonLoader = _jsonLoader_;
httpBackend = $httpBackend;
}));
it("should load json", function() {
httpBackend.whenGET('./mock/sample.json').respond({
"people": [
{
"person": {
"firstName": "jim",
"lastName": "bob"
}
}
]
});
});
});
is the first part right, and how would I use jasmine to test the async promise?
Following on from my comment, here's how I would approach it.
describe('jsonLoader service', function() {
var uri;
beforeEach(module('example', function($provide) {
$provide.constant('TABLE_DATA_LOC', uri = 'mock/sample.json');
}));
it('should load JSON in a $timeout and return the response data', inject(function($httpBackend, $timeout, jsonLoader) {
var responseData = 'whatever', resolved = false;
$httpBackend.expectGET(uri).respond(responseData);
jsonLoader.load().then(function(data) {
expect(data).toBe(responseData);
resolved = true;
});
$timeout.flush();
$timeout.verifyNoPendingTasks();
expect(resolved).toBeFalsy();
$httpBackend.flush();
$httpBackend.verifyNoOutstandingRequest();
expect(resolved).toBeTruthy();
}));
});
Plunker demo ~ http://plnkr.co/edit/jmc9FWjbOkpmT6Lu8kVn?p=preview
Im new to jasmine/karma, trying to write a test for my angular application and i have a problem that i can't solve, hopefully someone here can help me.
My problem is that my login() function updates a value inside my controller but jasmine fails to see the updated value when it's inside .then() and the test fails, but when i update the value outside of the .then() it passes successfully.
here is my controller:
var Authctrl = this;
Authctrl.myVariable = "oldValue";
Authctrl.login = function () {
AuthService.login(Authctrl.credentials).then(function(authData){
Authctrl.credentials = { email: '',password: ''};
/*case 1 */ Authctrl.myVariable = "newValue"; //test gives error
},function(error){
console.log(error);
Authctrl.errors.login = 'Wrong username or password. Please try again';
});
/*case 2 */ Authctrl.myVariable = "newValue"; //test passes successfully
};
and my test code:
it('should be newValue',function(){
Authctrl.credentials = {
email: 'myEmail#yahoo.com',
password: '12345'
};
Authctrl.login();
expect(Authctrl.myVariable).toBe('newValue');
});
and my service:
authService.login = function (credentials) {
return $q(function(resolve, reject){
ref.authWithPassword(credentials , function(error, authData) {
if (error === null) {
// user authenticated with Firebase
console.log('SERVICE IS RUNNING, success'); //this does not log when testing with karma
resolve(authData);
} else {
console.log('SERVICE IS RUNNING, error'); //this does not log when testing with karma
reject(error);
}
},{
remember: "default"
});//ref.authWithPassword end
console.log('SERVICE IS RUNNING'); //this logs when testing with karma
});//$q end
};//authService.login end
so I finally figured this out and decided to post the answer here in case others run into the same problem. as #MatthewGreen mentioned, i had to create a mock service. and use the $provide to define mock AuthService methods and their return values. i followed many tutorials online and i kept getting errors, then i learnt that few things have changed in new jasmine and one of them is the spyOn command. This tutorial helped me a lot.
'use strict';
describe('Controller: AuthCtrl', function () {
var $rootScope,$scope,$controller,AuthService,AuthCtrl;
//fake firebase user data
var mockAuthData = {
provider: 'password',
password:{
email: 'myEmail#yahoo.com',
isTemporaryPassword: false
},
auth:{
provider:'password',
uid:'simplelogin:1'
},
uid:'simplelogin:1'
};
beforeEach(function() {
module('myApp');
// Provide will help us create fake implementations for our dependencies
module(function($provide) {
// Fake AuthService Implementation returning a promise
$provide.value('AuthService', {
login:function(){
return{
then:function(callback){return callback(mockAuthData);}
};
}
});
return null;
});
});
// load the controller's module
beforeEach(inject(function(_$rootScope_, _$controller_, _$q_, _AuthService_) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$controller = _$controller_;
AuthService = _AuthService_;
AuthCtrl = $controller('AuthCtrl',
{'$rootScope' : $rootScope, '$scope': $scope, 'AuthService': AuthService});
$rootScope.$apply();
}));
it("myVariable should be newValue", function() {
spyOn(AuthService, 'login').and.callThrough();
AuthCtrl.login();
expect(AuthService.login).toHaveBeenCalled();
expect(AuthCtrl.myVariable).toBe('newValue');
});
it("should retrieve the email address", function() {
spyOn(AuthService, 'login').and.callThrough();
AuthCtrl.login();
expect(AuthService.login).toHaveBeenCalled();
expect(AuthCtrl.userEmail).toBe('myEmail#yahoo.com');
});;
});