javascript - 将 $.getJSON 与 jsonp 一起使用时，Sinon.js fakeServer.request.respond 失败

Question

你好，我是 sinon.js 的新手。我正在编写 Jasmine BDD 测试代码。我想制作一个从 flickr 获取照片 的小应用程序。

 describe("with stub", function() {

    beforeEach(function() {
      this.server = sinon.fakeServer.create();
      this.server.autoRespond = true;
      this.server.respondWith(200, {
        "Content-Type": "application/json"
      }, '{"photos":{"page":1, "pages":726, "perpage":5, "total":"3630", "photo":[{"id":"8591804280", "owner":"77921082@N00", "secret":"da96195b4b", "server":"8526", "farm":9, "title":"Pod", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8591810388", "owner":"77921082@N00", "secret":"d94ce346a5", "server":"8509", "farm":9, "title":"Street Plate", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8591801040", "owner":"77921082@N00", "secret":"cb7b1e246a", "server":"8097", "farm":9, "title":"Stone pod", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8590414659", "owner":"77921082@N00", "secret":"fb49a25607", "server":"8094", "farm":9, "title":"Street pole", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8590411479", "owner":"77921082@N00", "secret":"9aab17d3a9", "server":"8370", "farm":9, "title":"Street plate", "ispublic":1, "isfriend":0, "isfamily":0}]}, "stat":"ok"}');
      this.flickrPhotos = this.flickr.photos;
    });

    afterEach(function() {
      this.flickrPhotos = [];
    });

    it("[0].title should be Pod", function() {
      this.flickr.getData(5, true);
      expect(this.flickrPhotos[0].title).toBe("Pod");
    });
  });

下面的代码没有通过测试。返回错误 TypeError: Cannot read property 'title' of undefined。

root.Flickr = (function() {

  function Flickr(number) {
    this.number = number;
    this.photos = [];
  }

  Flickr.prototype.getData = function(number) {
    var _this = this;
    $.getJSON('http://www.flickr.com/services/rest/?jsoncallback=?', {
      format: 'json',
      method: 'flickr.photos.search',
      api_key: '7965a8bc5a2a88908e8321f3f56c80ea',
      user_id: '77921082@N00',
      per_page: number
    }).done(function(data) {
      $.each(data.photos.photo, function(i, item) {
        _this.photos.push(item);
      });
    });
  };
})();

Answer 1

Sinon 无法处理 JSONP 请求，因为它只是 stub XMLHttpRequest 对象。问题是 JSONP 与 XMLHttpRequest 无关。它只是一个脚本标签，被放入 DOM 并使用返回数据调用全局函数。

在您的情况下，您必须 stub $.getJSON 以返回一个 stub ，该 stub 将使用您的结果数据调用它的回调。

var json = {"photos":{"page":1, "pages":726, "perpage":5, "total":"3630", "photo":[{"id":"8591804280", "owner":"77921082@N00", "secret":"da96195b4b", "server":"8526", "farm":9, "title":"Pod", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8591810388", "owner":"77921082@N00", "secret":"d94ce346a5", "server":"8509", "farm":9, "title":"Street Plate", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8591801040", "owner":"77921082@N00", "secret":"cb7b1e246a", "server":"8097", "farm":9, "title":"Stone pod", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8590414659", "owner":"77921082@N00", "secret":"fb49a25607", "server":"8094", "farm":9, "title":"Street pole", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8590411479", "owner":"77921082@N00", "secret":"9aab17d3a9", "server":"8370", "farm":9, "title":"Street plate", "ispublic":1, "isfriend":0, "isfamily":0}]}, "stat":"ok"};

sinon.stub($, 'getJSON').returns({done: sinon.stub().callsArgWith(0, json)})