2

首先，这是工作要求。如果不能以这种方式完成，我需要一个很好的论据。

我必须使用 jasmine 和 sinon 来测试我们的骨干项目。我不知道如何在函数中模拟 jquery 调用。我有一个这样的函数（清理了一点以丢弃无关的调用）：

Project.Views.FormView = Backbone.View.extend({
  sidenavClicked: function(event){



    var sidenav_id = $(event.target).attr('id').split('m')[1];
    var sidenav_num = sidenav_id.split('m')[1];

    var form_id = $('div.active form').attr('id');
    var form_num = form_id.split('m')[1];

    //code for fast scrolling
    this.slideTo(form_num-1, sidenav_num-1);

    return false;
  },
  ...
});

现在我只是想测试一下 slideTo() 被称为这是我的茉莉花规格

describe("Form", function(){
    describe("Carousel", function(){

    it("should call slideTo when navbar is clicked", function(){
        var spy = sinon.spy();
        var formView = new Project.Views.FormView({ el : $('#main'), id : 1});
        formView.bind('slideTo', spy);

        var event = {};
        event.target = "<div id='form1'></div>";

        formView.sidenavClicked(event);
    });
});

错误消息是： TypeError: form_id is undefined in file: .../src/main/webapp/js/views/FormView.js

据我所知，这是因为没有 jQuery 可以匹配的文档。我怎样才能让 form_id 有一个值？

实际的代码确实有效，并且确实做了它应该做的事情。

更新： html 看起来像这样：

<html>
<body>
    <div id="main">
        <ul id="carousel-navbar">
            <li><a id="navlink-form1">Text</a></li>
            ...
        </ul>
        <div id="formCarousel" class=" carousel slide" >
            <div class="active first item">
                <form id="form1" name="question1">
                    ...
                </form>
            </div>
            ...
        </div>
    </div>
</body>
</html>

澄清不完全像这样（实际是 442 行），但结构应该是相关的同义词。

4

2 回答 2

1

问题是您要查找的元素未附加到 DOM。您必须在调用函数之前添加它：

it("should call slideTo when navbar is clicked", function(){
    var spy = sinon.spy();
    var formView = new Project.Views.FormView({ el : $('#main'), id : 1});
    formView.bind('slideTo', spy);
    $('body').append('<div class="active"><form id="form1" /></div>');


    var event = {};
    event.target = "<div id='form1'></div>";

    formView.sidenavClicked(event);
});

还有一些插件可以更轻松地使用 jasmin 处理夹具：jasmine-fixture或jasmine-dom

于 2013-08-11T19:45:56.867 回答
0

这可能看起来有点幼稚，但我还是会指出来。

在我看来，您实际上并没有在任何地方渲染视图。我这么说只是因为您.render()在视图上发布的任何代码都没有调用，而且我看不到任何暗示它在幕后发生的事情，这可能解释了为什么 JQuery 调用的行为方式是这样的。

在 Jasmine 规范中渲染视图通常很简单：

beforeEach(function () {
  // some element you want to render your view into
  $('#testbed').html(view.render().el);
});

form_id可能未定义，因为您要查找的元素不在 DOM 中。你真的能从函数中找到那个元素吗？从测试本身内部？

（另外，因为该函数绑定到一个事件，我个人认为通过触发该事件来调用它可能更有意义 -.click()或者例如 div 上的任何东西 - 而不是显式调用它。）

于 2013-08-11T12:16:27.930 回答