javascript - Jasmine 测试 .load() 以获取调用的 URL

Question

我有一个加载模板的函数，我想检查调用的 URL 是否正确。

因为除了监视 ajax 调用之外我找不到任何信息，所以我假设 .load() 调用也是一样的。我正在使用 Jasmine 2.4.1

函数

function templateLoader() {
    var templateURL = '/path/to/template.html';
    $('#myElement').load(templateURL, function(response, status, xhr) {
        if (status === "error") {
            common.templateError(templateURL, xhr);
        } else {
            ns.successFunction();
        }
    });
}

Jasmine 测试

var templateURL = '/path/to/template.html';
spyOn($('#myElement'), "load");
templateLoader(); // call the function
expect($('#myElement').load.calls.mostRecent().args[0]["url"]).toEqual(templateURL);

当我运行此测试时，出现以下错误:

TypeError: Cannot read property 'mostRecent' of undefined

有没有其他方法可以做到这一点？我还想检查是否正在调用成功函数，但在检查 URL 是否正确之前我不能这样做。

Answer 1

一些观察:

• 您的加载是一个 ajax 函数，因此您必须 spyOn $.ajax而不是 $(#myElement).load
• 您不能同时检查调用 URL 和 successCallBack无需模拟 ajax 函数本身的时间。这是因为你的successCallback 只有在你得到响应后才会执行服务器，同时您的测试运行。
• 因此，诀窍是模拟 ajax 调用本身并调用 fakeFunction 来解决 promise ，这实际上会在运行时解决成功值，即同步 - 这有助于您的期望。

注意:我用的是 jasmine 2.5

下面的代码说明了上面提到的所有要点。要查看实际效果，请联系 fiddle here

function templateLoader(templateURL) {
  $('#myElement').load(templateURL, null, function(response, status, xhr) {
    if (status === "error") {
      common.templateError(templateURL, xhr);
    } else {
      successFunction();
    }
  });
}

successFunction = function() {
  console.log("This is a success Function");
}

describe("spec to test ajax url", function() {
  it('test load call url', function() {
    spyOn($, 'ajax').and.callThrough();
    spyOn(window, 'successFunction').and.callThrough();
    templateLoader("https://jsonplaceholder.typicode.com/posts/1");
    expect($.ajax.calls.mostRecent().args[0]["url"]).toEqual("https://jsonplaceholder.typicode.com/posts/1");    
  });

  it('test success function', function(){
    spyOn(window, 'successFunction').and.callThrough();
    spyOn($, 'ajax').and.callFake(function(e) {
      return new $.Deferred().resolve({}).promise();
    });
    templateLoader("https://jsonplaceholder.typicode.com/posts/1");
    expect($.ajax.calls.mostRecent().args[0]["url"]).toEqual("https://jsonplaceholder.typicode.com/posts/1");    
    expect(window.successFunction).toHaveBeenCalled();
    });
});