Ember initializer async property undefined in integration test - ember.js

I'm trying to test my registration and login processes, the integration tests were passing perfectly prior to creating an initializer to extend the Ember-Simple-Auth Session object with the currentUser property.
It all works correctly in the browser, its just the tests now fail all in the sessionAuthenticationSucceeded action in the application route on the following line:
this.get('session.currentUser').then(function(user) {
with : TypeError: Cannot read property 'then' of undefined
/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin, {
actions: {
sessionAuthenticationSucceeded: function () {
var self = this;
this.get('session.currentUser').then(function(user) {
if (user.get('account') && user.get('status') === 'complete'){
self.transtionTo('home');
} else {
console.log('Need to complete Registration');
self.transitionTo('me');
}
});
}
}
}
/initializers/custom-session.js
import Ember from 'ember';
import Session from 'simple-auth/session';
export default {
name: 'custom-session',
before: 'simple-auth',
initialize: function(container) {
// application.deferReadiness();
Session.reopen({
currentUser: function() {
var id = this.get('user_id');
if (!Ember.isEmpty(id)) {
console.log('getting the current user');
return container.lookup('store:main').find('user', id);
}
}.property('user_id')
});
// application.advanceReadiness();
}
};
/tests/integration/visitor-signs-up-test.js
test('As a user with valid email and password', function(){
var email = faker.internet.email();
signUpUser(email, 'correctpassword', 'correctpassword');
andThen(function(){
equal(find('#logged-in-user').text(), email, 'User registered successfully as ' + email);
equal(sessionIsAuthenticated(App), true, 'The session is Authenticated');
});
});
test/helpers/registration-login.js
export function signUpUser(email, password, passwordConfirmation) {
visit('/register').then(function(){
fillIn('input.email', email);
fillIn('input.password', password);
fillIn('input.password-confirmation', passwordConfirmation);
click('button.submit');
});
}
I have tried using
application.deferReadiness()
as you can see commented out in the initializer (also pass in application in that instance) to ensure the async request has completed and user is available but that hasn't worked either.
I am using Pretender to intercept the api requests, but the call to api/v1/users/:id isn't being made at all during the tests.
The strange part is it works perfectly in the browser.
I'm trying to understand why this won't this work? Any guidance would be appreciated!
NB: I have also tried solution listed here and here with same outcome as above.

I have figured out the problem, turns out I wasn't returning a user_id from the api/v1/users/sign_in request Pretender was intercepting hence when sessionAuthenticationSucceeded fired, there was no user_id available and thus currentUser was never being updated/triggered.
I'll leave all the code up there in case it helps somebody else. Comments or improvements to it are still very welcome!

Related

Cli mirage routes not working in acceptace test

I was trying acceptance test for login page, using cli mirage as mock server. Routes defined in a mirage works fine, when accessing it from application. But when trying it in ember test it returns
Mirage: Your Ember app tried to POST 'http://localhost:4200/tests?module=Acceptance | login', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?
Acceptance Test
test('visiting /login', function(assert) {
server.create('login', { username: 'xxx#test.com', password: 'password' });
visit('/login');
fillIn('input[placeholder="Email"]', 'xxx#test.com');
fillIn('input[placeholder="Password"]', 'password');
click('button.btn-primary');
andThen(function() {
assert.equal(currentURL(), '/route');
});
});
Mirage/config
import Mirage from 'ember-cli-mirage';
export default function() {
this.post('/token', function(db, request) {
var params = formEncodedToJson(request.requestBody);
if(params.username === "xxx#test.com && params.password === "password") {
return {
"auth":"Pass$Word",
"token_type":"bearer"
};
} else{
var body = { errors: 'Email or password is invalid' };
return new Mirage.Response(401, {}, body);
}
});
How to rectify this issue? someone help me please.
Issue is in environment configuration. After defined configurations for test worked fine.
for me, I have explicitly add host etc because without it, it resolves to a different port from my mirage config.js

Get model of route after visiting it in acceptance test

I'm trying to write an acceptance test to see if a certain property in the model for the route I visit equals what I am asserting.
I am not outputting information to the page with this route, instead I will be saving some portion of it to localstorage using an ember addon. So normally I realize I could use a find() to find an element on the page and check it's content to determine if the model is being resolved but that won't work for this case.
In the acceptance test I have this setup (using mirage btw)
test('Returns a user', function(assert) {
// Generate a user
var user = server.create('user',{first_name: 'Jordan'});
// Visit the index page with the users short_url
visit('/' + user.short_url);
var route = this.application.__container__.lookup('route:index');
// Assert that the model the user we created by checking the first name we passed in
assert.equal(route.model.first_name,'Jordan','Model returns user with first name Jordan');
});
But when I run the test it shows the result as being undefined
UPDATE:
After trying Daniel Kmak's answer I still cannot get it to pass. This is the route code I am working with
import Ember from 'ember';
import LocalUser from 'bidr/models/user-local';
export default Ember.Route.extend({
localUser: LocalUser.create(),
navigationService: Ember.inject.service('navigation'),
activate() {
this.get('navigationService').set('navigationMenuItems', []);
},
beforeModel() {
this.localUser.clear();
},
model(params) {
var self = this;
return this.store.queryRecord('user',{short_url: params.short_url}).then(function(result){
if(result){
self.set('localUser.user', {
"id": result.get('id'),
"first_name": result.get('first_name'),
"active_auction": result.get('active_auction'),
"phone": result.get('phone')
});
// transition to event page
self.transitionTo('items');
} else {
self.transitionTo('home');
}
});
}
});
And the test looks like this
import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'bidr/tests/helpers/start-app';
module('Acceptance | index route', {
beforeEach: function() {
this.application = startApp();
},
afterEach: function() {
Ember.run(this.application, 'destroy');
}
});
test('Returns a user', function(assert) {
var user = server.create('user',{first_name: 'Jordan'});
visit('/' + user.short_url);
var route = this.application.__container__.lookup('route:index');
andThen(function() {
assert.equal(route.get('currentModel.first_name'),'Jordan','Model returns user with first name Jordan');
});
});
All the code works as it should in development.
Ok, so I've experimented with testing in Ember and it seems you should be good with getting model in andThen hook:
test('returns a user', function(assert) {
visit('/'); // visit your route
var route = this.application.__container__.lookup('route:index'); // find your route where you have model function defined
andThen(function() {
console.log(route.get('currentModel')); // your model value is correct here
assert.equal(currentURL(), '/'); // make sure you've transitioned to correct route
});
});
Taking your code it should run just fine:
test('Returns a user', function(assert) {
var user = server.create('user',{first_name: 'Jordan'});
visit('/' + user.short_url);
var route = this.application.__container__.lookup('route:index');
andThen(function() {
assert.equal(route.get('currentModel.first_name'),'Jordan','Model returns user with first name Jordan');
});
});
Another thing to note is that you can access model via route.currentModel property.
For my model:
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
simple: 'simpleValue',
promise: Ember.RSVP.resolve(5)
});
}
});
In andThen with console.log(route.get('currentModel')); I got:
Object {simple: "simpleValue", promise: 5}
Logged.

Saving a user to a session as a computed property

I've seen other questions about this (like this one), and I believe this should be working
import Ember from 'ember';
import Session from 'simple-auth/session';
export default {
name: 'session-with-me',
before: 'simple-auth',
initialize: function() {
Session.reopen({
me: function() {
if (this.get('isAuthenticated')) {
return this.container.lookup('service:store').find('me', { singleton: true });
}
}.property('isAuthenticated')
});
}
};
the find('me', { singleton: true }) is a working patch of ember-jsonapi-resources. While debugging I can see the request being sent, and the payload comes through. I use the same find call elsewhere in the app, and can confirm a model gets instantiated fine.
On the inspector, under container > simple-auth-session I can see me as a session property, but it shows as { _id: 68, _label: undefined ...}
Has the way to set a session property changed? I may have seen a mention about this somewhere, but I can't find it anymore.
This is in the same domain of another question I asked earlier, but I'm giving up on that approach and trying simply to fetch the user independently of the authentication process.
Set up a custom session like that:
export default Session.extend({
me: function() {
var accessToken = this.get('secure.access_token');
if (!Ember.isEmpty(accessToken)) {
return DS.PromiseObject.create({
promise: this.container.lookup('service:me').find({});
});
}
}.property('secure.access_token')
});
// app/config/environment.js
ENV['simple-auth'] = {
session: 'session:me'
}
DS.PromiseObject is actually part of Ember Data which you're not using - I don't know whether there's an equivalent in the library you chose.
This is most likely an issue with ember-jsonapi-resources, not with Ember Simple Auth.
Instead of reopening the session though you should define your own one that extends the default one that Ember Simple Auth provides - see e.g. this answer: How to store the user in a session
We ended up making it work like this:
// app/sessions/me.js
export default Session.extend({
me: function() {
var accessToken = this.get('secure.access_token');
if (!Ember.isEmpty(accessToken)) {
let self = this;
return this.container.lookup('service:me').find({}).then((me) => {
self.set('me', me);
});
}
}.property('secure.access_token')
});
// app/config/environment.js
ENV['simple-auth'] = {
session: 'session:me'
}
Partly this was due to the way resource services are initialized in EJR (so #marcoow's hunch on this was correct), the other part was just bad coding on my part.
Interestingly we didn't have to explicitly register the session in the container

Ember Simple Auth - injecting current user into every route

I am building a site using Ember Simple Auth.
I followed these instructions to try and add the current user object to the session and it worked, using this slightly adapted code:
import Ember from 'ember';
import Session from 'simple-auth/session';
export default {
name: "current-user",
before: "simple-auth",
initialize: function(container) {
Session.reopen({
setCurrentUser: function() {
var accessToken = this.get('secure.token');
var _this = this;
if (!Ember.isEmpty(accessToken)) {
return container.lookup('store:main').find('user', 'me').then(function(user) {
_this.set('content.currentUser', user);
});
}
}.observes('secure.token'),
setAccount: function() {
var _this = this;
return container.lookup('store:main').find('account', this.get('content.currentUser.account.content.id')).then(function(account) {
_this.set('content.account', account);
});
}.observes('content.currentUser'),
});
}
};
However, using the latest version of Ember I'm getting the following:
DEPRECATION: lookup was called on a Registry. The initializer API no longer receives a container, and you should use an instanceInitializer to look up objects from the container. See http://emberjs.com/guides/deprecations#toc_deprecate-access-to-instances-in-initializers for more details.
I know that I need to split the above into /app/initializers and /app/instance-initializers (as per the notes here) but I'm not quite sure how to go about it.
Of course, if there is an easier/cleaner way to make the user and account objects available to every route/template I'd love to hear them :)
Thanks
This works for me on:
ember-cli: 0.2.7 (ember: 1.12.0, ember-data: 1.0.0-beta.18)
ember-cli-simple-auth: 0.8.0-beta.3
Note:
ember-data: 1.13. Store is registered in an initializer, should work as is
ember-data: 1.0.0-beta.19. Store is registered in an instance-initializer, some adjustments needed
1) Customize session
//config/environment.js
ENV['simple-auth'] = {
session: 'session:custom',
...
}
//app/sessions/custom.js
import Session from 'simple-auth/session';
export default Session.extend({
// here _store is ember-data store injected by initializer
// why "_store"? because "store" is already used by simple-auth as localStorage
// why initializer? I tried
// _store: Ember.inject.service('store') and got error
currentUser: function() {
var userId = this.get('secure.userId');
if (userId && this.get('isAuthenticated')) {
return this._store.find('user', userId);
}
}.property('secure.userId', 'isAuthenticated')
});
2) Inject store to session by initializer (otherwise find() wouldn't work)
//app/initializers/session-store
export function initialize(container, application) {
application.inject('session:custom', '_store', 'store:main')
// "store:main" is highly dynamic depepeding on ember-data version
// in 1.0.0-beta.19 (June 5, 2015) => "store:application"
// in 1.13 (June 16, 2015) => "service:store"
}
export default {
name: 'session-store',
after: 'ember-data',
initialize: initialize
}
3) In template
{{#if session.isAuthenticated}}
{{session.currentUser.name}}
{{/if}}
Note: this does not relieve you from deprecations generated by ember-simple-auth itself.
First of all you shouldn't reopen the session but use a custom session instead (see this example: https://github.com/simplabs/ember-simple-auth/blob/master/examples/4-authenticated-account.html#L132). Also you you shouldn't only load the current user when the access token is set but when the session is authenticated ('session.get('isAuthenticated')') which makes your code not dependent on the authenticator.
The deprecation warnings regarding the use of the registry in the initializer will go away in ESA 0.9.0 hopefully.
Here's a before and after of an initializer/instance-initializer that I did the other day.
Before
export function initialize( container, application ) {
var session = Ember.Object.create({
user:null,
authorization:null
});
application.register('session:main', session, { instantiate: false });
application.inject('route', 'session', 'session:main');
application.inject('controller', 'session', 'session:main');
application.inject('adapter', 'session', 'session:main');
}
After
export function initialize( instance) {
var session = Ember.Object.create({
user:null,
authorization:null
});
instance.registry.register('session:main', session, { instantiate: false });
instance.registry.injection('route', 'session', 'session:main');
instance.registry.injection('controller', 'session', 'session:main');
instance.registry.injection('adapter', 'session', 'session:main');
}
Ember Data Stuff
Ember Data in the latest iterations should be fetched using store:application
export function initialize(instance) {
var store = instance.container.lookup('store:application');
....
}
export default {
name: 'socket',
initialize: initialize,
after:['ember-data']
};

Integration Testing Sessions with Ember CLI

I'm simply trying to write some tests to make sure logging in and out works, including everything that goes with it. Here's what I'm doing so far:
tests/integration/sessions-test.js
import Ember from "ember";
import { test } from 'ember-qunit';
import startApp from '../helpers/start-app';
var App;
module('Integrations: Sessions', {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, App.destroy);
}
});
test('Unsuccessful Sign In', function() {
expect(3);
visit('/sign-in');
andThen(function() {
fillIn('input#email', 'test#user.com');
fillIn('input#password', 'bad_password');
click('input#submit');
andThen(function() {
equal(currentRouteName(), 'sign-in', 'Unsuccessfull sign in stays on the sign in page.');
ok($('input#email, input#password').hasClass('error'), 'Inputs have a class of "error."');
equal($('input#submit').prop('disabled'), false, 'Submit button is not disabled.');
});
});
});
test('Successful Sign In', function() {
expect(2);
visit('/sign-in');
andThen(function() {
fillIn('input#email', 'test#user.com');
fillIn('input#password', 'password');
click('input#submit');
andThen(function() {
equal(currentRouteName(), 'welcome', 'Successfull sign in redirects to welcome route.');
ok(find('.message').length, "Page contains a list of messages.");
});
});
});
And, here's a trimmed down version of the sign in logic behind the scenes:
app/controllers/sign-in.js
import Ember from 'ember';
export default Ember.Controller.extend({
needs: ['application'],
actions: {
signIn: function() {
var self = this;
var data = this.getProperties('email', 'password');
// Attempt to sign in and handle the response.
var promise = Ember.$.post('/v3/sessions', data);
promise.done(function(response) {
Ember.run(function() {
self.get('controllers.application').set('token', response.access_token);
self.transitionToRoute('welcome');
});
});
...
}
}
});
The "Unsuccessful Sign In" test works just fine. The "Successful Sign In" starts to work, then quits halfway through. It signs in, then redirects correctly. On the welcome page, when it makes a call to get the messages, the node server is responding with Error: Not enough or too many segments and a 500 status. What in the world does that mean and how can I fix it, assuming I don't have any control over the API?
Also, the API is written primarily using Koa and Passport, as far as I know.
Figured it out. Apparently, it was an authentication error, not that you'd ever be able to guess that by the error message.
In the sign in controller, there's a line where I was setting the token property of the application controller. The application controller had an observer to watch that property for changes, then setup the AJAX headers when it changed. Problem is, observes use Ember's run loop, which is disabled while testing.
To fix the issue, I set the AJAX headers there in the sign in controller, just before transitioning to the welcome route.