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

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

本文关键字：集合 调用 fetch 视图 构造函数 何测试 测试      更新时间：2023-09-26

我有一个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/模板

  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(即，我不能不使用该代码(。在这种情况下，我如何继续测试这种观点？

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

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

根据Backbone的文档，fetch返回一个jqXHR，它表示发送的请求。

jqXHR是一个Promise，它是一个表示正在进行的过程的对象，该过程可能成功也可能失败，并且具有名为done和fail的方法，用于分别注册成功或失败时要调用的回调。(如果请求成功但失败，则jqXHR成功—无法发送或服务器返回错误代码(。

在上面的代码中，我们手动创建了一个Deferred对象(用于创建promise(，并立即将其状态更改为success(使用resolve(。然后我们回报它的承诺。由于promise立即被认为是成功的，因此将立即调用done回调。

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

视图实际上不需要告诉集合或模型该做什么。视图只显示数据和/或捕获用户输入。加载所述数据的调用应该在其他地方。根据你喜欢遵循的模式，这可能是在控制器或命令中。这将使测试变得容易得多，因为你的观点将更加系统不可知，即他们对何时发生的事情了解较少。视图、模型、集合和服务应该尽可能地愚蠢：这样更容易测试、重用、扩展和修改。所有特定于应用程序的代码都应该进入控制器和命令中。也就是说，它们是将与应用程序无关的视图、模型和服务结合到您正在处理的特定应用程序中的粘合剂。

相关文章：