Question

我正在编写一个使用现有插件的插件，我想嘲笑它。

我正在编写的插件看起来像这样：

(function($){
  $.widget("myPlugin",{
    _create: function(){
      var otherControl = $("<div></div>");
      otherControl.pluginWhichShouldBeMocked({foo: "bar"});
      this.element.append(otherControl);
    }
  });
})(jQuery);

我有一个茉莉花测试，看起来像这样：

describe("When creating", function(){
  var element;
  var passedOptions;
  beforeEach(function(){
    jQuery.pluginWhichShouldBeMocked = function(options){
      passedOptions = options;
    }
    element = $("<div></div>");
    element.myPlugin();
  });

  it("should create the other plugin and pass 'bar' to it as the foo parameter", function(){
    expect(passedOptions.foo).toEqual("bar");
  });
});

这行是我试图模拟插件的地方：

jQuery.pluginWhichShouldBeMocked = function(options){
  passedOptions = options;
}

但仍会调用实际的插件实例。

Answer 1

确定。我只是想办法做到这一点，我不确定它是否是最好的，但它适用于我的目的。

我在这样的测试设置中创建了一个模拟插件，并提供了一个方法来检索我可以在断言中使用的选项：

describe("When creating", function(){
  var element;
  var passedOptions;
  beforeEach(function(){
    $.widget("pluginWhichShouldBeMocked",{
      getOptions: function(){
        return this.options;
      }
    });
    element = $("<div id='extenalPlugin'></div>");
    element.myPlugin();
  });

  it("should create the other plugin and pass 'bar' to it as the foo parameter", function(){
    expect(element.find("div#externalPlugin").pluginWhichShouldBeMocked("getOptions").foo).toEqual("bar");
  });
});

Answer 2

我最近使用Bootstrap模式完成了这个并修复了：

beforeEach(()=>{
    jQuery.fn.modal = () => {}
})

describe(()=>{
   \\ ... do your thing
})

afterEach(()=>{
    delete jQuery.fn.modal
})

我如何模拟jQuery插件？

2 个答案: