0

我有一个 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 方法。即使我传递了存根集合，我也必须设置 aurl并且视图将尝试获取存根集合，从而导致 404

 var gs = class StubCollection extends Backbone.Collection{

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

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

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

4

2 回答 2

3

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

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

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

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

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

于 2015-09-10T17:08:54.290 回答
2

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

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

于 2015-09-11T12:24:00.207 回答