Search code examples
javascriptember.jscoffeescriptqunitember-testing

Ember.js: Stuck with initial integration test


I'm in the process of grokking Ember after the 1.0 release, and thought was going well at it until I tried following this tutorial on integration testing. It's well written and pretty didactic, but I've been stuck debugging the setup test for a few days already :/ Noob pains...

This gist shows the test and the error on qunit. I'm following the setup from the tute, and which I have seen elsewhere.

On IRC somebody pointed out this tute uses R5, not the latest 1.0 release. He didn't know whether ember-testing had changed since then, but this is a possible culprit.

Any ideas on what I could be doing wrong? It's gotta be something stupid, I'm aware :)

(using Ember with Rails 4)

Update

Márcio's fiddle let me play around adding and removing stuff until I replicated the error. Turns out I didn't have any templates setup, and the test didn't like that, though the application loaded with no errors, and the ember inspector saw routes etc.


Solution

  • I got this working following the tutorial:

    Javascript:

    App = Ember.Application.create();
    
    App.Store = DS.Store.extend({
        adapter: DS.FixtureAdapter
    });
    
    App.Router.map(function() {
        this.route('edit', { path: ':person_id' });
    });
    
    App.IndexRoute = Ember.Route.extend({
      model: function() {
          return this.store.find('person');
      }
    });
    
    App.Person = DS.Model.extend({
        firstName: DS.attr('string'),
        lastName: DS.attr('string')
    });
    
    App.Person.FIXTURES = [
        {id: 1, firstName: 'Kris', lastName: 'Selden'},
        {id: 2, firstName: 'Luke', lastName: 'Melia'},
        {id: 3, firstName: 'Formerly Alex', lastName: 'Matchneer'}
    ];
    
    App.rootElement = '#ember-testing';
    App.setupForTesting();
    App.injectTestHelpers();
    
    function exists(selector) {
      return !!find(selector).length;
    }
    
    module("Ember.js Library", {
      setup: function() {
        Ember.run(App, App.advanceReadiness);
      },
      teardown: function() {
        App.reset();
      }
    });
    
    test("Check HTML is returned", function() {
    
      visit("/").then(function() {
        ok(exists("*"), "Found HTML!");
      });
    
    });
    

    Templates:

    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <div id="ember-testing-container"><div id="ember-testing"></div></div>
    
    <script type="text/x-handlebars" data-template-name="application">
        <h1>ember-latest jsfiddle</h1>
        {{outlet}}
    </script>
    
    <script type="text/x-handlebars" data-template-name="index">
      <h2>Index Content:</h2>
      <ul>
      {{#each}}
          <li>{{#link-to 'edit' this}}  {{firstName}} {{lastName}} {{/link-to}}</li>
      {{/each}}
       </ul>
    </script>
    
    <script type="text/x-handlebars" data-template-name="edit">
      <h2>Edit:</h2>
      <p id='name'>
          {{firstName}}
      </p>
    </script>
    

    Here is fiddle with this working http://jsfiddle.net/marciojunior/GveWH/