Ember组件测试 [英] Ember Component Testing

问题描述

我正在使用Qunit和Karma进行测试，但是找不到创建Ember组件测试的方法。

这是我的测试代码： p>

  test（'Function'，function（）{
 var test = App.MyComponent.create（{
 
 data：[{'a'：'a'}] 
 
}）; 
 var result = test.get（'buildingComponent'）; 
 equal结果，完成，功能被压坏，因为+结果）; 
}）; 
  

我的组件：

  App.MyComponent = Ember.Component.extend（{
 buildingComponent：function（）{
 
 return'done'
 
} .property （'data'）
 
}）; 
  

那么我如何测试我的组件？

解决方案

我在测试一个组件时遇到了类似的问题，并在Ember测试中找到了几个见解，让我成功测试组件。

X-45454545 X-454545 X-454545 X-454545 X-454545 X-454545 X-454545 X-454545 X-454545 X-对于Ember的 TextField 显示了如何编译一次性视图，其中包含引用助手的句柄模板。这使用本地创建的控制器/视图，用于隔离助手进行测试。

这个几乎直接用于组件测试，除了我无法获取句柄模板来解析自定义组件句柄助手名称。我在测试中找到了一种在测试模板句柄中使用组件的方法。关键是引用控制器中的组件，然后使用 {{view myComponentNameOnTheController ...}} 插入组件。

我修改了Toran的JSBin，以显示此操作： http://jsbin.com/UNivugu/30 / edit

  var App = Ember.Application.create（）; X-4545 X-4545 X-4545 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 200： }} 
 
 action：{
 doSomething：function（）{
 console.log（'here'）; 
 this。 set（'didSomething'，true）; 
} 
} 
}）; 
 
 
 /////////////////////////// 
 //开始你的测试文件
 
 var controller，wrapperView; 
 var compile = Ember.Handlebars.compile; 
 
 module（'MyThingComponent'，{
 setup：function（）{
 controller = Ember.Controller.extend（{
 boundVar：testing，$ b新新旗200 200 200 200 200 200 200 200 200 200 200 200 200：p4545 X- 20045 CEEC X-新评新新新200 200 200 200 200 200 200 200 -40 200 200:45新新新新旗新新新新新旗新新旗200新新新新新新新旗新新旗200新新新旗新新旗新新旗200新新新新新新新旗新新旗新新旗： q 
 
 
删除：function（）{
 Ember.run（function（）{
 wrapperView.destroy（）; 
}）; 
} 
}）; 
 
 test（'bound属性由组件使用'，function（）{
等于（wrapperView。$（'button'）。text（），testing控制器应该在组件）; 
}）; 
  

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?

解决方案

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");
});

这篇关于Ember组件测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！