Тестирование Ember Component

Question

Я использую 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') 

}); 

Итак, как я могу проверить мой компонент?

Answer 1

У меня была аналогичная проблема с тестированием компонента и была найдена пара идей в тестах Ember, которые позволили мне успешно протестировать компонент.

tests for Ember's TextField показал, как скомпилировать одноразовое представление, которое включает в себя шаблон руля, который ссылается на помощника. Это использует локально созданный контроллер/представление, которое используется для изоляции хелпера для тестирования.

Этот почти работал непосредственно для тестирования компонентов, за исключением того, что я не смог получить шаблон handlebars для разрешения имени вспомогательного элемента handbars компонента. Я нашел метод использования компонентов в дескрипторах шаблона тестового шаблона в тестах на выход. Ключ должен ссылаться на компонент в контроллере, а затем вставлять компонент с помощью {{view myComponentNameOnTheController ... }}.

Я изменил JSBin Toran, чтобы показать это в действии: 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

Вы можете использовать библиотеку/аддон, созданный Райаном @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'); 
}); 

Это облегчает мою жизнь. Надеюсь это поможет.