testing - 如何测试 Backbone View 事件是否将项目添加到集合中？

Question

我正在尝试在以下主干 View 上指定点击事件处理程序:

class ItemView extends Backbone.View
  events:
    "click": "addToCurrentlyFocusedList"

  addToCurrentlyFocusedList: (e) =>
    window.currentlyFocusedList.add @model

这是我的:

describe "ItemView", ->
  beforeEach ->
    @item = new Backbone.Model
      id: 1
      name: "Item 1"
    @view = new ItemView model: @item

  describe "when clicked", ->
    it "adds the item to the currently focused list", ->
      window.currentlyFocusedList = sinon.stub()
      window.currentlyFocusedList.add = sinon.stub()
      @view.$el.trigger "click"
      expect(window.currentlyFocusedList.add).toHaveBeenCalledWith @item

这行得通，但出于某种原因让我很困扰。也许感觉太像我在测试实现了。

我看到的一个可能的改进是将点击事件处理程序、规范和 currentlyFocusedList 移动到一个名为 AppView 的新 View 中:

describe "AppView", ->
  beforeEach ->
    @view = new AppView

  it "adds a clicked item to the currently focused list", ->
    $clickedItem = @view.$(".item:first")
    $clickedItem.trigger "click"
    expect(@view.currentlyFocusedList.pluck('id')).toInclude $clickedItem.attr('data-id')

很高兴这也消除了 window 污染。它还测试该项目是否真的添加到集合中。除此之外，将事件处理程序和规范移动到 AppView 中是否比我的第一种方法更好？有没有更好的方法来解决这个问题？

Answer 1

我会用一个虚拟集合来 stub window.currentlyFocusedList，并测试它是否被添加到那里。沿着这些线的东西:

beforeEach ->
  @collection = new Backbone.Collection()
  spyOn(window, 'currentlyFocusedList').andReturn @collection

it "adds the item to the collection", ->
  @view.$el.click()
  expect(@collection).toInclude @item

这会测试您的代码实际做了什么；将项目添加到集合如何影响 View 的代码存在于其他地方，应该在其他地方进行测试。