Question

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

这是我的测试代码：

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

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

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

我的组件：

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

        return 'done'

     }.property('data')

});

那我怎样才能测试我的组件？

Answer 1

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

tests for Ember's TextField展示了如何编译包含引用辅助工具的把手模板的一次性视图。这使用本地创建的控制器/视图，用于隔离要测试的帮助程序。

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

我修改了Toran的JSBin以显示这一点：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");
});

Answer 2

您可以使用由Qanit创建的Ryan @ https://github.com/rpflorence/ember-qunit创建的库/插件。一个简单的例子（从上面的链接发布） -

// 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');
});

这让我的生活更轻松。希望这会有所帮助。

灰烬组件测试

2 个答案: