Creating an Integration test in Ember.js (Screencast)


#1

Once upon a time it used to be difficult to create integration tests in Ember.js. Fortunately, the framework has come a long way and it’s now really easy to get integration testing working in your application. This screencast shows how to set it up with ember-cli:

There is some boilerplate code required that you’ll need at the top of your integration test files if you want to do it yourself. Here it is:

import startApp from 'vault/tests/helpers/start-app';
var App;

module('Integration - Secret', {
  setup: function() {
    App = startApp();
  },
  teardown: function() {
    Ember.run(App, 'destroy');
  }
});

This is a companion discussion topic for the original entry at http://eviltrout.com/2014/06/27/integration-testing.html

#2

Thanks for your cool casts!

However, i have a few problems to tests components with that technique. Whenever I use module(), it always works in the browser, but not with ember-cli (it fails to render the dom at all and all find() calls return empty).

When I switch to moduleForComponent() it stops working in both, browser and cli with the error message “Assertion Failed: You cannot use the same root element (#ember-testing) multiple times in an Ember.Application”

I understand that i can’t reuse App, but I am deleting them, as stated in the docs.

Do you know by accident what may cause this?

import Ember from "ember";
import { test, moduleForComponent } from 'ember-qunit';
import startApp from '../../helpers/start-app';
var App;
 
// if i change the next line to this, it works in localhost:4200/tests, but not on cli:
// module('navigation-sidebar', {
moduleForComponent('navigation-sidebar', 'NavigationSidebarComponent', {
    setup: function(){
        App = startApp();
    },
 
    teardown: function(){
        Ember.run(App, 'destroy');
    }
});
 
test('it opens sub menus on click', function() {
    expect(3);
    this.append();
    visit('/documents').then(function () {
        ok(find('.parent ul').length, 'Page has submenu.');
        equal(find('.parent ul').is(':visible'), false);
        click('.parent a');
    });
 
    andThen(function() {
        equal(find('.parent ul').is(':visible'), true);
    });
});

#3

For what it’s worse, this has been fixed here: https://github.com/rwjblue/ember-qunit/pull/85/files