2013-07-30 1 views
9

Angular 지시어에 대한 몇 가지 테스트를 작성 중이며 사용자 입력을 입력 필드로 시뮬레이트해야합니다. 나는 이것을 시도했다 :수동으로 입력 필드에 대한 각도 데이터 바인딩 트리거 (단위 테스트 목적으로 만 사용)

element.find('input').val('some value').trigger('input'); 

그러나 그것은 작동하지 않았다. 트리거 change도 작동하지 않았습니다. element.scope()을 사용하여 요소 범위에 직접 액세스 할 수 있다는 것을 알고 있지만 입력 값을 변경하고 Angular가 데이터 바인딩을 수행하는 것이 더 자연스러운 것처럼 보입니다.

그것은 가치가 무엇인지에 대한

, 나는 각도 ngScenario으로부터 input(name).enter(value) 확인했습니다, 그리고 내가했던 것과 같은 행동을 할 것 같다

... 
input.val(value); 
input.trigger(event || (supportInputEvent ? 'input' : 'change')); 
... 

나는 무엇을 놓치고? 이 경우 사용자 입력을 테스트하는 더 좋은 방법이 있습니까?

내가 약간의 설명이 필요하다 생각

UPDATE

(I 질문을 설명하기 위해 a jsFiddler script을했다). 나는 DOM이나 스코프를 변경하려고 시도하지 않고있다. Angular realm 그 자체는이다. 지시문 범위의 속성에 입력 상자를 바인딩하는 지시문이 있습니다. 지시문이 수행해야 할 작업을 수행하도록 자동화 된 테스트를 작성 중이며, 한 가지 테스트는 지시문 범위가 업데이트되도록 일부 입력을 시뮬레이트하고 해당 입력에 대해 일부 동작이 수행된다고 주장 할 수 있습니다. 이전에 언급했듯이 element.scope()을 사용하여 테스트 코드에서 지시문의 범위를 변경할 수 있지만 입력 값을 변경하여 Angular로 처리하도록합니다.

+0

지침을 어떻게 테스트합니까? 입력 이벤트를 트리거하는 방식이 나에게 맞습니다. 테스트 파일에서이 작업을 수행하고 있습니다. – ghiden

+0

@ghiden 나는 이미 내 질문에 답을했습니다 - 아래를보십시오. 그래도 관심을 가져 주셔서 감사합니다. :) –

답변

7

Angular Function

연구 및 테스트 좀 더 많은 시간을 보내고 난 후에, 내가 무엇을 잘못 알아 냈어요. Angular의 스크립트가 jQuery (그리고 jqLite를 사용하기 전에)에로드되기 때문에 jsFiddle 스크립트가 작동하지 않았습니다. the script을 업데이트하여 모든 항목을 올바른 순서로로드하여 Angular가 jQuery on 함수를 사용하여 이벤트 핸들러를 등록하고 이제 입력 상자의 변경 사항을 시뮬레이트하고 Angular에 데이터 바인딩을 지시합니다.

동일한 테스트 코드가 작동하지 않습니다. 스크립트 순서를 변경하여 수정했습니다. jQuery를 사용하지 않은 경우 trigger 대신 dispatchEvent을 호출하여 이벤트를 트리거해야합니다.

+2

jQuery의'trigger' **는'addEventListener'를 통해 접속 된 fire 핸들러를합니다 : http://jsbin.com/APEwimu/1 (출처 : http://jsbin.com/APEwimu/1/edit). 이것은 [long] (http://jsbin.com/APEwimu/2), [** long **] (http://jsbin.com/APEwimu/3) 시간 (1.2.6은 나는 뒤로 가기로 결심했다. Chrome, Firefox 및 [IE8] (http://jsbin.com/APEwimu/4)에서 테스트 한 결과 - 물론 attachEvent가 필요하기 때문에 마지막으로 스크립트를 편집해야했습니다. –

+0

@ T.J.Crowder 그건 이상합니다. [내 첫 번째 스크립트] (http://jsfiddle.net/2ZLuW/1/)가 작동하지 않는 이유를 이해할 수 있도록 도와 주시겠습니까? –

+0

$ apply already in progress error - 'input'이벤트를 수동으로 트리거 할 때 이것을 실행 한 적이 있습니까? – bennlich

-2

이렇게하는 것은 올바른 방법이 아닙니다. 너는 이렇게해야한다.

Working DEMO

은 $ 범위 내에서 기능을 작성하고 자체 각도 사용한 모든 장소 (바인드)이 변수에서뿐만 아니라 입력 필드를 업데이트 할 수 있도록 귀하의 변수 값을 변경합니다. jqLite가 addEventHandler를 사용하여 이벤트 핸들러를 등록하고 그들은 jQuery를 trigger 기능에 의해 트리거되지 않습니다

$scope.changeInput = function() { 
    $scope.value="barfoo"; 
} 
+0

나는 내 질문에 대답하지 않는 것이 두렵다.게시물을 업데이트하여 모든 것을 명확하게 할 것입니다. –

관련 문제