Simple Page Objects for Testing Ember.JS Apps

Mirko Akov
Jun 28, 2018 · 2 min read
Image for post
Image for post
Nice!

Testing Ember.JS apps is getting better and better with every new release. The introduction of the new 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 — . 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 .


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

Evermore

Development consultancy, specialised in building custom web…

Mirko Akov

Written by

Full stack developer @weareevermore #ruby #elixir #ember.js

Evermore

Evermore

Development consultancy, specialised in building custom web solutions and applications since 2006. Visit us at https://weareevermore.com

Mirko Akov

Written by

Full stack developer @weareevermore #ruby #elixir #ember.js

Evermore

Evermore

Development consultancy, specialised in building custom web solutions and applications since 2006. Visit us at https://weareevermore.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store