home
  • Blog
3.10
  • Getting Started
  • Tutorial
  • The Object Model
  • Templating
  • Components
  • Controllers
  • Routing
  • Ember Data
  • Addons and Dependencies
  • Testing
    • Introduction
    • Application Tests
    • Testing Basics
    • Testing Components
    • Testing Helpers
    • Testing Controllers
    • Testing Routes
    • Testing Models
  • Configuration
  • Application Concerns
  • Ember Inspector
  • Contributing to Ember.js
  • Glossary
  • Reference
Old Guides - You are viewing the guides for Ember v3.10.0.
Go to v5.0.0

Testing Controllers

Edit pencil

Container testing methods and computed properties follow previous patterns shown in Testing Basics because Ember.Controller extends Ember.Object.

Controllers can be tested using the setupTest helper which is part of the ember-qunit framework. The tests written for instances like Ember.Controller are also described as container tests.

Testing Controller Actions

Here we have a controller PostsController with two properties, a method that sets one of those properties, and an action named setProps.

You can follow along by generating your own controller with ember generate controller posts.

app/controllers/posts.js
import Controller from '@ember/controller';

export default Controller.extend({
  propA: 'You need to write tests',
  propB: 'And write one for me too',

  setPropB(str) {
    this.set('propB', str);
  },

  actions: {
    setProps(str) {
      this.set('propA', 'Testing is cool');
      this.setPropB(str);
    }
  }
});

The setProps action directly sets one property, and calls the method to set the other. In our generated test file, Ember CLI already uses the module and the setupTest helpers to set up a test container:

tests/unit/controllers/posts-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Controller | posts', function(hooks) {
  setupTest(hooks);
});

Next we use the owner API to gain access to the controller we'd like to test. Using the this.owner.lookup method we get the instance of the PostsController and can check the action in our test. The this.owner.lookup helper returns objects generated by the framework in your applications and is also exposed in tests for your usage. Here it will return a singleton instance of the PostsController.

tests/unit/controllers/posts-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Controller | posts', function(hooks) {
  setupTest(hooks);

  test('should update A and B on setProps action', function(assert) {
    assert.expect(4);

    // get the controller instance
    let controller = this.owner.lookup('controller:posts');

    // check the properties before the action is triggered
    assert.equal(controller.get('propA'), 'You need to write tests', 'propA initialized');
    assert.equal(controller.get('propB'), 'And write one for me too', 'propB initialized');

    // trigger the action on the controller by using the `send` method,
    // passing in any params that our action may be expecting
    controller.send('setProps', 'Testing Rocks!');

    // finally we assert that our values have been updated
    // by triggering our action.
    assert.equal(controller.get('propA'), 'Testing is cool', 'propA updated');
    assert.equal(controller.get('propB'), 'Testing Rocks!', 'propB updated');
  });
});
left arrow
Testing Helpers
Testing Routes
right arrow
On this page

  • Testing Controller Actions
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