How to create dynamic fixtures for ember integration tests using ember-testing (Qunit) via teabag

Question

• I have setup the rather awesome teabag https://github.com/modeset/teabag to run integration tests on my ember app.
• I am following the process that Erik Bryn discussed in his presentation: http://www.youtube.com/watch?v=nO1hxT9GBTs using the code in https://github.com/ebryn/bloggr-client-rails as a template.
• I switch to the ember fixture adapter for testing.

I have everything working nicely with a static fixture which I define in a fixtures files like this:

var user = {
    id: 1,
    email: "test@testing.com",
    firstName: "Han",
    lastName: "Solo"
};
var userArray = [];
userArray.push(user);
App.User.FIXTURES = userArray; 

But.... if I want to pull the fixture data in dynamically from my existing Rails seed data. (I rename the file to user_fixture.js.erb) and then do:

<% @user = User.find_by_email('test@testing.com') %>
var currentUser = <%= UserSerializer.new(@user, :root => false).to_json %>; 
var userArray = [];
userArray.push(user);
App.User.FIXTURES = userArray; 

My tests fail. I can see that the data is not populating the ember app, but if I do:

App.User.Fixtures

from the console then I can see that the object exists as expected. I am out of ideas as to why this is the case, anyone have any suggestions?

For completeness here is how I am setting up Ember in the tests (The same as Erik Bryn's examples):

module("Home Routes:", {
  setup: function() {
    Ember.run(App, App.advanceReadiness);
  },
  teardown: function() {
    App.reset();
  }
});

and here is the contents of test_helper.js:

//= require application
//= require_tree .
//= require_self

document.write('<div id="ember-testing-container"><div id="ember-testing"></div></div>');
document.write('<style>#ember-testing-container { position: absolute; background: white; bottom: 45px; left: 45px; width: 640px; height: 384px; overflow: auto; z-index: 9999; border: 1px solid #ccc; } #ember-testing { zoom: 50%; }</style>');

App.rootElement = '#ember-testing';
App.setupForTesting();
App.injectTestHelpers();

function exists(selector) {
    return !!find(selector).length;
};

Update: I have figured out that one (fingers crossed the only) problem with this is that the Active Model Serializer is creating underscore key names, and Ember is expecting camelized versions.

Answer 1

Ok so after a bit of messing about I got it working. As I mentioned in my update above, the problem was that ember is expecting camelised attributes and Active Model Serializers creates dasherized ones.

module MyUtilities
  class Base

    # Convert keys from ruby object to camelized strings. e.g: :hello_there_world becomes "helloThereWorld"
    def self.camelize_keys(object)
      r = {}
      object.to_hash.each do |k,v|
        r[k.to_s.camelize(:lower)] = v
      end
      r
    end

  end
end


<% 
  user = User.find_by_email('test@testing.com') 
  user_hash = UserSerializer.new(user, :root => false).as_json
  @user = MyUtilities::Base.camelize_keys(user_hash).to_json
%>
var user = <%= @user %>; 
App.User.FIXTURES = [user];