Jasmine unit tests with odata promises - angularjs

I'm new at angular and at unit testing with angular. We are using odata for database CRUD actions, so we have created a service for that, looks like this:
function DatabaseService($http, $odataresource, DateFactory, constants) {
var url = constants.BACKEND.URL;
var ObjCreate = $odataresource(url + 'Objects/Function.CreateObject', {}, {}, {});
var service = {
createSomething: {
createObj: createObj
}};
return service;
function createObj(formData) {
var myObj = new ObjCreate();
mapData(formData, myObj );
return myObj.$save();
}
The code is a bit abstracted for my question, so don't wonder please. I want to unit test the function createObj() now, which doesn't work. I took an angular class and we learned there that for 'execute' promises we have to use $rootScope.digest(), but it doesn't seem to work in my case:
describe('createObj', function () {
it('should return data', inject(function ($rootScope) {
var DatabaseService = $injector.get('DatabaseService', { $odataresource: $odataresource });
var formDataMock = {
productName: "Produktname"
};
var test = 'abc';
DatabaseService.createSomething.createObj(formDataMock)
.then(function (data) {
test = data;
})
.catch(function (error) {
test = error;
});
$rootScope.$digest();
console.log(test);
}));
I have added the setting of the variable test to see when for example the then path is executed, but even with the $rootScope.$digest it will never step into the then path, my variable test will never change from 'abc' to something else.
Could you please give me a hint what am I doing wrong?

I tried to update your code to use the done Feature of Jasmine 2.0.
http://ng-learn.org/2014/08/Testing_Promises_with_Jasmine/
describe('createObj', function () {
it('should return data', function (done) {
var DatabaseService = $injector.get('DatabaseService', { $odataresource: $odataresource });
var formDataMock = {
productName: "Produktname"
};
var test = 'abc';
DatabaseService.createSomething.createObj(formDataMock)
.then(function (data) {
test = data;
})
.catch(function (error) {
test = error;
})
.finally(done);;
console.log(test);
});

Related

How to unit test condition in promise then() karma and jasmine

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.
});

How to test controller that using data from factory?Using Karma +Jasmine on AngularJS

How to test this factory and controller using karma and jasmine,do I need angular.mocks.js? Is it possible to test witout mocks? And how to make my test look like to test things like this?
Sorry I`m new in testing:(
Service:
app.factory('httpProvide', function ($http) {
function Provider() {
Provider.prototype.getAll = function () {
return $http.get('/all').then(function (response) {
return response.data;
});
}
}
Controller:
function main($scope, httpProvide) {
var httpProvide = new httpProvide.Provider();
var getAll = function () {
httpProvide.getAll().then(function (data) {
$scope.data = data;
});
};
}

Unit Testing angular $httpBackend service

I've got right now a project were we need to have the backend server mocked for the time being and we are using $httpBackend on the application .run feature. I need to unit test this service that contains the $httpBackend as we will be having a vast amount of mocked calls to the server we will be covering. So right now this is what I have. As a preface to my question the current setup works when I call mockDataService.getWorkflowTask from a controller on a simple page.
My Server replacement service:
angular.module('app').run(function ($httpBackend, $resource, FakeBackendService) {
// TODO: add all necessary http intercepts.
$httpBackend.whenGET('JSON file').respond(function (method, url, data) {
var request = new XMLHttpRequest();
request.open('GET', url, false);
request.send(null);
return [request.status, request.response, {}];
});
$httpBackend.whenGET(/.*/).respond(function (method, url, data) {
return [200, FakeBackendService.getWorkflowTasks(), {}];
});
});
Here is the service for FakeBackendService:
(function () {
'use strict';
var injectParams = [];
function service(lodash) {
var vm = this;
var ret = {
getWorkflowTasks: getWorkflowTasks
};
function getWorkflowTasks() {
if (vm.workflowtasks.length < 1) {
vm.workflowtasks = loadWorkflowTasks("Some JSON file");
}
return vm.workflowtasks;
};
function loadWorkflowTasks(file) {
var workflowTasks = [];
var request = new XMLHttpRequest();
request.open("GET", file, false);
request.send(null);
if (request.status == 200) {
workflowTasks = angular.fromJson(request.response);
}
return workflowTasks;
};
function init() {
vm.workflowtasks = [];
}
init();
return ret;
}
service.$inject = injectParams;
angular.module('mock.FakeBackendService', []).service('FakeBackendService', service);
})();
So that is currently the backend server replacement mock. The following is my data handling service which contains the call to $http.get(blah blah blah).
(function () {
'use strict';
var injectParams = ['$http', '$q', 'mockConfigService', '$httpBackend'];
function factory($http, $q, configService, $httpBackend) {
var vm = this;
var factory = {
getWorkflowTask: getWorkflowTask
};
function getWorkflowTask(str) {
return getResource(str);
}
function init() {
// Get the URL we will be using to get data from
vm.dataServiceURL = configService.getDataServiceURL();
}
function getResource(baseResource) {
var resource = vm.dataServiceURL + baseResource;
return $http.get(resource).then(function (response) {
if (typeof response.data == 'object') {
// Got valid response
return $q.resolve(response.data);
}
else {
// Invalid response
return $q.reject(response.data);
}
}, function (response) {
// Something went wrong
return $q.reject(response.data);
});
}
init();
return factory;
};
factory.$inject = injectParams;
angular.module('mock.dataService', []).factory('mockDataService', factory);
}());
Now for the Jasmine-Karma Unit test.
describe("HTTP Backend Mock testing", function () {
beforeEach(angular.mock.module("app"));
beforeEach(angular.mock.module("mock.FakeBackendService"));
beforeEach(angular.mock.module("mock.configService"));
beforeEach(angular.mock.module("mock.dataService"));
it("Get the workflow task", angular.mock.inject(function (mockDataService) {
var valid = "";
var promise = mockDataService.getWorkflowTask('http://localhost/foo');
promise.then(function (response) {
valid = "Success";
}, function (response) {
valid = "Failure";
});
expect(valid).toBe("Success");
}));
});
Now to the question. So, I'll start by saying I'm new to the AngularJS world and even more so to Jasmine. Anyways, when I debug the unit test I find that the promise's status is still 0 and I always get expected '' to be 'Success' telling my I never resolve (hopefully I'm using the right lingo) the promise from the $http service in mockDataService. I've tried playing around with it some and tried to see if anyone has done this kind of a thing before. I found plenty of examples where the $httpBackend is mocked in the test but none like what I'm attempting. Any ideas or suggestions would be great. Thanks.
EDIT got a slightly working solution
So I decided that I'd by pass the run() service and just do the same response in the expectGET().respond().
describe("HTTP Backend Mock testing", function () {
beforeEach(angular.mock.module("app"));
beforeEach(angular.mock.module("mock.FakeBackendService"));
beforeEach(angular.mock.module("mock.configService"));
beforeEach(angular.mock.module("mock.dataService"));
it("Get the workflow task", angular.mock.inject(function (mockDataService, $httpBackend, FakeBackendService) {
var valid = "";
$httpBackend.expectGET('http://server:80/api/foo').respond(200, FakeBackendService.getWorkflowTasks());
var promise = mockDataService.getWorkflowTask('foo');
promise.then(function (response) {
valid = "Success";
}, function (response) {
valid = "Failure";
});
$httpBackend.flush();
expect(valid).toBe("Success");
}));
});
This sort of solves my testing problem with the run() as the goal was to verify 1) That the regex matching call the correct FakeBackendService and 2) That FakeBackendService returns correct file and actually loads it. I think I can do that by mimicking the same regex in the expectGET. However, I'll leave open for a bit to see if anyone knows how to get the run() to work.
The promise is not going to resolve unless you force it to do so before the test ends. Here is one such way to do it:
$httpBackend.expectGET(......).respond(200, 'abc');
var promise = mockDataService.getWorkflowTask('http://localhost/foo');
promise.then(function (response) {
valid = "Success";
}, function (response) {
valid = "Failure";
});
//new code here
$httpBackend.flush();
expect(valid).toBe("Success");
This will force the promise to resolve and your test should pass. You'll also need to inject the $httpBackend service into the test.
angular.module('mock.dataService', [])
.service('mockDataService', function($http) {
this.getWorkflowTask = function(url) {
return $http.get(url)
}
})
describe('HTTP Backend Mock testing', function() {
var $httpBackend
beforeEach(angular.mock.module("mock.dataService"));
beforeEach(inject(function(_$httpBackend_) {
$httpBackend = _$httpBackend_
}))
it("Get the workflow task", angular.mock.inject(function(mockDataService) {
$httpBackend.expectGET('http://localhost/foo').respond(200);
var promise = mockDataService.getWorkflowTask('http://localhost/foo');
promise.then(function(response) {
valid = "Success";
}, function(response) {
valid = "Failure";
});
$httpBackend.flush();
expect(valid).toBe("Success");
}));
})
<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.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

Testing q.defer() with a webworker, how do I prevent timing issues?

I have a webworker doing some work for me.
I've wrapped this into a service and this webworker is executed in a Promise.
Now I'm tesing this with Jasmine, and it seems that the promised is returned after the test has finished.
The difficulty in here is that the defer AND the webworker are both async at different points in time.
I've tried with async jasmine with done, setTimeout, $scope.$apply(). But ''deferred.resolve(e.data.filtered)'' is called after all those timers have suspended.
My angular service is like this:
'use strict';
angular.module('app.demographics').service('FilteringService', FilteringService);
FilteringService.$inject = ['$q'];
function FilteringService($q) {
this.filter = function (dataSet, filters) {
var deferred = $q.defer();
var worker = new Worker('my.worker.js');
var filterData = {
dataSet: dataSet,
filters: filters
};
worker.postMessage(filterData);
worker.onmessage = function (e) {
if (e.data && e.data.ready) {
deferred.resolve(e.data.filtered);
}
};
worker.onerror = function (e) {
console.log("something went wrong while filtering: ", e);
deferred.reject(e);
};
return deferred.promise;
};
}
And my test is like this, which I expect to work properly, but it never comes to the expect.
'use strict';
describe('FilteringService: ', function () {
var filteringService, $q,
dataSet = [{a: 1, b: 2}, {c: 3, d: 4}],
filters = [];
beforeEach(function () {
module('app.demographics');
inject(function (_$rootScope_, _FilteringService_, _$q_) {
filteringService = _FilteringService_;
$q = _$q_;
});
});
it('should return a promise on filtering', function () {
var filteringPromise = filteringService.filter(dataSet, filters);
filteringPromise.then(function (data) {
expect(data.length).toEqual(dataSet.length);
}, function (failure) {
fail(failure);
});
});
});
As mentioned in https://stackoverflow.com/a/37853075/1319998, the original test seems to be more of an integration test rather than a unit test. If you would like this to be a unit test....
You need to be able to mock the worker so you're not testing what it does. So in the service, instead of calling Worker directly, you can call $window.Worker, since $window can be easily mocked in tests.
app.service('FilteringService', FilteringService);
FilteringService.$inject = ['$window', '$q', '$rootScope'];
function FilteringService($window, $q, $rootScope) {
this.filter = function (dataSet, filters) {
var deferred = $q.defer();
var worker = new $window.Worker('my.worker.js');
...
Then in the test you can create a mocked worker, calling the attacted onmessage handler that would be called by the real worker, and testing that the promise then gets resolved with the correct value (I've left it as just testing the length, but in a real test I suspect you will need something a bit better).
describe('FilteringService: ', function () {
var $rootScope, filteringService, $q,
dataSet = [{a: 1, b: 2}, {c: 3, d: 4}],
filters = [];
var mockWorker;
var mockWindow = {
Worker: function() {
return mockWorker;
}
};
beforeEach(function () {
module('app.demographics');
module(function($provide) {
$provide.value('$window', mockWindow);
});
inject(function (_$rootScope_, _FilteringService_, _$q_) {
$rootScope = _$rootScope_;
filteringService = _FilteringService_;
$q = _$q_;
});
mockWorker = {
postMessage: jasmine.createSpy('onMessage')
}
});
it('when onmessage from worker called, resolves returned promise with filtered list', function () {
expect(mockWorker.postMessage).not.toHaveBeenCalled();
expect(mockWorker.onmessage).not.toEqual(jasmine.any(Function));
var filteringPromise = filteringService.filter(dataSet, filters);
expect(mockWorker.postMessage).toHaveBeenCalled();
expect(mockWorker.onmessage).toEqual(jasmine.any(Function));
mockWorker.onmessage({
data: {
ready: true,
filtered: dataSet
}
});
var result;
filteringPromise.then(function(_result) {
result = _result;
});
$rootScope.$apply();
expect(result.length).toEqual(dataSet.length);
});
});
Note you then need the $apply in the test (but not the service), to make sure the promise callbacks get called.
You can see this working at https://plnkr.co/edit/g2q3ZnD8AGZCkgkkEkdj?p=preview
I accept this isn't the optimal solution, more of a hack probably, but this is how I got Jasmine working with Angular. My approach was to create a function digestIt that takes the done function provided by Jasmine and invokes $digest using setInterval and returns a cleanup function.
function digestIt($rootScope, done) {
var intervalId: number,
_done = function() {
if (angular.isDefined(intervalId))
clearInterval(intervalId);
intervalId = null;
done();
},
_interval = function () {
if (angular.isNumber(intervalId)) {
try {
$rootScope.$digest();
} catch (e) {
_done();
}
}
},
intervalId = setInterval(_interval, 1);
return _done;
}
Here's the usage pattern.
describe("MyService ", function() {
var $rootScope,
$injector
;
beforeEach(angular.mock.inject(function (_$rootScope_, _$injector_) {
$rootScope = _$rootScope_.$new();
$injector = _$injector_;
}));
it("My Test", function (done) {
var $docs = $injector.get('MyService'),
completed = digestIt($rootScope, done)
;
$docs.asyncCall().then(function () {
/* expect */
}).catch(function() {
/* fail */
}).finally(function () {
completed();
});
});
});
It looks likes (at least in the testing environment), $q promises only get resolved (as in, their success/failure callbacks are called) when a digest cycle gets initiated. So in the service you can put in $rootScope.apply() to trigger this:
worker.onmessage = function (e) {
if (e.data && e.data.ready) {
$rootScope.$apply(function() {
deferred.resolve(e.data.filtered);
});
}
};
worker.onerror = function (e) {
console.log("something went wrong while filtering: ", e);
$rootScope.$apply(function() {
deferred.reject(e);
});
};
And then your test can be asynchronous:
it('should return a promise on filtering', function (done) {
var filteringPromise = filteringService.filter(dataSet, filters);
filteringPromise.then(function (data) {
expect(data.length).toEqual(dataSet.length);
done();
}, function (failure) {
fail(failure);
});
});
This can be seen at https://plnkr.co/edit/D21EhoCXIbj8R0P9RY40?p=preview
Note: this is probably classified as an integration test rather than a unit test, as you're testing both FilteringService and your worker together. If you were to only have a unit test, you can probably avoid the addition of $rootScope.$apply() in FilteringService by mocking the worker. You would probably also then be able to make is a synchronous test.

Having difficulty writing jasmine unit tests for Angular where there are a lot of dependencies

I am new to AngularJS. We are using the karma/jasmine testing tool.
I am going to past the code I am trying to unit test here. I hope you can help me write a unit test. I am able to write very simple unit tests. But modules where there are a lot dependencies are giving me trouble.
Here is the code I am trying to unit test:
var referencedataservice = angular.module('referenceDataService', []);
referencedataservice.factory('dataService', function($localStorage, $http, constant) {
var username = $localStorage.user.username;
var password = $localStorage.user.password;
var request = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: {
username: username,
password: password
}
};
function getCountries() {
request.url = constant.URL_GET_COUNTRIES;
return $http(request).then(
function(result) {
return result.data;
});
}
}
Here is the what the constants service looks like:
angular.module('constantsService', []).constant("constant", {
"URL_GET_COUNTRIES": "app/lookup/getCountries",
"URL_GET_PRODUCT_TYPES": "app/lookup/getProductTypes",
});
I can unit test the constantsService quite easily. But I am unable to figure out how to write the unit test for my referenceDataService. Here is my attempt at it:
describe("Test Reference Data Service", function() {
var a;
var dataService;
var $localStorage;
var constant;
var $http;
beforeEach(module('ngStorage', 'constantsService', 'referenceDataService'));
beforeEach(inject(function($localStorage, _constant_, _dataService_) {
constant = _constant_;
$http = _$http_;
dataService = _dataService_;
}));
it("should be the same", function() {
var countries;
dataService.getCountries().then(function(data) {
countries = data.referenceDataValues;
});
a = countries[0].id;
expect(a).toBe("1000000");
});
});
It obviously doesn't work. The tests don't even compile. Keep getting dependancy related errors. I just don't know how to fix them.
Your getCountries is async so you need to use the "done" in your test.
it("should be the same", function(done) {
var countries;
dataService.getCountries().then(function(data) {
countries = data.referenceDataValues;
a = countries[0].id;
expect(a).toBe("1000000");
done();
});
});
Source: http://jasmine.github.io/2.0/introduction.html

Resources