Simple Page Objects for Testing Ember.JS Apps

Testing Ember.JS apps is getting better and better with every new release. The introduction of the new @ember/test-helpers and native async/await functionality makes testing a breeze.

Let’s take this simple test case of our article-form component.

The test case looks sweet as it is right now. And as an added benefit of the new testing helper, we can do the same in our acceptance tests as well, which means that we will benefit from extracting some of the logic.

Here comes page objects. They usually encapsulate given page or page section into an helper that is used to interact with it.

A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML.

— Martin Fowler

Creating page objects in Ember were a bit tricky to do, if you planed to used them in both integration and acceptance tests. Of course, thanks to the awesome community, there is an addon that helps with that — http://ember-cli-page-object.js.org/. But since the introduction of the new helpers, we can create a simple one, just using the baked in functionality. (And I like to keep the dependencies to minimum 🙃)

Now we can just import it and use it for interacting with the form.

They work really well with qunit-dom as well. Having the selectors as properties, means that we can just use them to assert that the DOM is at the state that we expect it to be.

It is really a simple, but quite pleasant pattern that we use regularly in Evermore.

Shout out to all the people that continue to make Ember.JS a joy to work with.