Calling web services from Jasmine Test - javascript

I am attempting to write some black box tests to some web services. In an attempt to do this, I'm using Jasmine. I would like to know how to call a web service from Jasmine. I currently have the following setup:
describe('Web Service', function () {
describe('-> endpoint', function() {
describe('-> create', function() {
var response = null;
beforeEach(function(done) {
// execute a call to the web service here
if (done) {
done();
}
});
it('should run correctly', function(done) {
if (done) {
done();
}
});
});
});
});
How do I call a web service from Jasmine?
Thank you!

You should use something like nock to mock a response and assert that your code has called the service and received the correct response and then did its job correctly, or, if you really want nock can even allow your code to perform the actual call to the web service.
Otherwise if you just want to call the webservice from within your test you most likely have an API client somewhere where you can just perform the call yourself.
describe('My Test', function (done) {
beforeEach(function () {
var myApiClient = new MyApiClient();
//unless you're using promises
this.response = myApiClient.synchronousGet('http://someURL.com');
});
});
Jasmine itself isn't, and shouldn't be, responsible for calling your web services, that should come from within your unit under test.

You shouldn't send ajax requests from your tests because you'll be dependant of the services to run your tests... And a bad response from your webservices doesn't absolutely mean that your code is not running correctly.
A good way to do it is to mock the ajax request (as limelights said), but Jasmine has an ajax module ready to help you with this. See http://jasmine.github.io/edge/ajax.html
This Jasmine plugin will allow you to catch the calls to a service and replace it with your fresh configured response that will be always the same (because you should know the exact response to test correctly your service.
Anyway, if you absolutely want to call your service, I think you'll have to code it in JS in your tests (not recommanded to write such code in your tests. Better write function that will be tested too). As I know, Jasmine doesn't provide you this kind of helper, it's just for tests purposes.

Related

How to really call fetch in Jest test

Is there a way to call fetch in a Jest test? I just want to call the live API to make sure it is still working. If there are 500 errors or the data is not what I expect than the test should report that.
I noticed that using request from the http module doesn't work. Calling fetch, like I normally do in the code that is not for testing, will give an error: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout. The API returns in less than a second when I call it in the browser. I use approximately the following to conduct the test but I also have simply returned the fetch function from within the test without using done with a similar lack of success:
import { JestEnvironment } from "#jest/environment";
import 'isomorphic-fetch';
import { request, } from "http";
jest.mock('../MY-API');
describe('tests of score structuring and display', () => {
test('call API - happy path', (done) => {
fetch(API).then(
res => res.json()
).then(res => {
expect(Array.isArray(response)).toBe(true);
console.log(`success: ${success}`);
done();
}).catch(reason => {
console.log(`reason: ${reason}`);
expect(reason).not.toBeTruthy();
done();
});
});
});
Oddly, there is an error message I can see as a console message after the timeout is reached: reason: ReferenceError: XMLHttpRequest is not defined
How can I make an actual, not a mocked, call to a live API in a Jest test? Is that simply prohibited? I don't see why this would fail given the documentation so I suspect there is something that is implicitly imported in React-Native that must be explicitly imported in a Jest test to make the fetch or request function work.
Putting aside any discussion about whether making actual network calls in unit tests is best practice...
There's no reason why you couldn't do it.
Here is a simple working example that pulls data from JSONPlaceholder:
import 'isomorphic-fetch';
test('real fetch call', async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
const result = await res.json();
expect(result.name).toBe('Leanne Graham'); // Success!
});
With all the work Jest does behind the scenes (defines globals like describe, beforeAll, test, etc., routes code files to transpilers, handles module caching and mocking, etc.) ultimately the actual tests are just JavaScript code and Jest just runs whatever JavaScript code it finds, so there really aren't any limitations on what you can run within your unit tests.

httpBackend Mock AJAX ES6 Promise in $q.when

I'm trying to mock a response to a JSONP GET request which is made with a function that returns an ES6 promise which I've wrapped in $q.when(). The code itself works just fine, however, in the unit tests the request is not being caught by $httpBackend and goes through right to the actual URL. Thus when flush() is called I get an error stating Error: No pending request to flush !. The JSONP request is made via jQuery's $.getJSON() inside the ES6 promise so I opted to try and catch all outgoing requests by providing a regex instead of a hard-coded URL.
I've been searching all over trying to figure this out for a while now and still have yet to understand what's causing the call to go through. I feel as if the HTTP request in the ES6 promise is being made "outside of Angular" so $httpBackend doesn't know about it / isn't able to catch it, although that may not be the case if the call was being made inside of a $q promise from the get-go. Can anyone possibly tell me why this call is going through and why a simple timeout will work just fine? I've tried all combinations of $scope.$apply, $scope.$digest, and $httpBackend.flush() here, but to no avail.
Maybe some code will explain it better...
Controller
function homeController() {
...
var self = this;
self.getData = function getData() {
$q.when(user.getUserInformation()).then(function() {
self.username = user.username;
});
};
}
Unit Test
...
beforeEach(module('home'));
describe('Controller', function() {
var $httpBackend, scope, ctrl;
beforeEach(inject(function(_$httpBackend_, $rootScope, $componentController) {
$httpBackend = _$httpBackend_;
scope = $rootScope.$new(); // used to try and call $digest or $apply
// have also tried whenGET, when('GET', ..), etc...
$httpBackend.whenJSONP(/.*/)
.respond([
{
"user_information": {
"username": "TestUser",
}
}
]);
ctrl = $componentController("home");
}));
it("should add the username to the controller", function() {
ctrl.getData(); // make HTTP request
$httpBackend.flush(); // Error: No pending request to flush !
expect(ctrl.username).toBe("TestUser");
});
});
...
For some reason this works, however:
it("should add the username to the controller", function() {
ctrl.getData(); // make HTTP request
setTimeout(() => {
// don't even need to call flush, $digest, or $apply...?
expect(ctrl.username).toBe("TestUser");
});
});
Thanks to Graham's comment, I was brought further down a different rabbit hole due to my lack of understanding several things which I will summarize here in case someone ends up in the same situation...
I didn't fully understand how JSONP works. It doesn't rely on XmlHttpRequest at all (see here). Rather than trying to fiddle with mocking responses to these requests through JSONP I simply switched the "debug" flag on the code I was using which disabled JSONP so the calls were then being made via XHR objects (this would fail the same origin policy if real responses were needed from this external API).
Instead of trying to use jasmine-ajax, I simply set a spy on jQuery's getJSON and returned a mock response. This finally sent the mocked response to the ES6 promise, but for some reason the then function of the $q promise object which resulted from wrapping the ES6 promise wasn't being called (nor any other error-handling functions, even finally). I also tried calling $scope.$apply() pretty much anywhere in the off chance it would help, but to no avail.
Basic implementation (in unit test):
...
spyOn($, 'getJSON').and.callFake(function (url, success) {
success({"username": "TestUser"}); // send mock data
});
ctrl.getData(); // make GET request
...
Problem (in controller's source):
// user.getUserInformation() returns an ES6 promise
$q.when(user.getUserInformation()).then(function() {
// this was never being called / reached! (in the unit tests)
});
Ultimately I used #2's implementation to send the data and just wrapped the assertions in the unit test inside of a timeout with no time duration specified. I realize that's not optimal and hopefully isn't how it should be done, but after trying for many hours I've about reached my limit and given up. If anyone has any idea as to how to improve upon this, or why then isn't being called, I would honestly love to hear it.
Unit Test:
...
ctrl.getData(); // make GET request
setTimeout(() => {
expect(ctrl.username).toBe("TestUser"); // works!
});

Using ng-describe for end-to-end testing with protractor

I've recently discovered an awesome ng-describe package that makes writing unit tests for AngularJS applications very transparent by abstracting away all of the boilerplate code you have to remember/look up and write in order to load, inject, mock or spy.
Has somebody tried to use ng-describe with protractor? Does it make sense and can we benefit from it?
One of the things that caught my eye is how easy you can mock the HTTP responses:
ngDescribe({
inject: '$http', // for making test calls
http: {
get: {
'/my/url': 42, // status 200, data 42
'/my/other/url': [202, 42], // status 202, data 42,
'/my/smart/url': function (method, url, data, headers) {
return [500, 'something is wrong'];
} // status 500, data "something is wrong"
},
post: {
// same format as GET
}
},
tests: function (deps) {
it('responds', function (done) {
deps.$http.get('/my/other/url')
.then(function (response) {
// response.status = 202
// response.data = 42
done();
});
http.flush();
});
}
});
Mocking HTTP responses usually helps to achieve a better e2e coverage and test how does UI reacts to specific situations and how does the error-handling work. This is something we are currently doing with protractor-http-mock, there are also other options which don't look as easy as it is with ng-describe.
Protractor primary is intended for E2E testing (with selenium webdriver) and that means that you need to have an actual backend hooked up (it could be a mock backend also). As the creator of Protractor wrote here, your application code runs separately with the test code and it isn't possible to gain easy access to the $http service.
By mocking the backend calls you are not doing E2E testing anymore even if you are using tool for E2E tests like Protractor. Why not to return to unit testing then. The only difference will be that you will use jQuery instead the Protractor API and the tests will be run with Karma. Then you can easily use ng-describe and $httpBackend which primary are intended to be used in unit tests.
However if you like to continue with this approach you can check the comments in this Protractor issue. There are several guys that are proposing solutions for this problem and as mentioned you are already using one of them. But in this case ng-describe won't help you much.
I hope that this answers your question.

Angular / Karma - $http.get not executing

I have an AngularJS project which uses Karma to run some unit tests in the browser. I'm using mocha as the test framework.
However, I've got some specification tests which need to read some JSON files and check that they adhere to a given convention spec (types, name convention etc).
I should make it clear that it is the actual contents of these files that I want to test. Not a spoofed version of them through Angular Mock's $httpBackend.
I'm marking the JSON files for serving in karma.conf.js.
files: [
{ pattern: 'static/assets/json/cards/*.json', included: false, served: true },
'path/to/angular.js',
'path/to/angular-mocks.js',
'tests/**/*.js'
]
If I run karma start, I can browse over to /base/static/assets/json/cards/something.json and see that the files are being served.
Next, in my test, both the $http and the $q services are injected.
var $http, $q;
beforeEach(module('chai'));
beforeEach(inject(function(_$http_, _$q_) {
$http = _$http_;
$q = _$q_;
}));
Then I try to load each resource using $http.get. Finally, the promises returned from $http.get are collated and a call to $q.all is made in order to wait for them all to be done, before calling done() and moving on.
it('should load the resources', function(done) {
var promises = ['admissions.json', 'discharge.json']
.map(function(resource) {
console.log('Loading', resource);
return $http.get('/base/static/assets/json/cards/' + resource);
});
$q.all(promises)
.then(function(card) {
console.log('Success');
done();
}, function(err) {
console.log('Failure', err);
done();
});
});
When my tests run, I see following console output:
Loading admissions.json
Loading discharge.json
Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test.
At first I assumed that it might have been exceeding the timeout by taking a long time to load, but the file is only 95kb.
Next, I wondered whether the custom promise interface (.success and .error) for $http was breaking the $q.all method. But apparently not.
Finally I tried to make a standalone request for /base/static/assets/json/cards/admissions.json at the beginning of all the tests.
It returns a promise, as expected, but it is never resolved, because no response is sent back. I checked the network tools to see what was coming back and it turns out that the request isn't even made in the first place. The code definitely runs, but for some reason $http doesn't actually make the request.
My inclination is that this is something to do with Angular Mocks intercepting $http requests for it's own $httpBackend service. How can I circumvent this?
I found a solution in this blog. The problem it's that you have to add the digest of the scope, even if you are not testing controllers.
it('does a thing one way', function() {
var value;
deferred.promise.then(function(_value_) {
value = _value_;
});
deferred.resolve(10);
expect(value).not. toBe(10); // not yet 10 because $digest hasn't run
$scope.$digest();
expect(value).toBe(10); // 10 because $digest already ran
});

Angular.js promise not resolving when unit testing service with karma

I am trying to unit test an Angular.js service, and need to set an expect on a promise returned from a Mock service (using Jasmine). I am using the karma unit testing framework. The relevant code snippet is below:
// I can't figure out how to do the equivalent of a $scope.$digest here.
var loginStatusPromise = FacebookService.getFacebookToken();
loginStatusPromise.then(function(token) {
expect(false).toBeTruthy(); // If this test passes, there is something going wrong!
expect(token).not.toBeNull(); // The token should be ValidToken
expect(token).toBe('ValidToken');
});
The complete unit test code can be seen here.
The problem is the promise.then statement never fires when karma is executing. Hence, none of my expect statements are executed.
In my controller tests, I use $scope.$digest() to resolve the promises, but I am not clear on how to do this in a service test. As I thought there was no notion of 'scope' in a service test.
Do I have the wrong end of the stick here? Do I need to injecct $rootScope into my service test and then use $digest? Or, is there another way?
I had this problem and resolved it by simply putting a
$rootScope.$apply() at the end of my test
Your FacebookService might be the issue, as suggested by #mpm. Are you sure it doesn't have any http calls happening inside of that Facebook dependency which wouldn't be occurring during unit testing? Are you certain that resolve has been called on the deferred yet?
Assuming that you are using ngFacebook/ngModule a quick note before the solution/ideas is that this project does not have unit tests ! Are you sure you want to use this project ?
I did a quick scan of your Unit Tests on Github and found following missing:-
1) Module initialization.
ngFacebook needs that or you need to initialize your module that does the same thing.
beforeEach(module('ngFacebook'));
OR
beforeEach(module('yieldtome'));
2) Seriously consider mocking ngFacebook module
At unit level tests you are testing your code within a mocked bubble where outside interfaces are stubbed out.
Otherwise) Try adding calling the API as below:-
$rootScope.$apply(function() {
this.FacebookService.getFacebookToken().then(function(){
//your expect code here
});
});
$httpBackend.flush();//mock any anticipated outgoing requests as per [$httpBackend][2]
beforeEach(function(){
var self=this;
inject(function($rootScope,Facebook){
self.$rootScope=$rootScope;
self.Facebook=Facebook;
});
})
it('resolves unless sourcecode broken',function(done){
// I can't figure out how to do the equivalent of a $scope.$digest here.
var loginStatusPromise = this.FacebookService.getFacebookToken();
loginStatusPromise.then(function(token) {
expect(token).toBe('ValidToken');
done();
});
$rootscope.$apply();
});
https://docs.angularjs.org/api/ng/service/$q
I agree with the above answers that a service should have nothing to do with $rootScope.
In my case had a $q promise, that used a second service internally resolving to a promise as well. No way to resolve the external one, unless I added $rootScope.$digest() into my service code (not the test)...
I ended-up writing this quick shim for $q to use in my tests, but be careful, as it's just an example and not a complete $q implementation.
beforeEach(module(function($provide) {
$provide.value('$q', {
defer: function() {
var _resolve, _reject;
return {
promise: {
then: function (resolve, reject) {
_resolve = resolve;
_reject = reject;
}
},
resolve: function (data) {
window.setTimeout(_resolve, 0, data);
},
reject: function (data) {
window.setTimeout(_reject, 0, data);
}
};
}
});
}));
Hope it will be useful to someone, or if you have any feedback.
Thanks.

Categories