2

Qunit と Karma をテストに使用していますが、Test for 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は、ヘルパーを参照するハンドルバー テンプレートを含む 1 回限りのビューをコンパイルする方法が示されました。これは、テストするヘルパーを分離するために使用される、ローカルで作成されたコントローラー/ビューを使用します。

これは、カスタム コンポーネント ハンドルバー ヘルパー名を解決するためのハンドルバー テンプレートを取得できなかったことを除いて、コンポーネント テストではほとんど直接機能しました。歩留まりのテストで、テスト テンプレート ハンドルバーでコンポーネントを使用する方法を見つけました。重要なのは、コントローラでコンポーネントを参照してから、 を使用してコンポーネントを挿入することです{{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 に答える