New in Percy: ember-cli-rails support

Mike Fotinakis
Percy Blog
Published in
2 min readMay 26, 2017

We’ve rolled out a fresh release of percy-capybara and bumped it up to version 3.0.0. In addition to various bug fixes, this version includes new support for ember-cli-rails — a gem that helps unify frontends that are built from a combined Rails + Ember codebase.

If you’re using ember-cli-rails you can now integrate Percy visual tests with this simple use_loader configuration:

Example app

You can dig around percy/ember-cli-rails-heroku-example to see a full ember-cli-rails application that has Percy integrated. Here’s what it looks like after running the test suite and pushing snapshots to Percy:

How does it work?

Supporting ember-cli-rails was somewhat complex as it required compiling and enumerating assets from two different asset pipelines: Sprockets from Rails and Ember’s own Broccoli-based asset pipeline.

Percy relies on these assets being discovered correctly so they can be uploaded alongside DOM snapshots, which are then rendered in our lightning fast rendering environment.

Thankfully, ember-cli-rails provides a very straightforward EmberCli.compile! method that can even be run in test environments, which runs all of the Ember build steps for every Ember app you mounted using mount_ember_app. 🐹

Once the assets are compiled by EmberCli, we needed some way to combine them with the assets generated by the Rails asset pipeline. To get them all together for uploading to Percy we created a new :ember_cli_rails loader as a subclass of SprocketsLoader (the mechanism that Percy::Capybara uses underneath to discover Rails assets). This new loader reads the compiled Ember assets from the filesystem, combines them with resources from the Rails pipeline, and sends them all up to Percy for rendering.

All this combined, Percy now supports any ember-cli-rails application you can throw at it!

Percy is a visual testing platform that gives your team confidence in every visual UI change before it’s shipped. Get started for free at percy.io

--

--