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

Question

我目前正在处理 PeepCode video on Backbone.js但尝试用 CoffeeScript 而不是纯粹的 JavaScript 来编写所有内容。

到目前为止一切顺利，除了当我尝试对代码运行 Jasmine 测试时遇到一些类型错误:

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 true 因此窗口确实可以访问变量和方法。

Answer 1

原因是范围界定，是的。

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

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

从这个 Angular 来看，您在测试中调用 this.model 的想法是正确的。问题是您需要将 model 附加到 this 才能做到这一点。足够简单:

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

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