starts - Espiando a JQuery Selectors en Jasmine

jquery selector id contains

Question

Estoy probando algunas unidades de JavaScript con Jasmine y deseo espiar (simular) un elemento del DOM al que accede un selector de jQuery.

Mi especificación es:

it("should be able to mock DOM call", function() {

    spyOn($("#Something"), ''val'').andReturn("bar");

    result = $("#Something").val();

    expect(result).toEqual("bar");

});

En mi specrunner.html tengo:

<input type="hidden" id="Something" value="foo" />

Lamentablemente, la especificación falla con:

debería poder simular la llamada de DOM ''Foo'' esperado para igualar ''bar''.

Answer 1

Creo que hay un cambio en mi versión de jazmín (2.0.3), por lo tanto, la solución de Alex York no funcionó como está, pero definitivamente me dio un camino. Así que aquí está el código de especificación de trabajo que se va a probar

$(''someSelector'').data(''someAttribute'').enable();

aquí está la parte de la especificación del jazmín

var mockJqueryObject = { enable:function(){},disable:function(){}};
//this mocks the .data(''someAttribute'') in above code.
spyOn($.fn, "data").and.returnValue(mockSelectBoxObject); 

Una especificación más granular podría usar otro nivel de simulación como

spyOn(mockJqueryObject,"enable")
spyOn(mockJqueryObject,"disable")

Answer 2

El problema es que las dos llamadas a $ devuelven dos nodos jQuery envueltos diferentes.

Esto debería funcionar:

it("should be able to mock DOM call", function(){

  // var node = $("Something");
  // spyOn(node, ''val'').andReturn(''bar'');

  // expect(node.val()).toEqual(''bar'');
  var node = $("Something");
  spyOn(node, ''val'').and.returnValue(''bar'');

  expect(node.val()).toEqual(''bar'');
});

La próxima vez, la ayuda es más frecuente en la lista de correo de Jasmine: [email protected].

Answer 3

Escribí una función auxiliar, que acepta una matriz de id / pares de valores.

var jasminTestHelper = {
    spyOnValAndFake : function(obj) {
        var i, j;
        spyOn($.fn, ''val'').andCallFake(function() {
            for ( i = 0, j = obj.length; i < j; i++) {
                if (this.selector === ''#'' + obj[i][0]) {
                    return obj[i][1];
                }
            }
        })
    }
}

Cada par le dice a la función faker qué ID, qué valor debe devolverse si se llama a la función jQuery-val () - con el selector de id. Se usa así:

jasminTestHelper.spyOnValAndFake([["id1", "value1"], ["id2", "value2"]]);

Si $(''#id1'').val() se llama en su función bajo prueba, la función falsa devuelve value1 , si se llama $(''#id2'').val() devuelve value2 . Por lo tanto, no necesita jugar con el DOM, simplemente se burla de la función jQuery-val () - y simula los valores de retorno. Otras funciones jQuery probablemente podrían burlarse de la misma manera.

Answer 4

Esta línea es incorrecta:

spyOn($("#Something"), ''val'').andReturn("bar");

La función spyOn de Jasmine espera dos parámetros. El primero es un objeto existente. El segundo es un nombre de función como una cadena. Está pasando correctamente el nombre de la función como una cadena ("val") pero no está pasando un objeto existente como primer parámetro.

$("#Something")

... no es un objeto existente. Es el resultado (el valor de retorno) de un selector jQuery. Más específicamente, devolverá un objeto jQuery que representa los nodos coincidentes, algo así como una matriz de resultados.

$

... es un objeto existente.

$.fn

... es un objeto existente.

$("#Something")

... no es un objeto existente, es el resultado de un selector jQuery .

Esto funcionará:

it("should be able to mock DOM call", function () {
    //spyOn($.fn, "val").andReturn("bar"); //pre-jasmine 2.0 syntax
    spyOn($.fn, "val").and.returnValue("bar"); //Jasmine 2.0 Syntax
    var result = $("#Something").val();
    expect(result).toEqual("bar");
});

Answer 5

Parece que encontré una buena solución

    it "should open past statuses", ->
      # We can''t use $(''.past'') here cause each time $(''.past'') called it returns different objects
      # so we need to store spy in variable
      showSpy = spyOn($.fn, ''show'')
      # do the stuff
      $(''.show-past'').click()
      # then check if ''show'' action was called
      expect($.fn.show).toHaveBeenCalled()
      # and if it realy our object
      expect(showSpy.mostRecentCall.object.selector).toEqual(''.past'')

Esto no se basa en tu código, pero espero que esto pueda ayudar a alguien. Y, sí, ejemplo en CoffeScript.

Answer 6

Podrías crear tu propio elemento DOM falso y luego usar $ (''# elementid'') [0] como de costumbre

addFakeElementWithId = function (elementId) {
      var fake = document.createElement("div");
      fake.setAttribute("id", elementId);
      document.body.appendChild(fake);
   };