2

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

这是我的测试代码：

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')

});

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

4

2 回答 2

1

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

Ember 的测试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");
});
于 2014-03-10T18:57:36.167 回答
1

您可以使用由 Ryan @ https://github.com/rpflorence/ember-qunit使用 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');
});

它让我的生活更轻松。希望这可以帮助。

于 2014-04-10T22:33:12.473 回答