ジャスミンのjQueryセレクターをスパイします

StackOverflow https://stackoverflow.com/questions/5337481

  •  26-10-2019
  •  | 
  •  

質問

私はジャスミンを使用してJavaScriptをいくつかテストしており、jQueryセレクターからアクセスされるDOMの要素を（模擬）スパイしたいと考えています。

私の仕様は次のとおりです。

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

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

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

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

});

私のspecrunner.htmlで私は持っています：

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

残念ながら、仕様は次のことに失敗します。

予想される「foo」に等しい「foo」を「bar」に呼び出すことができるはずです。

役に立ちましたか？

解決

この行は間違っています：

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

JasmineのSpyon関数は2つのパラメーターを期待しています。 1つ目は既存のオブジェクトです。 2番目は文字列としての関数名です。関数名を文字列（ "val"）として正しく渡しますが、既存のオブジェクトを最初のパラメーターとして渡すことはありません。

$("#Something")

...既存のオブジェクトではありません。これは、jQueryセレクターの結果（返品値）です。より具体的には、一致したノードを表すjQueryオブジェクトを返します - 一連の結果のようなものです。

$

...既存のオブジェクトです。

$.fn

...既存のオブジェクトです。

$("#Something")

...は いいえ 既存のオブジェクト - そうです jQueryセレクターの結果.

これは機能します：

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

他のヒント

良い解決策を見つけたようです

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

これはあなたのコードに基づいていませんが、これが誰かを助けることを願っています。そして、はい、coffescriptの例。

問題は、2つの呼び出しが2つの異なるjQueryで巻きつけられたノードを返すことです。

これは機能するはずです：

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

次回は、JasmineのメーリングリストであるJasmine-js@googlegroups.comで、ヘルプがより一般的です。

あなたはあなた自身の偽のdom要素を作成してから、通常どおり$（ '＃elementid'）[0]を使用できます 

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

私は、ID/値ペアの配列を受け入れるヘルパー機能を書きました。 

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

各ペアは、jQuery-val（） - 関数がIDセレクターで呼び出された場合、どのIDを返す必要があるかをFaker機能に伝えます。このように使用されます：

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

もしも $('#id1').val() テスト中の機能で呼び出され、偽の機能が返されます value1, 、 もしも $('#id2').val() それが返されると呼ばれています value2. 。したがって、domをいじる必要はありません。Jquery-val（） - 機能をmock笑し、返品価値をシミュレートします。他のjQuery-Functionsはおそらく同じようにock笑する可能性があります。

私のジャスミンバージョン（2.0.3）には変化があると思います。したがって、アレックスヨークによる解決策はそのまま機能しませんでしたが、間違いなく私に道を与えてくれました。これがテストされるべき作業仕様jQueryコードです 

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

これがジャスミンのスペック部分です 

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

より粒状の仕様は、別のレベルのモックを次のように使用できます 

spyOn(mockJqueryObject,"enable")
spyOn(mockJqueryObject,"disable")
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top