如何测试在其构造函数中对集合调用 fetch 的视图？

Question

我有一个 BackboneView，我在创建时传递了一个集合

  var my_collection = new Collection();
  new MyView({temp: template, collection: my_collection });

在视图内部，在构造函数中对集合调用 fetch() 方法，如下所示

export class MyView extends Backbone.View {

    constructor(options){

      this.collection = options.collection;
      super();
      this.collection.fetch().done(function(resp){
      that.render();
      })
    }
    render(){
    }

}

我进行了（过去式）一系列测试，这些测试 UI/template 像这样

  describe('testing my view', function() {
    it('should have one main child - div 6 ', function() {
      expect(myview.el.children.length).to.equal(1);
    });
  });

但是，由于我现在添加了将集合传递给视图的代码，并在构造函数中对集合调用了 fetch 方法，所以我的所有测试都失败了，因为视图每次都尝试调用 fetch 方法运行测试。即使我传递了一个存根集合，我也必须设置一个 url 并且视图将尝试获取存根集合，从而导致 404

 var gs = class StubCollection extends Backbone.Collection{

   constructor(options){
    this.url = '/blah';
   }
 }

  const drv =   new MyView({temp: template, collection: new gs()});

我需要对视图中的集合调用 fetch（即我不能不使用该代码）。在这种情况下如何继续测试视图？

Answer 1

您可以存根 fetch 方法本身。在 StubCollection 内定义为：

function fetch() {
    return $.Deferred().resolve().promise();
}

根据Backbone's documentation, fetch returns a jqXHR表示发送的请求。

jqXHR 是一个 Promise，它是一个对象，表示一个可能成功或失败的正在进行的过程，并具有称为 done 和 fail 的方法，用于注册回调，以便在成功时调用或分别失败。（如果请求成功则 jqXHR 成功，失败则无法发送或服务器 returned 错误代码）。

在上面的代码中，我们手动创建了一个Deferred object（用于创建promises），并立即将其状态更改为成功（使用resolve）。然后我们 return 它的承诺。因为承诺立即被认为是成功的，所以 done 回调将被立即调用。

Answer 2

这不是最简单的解决方案，但从长远来看绝对是最好的： 您不应从视图中对集合调用 fetch。

视图真的没有告诉集合或模型做什么的事情。视图仅呈现数据 and/or 捕获用户输入。加载所述数据的调用应该在其他地方。根据您喜欢遵循的范例，这可能在控制器或命令中。这将使测试变得容易得多，因为您的视图将更加系统不可知，即他们对何时发生的事情知之甚少。视图、模型、集合和服务应该尽可能简单：测试、重用、扩展和修改更容易。所有特定于应用程序的代码都应该放入您的控制器和命令中。 IE。它们是将与应用程序无关的视图、模型和服务结合到您正在处理的特定应用程序中的粘合剂。

如何测试在其构造函数中对集合调用 fetch 的视图？

how to test a view that calls fetch on a collection in its constructor?

javascript

backbone.js

sinon

chai

karma-mocha