Using Mocha Chai and Sinon, I have a test to get back a specific record from a revealing module pattern. The test fails with a timeout. How should I test a method to assign variables from a AJAX request?
Test.js
(function () {
'use strict';
describe('Employee Module', function() {
var server,
employeeJSON = {
"employeeTemplate" : [
{
"userId": 1
}
]
};
before(function () {
server = sinon.fakeServer.create();
server.respondWith(
"GET",
"/employees.json",
[200, { "Content-Type": "application/json" }, JSON.stringify(employeeJSON)]
);
});
after(function () {
server.restore();
});
it('should get Employee by ID', function(done) {
var employee = new Employee(),
employeeData;
employee.getData(1).done( function (data) {
employeeData = data.employeeTemplate[0];
assert.equal(employeeData.userId, 1, 'Employee ID equals 1');
done();
});
});
});
})();
Employee.js
var Employee = function() {
var EmployeeInfo = {};
var loadUserinfo = function(userid) {
return $.ajax({
type: 'GET',
data:{userid: userid},
url: '/employees.json',
dataType: 'json',
async: true,
success: function(data) {
return data;
}
});
};
var getData = function (userid) {
return loadUserinfo(userid).done();
};
return {
getData: getData
};
};
You need to tell FakeServer when to respond. See the FakeServer API docs for reference.
For example:
it('should get Employee by ID', function(done) {
var employee = new Employee(),
employeeData;
employee.getData(1).done( function (data) {
employeeData = data.employeeTemplate[0];
assert.equal(employeeData.userId, 1, 'Employee ID equals 1');
done();
});
server.respond(); // Please respond mr. sinon so my test may continue
});
Related
I have a list of 15+ ajax requests that need to be called in a specific order. I need each ajax call to wait until the previous function finishes before making the next call. This issue arises because my ajax call, has a direct callback that is also an ajax call.
createCheckIn() {
this.selectedList = [...] // long list of objects
count = 0
for ( i=0; i < this.selectedList.length; i++ ) {
$.ajax({
method: "POST",
url: url,
data: {
check_in: {
client_id: this.selectClient.id,
program_id: this.program_id
}
},
success: function(res) {
that.createWeighIn(count, res.id)
count = count + 1
},
error: function(err) {
console.log(err)
}
})
}
},
createWeighIn(index, check_in_id) {
let data = {}
let that = this
data.weigh_in = this.selectedList[index]
$.ajax({
method: "POST",
url: url,
data: data,
success: function(res) {
console.log(res)
},
error: function(err) {
console.log(err)
}
})
}
the correct data is generated but I believe the ordering is off because eventually there is a call to createCheckIn() that begins before the previous entry has completed.
Is there a way to chain these functions such that createCheckIn() and createWeighIn() are called (and complete) before selectedList iterates.
your for loop in createCheckIn() will not stop to wait on your ajax return. you can do something like:
function createCheckIn(oldI, oldCount){
var count = 0;
var currentI = 0;
if(oldCount != null){
count = oldCount;
}
if(oldI != null){
currentI = oldI;
}
if(currentI < this.selectedList.length){
$.ajax({
method: "POST",
url: url,
data: {
check_in: {
client_id: this.selectClient.id,
program_id: this.program_id
}
},
success: function(res) {
that.createWeighIn(count, res.id)
createCheckIn(currentI + 1, count + 1);
},
error: function(err) {
console.log(err)
}
}); //ajax
} // if
}
seems likely that you can eliminate one of those counters too, the i or the count
Seems like this is missing some potentially really important details about what you need to do leading up to this (ie. this.selectedItems generation) and what happens after (what if one call checkin fails, what if a checkin succeeds but its corresponding weighIn fails, etc..). That said...
It seems you are not actually using the counter for anything other than to reference data you already have, so why not just pass that in directly like:
createWeighIn(weighInData, check_in_id) {
let data = {};
let that = this;
data.weigh_in = weighInData;
// ... your other code
}
I would make createCheckIn only handle doing the ajax request and making a single "reservation" in your system. Then i would make a new method called checkIn that uses the two previous method to process all of selected items:
checkIn() {
let self = this;
let promises = [];
let this.selectedList = [...];
for (let = 0; i < this.selectedList.length; i++) {
// always create the deferred outside the call
let def = $.Deferred();
promises.push(def.promise());
this.createCheckIn().done(function (res) {
self.createWeighIn(self.selectedList[i], res.id))
.done(function () {
// resolve
def.resolve.apply(def, Array.prototype.slice.call(arguments);
})
.fail(function () {
def.reject.apply(def, Array.prototype.slice.call(arguments);
});
}).fail(function () {
// if checkin fails, always reject because we know weighIn wont be called
def.reject.apply(def, Array.prototype.slice.call(arguments);
});
};
// this will resolve/fail when all promises (from createWeighIn) resolve/fail
return $.when.apply(null, promises);
}
so putting it all together:
{
createCheckIn() {
let request = $.ajax({
method: "POST",
url: url,
data: {
check_in: {
client_id: this.selectClient.id,
program_id: this.program_id
}
}
})
.fail(function(err) {
console.log(err)
});
};
return request;
},
createWeighIn(data, check_in_id) {
let params = {};
params.weigh_in = data;
let request = $.ajax({
method: "POST",
url: url,
data: params,
success: function(res) {
console.log(res)
},
error: function(err) {
console.log(err)
}
});
return request;
},
checkIn() {
let self = this;
let promises = [];
let this.selectedList = [...];
for (let = 0; i < this.selectedList.length; i++) {
// always create the deferred outside the call
let def = $.Deferred();
promises.push(def.promise());
this.createCheckIn().done(function (res) {
self.createWeighIn(self.selectedList[i], res.id))
.done(function () {
// resolve
def.resolve.apply(def, Array.prototype.slice.call(arguments);
})
.fail(function () {
def.reject.apply(def, Array.prototype.slice.call(arguments);
});
}).fail(function () {
// if checkin fails, always reject because we know weighIn wont be called
def.reject.apply(def, Array.prototype.slice.call(arguments);
});
};
// this will resolve/fail when all promises (from createWeighIn) resolve/fail
return $.when.apply(null, promises);
}
}
I ended up introducing promises, and some recursion and removing the loop altogether. I basically begin the process by calling createCheckIn() with an index of 0:
this.createCheckIn(0)
createCheckIn(index) {
this.selectedList = [...] // long list of objects
count = 0
let prom = new Promise(function(resolve, reject) {
$.ajax({
method: "POST",
url: url,
data: {
check_in: {
client_id: that.selectClient.id,
program_id: that.program_id
}
},
success: function(res) {
resolve(that.createWeighIn(index, res.id))
},
error: function(err) {
reject(console.log(err))
}
})
})
},
createWeighIn(index, check_in_id) {
let data = {}
let that = this
data.weigh_in = this.selectedList[index]
let prom = new Promise(function(resolve, reject) {
$.ajax({
method: "POST",
url: url,
data: data,
success: function(res) {
console.log(res)
if ( index == (that.selectedList.length - 1) ) {
that.complete = true
resolve(console.log("complete"))
} else {
index++
resolve(that.createCheckIn(index))
}
},
error: function(err) {
console.log(err)
}
})
})
}
I need to get the count of consumer_id, if the count is equal to 1 proceed with the further testing else logout from that count.
How to achieve this?
describe('Test Payment Page', function () {
var paymentPage = new PaymentPage();
var loginPage = new LoginPage();
testData.forEach(function (data) {
it('should have a title', function () {
loginPage.getPage();
browser.waitForAngularEnabled(true);
loginPage.enterUsername(data.username);
loginPage.enterPassword(data.loginpwd);
loginPage.clickLoginButton();
paymentPage.clickPaymentButton();
});
it('Should validate if the accounts are linked', function () {
request({
method: 'GET',
url: 'http://172.28.136.26:5005//documents/',
Querystring: {
consumer_id: 'consumer_id'
},
});
})
});
})
I am trying to send the http response as a JSON body to an error handler if an error occurs. I am not really sure how to do this as I am a little inexperienced in this area. Here is the relevant code that I have currently:
Controller:
for (var prop in $scope.applicants) {
var applicant = $scope.applicants[prop];
$scope.sendApplicantsToSR(applicant).then(null, $scope.sendATSError.bind(null, applicant));
}
$scope.sendATSError = function (applicant, error) {
return AtsintegrationsService.applicantErrorHandling(applicant.dataset.atsApplicantID);
};
$scope.sendApplicantsToSR = function(applicant) {
return AtsintegrationsService.sendApplicantsToSR(applicant);
};
Service:
srvc.sendApplicantsToSR = function (applicant) {
var applicantURL = {snip};
return $http({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'POST',
url: applicantURL,
data: applicant
});
};
srvc.applicantErrorHandling = function (applicantID, error) {
var url = srvc.url + {snip};
return $http({
method: 'POST',
url: url,
data: { "error_message": error }
});
};
So, ideally, I would like to pass the result of $scope.sendApplicantsToSR to $scope.sendATSError only when an error occurs.
Inside your controller
YourService.getdatafromservice().then(function(SDetails) {
//response from service
console.log(SDetails);
});
Inside your service
return {
getData: getData
};
function getData() {
var req = $http.post('get_school_data.php', {
id: 'id_value',
});
return req.then(handleSuccess, handleError);
function handleSuccess(response) {
response_data = response.data;
return response_data;
}
function handleError(response) {
console.log("Request Err: ");
}
}
I've got a call using Resource in angularjs but i get some problems because i can't abort every calls it does. This kind of structure i use for an autocomplete.. is it possible convert from resource call to http? This is the code
var Resource = $resource(URL, {},{ getAutocompleteResults: { method: "GET", params: {text: ""} }});
var locked = false;
function getMoreData() {
if(locked)
return;
locked = true;
Resource.autoCompleteResults()
.$promise.then(function(data) {
$scope.autocompleteViewResults = data;
locked = false;
});
}
This is what i've tried so far with no success.
$scope.autocompleteViewResults = function () {
$http
.get(URL, {
params: {
text = ""
}
})
.success(function (data) {
$scope.autocompleteViewResults = data;
});
};
Or if someone knows an alternative method..
The $scope.autocompleteViewResults variable is being assigned 2 times.
Try this:
$scope.autocompleteViewResults = {};
$scope.getResults = function(valueAsTyped) {
$http
.get(URL, {
params: {
text: valueAsTyped
}
})
.success(function (data) {
$scope.autocompleteViewResults = data;
});
};
Update
If you need to cancel old requests.
var promiseCanceller = $q.defer();
$scope.autocompleteViewResults = {};
$scope.getResults = function(valueAsTyped) {
promiseCanceller.resolve('request cancelled'); // cancel currently running request
$http
.get(URL, {
params: {
text: valueAsTyped
},
timeout: promiseCanceller.promise // pass promiseCanceller as the timeout
})
.success(function (data) {
$scope.autocompleteViewResults = data;
});
};
Is there simple way of mocking the hapi reply object/function for easy unit testing?
The examples I see for hapi all use server.inject and the "lab" framwork for testing. I'm curious to see how I could keep using mocha and would like to test controller directly rather than injecting into the server.
Should i use sinon to mock the reply object?
test/post.js
before(function () {
PostController = proxyquire('../controllers/post', { 'mongoose': mongooseMock });
});
it('should be able to create a post', function(done){
var request.payload = {foo:bar};
var reply = sinon.spy(); //is this how I should mock this?
PostController.create.handler(request, reply);
reply.should ...// how do I test for statuscode 201, Boom errors, and response msgs
});
controllers/post.js
var Boom = require('Boom')
Post = require('../models/Post')
module.exports = {
create: {
auth: 'token',
handler: function (request, reply) {
var p = new Post({foo:request.payload.foo});
p.save(function (err, results) {
if (!err && results)
reply(results).created();
else {
reply(Boom.badImplementation(err));
}
});
}
}
Finally, should I just switch over to lab instead?
You can use server.inject() with Mocha too. I would just stub Post.save():
Sinon.stub(Post, 'save', function (callback) {
callback(null, { foo: 'bar' });
});
With some more code:
it('creates a post', function (done) {
Sinon.stub(Post, 'save', function (callback) {
callback(null, { foo: 'bar' });
});
server.inject({ method: 'POST', url: '/posts', payload: { foo: 'bar' } }, function (res) {
Post.save.restore();
expect(res.statusCode).to.equal(201);
done();
});
});
If you want to test for the error, you just need to modify the stub:
it('returns an error when save fails', function (done) {
Sinon.stub(Post, 'save', function (callback) {
callback(new Error('test'), null);
});
server.inject({ method: 'POST', url: '/posts', payload: { foo: 'bar' } }, function (res) {
Post.save.restore();
expect(res.statusCode).to.equal(500);
done();
});
});