I recently started playing around with EmberJS. While I was insanely impressed with how easy it was to get a single-page app up and running, I was having difficulty getting QUnit setup correctly.
After some finagling I was able to get it working. In my particular case I’m using Ruby 2.0.0 and Rails 4.0.0, though I’m sure this same setup would work with previous versions with minimal (if any) tweaks.
You will need to have Ruby/Rails, Node and CoffeeScript installed
Open up a terminal and cd to your folder of choice (rails will create a new folder when you run these commands)
We now need to add the following to our Gemfile:
And add the following to our application config:
Ember only has the testing helpers when in development mode, so we set the default to :development (in application.rb)
and override that value when in production.
Finally, we bootstrap/install EmberJS and QUnit:
The --head parameter tells rails to pull the latest version of ember and ember-data. You can re-run this command at
any point to get the latest version.
The -c parameter for qunit:install tells qunit to use coffeescript (my preference but can be omitted if desired).
In order to have QUnit work with ember, we need to add the following code to our test_helper.coffee file (found in
test/javascripts/):
This creates an element for containing your app, adds the test helpers to EmberApp and adds a globally accessible
function called exists that can be used in your tests.
Let’s add a test for the default (application) template. To start, create a new file in test/javascripts/integration/
called application_tests.js.coffee and add the following code to it:
This code creates a simple module (shared by all tests in this file) and adds a simple test. I realize this test is very simplistic, but the goal of the post is to explain the setup so I’m just using a contrived example that checks to see that our main template is loaded.
At this point, we should run our test to make sure that it fails (‘cause we’re Red, Green, Refactor folks). Running the tests is easy. Start your server.
$ rails sNow open a browser and go to http://localhost:3000/qunit (I’m assuming the default rails port here…adjust as necessary). You should see a failing test now.
The last step in getting this working is to add the code needed to make the test pass. To do this we need to create a
template in app/assets/javascripts/templates/ called application.hbs and add the following code to it:
The .hbs extension is used for handlebars. If you’re using Sublime Text 2, there is a package aptly named “Handlebars” that will handle syntax highlighting, etc for you.
If you refresh the test page, you should see that your test now passes.
In a future post, I’ll cover how we can run these tests from the command line without needing to start web brick. If you know of a good post already, add a comment and save me the time! :)