Ember 구성 요소 테스트

Question

테스트를 위해 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') 

}); 

그래서 내가 어떻게 내 구성 요소를 테스트 할 수 있습니까?

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

당신은 Qunit를 사용 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'); 
}); 

내 인생을 더 편하게 만듭니다. 희망이 도움이됩니다.