0

「変更時に router.navigate への正しいパスを提供する必要がある」バックボーンの 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();
  });

これはモジュールです (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 要素を作成し、属性を選択して値を設定しました。

これを change イベントの currentTarget として渡し、trigger() に送信するにはどうすればよいですか?

または、これを行う簡単な方法はありますか？

私はこのテストに失敗しました。エラー: 関数が「campaign/test_campaign」で呼び出されたと予想されます。true。

4

3 に答える 3

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 に答える
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ブロック内で実行できます。

イベント ハンドラーに expect コードを追加すると、ルーターの navigate メソッドが呼び出される前に呼び出されることがあります。2 つのハンドラーがリスナーに追加されます。1 つはルーターでのナビゲートを呼び出し、もう 1 つはルーターで呼び出されたことをテストします。どちらが最初に呼び出されるかを保証できないため、テストのリスナーが最初に呼び出されると、テストは失敗します。

テストでビュー要素のDOMを直接設定するのではなく、データを含むコレクションをビューに渡してテストする方がよいかもしれません。initializeそのため、 andaddDataメソッドが機能する こともテストします。

于 2012-09-09T10:16:16.840 に答える
0

申し訳ありませんが、チームメイトの助けを借りてこれを明確にしたいと思います。

var routeName = this.view.$el.val();nullを指しています

値を動的にすることで、テストの有効性が失われます。

だから私はに戻しますvar routeName = 'test_campaign'.

このテストのポイントは、事前定義された入力のセットに基づいて、期待する値を指定することです。

于 2012-09-13T02:27:26.883 に答える