jquery - tothrowerror - karma unit tests




Spiare i selettori JQuery in Jasmine (4)

È possibile creare il proprio elemento DOM falso e quindi usare $ ('# elementid') [0] come al solito

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

Sto testando alcuni JavaScript con Jasmine e vorrei spiare (mock) un elemento del DOM a cui si accede da un selettore jQuery.

Le mie specifiche sono:

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

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

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

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

});

Nel mio specrunner.html ho:

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

Sfortunatamente la specifica fallisce con:

dovrebbe essere in grado di deridere la chiamata DOM Expected 'foo' a uguale 'bar'.


Ho scritto una funzione di supporto, che accetta un array di coppie id / value.

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];
                }
            }
        })
    }
}

Ogni coppia indica la funzione faker per cui id, quale valore deve essere restituito se la funzione jQuery-val () - viene chiamata con il selettore id. È usato così:

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

Se $('#id1').val() viene chiamato nella funzione sotto test, la funzione fake restituisce value1 , se $('#id2').val() viene chiamato restituisce value2 . Quindi non devi armeggiare con il DOM, devi solo prendere in giro la funzione jQuery-val () e simulare i valori di ritorno. Altre funzioni di jQuery potrebbero probabilmente essere derise allo stesso modo.


Penso che ci sia un cambiamento nella mia versione di jasmine (2.0.3), quindi la soluzione di Alex York non ha funzionato così com'è, ma sicuramente mi ha dato un percorso. Quindi ecco il codice jquery delle specifiche di lavoro che deve essere testato

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

ecco la parte specifica del gelsomino

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

Una specifica più granulare potrebbe usare un altro livello di simulazione come

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

Questa riga è sbagliata:

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

La funzione spyOn di Jasmine si aspetta due parametri. Il primo è un oggetto esistente. Il secondo è un nome di funzione come una stringa. Stai trasmettendo correttamente il nome della funzione come stringa ("val") ma non stai passando un oggetto esistente come primo parametro.

$("#Something")

... non è un oggetto esistente. È il risultato (il valore di ritorno) di un selettore jQuery. Più specificamente, restituirà un oggetto jQuery che rappresenta i nodi corrispondenti, un po 'come un array di risultati.

$

... è un oggetto esistente.

$.fn

... è un oggetto esistente.

$("#Something")

... non è un oggetto esistente: è il risultato di un selettore jQuery .

Questo funzionerà:

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");
});






jasmine