Acceptance tests generally help test workflows and emulate user interactions. In this recipe, we'll look at creating a few simple acceptance tests.
book-shelf
and a new acceptance test called add-book-test.js
:$ ember g component book-shelf $ ember g acceptance-test add-book
This will create the code necessary for the book-shelf
component and the add-book
acceptance test. Keep in mind that an integration test will also be generated for the book-shelf
component. We will not be updating the integration test in this example.
books
array and new action:// app/components/book-shelf.js import Ember from 'ember'; export default Ember.Component.extend({ books: Ember.A([{name: 'Moby Dick'}]), actions: { add(val) { this.get('books').addObject({name:val}); } } });
This component uses the books
property to keep track of books on the book shelf. The books
property is an Ember array of objects. The add
action adds another object to the array. Ember.A
is used to declare an Ember array.
book-shelf.hbs
component template file:// app/templates/components/book-shelf.hbs {{input value=val}} <button {{action 'add' val}}>Push Me</button><br> <ul> {{#each books as |book|}} <li>{{book.name}}<br></li> {{/each}} </ul>
The component lists all the books. It also has an input
helper and button
. The button has an action called add
that gets triggered on the click event. It passes on the value from the input
helper as an argument to action
.
book-shelf
component to the application file:<h2 id="title">Welcome to Ember</h2> {{book-shelf}} {{outlet}}
This code adds the book-shelf
component to the application template.
add-book-test.js
file:// app/tests/acceptance/add-book-test.js import { test } from 'qunit'; import moduleForAcceptance from 'example3/tests/helpers/module-for-acceptance'; moduleForAcceptance('Acceptance | add book'); test('visiting / and adding book', function(assert) { visit('/'); fillIn('input','My new book'); click('button'); andThen(function() { assert.equal(currentURL(), '/'); assert.equal(find('li:last').text(),'My new book'); }); });
This acceptance test visits the root of the application at /
. It then adds new text to the input
helper and clicks the button
. It then checks the URL and template to make sure the text was added.
The code at the top is mostly boilerplate. The tests are at the bottom and can be followed step by step. The visit
, fillIn
, click
, and andThen
helpers are all asynchronous test helpers.
The following is a list of all the asynchronous and synchronous test helpers:
click(selector)
: This clicks an element and triggers the corresponding action, and returns a promise that fulfils when asynchronous behavior is completefillIn(selector, value)
: This fills in the selected input with the values given, and returns a promise that fulfils when all asynchronous behavior is completekeyEvent(selector, type, keyCode)
: This simulates keypress
, keydown
, or keyup
on the elementtriggerEvent(selector, type, options)
: This triggers the given event on the element identified by the selector
visit(url)
: This visits the route given by the URL, and returns a promise that is fulfilled when all asynchronous behavior is completecurrentPath()
: This returns the current pathcurrentRouteName()
: This returns the currently active routecurrentURL()
: This returns the current URLfind(selector, context)
: This finds an element starting at the app's root element; optionally, you can add some contextember server
and visit the /tests
URL. This URL will display all the tests running. Look for the acceptance test for add-book:$ ember test –server
localhost
on port 7357
. This screen will then refresh with the number of passed tests:Each test will be checked, and any tests that fail will be shown on this screen. The test will be rerun after any file changes.