Espionnage des sélecteurs JQuery dans Jasmine

Question

Je suis en train de tester du javascript avec Jasmine et je souhaite espionner un élément du DOM auquel un sélecteur jquery a accès.

Mon spec est:

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

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

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

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

});
 

Dans mon specrunner.html j'ai:

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

Malheureusement, la spécification échoue avec:

 should be able to mock DOM call Expected 'foo' to equal 'bar'.
 

Des idées?

La gentillesse,

ré

Answer 1

Cette ligne est fausse:

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

Jasmine est spyOn fonction attend deux paramètres. Le premier est un objet existant. Le second est un nom de fonction en tant que chaîne. Vous êtes correctement en passant le nom de la fonction comme une chaîne de caractères ("val"), mais vous n'êtes pas en passant un objet existant en tant que premier paramètre.

$("#Something")

...n'est pas un objet existant. C'est le résultat (la valeur de retour) d'un sélecteur jQuery. Plus précisément, il retourne un objet jQuery représentant les paires de nœuds, un peu comme un tableau de résultats.

$

...est un objet existant.

$.fn

...est un objet existant.

$("#Something")

...n'est pas un objet existant - c'est le résultat d'un sélecteur jQuery.

Cela va fonctionner:

it("should be able to mock DOM call", function () {
    spyOn($.fn, "val").andReturn("bar");
    var result = $("#Something").val();
    expect(result).toEqual("bar");
});

Answer 2

On dirait que j'ai trouvé une bonne solution

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

Ce n'est pas basé sur votre code mais j'espère que cela peut aider quelqu'un. Et, oui, exemple dans CoffeScript.

Answer 3

Le problème est que les deux appels à $ renvoient deux nœuds enveloppés dans jQuery différents.

Cela devrait fonctionner:

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

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

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

La prochaine fois, l’aide est plus présente sur la liste de diffusion Jasmine: jasmine-js@googlegroups.com.

Answer 4

Vous pouvez créer votre propre faux élément DOM puis utiliser $ ('# elementid') [0] comme d'habitude

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

Answer 5

J'ai écrit un aide-fonction, qui accepte un tableau d'id/valeur-paires.

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

Chaque paire raconte l'faker-fonction pour laquelle l'id, la valeur doit être renvoyée si le jQuery-val()-fonction est appelée avec l'id-sélecteur. Elle s'utilise comme ceci:

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

Si $('#id1').val() est appelée dans votre fonction en cours de test, le faux-fonction renvoie value1, si $('#id2').val() est appelée, elle retourne value2. Si vous n'avez pas besoin de jouer avec les DOM, vous venez de se moquer de l'jQuery-val()-fonction et simuler le retour des valeurs. D'autres jQuery-fonctions pourraient probablement moqué de la même façon.