Skip to content

Latest commit

 

History

History
69 lines (49 loc) · 2.73 KB

06-first-acceptance-test.md

File metadata and controls

69 lines (49 loc) · 2.73 KB

Our First Acceptance Test

Good acceptance tests imitate using your app the way a user would. For browsers, this means your tests should be expressed in terms of a sequence of things like:

  • Visit a URL
  • Click on a button
  • Observe that something is/isn't on the screen
  • Fill in a text field
  • Press a keyboard key

If you find yourself wanting to do things that a user can't do -- that's a sign that you may be diverging from the territory of acceptance tests.

Ember provides fantastic support for these kinds of tests out of the box. New apps include support for QUnit by default (via the command ember-qunit), but you can swap it out for Mocha (via the command ember-mocha) in about a minute.

💡 Mike's Tip: Choosing a Test Framework

I prefer QUnit because it'll try to run through all of your tests even if something throws an exception. Mocha's tests pass/fail based on exceptions, so one bad failing assertion at the beginning of a test causes it to exit early, so subsequent assertions will never run at all!

To generate an acceptance test, run

ember g acceptance-test logout

You should see some feedback that a new test file was created tests/acceptance/logout-test.js

Replace the test code with this

import { module, test } from 'qunit';
import { visit, currentURL, click } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | logout', function (hooks) {
  setupApplicationTest(hooks);

  test('visiting /teams', async function (assert) {
    await visit('/teams'); // Go to a URL

    assert.equal(currentURL(), '/teams'); // Make sure we've arrived

    await click('.team-sidebar__logout-button'); // Click a button

    assert.equal(currentURL(), '/login'); // Make sure we're now at /login
  });
});

and now go to http://localhost:4200/tests. Try adding a debugger; to various places within this test (i.e., between awaits). What do you notice?

Ember's test helpers can do a lot more, and are built using async/await.

Completed File

view here