使用 Jasmine 在 CoffeeScript 中测试 Backbone.js 时出现类型错误

Question

我目前正在浏览 Backbone.js 上的 PeepCode 视频，但尝试将其全部编写在 CoffeeScript 中而不是纯粹的 JavaScript。

到目前为止一切顺利，除了当我尝试对代码运行 Jasmine 测试时遇到一些 TypeErrors：

TypeError: Cannot call method 'isFirstTrack' of undefined
TypeError: Cannot call method 'get' of undefined

我的 CoffeeScript/Backbone 文件如下所示：

jQuery ->
  class window.Album extends Backbone.Model
    isFirstTrack: (index) ->
    index is 0

  class window.AlbumView extends Backbone.View
    tagName:    'li'
    className:  'album'

    initialize: ->
      @model.bind('change', @render)
      @template = _.template $('#album-template').html()     
    render: =>
      renderedContent = @template @model.toJSON()
      $(@el).html(renderedContent)
      return this

Jasmine 测试规范如下：

var albumData = [{
  "title":  "Album A",
  "artist": "Artist A",
  "tracks": [
    {
        "title": "Track A",
        "url": "/music/Album A Track A.mp3"
    },
    {
        "title": "Track B",
        "url": "/music/Album A Track B.mp3"
    }]
}, {
  "title": "Album B",
  "artist": "Artist B",
  "tracks": [
    {
        "title": "Track A",
        "url": "/music/Album B Track A.mp3"
    },
    {
        "title": "Track B",
        "url": "/music/Album B Track B.mp3"
  }]
}];

describe("Album", function () {

  beforeEach(function () {
    album = new Album(albumData[0]);
  });

  it("creates from data", function () {
    expect(this.album.get('tracks').length).toEqual(2);
  });

  describe("first track", function() {
    it("identifies correct first track", function() {
      expect(this.album.isFirstTrack(0)).toBeTruthy();
    })
  });

});

我猜问题与以下内容有关CoffeeScript 将所有内容包装在一个函数中。当我从等式中删除 jQuery 时，它工作得很好。 奇怪的是，尽管 Jasmine 告诉我 TypeError: Cannot call method 'isFirstTrack' of undefined if I run album.isFirstTrack(0) in the console on the page it returns < code>true 因此窗口确实可以访问变量和方法。

Answer 1

原因是范围界定，是的。

当您声明不带 var 关键字的 album 变量且未将其附加到另一个对象时，您将在全局范围内创建一个变量。

这是一个坏主意。你确实想限制你创建的全局对象的数量，因为另一块 JavaScript 很容易覆盖你的数据，或者导致冲突等。

你在测试中调用 this.model 的想法从这个角度来说是正确的。问题是您需要将 model 附加到 this 才能做到这一点。很简单：

  beforeEach(function () {
    this.album = new Album(albumData[0]);
  });

您所要做的就是说 this.album = ... 就完成了。现在您的测试将能够找到 this.album 并且一切都应该正常。

Answer 2

（注意：我相信 Derick 的答案是正确的 - 它解释了 TypeError: Cannot call method 'isFirstTrack' of undefined 消息 - 但这个答案也可能是相关的。）

你说

当我从等式中删除 jQuery 时，它工作得很好。

这意味着如果您删除 jQuery -> 行，那么您的测试就会通过？如果是这样的话，那就不是范围问题了；这是一个代码顺序问题。当您将函数传递给 jQuery 时，该函数在文档准备好之前不会执行。同时，您的测试将在定义 Album 和 AlbumView 类之前立即运行。

没有理由使用 jQuery -> 包装器，因为您的类定义不依赖于任何现有的 DOM 元素。