在Jasmine中监视JQuery选择器

Question

我正在使用Jasmine对一些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" />

不幸的是,规范失败了:

应该能够模拟DOM调用预期'foo'等于'bar'.

Answer 1

这条线错了:

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

Jasmine的spyOn函数需要两个参数.第一个是现有对象.第二个是函数名称作为字符串.您正确地将函数名称作为字符串("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");
});

Answer 2

好像我找到了很好的解决方案

    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中的例子.

Answer 3

问题是两个调用$返回两个不同的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.