如何使用 Jasmine BDD 创建 ajax 函数的存根

Question

我正在努力寻找有关如何使用 Jasmine BDD 伪造 ajax 调用的任何示例？

我有一个自定义的 ajax 函数，其工作原理如下...

ajax({
    url: 'JSON.php',
    dataType: 'json',           
    onSuccess: function(resp) {
        console.log(resp);
    }
});

...并且我不知道如何创建一个存根来伪造调用实际的 ajax 函数。

我想避免调用 ajax 函数，因为如果对服务器的真正 ajax 调用需要一些时间来响应，并且我的测试套件中有大量规格，那么它可能会减慢我的测试套件的速度。

我听说您可以使用 spyOn(namespace, 'ajax') 但这很烦人，因为它要求我将我的 ajax 函数包装在一个对象中只是为了使用 spyOn 函数（但无论如何我无法遵循，因为我找不到任何伪造 ajax 调用的具体示例）。

我还听说您可以使用 createSpy() ，但文档也不是很有帮助（GitHub 上相应的 wiki 也不是）。

任何解释如何使用间谍创建虚假 ajax 调用的帮助将不胜感激！

Answer 1

您可以使用SinonJS模拟框架，该框架在假服务器中构建。您可以轻松地将它与茉莉花一起使用：

beforeEach(function() {
        server = sinon.fakeServer.create();
        server.respondWith([200, { "Content-Type": "text/html", "Content-Length": 2 }, "OK"])
});

顺便说一句。如果您的 ajax 函数位于全局命名空间中，为什么不调用 spyOn(window, 'ajax')

Answer 2

对于单个函数，您可以使用 'createSpy'：

/*var */ajax = createSpy('foo');

var 不存在，因为您想重新定义它，但随后要求您定义此间谍的块绑定到实际的相同作用域ajax 已定义。或者，如果您对此感到困惑，请使用 spyOn(window, foo)，因为您无论如何都在浏览器中测试它。

有关详细信息，请参阅此答案。

关于 ajax 调用，请参阅异步支持部分 新文档，或者更好地使用时钟：

window.ajax = function() {};

var response;

var ajaxSpy = spyOn(window, 'ajax').andCallFake(function(url, callback) {
   setTimeout(function() { callback({ 'foo': 'bar' }); }, 1000);
});

jasmine.Clock.useMock();

function callback(resp) { response = resp;  }

ajax('fake.url', callback);

jasmine.Clock.tick(1500);

expect(ajaxSpy).toHaveBeenCalled();
expect(response).toBeDefined();
expect(response.foo).toBeDefined();

Answer 3

如果您同意不使用间谍，而是使用插件 jasmine-ajax。要模拟单个规范，请使用 withMock：

  it("allows use in a single spec", function() {
    var onSuccess = jasmine.createSpy('success');
    jasmine.Ajax.withMock(function() {
      ajax({
            url: 'JSON.php',
            dataType: 'json',           
            onSuccess: onSuccess
      });
      expect(onSuccess).not.toHaveBeenCalled();

      jasmine.Ajax.requests.mostRecent().respondWith({
        "status": 200,
        "responseText": '{"some": "json"}'
      });

      expect(onSuccess).toHaveBeenCalledWith('{"some": "json"}');
    });
  });

仅当您使用 respondWith 时才会发送响应。上面的链接有一些如何安装的说明