单元测试 - 主干.js不使用 Konacha 呈现视图

Question

我想用konacha为我的骨干.js应用程序做一些DOM测试。我在下面阅读了一些关于科纳查的条目。

• https://github.com/markbates/informit_articles/blob/master/article_2_konacha/article_2_konacha.md
• http://www.slideshare.net/markykang/testing-javascriptcoffeescript-with-mocha-and-chai

这些条目表明我应该创建一个视图并将其放在页面对象中，如下所示。

#= require spec_helper
describe "MyApp.Views.Relationships", ->
  beforeEach ->
  @view = new MyApp.Views.Relationships()
  @page.html(@view.el)
  console.log @view.el

问题：但是控制台.log上面的代码中显示了 @view.el 的"未定义"，尽管代码在实践中工作正常。

如果有人可以帮助我，我真的很感激。

这里有一些感兴趣的代码。

spec_helper.js.coffee
#= require application
#= require_tree ./support
mocha.ui('bdd')
mocha.ignoreLeaks()
beforeEach ->
  @page = $("#konacha")
  @sandbox = sinon.sandbox.create()
afterEach ->
  @sandbox.restore()

　

views/users/relationships.js.coffee
class MyApp.Views.Relationships extends Backbone.View
  el: '#relation-form'
  template: JST['users/relationships']
  initialize: ->
    console.log "init"
    @render()
    console.log @el

  render: ->
    @img = $('#loading-image').html()
    $(@el).html(@template({img: @img}))
    this

　

relationships.jst.eco
<button class="btn" disabled="disabled"><%- @img %></button>

　

profile.html.erb(extracted)
   #snip#
            <% if signed_in? and @user != current_user %>
              <div id="relation-form" class="action-button"></div>
            <% end %>
   #snip#
    <script type="text/template" id="loading-image">
      <%= image_tag('ajax-loader.gif') %>
    </script>
    <script type="text/javascript">
      $(function () {
        new MyApp.Views.Relationships()
      });
    </script>

我想用这些代码做的是像Twitter一样处理关注按钮。

提前谢谢。

Answer 1

在规范本身中包含视图所需的模板。像这样：

#= require spec_helper
#= require templates/users/relationships
describe "MyApp.Views.Relationships", ->
    beforeEach ->
    @view = new MyApp.Views.Relationships()
    @page.html(@view.el)
    console.log @view.el

或者无论您的模板位于何处。

模板可能仍未定义。如果是这种情况，则可能是在模板之前加载了应用程序。因此，如果是这种情况，您也可以删除spec_helper中的 require 应用程序，并仅在每个规范中专门包含您正在测试的位。