javascripttemplatesember.jsember-cliember-testing

Integration test a routes template in Ember.js


I have an ember-cli 2.4.2 application that contains a route myroute and a template myroute.hbs.

When I integration test components, I do something like this,

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('mycomponent', 'Integration | Component | mycomponent', {
    integration: true
});

test('the component', function(assert) {
    this.render(hbs`
        {{#mycomponent}}
            text
        {{/mycomponent}}
    `);

    assert.notEqual(this.$('.container').text().trim(), 'text');
});

When I use moduleFor('route:myroute'), the call this.render() throws this.render is not a function. As below, if I call route.render() it throws Error: Assertion Failed: Could not find "hbs{{myroute}}" template, view, or component.

The goal is to integration test a route's template. I'd like to use jQuery to ensure the template rendered correctly. I have some computed properties on the route that influence what's displayed.

I can't seem to find any good documentation on integration testing a routes template. Any ideas or pointers? Many thanks.

import Ember from 'ember';
import { moduleFor, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleFor('route:myroute', 'Integration | Route | myroute', {
    integration: true,
});

test('the route', function(assert) {
    const mockModel = {
        response: { field1: true, field2: false }
    };

    const route = this.subject({ model: mockModel });

    route.render(`hbs{{myroute}}`);

    // ...
});

Solution

  • I think the closest you can get to solve the problem is to use acceptance tests where you can use jQuery and also navigate to certain routes in your application. You also get async helpers there like andThen, visit. Please refer to Ember Guides on Acceptance Testing.