0

我正在测试主干中选择框视图的事件更改，该视图“应该在更改时提供到 router.navigate 的正确路径”。这是场景，如果我在下拉列表中选择一个值，它应该重定向到正确的 url。

这是测试（campaign.test.js）： 

it('should provide the correct path to router.navigate when changed', function() {
    var routeName = 'test_campaign';
    var routerSpy = sinon.spy(Insights.router, 'navigate');

    this.view.$el.bind('change', function() {
      expect(routerSpy).toHaveBeenCalledWith('campaign/' + routeName, true);
    });

    //create the option element holding the test value
    this.view.$el.append($('<option value="' + routeName +'" selected="selected" />'));

    this.view.$el.trigger('change');


    routerSpy.restore();
  });

这是模块（campaign.js）：

DropdownView: Backbone.View.extend({
  tagName: 'select',
  className: 'campaign-list',
  events: {
     'change' : 'navCampaign'
  },


  initialize: function() {
    _.bindAll(this);
    this.collection.on('reset', this.render);
    this.collection.on('add', this.addCampaign);

    //if no campaigns exist then add a dummy placeholder
    if(this.collection.models.length === 0) {
      this.$el.append('<option value="">No Campaigns</option>');
    }

  },


  navCampaign: function() {

    Insights.router.navigate();
  },


  addCampaign: function(campaign) {
    //remove the No Campaigns placeholder when campaigns are added
    var firstChild = this.$el.children(':first');
    if(firstChild.attr('value') === '') {
      firstChild.remove();
    }

    var view = new Insights.Campaign.DropdownItem({ model: campaign });
    var item = view.render().el;
    this.$el.append(item);
  },

  render: function() {
    this.collection.each(this.addCampaign);
    return this;
  }
})

在我的测试中，我创建了一个新的 OPTION 元素，然后设置了一个选中属性的值。

如何将其作为更改事件的 currentTarget 传递并将其发送到 trigger()？

或者有没有更简单的方法来做到这一点？

我得到这个测试失败。错误：预期函数已使用“campaign/test_campaign”调用，true。

4

3 回答 3

1

您的测试必须如下所示：

  it('should provide the correct path to router.navigate when changed', function() {
    var routeName = 'test_campaign';
    var routerSpy = sinon.spy(Insights.router, 'navigate');
    var view = new DropdownView();

    //create the option element holding the test value
    this.view.$el.append($('<option value="' + routeName +'" selected="selected" />'));

    this.view.$el.trigger('change');
    expect(routerSpy).toHaveBeenCalledWith('campaign/' + routeName, true);

    routerSpy.restore();
  });

首先，您必须在测试中创建视图的实例，并且必须在创建视图之前创建间谍。两者都可以在beforeEach块中完成。

当您在事件处理程序中添加期望代码时，可能会在调用路由器上的导航方法之前调用它。因为两个处理程序被添加到侦听器中，一个用于在路由器上调用导航，另一个用于测试它是否在路由器上被调用。由于您无法确保首先调用哪个，因此当首先调用测试中的侦听器时，测试将失败。

也许最好通过将带有数据的集合传递给视图来测试它，而不是直接在测试中设置视图元素的 DOM。因此，您还将测试您的initializeandaddData方法是否有效。

于 2012-09-09T10:16:16.840 回答
1

以下是使此测试通过的更改。:)

我在campaign.test.js 中更改了变量routeName 的值

从 

 var routeName = 'test_campaign';

至

 var routeName = this.view.$el.val();

然后将此测试实施到campaign.js

navCampaign: function() {
    var newRoute = 'campaign/' + this.$el.val();
    Insights.router.navigate(newRoute, true);
  }

我得到了这个绿色。:)

于 2012-09-11T03:56:08.347 回答
0

抱歉，我想在队友的帮助下把这件事说清楚。

var routeName = this.view.$el.val();指向空

通过使价值动态化，它将失去测试的有效性，

所以我放回var routeName = 'test_campaign'.

这个测试的重点是根据一组预定义的输入来指定它所期望的值。

于 2012-09-13T02:27:26.883 回答