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");
});
result
just return undefined? – Marcio Junior