Component Not Rendering Correctly During Test

Question

I'm writing integration tests for my Ember CLI app, and one of my tests fails every time. This is my current test:

// tests/integration/project-test.js
test('displays "Projects" when the user views a project from Collaborate', function() {
  visit('/collaborate');

  click('.table > tbody > tr > td > a'); // it goes to /collaborate/projects/:id
  expect(0);
});

When it navigates to /collaborate/projects/:id, I get the error "Cannot read property 'setLegend' of null." I traced that to my component:

// app/components/foo-comp.js
import Ember from "ember";

export default Ember.Component.extend({
  fooObject: null,
  didInsertElement: function () {
    var foo = new Foo();

    this.set('fooObject', foo);
    Ember.run.once(this, 'updateChart');
  },
  updateChart: function () {
    var foo = this.get('fooObject');
    foo.setLegend(); // this is where the error comes from
  }.observes('data','fooObject')
});

Note that the test does pass if I change updateChart to:

updateChart: function () {
  var foo = this.get('fooObject');

  if (foo) {
    foo.setLegend();
  }
}.observes('data','fooObject')

Why would it not set that variable during a test? It works fine in development and production, so I'm not sure why this is happening. I'm assuming it's because didInsertElement isn't triggered when the test runs. Thoughts? Ideas?

Ember version:

version: 0.1.12
node: 0.10.33
npm: 2.1.8

Edit

Could it be that Foo() is from an external module? Maybe the test doesn't have access to it, so it can't be added to the page? I doubt it, and I've already tried adding it to .jshintrc, but I imagine it could still be related to that. I also console logged Foo while running the test, and it did show up in the console.

Honestly, it is possibly related to inserting it into the DOM. I've had problems with other components initializing, so it's probably that the didInsertElement isn't functioning the way I think.

score 0 · Answer 1 · answered Feb 05 '15 at 00:34

0

Hmm, maybe your test doesn't wait for everything to be loaded?

I'm not sure but you can try with:

test('displays "Projects" when the user views a project from Collaborate', function() {
  expect(0);
  visit('/collaborate');
  andThen(function() {
    click('.table > tbody > tr > td > a');
  });
});

answered Feb 05 '15 at 00:34

andrusieczko

2,824
12
23

I'm afraid that didn't work. `Foo()` is from an outside module, so is it possible it's that? I'll add that to my question. – NJP Feb 05 '15 at 17:09

Component Not Rendering Correctly During Test

1 Answers1