Ember Test for parent route with method calls

1
votes

I was brought in on the "back-end" of a project and asked to help write tests for an app. I am very new to Ember and need just a little help getting started. We are trying to provide unit test for the routes, so we can have a bit more molecular scope over the app, instead of acceptance test. I have looked at some tutorials and went through every possible scenario that I could think of. I just need a bit of jumpstart.

Here is the part of the route.js for this route.

  • down stream of this parent route, we have another nested route that shows a list of contacts and when a user clicks on a show button it calls "model" and returns that variable "rec" for the template and the url


export default Route.extend(ScrollTo, {
  flashMessages: service(),

  model: function(params) {
    let rec= this.store.peekRecord('contact', params.contact_id);
    return rec;
  },

  actions: {
    saveContact: function() {
      let model = this.currentRouteModel();
      model
        .save()
        .then(() => {
          //this.refresh();
          //this.setModelHash();
          this.flashMessages
            .success(`Saved Contact: ${model.get('title')}`);

          //this.transitionTo('contacts');
        });
    }

Here is pre-generated code for the test. I really haven't made any modifications, because I really didn't know where to start.

  • This app doesn't have a back-end, it's design is to take in information and provide a iso file based on whatever standard the user wants.
  • I am sure I need to provide some mock data for the test and send that to the method, but again I am not sure what Qunit parts I use.
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Route | contact/show', function(hooks) {
  setupTest(hooks)

  test('it exists', function(assert) {
    var route = this.owner.lookup('route:contact/show');
    assert.ok(route, 'contact.show route works');
  });
});
1
unit-testingtestingember.jsember-qunit
Please be aware that actions on the route is considered an anti-pattern. Please have a look into the discussion on route actions RFC for details. – jelhan
Yea definitely agree, I wasn't in the initial stages of the app being built. And Unfortunately it was built by a two man team that adopted this philosophy of actions in routes and they stuck with it. I am trying to find the best solution for the test. Whether that is at the "application" level or the "container" level. – Devon Anderson

1 Answers

3
votes

I struggled with this as well when I first moved to frontend testing. With a few years experience I'm confident in saying you shouldn't unit test the route objects in this way. Instead the testing of an ember app should focus on two types of tests.

  1. What ember calls integration tests (but are actually closer to UI unit tests)
  2. Acceptance tests

Integration tests on components allow you to get into the smaller details and edge cases and they can be super valuable.

What I think you want in this case is actually an acceptance test.

If your testing experience is at all like mine it will feel like you're testing too many things at first, but these types of tests where the browser actually loads the entire application have the most value in hunting down bugs and are the most maintainable over time.