CODEWITHSUNDEEP
ember.jsmodelacceptance-testing
Jordan
Jordan

Reputation: 2523

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.

Upvotes: 2

Views: 890

Answers (1)

Daniel
Daniel

Reputation: 18672

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.

Upvotes: 1

Related Questions