엠버 구성 요소 테스트 - 외부 동작을 호출하지 않을 때 단위 테스트 구성 요소의 동작을 어떻게 설명합니까?

Question

Ember와 호출기 구성 요소를 테스트하는 것이 다소 익숙합니다. 단순화 된 구성 요소는 다음과 같습니다.

export default Ember.Component.extend({ 
    index: 0, 
    actions: { 
     next() { 
      this.incrementProperty('index'); 
     } 
    } 
}); 

next() 작업이 실제로 예상대로 인덱스 속성을 증가시키지 않는지 테스트하려고합니다. 다음과 같은 단위 테스트를 작성했습니다.

test('next should increment the index by 1', function (assert) { 
    const component = this.subject(); 

    assert.equal(component.get('index'), 0, 'Index should be 0'); 

    component.get('actions').next(); 
    assert.equal(component.get('index'), 1, 'index should be 1'); 
}); 

그러나 "this.incrementProperty는 함수가 아닙니다."라는 오류와 함께 실패합니다. 디버깅, 테스트에서 "this"는 next() 함수 내부에서 구성 요소의 컨텍스트가 아니며 유일한 속성 인 next()가있는 객체입니다.

테스트에서 nextPlace 액션을 호출하는 방법 때문인지 궁금합니다. 이 동작을 실행하는 단추를 클릭하고 UI가 변경되었는지 확인하기 위해 통합 테스트를 작성할 수는 있지만, 테스트 할 때 함수 자체가 예상대로 수행된다는 것은 매우 복잡한 것처럼 보입니다. 이 컴포넌트 (클로저 액션)에 전달 된 액션 인 경우 통합 테스트에서 더미 함수를 설정하고이를 컴포넌트로 전달하고 어떻게 응답하는지 확인할 수있다. 그러나이 행동은 그 행동에 전달 된 행동을 부르지 않습니다.

필자가 테스트하고있는 기능이 정말 기본이지만, 부분적으로는 외부 (구성 요소) 동작을 호출하지 않는 구성 요소에서 동작을 테스트하는 방법을 이해하는 것입니다.

Answer 1

통합 테스트를 작성하지 않으려는 동기가 없다면 통합 테스트를 작성하는 것이 좋습니다. IMO, 이유가 유효합니다. 나는 당신의 경우를위한 단위 테스트 부팅을위한 3 가지 제안을했습니다. 모든

첫째. 작동하지 않는 이유는 그래서 this이 아닌 그 전화에서 유효 component.get('actions').next 어떤 맥락없이 next 기능에 대한 참조를 가져 "입니다 단지에 구성 요소를 바인딩이 유효하려면 다음과 같이. :

component.get('actions').next.bind(component)(); 

그러나 나는 그것의 맥락에서 next를 추출하기 때문에이를 선호하고 우리가 next 기능에 this에 대한 참조를 가지고 있음을 알고 있기 때문에 우리는이 bind 일을하고 다시 결합하지 않을 그것. 코드.

두 번째 제안은 "이벤트를 어떻게 유발하는지"입니다. 이 코드를 실행하려면 다음 코드를 살펴보십시오.

component.send('next'); 

IMO, 이것이 좋습니다. 우리는 "다음에 무엇을하는지"를 알 필요가 없습니다. 우리는 단지 사건을 일으키고 있습니다.

그러나 이것은 ember 구성 요소의 수명주기를 처리합니다. 이 상황을 받아들입니다. actions이라는 특정 해시가 있으며 send을 통해 트리거 할 수 있습니다. (이것은 완전히 괜찮습니다.) actions을 처리하는 대신 doing something을 action handling에서 분리 할 수 ​​있습니다. 그래서 당신은 당신이 필요로하는 것을하기위한 또 다른 함수를 정의 할 수 있고 간단히 액션 핸들러에서 호출 할 수 있습니다. (좋아,이 경우 우리는 다시 액션 핸들러라고 불리는 기능을 알 필요하지만이 나를 위해 더 명확 보인다..) 아래와 같이 :

next(){ 
    this.incrementProperty('index'); 
}, 
actions:{ 
    next(){ 
    this.next(); 
    } 
} 

당신은 this twiddle에서 세 가지 대안을 볼 수 있습니다.