集成测试Ember.js中的路由模板

Question

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}}`);

    // ...
});

Answer 1

If you need to test template of a route, use acceptance tests .

If you need to test methods and computed properties of a route, use unit tests .

Answer 2

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 .