$ ("# element-id")로 $ ("# element-id")로 jasmine을 테스트하는 방법

내 JS에 대해이 재스민 테스트를 실행하는 방법을 모르겠다. 물론 다른 ppl에도이 문제가있다. 어쩌면 나는 st를 잘못하고 있거나 불가능할 수도 있습니다 - 이것에 대한 힌트를 찾지 못했습니다. 문제는 사실 - jQuery에서 - $ (this)는 예를 들어에 의해 선택된 요소와 동일하지 않다. $ ("#이-ID") :

자바 스크립트 :

[..] 
$("#button-id").on("click", function(e) { callSomeFunctionWith($(this)); });

재스민 테스트 (커피 스크립트) :

[..] 
spyOn some.object, "callSomeFunctionWith" 
spyOnEvent($("#button-id"), 'click') 

$("#button-id").trigger("click") 
expect(some.object.callSomeFunctionWith).toHaveBeenCalledWith($("#button-id"))

불행하게도이 테스트가 심판을 저장하는 등의 어떤 변화와 함께 (실패 함수는 $ ("# button-id")로 호출되지 않고 대신 $ (this) 및 $ (this)! = $ ("# button- 신분증").

아무도이 테스트를 수행하는 방법을 말해 줄 수 있습니까? 나는 길을 잃었다. 심지어 Remy Sharp's great article on jQuery and $(this) 나를 더 이상 얻지 않았다.

출처

2012-02-29 RSeidelsohn

이제는 문제에 대한 해결책을 얻었습니다. 해결책은 간단하고 설명은 쉽지 않습니다. 나는 처음부터 그 해결책을 설명 할 것이다.

이것은 내가 자스민 - JQuery와 사용하여 테스트 할 jQuery를 내 자바 스크립트 코드입니다 : 나는 JS 기능 "doSomethingWith은"올바른으로 호출되는 것을 보장 할 재스민 - jQuery를 사용하여 지금

$("input.toggler").on("click", function(e) { 
    [...] 
    doSomethingWith($(this)); 
});

을 그리고 "$ (this)".

처음에는 $ (this) === $ ("input.toggler")라고 생각할 수도 있지만 사실이 아닙니다. 클릭 핸들러의 콜백 함수에서 $ (this) jQuery는 jQuery 객체 $ ("input.toggler")도 아니고 해당 객체가 참조하는 DOM 요소도 아닙니다. Remy Sharp가 자신의 멋진 기사 "jQuery's this: demystified"에서 콜백 함수의 "this"는 DOM 요소이지만 $ (this)는 해당 DOM 요소에서 jQuery 객체를 만듭니다. 그리고 그것은 jQuery 객체 $ ("input.toggler")와 동일하지 않습니다.

"toHaveBeenCalledWith"함수를 사용하여 Jasmine을 테스트하려는 경우 먼저 document.getElementById (...) 또는 document.getElementsByTagName (...) [INDEX ] (여기서 INDEX는 원하는 요소의 인덱스이고, 후자의 함수는 DOM 요소의 배열을 제공하기 때문에), 이는 오래된 오래된 자바 스크립트입니다. 그런 다음 원하는 DOM 요소를 추출한 후에 $ (및)로 묶어 jQuery 객체를 만들어야합니다.

내 통과 재스민 - jQuery를 테스트 마지막으로 다음과 같이 보입니다

이 (커피 스크립트 사용) : 내 자바 스크립트 코드에서

it "does something with my input element", -> 
    DOM_input_element = document.getElementsByTagName("input")[0] # Choose the correct DOM element here 

    spyOn myobject.functions, "doSomethingWith" 
    spyOnEvent($('input.toggler'), 'click') 

    [...] 

    $('input.toggler').trigger('click') 

    # Check for changes after click: 
    expect(myobject.functions.doSomethingWith).toHaveBeenCalledWith($(DOM_input_element))

그래서 "$ 것은 (이)"번역에 "$ (DOM_input_element)"내 Jasmine-jQuery 테스트.

여러분의 프로젝트에 도움이되기를 바랍니다. 이것을 이해하는 데는 꽤 시간이 걸렸습니다.

출처

2012-02-29 20:51:32 RSeidelsohn

$ ("# element-id")로 $ ("# element-id")로 jasmine을 테스트하는 방법

답변

관련 문제