Units

Question

I spent the last 24 hours trying to build a unit test around one of my EmberJS components. I am using qunit. I would like to test the entire component (steering wheel pattern and all) as one separate unit.

My component is as follows:

App.MyAwesomeComponent = Ember.Component.extend({
  someAttribute: null
  someComputedValue: function() {
    this.get('someAttribute') + ' some extra piece of text ';
  }.property('someAttribute')
});

The component file / my -awesome-component.handlebars is as follows:

{{someComputedValue}}

... and the test is as follows:

test("When passed a string after rendering, renders the computed value as its content", function() {
  component = App.MyAwesomeComponent.create({
    templateName: "components/my-awesome"
  });
  appendComponentToView();
  component.set('someAttribute', 'an exciting value');
  var result = view.$().text().trim();
  equal(result, "an exciting value some extra piece of text ", "contents are rendered with the new value in place");
});

The problem is that I get various errors, such as "null" is not an object (evaluating "depth0 ['my-awesome'] '), etc.

I am looking for some golden way for unit testing components. I don’t want to use the integration test (apparently, the obvious reason is the component, and I don’t want to create a dummy page in my application so that I can test it from different angles).

ember , , - , , , .

!:)

Julian

Answer 1

, runloop.

test("When passed a string after rendering, renders the computed value as its content", function() {
  component = App.MyAwesomeComponent.create({
    layoutName: "components/my-awesome"
  });
  appendComponentToView();
  Ember.run(function() {
    component.set('someAttribute', 'an exciting value');
  });
  var result = view.$().text().trim();
  equal(result, "an exciting value some extra piece of text ", "contents are rendered with the new value in place");
});

, , - runloop , var result =....

, - .