javascript - Jasmine: stub ajax 成功调用并向函数传递参数

Question

我想在 Jasmine 中编写一个测试，希望在单击按钮时在浏览器中显示一个字符串，这会触发一个 AJAX 调用，该调用从 API 返回一个 JSON 对象，然后在其上运行一个函数，以提取所需数据。

使用 Jasmine Ajax 文档，我提出了以下解决方案，它正在运行，但我注意到此测试中的一个弱点。

beforeEach(function(){
    jasmine.getFixtures().fixturesPath = '.';
    loadFixtures('thermostat.html');
  });

describe("displaying weather from open weather map api", function() {

  it("can display current temp for London", function(){
    jasmine.Ajax.install();
    var weatherobject = {"main": {"temp": 12.09}}
    jasmine.Ajax.stubRequest('http://api.openweathermap.org/data/2.5/weather').andReturn({
      success: loaddata(weatherobject)
    });
    $("#London").click();
    expect("#weatherapidata").toContainHtml("12.09");
    jasmine.Ajax.uninstall();
  });
});

下面是它正在测试的 javascript 和 jQuery。如果此代码的成功响应中的函数内容更改为 loaddata 以外的内容，测试仍然会通过，因为在测试中也调用了 loaddata，因为我不知道如何在测试中向成功函数传递 weatherobject 的参数。

$(document).ready(function(){

  $('#London').click(function(){
    $.ajax({
      url: "http://api.openweathermap.org/data/2.5/weather",
      data: {
        q:"London",
        units:"metric",
        APPID: weatherapikey
      },
      success: function(data){
        loaddata(data);
      }
    });
  });
});

function loaddata(data) {
  $("#weatherapidata").text(data.main.temp);
};

因此我的问题是；是否可以构造 Jasmine 测试 stub 以在成功响应中将 function 的 data 参数传递给 weatherobject 的参数？

我的想法是通过以下方式在 responseText 中将对象作为字符串传递

jasmine.Ajax.stubRequest('http://api.openweathermap.org/data/2.5/weather').andReturn({
  responseText: weatherobject
}); 

(我也尝试过 JSON.stringify(weatherobject) 作为这种格式的 responseText 回调)但我无法让它工作，因此我的上述解决方案是解决方法。

Github link to this project

我也添加到jsfiddle但是目前我找不到与 jsfiddle 一起使用的 jasmine-jquery cdn，因此“toContainHTML”抛出一个不是函数错误。但是，可以在 HTML 顶部按钮上方的行中看到 stub 的响应。

Answer 1

这blog帖子指导我使用一种稍微不同的方式来构建测试，它通过向成功回调提供 JSON 对象来按要求工作。通过监视 ajax 调用，然后使用 mostRecent() 处理 $("London").click() ajax 函数上的成功回调并为其提供 JSON目的。代码中的success回调能够接收mock并操作对象，具​​体实现如下:

it("can send a GET request for weather data", function(){
  spyOn($, 'ajax');
  var weatherobject = {"main" : {"temp" : 12.09}}
  $("#London").click();
  $.ajax.calls.mostRecent().args[0].success(weatherobject);
  expect("#weatherapidata").toContainHtml("12.09")
});