I have an Ember.js app backed by a RESTful API. Session control is done through an authentication token: once a user logs in, he appends his authentication token to each request he makes to the server. I do this by adding the authentication to the data in $.ajaxSetup.
$.ajaxSetup({
data: { auth_token: this.get('authToken') }
});
Now, this works fine for GET requests. However, when saving models to the server through a POST or PUT request, the Ember Data RESTAdapter stringifies the data object. In DS.RESTAdapter.ajax it does
....
if (hash.data && type !== 'GET') {
hash.contentType = 'application/json; charset=utf-8';
hash.data = JSON.stringify(hash.data);
}
...
Because of this, the authentication token is not merged into the data. In this jQuery ticket they say that it's something they are never going to support.
What's the most elegant way of solving this? I'd rather not override the Ember's RESTAdapter.ajax function because the code is changing so quickly so my overridden function might not be compatible with the rest of the codebase at the next release.
In the end, I couldn't find another solution besides overriding RESTAdapter.ajax. I ended up adding three parameters: auth[token], auth[school] and auth[name].
DS.RESTAdapter.reopen({
/* Override to add the authToken, school and name */
ajax: function(url, type, hash) {
var adapter = this;
return new Ember.RSVP.Promise(function(resolve, reject) {
hash = hash || {};
hash.url = url;
hash.type = type;
hash.dataType = 'json';
hash.context = adapter;
if (hash.data && type !== 'GET') {
hash.contentType = 'application/json; charset=utf-8';
/* Add the data to the hash before it's stringified. */
if (HstryEd.Session.get('isLoggedIn')) {
hash.data.auth = {};
hash.data.auth.token = HstryEd.Session.get('authToken');
hash.data.auth.school = HstryEd.Session.get('currentUser').get('school');
hash.data.auth.name = HstryEd.Session.get('currentUser').get('name');
}
hash.data = JSON.stringify(hash.data);
}
if (adapter.headers !== undefined) {
var headers = adapter.headers;
hash.beforeSend = function (xhr) {
forEach.call(Ember.keys(headers), function(key) {
xhr.setRequestHeader(key, headers[key]);
});
};
}
hash.success = function(json) {
Ember.run(null, resolve, json);
};
hash.error = function(jqXHR, textStatus, errorThrown) {
if (jqXHR) {
jqXHR.then = null;
}
Ember.run(null, reject, jqXHR);
};
Ember.$.ajax(hash);
});
}
});
Related
I'm using the "express-validator" middleware package to validate some parameters for this exampleController endpoint. What would be the best way to stub out this controller for unit tests? I keep getting errors like:
TypeError: errors.isEmpty is not a function
router
var controller = require('./controllers/exampleController.js');
var express = require('express');
var router = express.Router();
router.get('/example', controller.exampleController);
exampleController.js
exports.doSomething = function(req, res, next) {
var schema = {
'email': {
in: 'query',
isEmail: {
errorMessage: 'Invalid Email'
}
},
'authorization': {
in: 'headers',
// custom test
isValidAuthToken: {
errorMessage: 'Missing or malformed Bearer token'
}
}
};
// Validate headers/query params
req.check(schema);
// Handle response
req.getValidationResult()
.then(function(errors) {
if (!errors.isEmpty()) {
return res.status(400).json({ error: 'Bad Request' });
} else {
var context = {
email: req.query.email,
};
return res.render('index', context);
}
})
};
test
var chai = require('chai');
var sinonChai = require('sinon-chai');
chai.Should();
chai.use(sinonChai);
global.sinon = require('sinon');
var sinonStubPromise = require('sinon-stub-promise');
sinonStubPromise(sinon);
var rewire = require('rewire');
var exampleController = rewire('../controllers/exampleController.js');
var errorsResponse = [{
param: 'email',
msg: 'Invalid Email',
value: undefined
}];
describe('exampleController', function() {
var req;
var res;
beforeEach(function() {
req = {
headers: {},
query: {},
check: sinon.spy(),
getValidationResult: sinon.stub().returnsPromise()
};
res = {
status: sinon.stub().returns({
json: json
}),
render: sinon.spy()
};
});
afterEach(function() {
req.query = {};
});
context('when missing email query param', function() {
beforeEach(function() {
req.getValidationResult.resolves(errorsResponse);
exampleController.doSomething(req, res);
});
it('should call status on the response object with a 400 status code', function() {
res.status.should.be.calledWith(400);
});
it('should call json on the status object with the error', function() {
json.should.be.calledWith({ error: 'Bad Request' });
});
});
});
});
The way you have structured the unit test for validating a controller is not really consistent. I will try to present you the issues and workarounds in detail, but before we move on have a look at this great article on unit testing Express controllers.
Ok, so regarding the initial error you presented TypeError: errors.isEmpty is not a function that was due to a malformed response object you had setup for stubbing the getValidationResult() method.
After printing out a sample response object from this method you will notice that the correct structure is this:
{ isEmpty: [Function: isEmpty],
array: [Function: allErrors],
mapped: [Function: mappedErrors],
useFirstErrorOnly: [Function: useFirstErrorOnly],
throw: [Function: throwError] }
instead of your version of the response:
var errorsResponse = [{
param: 'email',
msg: 'Invalid Email',
value: undefined
}];
isEmpty() is a top-level function and you should have used an array attribute for storing the errors list.
I'm attaching a revamped version of your controller and test scenario so that you can correlate it with the best practices presented in the aforementioned article.
controller.js
var express = require('express');
var router = express.Router();
router.get('/example', function(req, res) {
var schema = {
'email': {in: 'query',
isEmail: {
errorMessage: 'Invalid Email'
}
}
};
// Validate headers/query params
req.check(schema);
// Handle response
req.getValidationResult()
.then(function(errors) {
if (!errors.isEmpty()) {
return res.status(400).json({
error: 'Bad Request'
});
} else {
var context = {
email: req.query.email,
};
return res.render('index', context);
}
});
});
module.exports = router;
test.js
'use strict';
const chai = require('chai');
const sinon = require('sinon');
const SinonChai = require('sinon-chai');
var sinonStubPromise = require('sinon-stub-promise');
sinonStubPromise(sinon);
chai.use(SinonChai);
chai.should();
var mockHttp = require('node-mocks-http');
var controller = require('./controller.js');
describe.only('exampleController', function() {
context('when missing email query param', function() {
var req;
var res;
beforeEach(function() {
// mock the response object
// and attach an event emitter
// in order to be able to
// handle events
res = mockHttp.createResponse({
eventEmitter: require('events').EventEmitter
});
});
it('should call status on the response object with a 400 status code',
(done) => {
// Mocking req and res with node-mocks-http
req = mockHttp.createRequest({
method: 'GET',
url: '/example'
});
req.check = sinon.spy();
var errorsResponse = {
isEmpty: function() {
return false;
},
array: [{
param: 'email',
msg: 'Invalid Email',
value: undefined
}]
};
// stub the getValidationResult()
// method provided by the 'express-validator'
// module
req.getValidationResult = sinon.stub().resolves(errorsResponse);
// spy on the response status
sinon.spy(res, 'status');
sinon.spy(res, 'json');
// called when response
// has been completed
res.on('end', function() {
try {
// assert status and JSON args
res.status.should.have.been.calledWith(400);
res.json.should.have.been.calledWith({error: 'Bad Request'});
done();
} catch (e) {
done(e);
}
});
// Call the handler.
controller.handle(req, res);
});
});
});
A few points to notice in the updated version of the test.
Instead of manually constructing request / response objects, you should better use a library that's already there for this job. In my version I'm using 'node-mocks-http' which is pretty much a standard when it comes to Express.
When testing controllers, instead of manually calling the service method it's better to use the natural routing mechanism through the mocked HTTP request object. This way you can cover both happy & sad routing paths
Using a common HTTP req / res mocking library, means less work for you - all you need to do is extend the factory objects with non-standard functions (e.g. getValidationResult() from express-validator) and add your spies / stubs seamlessly
Finally, the library supports attaching event listeners on response events that otherwise you could not simulate manually. In this example, we're listening for the end event from the response object that is called after the return res.status(400).json({error: 'Bad Request'}); method has been called in your controller.
Hope I've cleared things up a bit :)
I'm using Ember-simple-auth and trying to return data from my custom authenticator back into the controller that did the authenticating.
in my authenticator/custom.js:
authenticate(identification, password) {
return new Ember.RSVP.Promise(function (resolve, reject) {
var loginURL = 'https://domain.com/login';
var authObj = Ember.Object.create({"identity":identification,"password":password});
var hash = authObj.getProperties('identity', 'password');
var stringHash = JSON.stringify(hash);
var xhr = new XMLHttpRequest();
xhr.open("post", loginURL);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Format', 'JSON');
xhr.send(stringHash);
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
console.log('response is: ',this.response); /// <-- returns good response data
resolve(this.response);
} else {
reject( 'failed with status: [' + this.status + ']');
}
}
}
and in my login controller:
authenticate() {
let { identification, password } = this.getProperties('identification', 'password');
var session = this.get('session');
session.authenticate('authenticator:custom', identification, password).then((reason) => {
console.log('failed login',reason);
});
}
},
But I'd really like to be able to handle the resolve function and get it's value payload from the authenticate promise.
If I change the .catch to a .then the response function is successfully called but always has an undefined value as its payload:
session.authenticate('authenticator:custom', identification, password).then(
(response) => {
console.log('response: ',response); //// <---- always 'undefined'
this.setUserWithData(response);
},
(reason) => {
this.set('Login failed: ',reason);
}
);
}
Even if I restructure the promise, rearrange how the function is called, the first function from an RSVP is successfully called, but has an undefined payload. The second function from an RSVP always has a correct payload.
I tried reversing the resolve/reject:
Ember.RSVP.Promise(function (resolve, reject){
to
Ember.RSVP.Promise(function (reject, resolve){
and the function successfully carries the response, but the simple-auth now believes it has failed its authorization.
I'd like to be able to pass the response payload into my controller. Or, if that can't be done, how can I inject data from the response into my session and ember-data store? It didn't seem like good practice to call and insert data into the store from within the authenticate function of the authenticator.
The session's authenticate method doesn't resolve with a value. Check the API docs: http://ember-simple-auth.com/api/classes/SessionService.html#method_authenticate
In order to deal with the response from the authentication route, I used the function sessionAuthenticated to deal with the returned data.
So, the authenticate function in authenticators/custom.js
authenticate(identification, password) {
return new Ember.RSVP.Promise(function (resolve, reject) {
var loginURL = 'https://domain.com/login';
var authObj = Ember.Object.create({"identity":identification,"password":password});
var hash = authObj.getProperties('identity', 'password');
var stringHash = JSON.stringify(hash);
var xhr = new XMLHttpRequest();
xhr.open("post", loginURL);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Format', 'JSON');
xhr.send(stringHash);
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
console.log('200 response: \r',this.response);
resolve(this.response);
} else {
console.log('failure response',this.response);
reject(this.response);
}
}
}
});
},
With the sessionAuthenticated() event taking place in routes/application.js:
sessionAuthenticated: function(){
var session = this.get('session');
var data = session.get('data');
var response = data.authenticated;
console.log('sessionAuthenticated()',response);
},
sessionInvalidated: function(){
console.log('sessionInvalidated()',response);
},
From the sessionAuthenticated function, the response variable contains all the information passed to it from authenticate(response) inside the authenticator.
I have a simple rsvp helper that lets me wrap an ajax call as a simple promise
var PromiseMixin = Ember.Object.create({
promise: function(url, type, hash) {
return new Ember.RSVP.Promise(function(resolve, reject) {
hash.success = function(json) {
return Ember.run(null, resolve, json);
};
hash.error = function(json) {
if (json && json.then) {
json.then = null;
}
return Ember.run(null, reject, json);
};
$.ajax(hash);
});
}
});
This works great and is then-able like you'd expect. The problem is when I have code that needs another promise that wraps this low level one first.
example
In my ember controller I might do this
Appointment.remove(this.store, appointment).then(function() {
router.transitionTo('appointments');
}, function() {
self.set('formErrors', 'The appointment could not be deleted');
});
In my Appointment model I'm doing this for the "remove"
remove: function(store, appointment) {
return this.xhr('/api/appointments/99/', 'DELETE').then(function() {
store.remove(appointment);
//but how I do return as a promise?
}, function() {
//and how can I return/bubble up the failure from the xhr I just sent over?
});
},
xhr: function(url, type, hash) {
hash = hash || {};
hash.url = url;
hash.type = type;
hash.dataType = "json";
return PromiseMixin.promise(url, type, hash);
}
Current my controller always falls into the "fail" state (even when my ajax method returns a 204 and is successful). How can I do a "chained promise" return from this remove method in my model to enable controllers to invoke it as a "thenable" like I have above?
Couldn't you do something like this?
remove: function(store, appointment) {
var self= this;
return new Ember.RSVP.Promise(function(resolve,reject) {
self.xhr('/api/appointments/99/', 'DELETE').then(function(arg) {
store.remove(appointment);
resolve(arg);
}, function(err) {
reject(err);
});
});
},
I'm trying to execute a promise inside Ember.RSVP.all
App.Foo = Ember.Object.create({
bar: function() {
var configuration = ajaxPromise("/api/configuration/", "GET");
Ember.RSVP.all([configuration]).then(function(response) {
//do something with the response in here
});
}
});
But because my integration test mocks the xhr w/out a run loop the test fails with the expected error "You have turned on testing mode, which disabled the run-loop' autorun"
So I wrapped the RSVP with a simple ember.run like so
App.Foo = Ember.Object.create({
bar: function() {
var configuration = ajaxPromise("/api/configuration/", "GET");
Ember.run(function() {
Ember.RSVP.all([configuration]).then(function(response) {
//do something with the response in here
});
});
}
});
But I still get the error for some odd reason. Note -if I run later it's fine (this won't work though as I need to exec the async code for this test to work correctly)
App.Foo = Ember.Object.create({
bar: function() {
var configuration = ajaxPromise("/api/configuration/", "GET");
Ember.run.later(function() {
Ember.RSVP.all([configuration]).then(function(response) {
//do something with the response in here
});
});
}
});
Here is my ajaxPromise implementation -fyi
var ajaxPromise = function(url, type, hash) {
return new Ember.RSVP.Promise(function(resolve, reject) {
hash = hash || {};
hash.url = url;
hash.type = type;
hash.dataType = 'json';
hash.success = function(json) {
Ember.run(null, resolve, json);
};
hash.error = function(json) {
Ember.run(null, reject, json);
};
$.ajax(hash);
});
}
How can I wrap the Ember.RVSP inside my ember run w/out it throwing this error?
Update
here is my test setup (including my helper)
document.write('<div id="ember-testing-container"><div id="wrap"></div></div>');
App.setupForTesting();
App.injectTestHelpers();
test("test this async stuff works", function() {
visit("/").then(function() {
equal(1, 1, "omg");
});
});
The only part I've left out is that I'm using jquery-mockjax so no run loop wraps the xhr mock (and in part that's why I like this library, it fails a test when I don't wrap async code with a run loop as the core team suggests)
This may have to do with how your tests are being run, so if you can provide the test, it will be helpful
I also noticed:
It turns out I believe you are also being (or will be soon) trolled by jQuery's jQXHR object being a malformed promise, the fulfills with itself for 0 reason, and enforcing its own nextTurn on you. Which is causing the autorun. This will only happen in the error scenario.
In ember data we sort this out, by stripping the then off the jQXHR object
see:
https://github.com/emberjs/data/blob/4bca3d7e86043c7c5c4a854052a99dc2b4089be7/packages/ember-data/lib/adapters/rest_adapter.js#L539-L541
I suspect the following will clear this up.
var ajaxPromise = function(url, type, hash) {
return new Ember.RSVP.Promise(function(resolve, reject) {
hash = hash || {};
hash.url = url;
hash.type = type;
hash.dataType = 'json';
hash.success = function(json) {
Ember.run(null, resolve, json);
};
hash.error = function(json) {
if (json && json.then) { json.then = null } // this line
Ember.run(null, reject, json);
};
$.ajax(hash);
});
}
This is rather unfortunate, and various separate concepts and ideas are coming together to cause you pain. We hope to (very shortly) land Ember.ajax which normalizes all these crazy away.
Also feel free to checkout how ember-data is going this: https://github.com/emberjs/data/blob/4bca3d7e86043c7c5c4a854052a99dc2b4089be7/packages/ember-data/lib/adapters/rest_adapter.js#L570-L586
I feel your pain on this Toran, I'm sure it's what Stefan's stated, we had to 1 off mockjax to get our tests to work with it.
https://github.com/kingpin2k/jquery-mockjax/commit/ccd8df8ed7f64672f35490752b95e527c09931b5
// jQuery < 1.4 doesn't have onreadystate change for xhr
if ($.isFunction(onReady)) {
if (mockHandler.isTimeout) {
this.status = -1;
}
Em.run(function () {
onReady.call(self, mockHandler.isTimeout ? 'timeout' : undefined);
});
} else if (mockHandler.isTimeout) {
// Fix for 1.3.2 timeout to keep success from firing.
this.status = -1;
}
Hello I am fairly new with ember and exploring it, I have been able to do a simple post to a resource, nevertheless it render my object like this
{"person":{"atribute1":"jjj","atribute2":"jjj"}}
Is there a way to remove the "login" like a custom serializer, my endpoint work by passing an object in the form of
{"atribute1":"jjj","atribute2":"jjj"}
Thanks.
The only solution I could find is override the createRecord, before I had
data[root] = this.serialize(record, { includeId: true });
I removed the index of root and got this instead:
App.Store = DS.Store.extend({
revision: 11,
adapter : 'App.CustomAdapter'
});
App.CustomAdapter = DS.RESTAdapter.extend({
createRecord: function(store, type, record) {
var root = this.rootForType(type);
var data = {};
data = this.serialize(record, { includeId: true });
this.ajax(this.buildURL(root), "POST", {
data: data,
context: this,
success: function(json) {
Ember.run(this, function(){
if ( this.rootForType(type) == 'login' ) {
return;
}
this.didCreateRecord(store, type, record, json);
});
},
error: function(xhr) {
//HERE to handle login operation failed
this.didError(store, type, record, xhr);
}
});
}
});
Maybe a attribute like withRoot or something similar might be required.