Don't forget your potholders

This release adds support for using page objects in component integration tests. This is one of our most requested features. We're very excited to make it public!

Integration test support

tl;dr: You can now use the same page objects in component integration tests and acceptance tests, with a few minor notes.

The API for using page objects in component integration tests is largely the same as in acceptance tests. You can use all of the same actions, queries and predicates, with the exception of visitable(). Pages in component integration tests also have access to a render() action.

The Quickstart page on the docs site now has a section on adding page objects to your integration tests.

Here are the highlights:

Setup and teardown

To use a page object in an integration test, you need to make it aware of the test's this context. This is done by calling page.setContext(this).

After the test, remove the test context from the page using page.removeContext().

For QUnit users, we recommend calling setContext() and removeContext() in the test suite's beforeEach() and afterEach() hooks.

Example

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

import page from 'frontend/tests/pages/my-page';

moduleForComponent('my-component', 'Integration | my component', {
  integration: true,

  beforeEach() {
    page.setContext(this);
  },

  afterEach() {
    page.removeContext();
  }
});

You can also set and remove a test context inside of a test block.

test('something happens', function(assert) {
  page.setContext(this);

  page.render(hbs`{{my-component}}`);

  assert.equal(page.button.text, 'This is a button');

  page.removeContext();
});

page.render()

The render() action is available on a page object after page.setContext(this) has been called.

page.render() delegates to the test's this.render(), but it returns the page object so you can chain other methods onto it.

test('the text is correct after the button is pushed', function(assert) {
  page.render(hbs`{{my-component}}`)
    .click('.some-button');

  assert.equal(page.text, 'The button was pushed!');
});

For more details on the new integration test functionality, check out the docs site.

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script, then choose ceibo 1.1.0

$ npm install --save-dev [email protected]
$ ember generate ember-cli-page-object

When you execute the generator it can ask you for a suitable version of ceibo library

$ ember g ember-cli-page-object
version: 2.4.1
installing ember-cli-page-object
  install bower package ceibo
Installing browser packages via Bower...
  cached git://github.com/san650/ceibo.git#1.1.0
  conflict Unable to find suitable version for ceibo
    1) ceibo 1.0.0
    2) ceibo 1.1.0
[?] Answer: 2
Installed browser packages via Bower.

Community contributions

#99 Component integration test support (@jeradg)