Backbone.js I'；我是jasmine sinon的TDD主干网新手。主干单元测试中的更改事件

我正在对主干中的selectbox视图进行事件更改测试，该视图是“应提供到路由器的正确路径。更改时导航”。这是一个场景，如果我在下拉列表中选择一个值，它应该重定向到正确的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();
  });

it（'应提供到路由器的正确路径。更改时导航'，函数（）{
var routeName=‘测试活动’；
var routerSpy=sinon.spy（Insights.router，“导航”）；
this.view.$el.bind（'change'，function（））{
expect（routerSpy）.toHaveBeenCalledWith（'campaign/'+routeName，true）；
});
//创建保存测试值的选项元素
this.view.$el.append（$（''）；
此.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;
  }
})

DropdownView:Backbone.View.extend({
标记名：“选择”，
类名：“活动列表”，
活动：{
“更改”：“navCampaign”
},
初始化：函数（）{
_.bindAll（这个）；
this.collection.on（'reset'，this.render））；
this.collection.on（'add'，this.addCampaign）；
//如果不存在活动，则添加虚拟占位符
if（this.collection.models.length==0）{
本.$el.append（‘无活动’）；
}
},
navCampaign:函数（）{
Insights.router.navigate（）；
},
addCampaign:功能（活动）{
//添加活动时删除“无活动”占位符
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；
本.$el.附加（项目）；
},
render:function（）{
this.collection.each（this.addCampaign）；
归还这个；
}
})

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

如何将其作为更改事件的currentTarget传递并发送给trigger（）

还是有更简单的方法

---

我觉得这次考试不及格。错误：预期已使用“活动/test\u活动”调用函数，true。

您的测试必须如下所示：

  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();
  });

it（'应提供到路由器的正确路径。更改时导航'，函数（）{
var routeName=‘测试活动’；
var routerSpy=sinon.spy（Insights.router，“导航”）；
var view=new-DropdownView（）；
//创建保存测试值的选项元素
this.view.$el.append（$（''）；
此.view.$el.trigger（'change'）；
expect（routerSpy）.toHaveBeenCalledWith（'campaign/'+routeName，true）；
routerSpy.restore（）；
});

首先，您必须在测试中创建视图的实例，并且必须在创建视图之前创建spy。也可以在每个块之前的

中执行这两项操作

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

也许最好通过将包含数据的集合传递给视图来测试它，而不是直接在测试中设置视图元素的DOM。因此，您还将测试
initialize
和
addData
方法是否有效
 以下是使该测试通过的更改：

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

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

从

 var routeName = 'test_campaign';

到

然后对campaign.js执行此测试

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

我得到了这个绿色的
 对不起，我想在我的队友的帮助下说清楚

var routeName=this.view.$el.val（）指向null

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

所以我回到
var routeName='test\u campaign.

此测试的目的是根据一组预定义的输入来指定它期望的值。
Hi Andreas感谢您的帮助，我让它变绿了，测试通过了。见下面我的答案。：）