Using acceptance testing

Acceptance tests generally help test workflows and emulate user interactions. In this recipe, we'll look at creating a few simple acceptance tests.

How to do it...

  1. In a new application, create a new component called 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.

  2. Update the component file with a new 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.

  3. Update the 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.

  4. Add the 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.

  5. Add the test code to the 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.

    Note

    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 complete
    • fillIn(selector, value): This fills in the selected input with the values given, and returns a promise that fulfils when all asynchronous behavior is complete
    • keyEvent(selector, type, keyCode): This simulates keypress, keydown, or keyup on the element
    • triggerEvent(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 complete
    • currentPath(): This returns the current path
    • currentRouteName(): This returns the currently active route
    • currentURL(): This returns the current URL
    • find(selector, context): This finds an element starting at the app's root element; optionally, you can add some context
  6. Run ember server and visit the /tests URL. This URL will display all the tests running. Look for the acceptance test for add-book:
    How to do it...
  7. This acceptance test shows that everything passed. Alternatively, you can also run the tests on the command line:
    $ ember test –server
  8. This will bring up a screen so that you can run tests in your console. To use this, you must first navigate to localhost on port 7357. This screen will then refresh with the number of passed tests:
    How to do it...

    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.

How it works...

Acceptance tests are used to test the user interaction and flow. This is done via Ember's QUnit testing framework, although other testing frameworks are supported using third-party add-ons. You can navigate to the /tests URL or run ember test on the server to execute test cases.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset