attilagyorffy.com

Using Ember Inspector in Capybara acceptance tests

Introduction

Attila Györffy

Attila Györffy

I'm a Ruby/JS dev/trainer with a focus on quality. An ex-Londoner, @terracycle, @ubxd, @lastfm. Follow me at http://twitter.com/attilagyorffy


Using Ember Inspector in Capybara acceptance tests

Posted by Attila Györffy on .
Featured

Using Ember Inspector in Capybara acceptance tests

Posted by Attila Györffy on .

Update (2014.11.20.)

I've packaged the functionality described below in a gem for convenience. Please install capybara-ember-inspector from Rubygems. For the explanation of the story, please read on.

Integration testing Ember applications

I come from a Rails development background where it’s pretty standard practice to test applications from top to bottom using acceptance tests, using Capybara and RSpec. When I started to develop Ember applications, I’ve come to realise that the story is different…

Integration testing of Ember applications is usually done by using some sort of server mock that can act as the backend service. This clear separation facilitates the notion that the client and the back-end API server are separate entities and so should be developed and deployed independently. That is, provided the communication (usually HTTP requests) is stable and can be relied on.

The agile developer inside me however wants to ensure that all critical business cases are properly and thoroughly tested, end-to-end. Unfortunately this is often difficult because of the asynchronous communication between the different components involved. @xeppelin and I have been having long running conversations about the problem, trying to find the right balance between testing the stack and keeping our hair. (Well, at least what’s left of it).

I won't go into detail about the problem above (as it's a bit out of scope) but Jo Liss' presentation should give you a better idea of what's involved.

Rising to the challenge

If you decided to still test some scenarios end-to-end, prepare yourself to face errors. When something goes wrong, you’d want to inspect your Ember application’s current state. This is where the Ember Inspector comes handy.

By using Selenium and Chrome to run our tests in, we could easily enable Ember Inspector and make use of it just like we would throughout development.

By cloning and building Ember Inspector locally (see the README), we could instruct the Chrome driver to load it. Given we’ve got the extension unpackaged in spec/support/ember_inspector, the following snippet will do the job:

Notes

  • The Inspector is also available as a FireFox addon, you may want to use that when testing in FireFox, but it will require you to set up Capybara differently.
  • You will need the chromedriver installed on your host to drive Chrome via Selenium. On a Mac I've installed it using Homebrew: brew install chromedriver.
Attila Györffy

Attila Györffy

https://attilagyorffy.com

I'm a Ruby/JS dev/trainer with a focus on quality. An ex-Londoner, @terracycle, @ubxd, @lastfm. Follow me at http://twitter.com/attilagyorffy

View Comments...