javascript - que - preventdefault submit

Error en Jasmine: el evento esperado hace clic para haberse activado en#DIV_ID

Question

Me remitieron este enlace para activar un evento al desarrollar una herramienta de prueba en el marco de Jasmine:

http://www.htmlgoodies.com/beyond/javascript/js-ref/testing-dom-events-using-jquery-and-jasmine-2.0.htm l

Estoy intentando obtener el atributo CSS recién aplicado después de activar un evento de clic en #DIV_ID en el marco de Jasmine.

He probado este código:

 spyEvent = spyOnEvent(''#DIV_ID'', ''click'');
 $(''#DIV_ID'').trigger( "click" );
 expect(''click'').toHaveBeenTriggeredOn(''#DIV_ID'');
 expect(spyEvent).toHaveBeenTriggered();

Pero recibo el error: el evento esperado hizo clic para haberse activado en #DIV_ID

Alguien me ayude a resolver mi problema.

Gracias por adelantado.

Answer 1

Hay algún error de sintaxis en su código:

 var spyEvent = spyOnEvent($(''#DIV_ID''), ''click'');
 $(''#DIV_ID'').trigger( "click" );
 expect(''click'').toHaveBeenTriggeredOn($(''#DIV_ID''));
 expect(spyEvent).toHaveBeenTriggered();

Espero que esto funcione.

Answer 2

He tenido el mismo problema. En mi caso, parece estar relacionado con haber cargado dos versiones diferentes de JQuery, la que se usa internamente por jasmine-jquery (y sus equivalentes y aserciones) y la utilizada por mi sistema bajo prueba.

En mi caso, poner este código en una prueba de jazmín:

    setFixtures(''<a id="hello"></a>'');
    var spyEvent = spyOnEvent(''#hello'', ''click'');
    $(''#hello'').trigger(''click'');
    expect(spyEvent).toHaveBeenTriggered();

hace que la afirmación falle. El problema parece ser que "$" no hace referencia a la versión de jQuery utilizada por "spyOnEvent" de jasmine-jquery. Si cambia "$" en "$ j" para activar el evento, se captura el evento y la afirmación tiene éxito:

    setFixtures(''<a id="hello"></a>'');
    var spyEvent = spyOnEvent(''#hello'', ''click'');
    $j(''#hello'').trigger(''click'');
    expect(spyEvent).toHaveBeenTriggered();

El problema es que si registra controladores de eventos en su código bajo prueba con "$" no se ejecutarán cuando los eventos se desencadenen con "$ j". Entonces, si ejecuta el siguiente código:

    setFixtures(''<a id="hello"></a>'');
    $(''#hello'').on(''click'', function () { console.log("CLICK EVENT"); });
    var spyEvent = spyOnEvent(''#hello'', ''click'');
    $j(''#hello'').trigger(''click'');
    expect(spyEvent).toHaveBeenTriggered();

, ningún mensaje se imprimirá en la consola. Obviamente, si cambia el "$ .on" por un "$ j.on", se mostrará el mensaje.

Lo que es aún más interesante es que, si cambias el dispositivo a un "botón" y tratas de probar la activación de su evento de clic, las dos versiones de "$" y "$ j" serán perfectamente compatibles. Es decir, el código:

    setFixtures(''<button id="hello"></button>'');
    $(''#hello'').on(''click'', function () { console.log("CLICK EVENT"); });
    var spyEvent = spyOnEvent(''#hello'', ''click'');
    $j(''#hello'').trigger(''click'');
    expect(spyEvent).toHaveBeenTriggered();

funcionará perfectamente con su aserción siendo verdadera y la ejecución del ''clic'', incluso si registra el manejador con "$ j" en lugar de "$", o activa el evento con "$" en lugar de "$ J", o cambia ellos en cualquier combinación que desee.

Finalmente, otra solución que parece funcionar y es más simple es usar la biblioteca jquery-simulate como se explica en Cómo puedo imitar un evento de navegador nativo . Este código solo cambia ".trigger" por ".simulate":

    setFixtures(''<a id="hello"></a>'');
    $(''#hello'').on(''click'', function () { console.log("CLICK EVENT"); });
    var spyEvent = spyOnEvent(''#hello'', ''click'');
    $(''#hello'').simulate(''click'');
    expect(spyEvent).toHaveBeenTriggered();

y funciona a la perfección El método ".simulate" debe invocarse en un objeto "$" porque la biblioteca se inyecta en la versión jQuery de "$" en mi caso. Por el contrario, el registro del controlador ".on" podría llamarse por encima de "$" o "$ j" con el mismo comportamiento. Además, el método ".simulate" le permite simular "eventos nativos del navegador" que jQuery por sí solo no puede.