home
  • Blog
1.13
  • Getting Started
  • The Object Model
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Testing
    • Introduction
    • Acceptance Tests
    • Test Helpers
    • Testing User Interaction
    • Unit Testing Basics
    • Unit Test Helpers
    • Testing Components
    • Testing Controllers
    • Testing Routes
    • Testing Models
  • Ember Inspector
  • Configuring Ember.js
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.13.0.
Go to v5.0.0

Testing User Interaction

Edit pencil

Almost every test has a pattern of visiting a route, interacting with the page (using the helpers), and checking for expected changes in the DOM.

Example:

tests/acceptance/root-lists-first-page-of-posts-test.js
test('root lists first page of posts', function(assert){
  visit('/posts');
  andThen(function() {
    assert.equal(find('ul.posts li').length, 3, 'The first page should have 3 posts');
  });
});

The helpers that perform actions use a global promise object and automatically chain onto that promise object if it exists. This allows you to write your tests without worrying about async behaviour your helper might trigger.

tests/acceptance/new-post-appears-first-test.js
var application;
module('Acceptance: New Post Appears First', {
  beforeEach: function() {
    application = startApp();
  },
  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('add new post', function(assert) {
  visit('/posts/new');
  fillIn('input.title', 'My new post');
  click('button.submit');

  andThen(function() {
    assert.equal(find('ul.posts li:first').text(), 'My new post');
  });
});

Testing Transitions

Suppose we have an application which requires authentication. When a visitor visits a certain URL as an unauthenticated user, we expect them to be transitioned to a login page.

app/routes/profile.js
export default Ember.Route.extend({
  beforeModel: function() {
    var user = this.modelFor('application');
    if (Ember.isEmpty(user)) {
      this.transitionTo('login');
    }
  }
});

We could use the route helpers to ensure that the user would be redirected to the login page when the restricted URL is visited.

tests/acceptance/transitions-test.js
var application;

module('Acceptance: Transitions', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('visiting /profile', function(assert) {
  visit('/profile');

  andThen(function() {
    assert.equal(currentRouteName(), 'login');
    assert.equal(currentPath(), 'login');
    assert.equal(currentURL(), '/login');
  });
});
left arrow
Test Helpers
Unit Testing Basics
right arrow
On this page

  • Testing Transitions
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue