Ember Component Testing

2
votes

I'm using Qunit and Karma for testing, but i cannot find the way to create Test for Ember component.

Here is my code for test:

test('Function',function(){
        var test = App.MyComponent.create({

              data:[{'a':'a'}]

        });
    var result = test.get('buildingComponent');
    equal(result, 'done', "function crushed because" + result);
});

My component:

App.MyComponent = Ember.Component.extend({
     buildingComponent:function(){

        return 'done'

     }.property('data')

});

So how can i test my component?

2
ember.js
Do you receive some error in this test, or result just return undefined? – Marcio Junior
Result is undefined when i'm using "property", and it returns function text when i use "observes" – encore
Here is a quick jsbin showing component testing jsbin.com/UNivugu/2/edit – Toran Billups

2 Answers

1
votes

I had a similar issue testing a component and found a couple of insights in the Ember tests that let me test the component successfully.

The tests for Ember's TextField showed how to compile one-off view that includes a handlebars template that references the helper. This uses a locally created controller/view that is used to isolate the helper to test.

This almost worked directly for component testing, except I couldn't get the handlebars template to resolve the custom component handlebars helper name. I found a method for using components in a testing template handlebars in the tests for yield. The key is to reference the component in the controller and then insert the component using {{view myComponentNameOnTheController ... }}.

I modified Toran's JSBin to show this in action: http://jsbin.com/UNivugu/30/edit

var App = Ember.Application.create();

App.MyThingComponent = Ember.Component.extend({
  template: Ember.Handlebars.compile('<button {{action "doSomething"}}>{{view.theText}}</button>'),

  actions: {
    doSomething: function(){
      console.log('here');
      this.set('didSomething', true); 
    }
  }
});


/////////////////////////////
// start of your test file

var controller, wrapperView;
var compile = Ember.Handlebars.compile;

module('MyThingComponent', {
  setup: function(){
    controller = Ember.Controller.extend({
      boundVar: "testing",
      myComponent: App.MyThingComponent
    }).create();

    wrapperView = Ember.View.extend({
      controller: controller,
      template: compile("{{view myComponent theText=boundVar}}")
    }).create();

    Ember.run(function(){
      wrapperView.appendTo("#qunit-fixture");
    });

  },

  teardown: function(){
    Ember.run(function(){
      wrapperView.destroy();
    });
  }
});

test('bound property is used by component', function(){
  equal(wrapperView.$('button').text(), "testing", "bound property from controller should be usedin component");
});
1
votes

You could use the library/addon created by Ryan @ https://github.com/rpflorence/ember-qunit using Qunit. A simple example (posted from the link above) - 

// tell ember qunit what you are testing, it will find it from the
// resolver
moduleForComponent('x-foo', 'XFooComponent');

// run a test
test('it renders', function() {
  expect(2);

  // creates the component instance
  var component = this.subject();
  equal(component.state, 'preRender');

  // appends the component to the page
  this.append();
  equal(component.state, 'inDOM');
});

It makes my life easier. Hope this helps.