Я новичок в позвоночнике TDD с жасмин-синон. изменить событие в модульном тесте магистрали

Question

Я делаю тест на изменение события в представлении selectbox в магистрали, которое "должно предоставлять правильный путь к 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.

Answer 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 блок.

Когда вы добавляете ожидаемый код в обработчик событий, может случиться так, что он будет вызван до вызова метода navigate на вашем маршрутизаторе. Причина: два обработчика добавлены к слушателю, один для вызова навигатора на маршрутизаторе и один для проверки, что он был вызван на маршрутизаторе. Поскольку вы не можете гарантировать, какой из них вызывается первым, тест не пройдёт, когда слушатель из теста будет вызван первым.

Может быть, лучше протестировать его, передав коллекцию с данными в представление, не устанавливая DOM элемента представления непосредственно в тесте. Таким образом, вы также будете проверять, что ваш initialize а также addData метод будет работать.

Answer 2

Вот изменения, которые сделали этот тест пройденным.:)

Я изменил значение переменной routeName, в campaign.test.js

от

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

там я получил этот зеленый.:)

Answer 3

Извините, я хотел бы прояснить это с помощью моего товарища по команде.

var routeName = this.view.$el.val(); указывает на ноль

делая динамическое значение, оно теряет эффективность теста,

поэтому я вернул var routeName = 'test_campaign'.

цель этого теста - указать, какое значение он ожидает, основываясь на предварительно определенном наборе входных данных.