Jak przetestować jQuery z Jasmine dla $ ("# element-id"), jeśli jest używany jako $ (to)

Question

Nie wiem, jak uruchomić ten test Jasmine dla mojego JS i na pewno również inne osoby mają ten problem. Może robię źle, a może to niemożliwe - nie znalazłem żadnej wskazówki na ten temat. Problem polega na tym, że - w jQuery - $ (this) to nie to samo, co element wybrany np. Przez $ ("# To-id"):

Javascript:

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

Jasmine-Test (coffeescript):

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

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

Niestety ten test nie powiedzie się (przy każdej zmianie jak przechowywanie wg w zmiennej najpierw w moim teście Jasmine), ponieważ funkcja NIE jest wywoływana za pomocą $ ("# button-id"), ale zamiast tego jest wywoływana za pomocą $ (this), i $ (this)! = $ ("# button- ID").

Czy ktoś może mi powiedzieć, jak wykonać ten test? Jestem zagubiony. Nawet Remy Sharp's great article on jQuery and $(this) nie dotarło już do mnie.

Answer 1

Ok, teraz mam rozwiązanie mojego problemu. Rozwiązanie jest łatwe, wyjaśnienie nie. Wyjaśnię rozwiązanie od zera.

To jest mój kod JavaScript z jQuery, że chcę, aby przetestować za pomocą jaśmin-jquery:

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

A teraz używając Jasmine-jQuery Chcę upewnić się, że funkcja JS „doSomethingWith” jest wywoływana z poprawną "$ (this)".

Pierwsza osoba może pomyśleć, że $ (this) === $ ("input.toggler"), ale to nie jest prawda. Wewnątrz funkcji zwrotnej obsługi kliknięcia, używana przez $ (this) jQuery nie jest ani obiektem jQuery $ ("input.toggler"), ani elementem DOM przywoływanym przez ten obiekt. Jak wyjaśnia Remy Sharp w swoim naprawdę fajnym artykule "jQuery's this: demystified", "to" wewnątrz funkcji wywołania zwrotnego to element DOM, ale $ (this) tworzy obiekt jQuery z tego elementu DOM. I to nie jest identyczne z obiektem jQuery $ ("input.toggler").

Jeśli chcesz przetestować to za pomocą Jasmine za pomocą funkcji "toHaveBeenCalledWith", musisz najpierw wyodrębnić element DOM za pomocą metody document.getElementById (...) lub document.getElementsByTagName (...) [INDEX ] (gdzie INDEX jest indeksem elementu, który chcesz, ponieważ ta ostatnia funkcja daje ci tablicę elementów DOM), która jest zwykłym starym Javascriptem. Następnie, po wyodrębnieniu pożądanego elementu DOM, należy utworzyć z niego obiekt jQuery, ujmując go w $ (i).

Moja przechodząc Jasmine-jQuery test wreszcie wygląda tak (za pomocą coffeescript):

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)) 

więc "$ (this)" z mojego kodu JavaScript przekłada się na "$ (DOM_input_element)" w moim Test Jasmine-jQuery.

Mam nadzieję, że pomoże to w Twoich projektach! Zrozumienie tego zajęło mi sporo czasu.