Como testar jQuery com Jasmine para $("#elemento de id"), se usado como $(this)

Question

Eu não sei como executar este Jasmim teste para o meu JS e certamente também por outros ppl tem esse problema.Talvez eu estou fazendo st errado ou talvez impossível - eu não encontrar qualquer dica sobre isso.O problema tem a ver com o fato de que - em jQuery $(isso) não é o mesmo como o elemento escolhido, por exemplo:$("#este-id"):

Javascript:

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

Jasmim-Teste (CoffeeScript):

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

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

Infelizmente, este teste falhar (com alguma variação, como armazenar a referência a uma variável de primeira no meu Jasmim de teste), pois a função NÃO é chamada com $("#botão-id"), mas em vez disso, é chamado com $(this) e $(this) != $("#botão-id").

Alguém pode me dizer como realizar este teste?Eu estou completamente perdida.Mesmo Remy Sharp ótimo artigo sobre jQuery $(this) não me ainda mais.

Answer 1

Ok, agora eu tenho a solução para o meu problema.A solução é fácil, a explicação não.Eu vou explicar a solução a partir do zero.

Este é o meu código Javascript com jQuery que eu quero testar usando o jasmim-jquery:

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

E agora com Jasmine jQuery, e eu quero garantir que a JS função "doSomethingWith" é chamado o correto "$(this)".

Primeiro, pode-se pensar que $(this) === $( "input.toggler" ), mas isso não é verdade.Dentro da função de retorno de chamada do manipulador de clique, o $(this) jQuery usa não é nem o objeto jQuery $( "input.toggler" ), nem o DOM elemento referenciado pelo objeto.Como Remy Sharp explica em seu muito bom artigo "jQuery é isto:desmistificada", "este" dentro da função de retorno de chamada é o elemento DOM, mas o $(this) cria um objeto jQuery a partir de que elemento DOM.E que não é idêntico ao objeto jQuery $( "input.toggler" ).

Então, se você quiser testar isso com Jasmine, usando a função "toHaveBeenCalledWith", você deve primeiro extrair o elemento DOM usando documento.getElementById(...) ou outro documento.getElementsByTagName(...)[INDEX] (onde o ÍNDICE é o índice do elemento que você deseja, uma vez que esta função fornece uma matriz de elementos DOM), que é velho e simples de Javascript.Então, quando você tiver extraído o elemento DOM queria, você tem que criar um plugin jQuery-objeto é colocando-o em $( e ).

Minha passagem de Jasmim-jQuery-teste, finalmente, parece algo como isto (usando 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 ) )

Assim, a "$(this)" a partir do meu código Javascript traduz para "$(DOM_input_element)" no meu Jasmim-jQuery-teste.

Espero que isso ajude você com seus projetos!Levei muito tempo para descobrir isso.