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).
* Learn end-to-end acceptance tests are gold * Create async web apps * Quickly unlearn end-to-end tests in case you want to keep your hair— Attila Györffy (@attilagyorffy) November 17, 2014
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:
- 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
chromedriverinstalled on your host to drive Chrome via Selenium. On a Mac I've installed it using Homebrew:
brew install chromedriver.
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