Как написать модульные тесты для событий в backbone.js

Я начинаю свое приключение с помощью модульных тестов, поэтому, пожалуйста, будьте снисходительны. В моем приложении я использую jQuery, backbone.js и underscore.js и для тестов mocha.js и chai.js. У меня проблема, потому что я понятия не имею, как тестировать события с помощью этих инструментов. Пример Fox У меня есть функция, которая меняет значение ввода. Он вызывается после изменения флажка.Как написать модульные тесты для событий в backbone.js

test.html файл:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Backbone.js Tests</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="stylesheet" href="js/lib/mocha.css" /> 
    <script src="js/lib/mocha.js"></script> 
    <script src="js/lib/chai.js"></script> 
    <!-- <script src="js/lib/sinon.js"></script> --> 
    <script> 
     // Setup 
     var expect = chai.expect; 
     mocha.setup('bdd'); 

     // Run tests on window load event. 
     window.onload = function() { 
      (window.mochaPhantomJS || mocha).run(); 
     }; 
    </script> 

    <!-- App code --> 
    <script src="../public/static/js/libs/jquery-2.1.4.min.js"></script> 
    <script src="../public/static/js/libs/js.cookie-2.1.0.min.js"></script> 
    <script src="../public/static/js/libs/bootstrap.min.js"></script> 
    <script src="../public/static/js/libs/underscore-min.js"></script> 
    <script src="../public/static/js/libs/backbone-min.js"></script> 
    <script src="../public/static/js/libs/backbone-relational.min.js"></script> 
    <script src="../public/static/js/libs/backbone-super.min.js"></script> 
    <script src="../public/static/js/libs/handlebars-v4.0.5.min.js"></script> 
    <script src="../public/static/js/application.js"></script> 
    <script src="../public/static/js/main.js"></script> 
    <script src="../public/static/js/views/register.js"></script> 
    <script src="../public/static/js/views/modals/sign-in-modal.js"></script> 
    <script src="../public/static/js/views/modals/sign-up-modal.js"></script> 
    <script src="../public/static/js/helpers/forms.js"></script> 
    <script src="../public/static/js/helpers/alerts.js"></script> 
    <script src="../public/static/js/helpers/inpage-alerts.js"></script> 
    <script src="../public/static/js/collections.js"></script> 
    <script src="../public/static/js/models.js"></script> 
    <script src="../public/static/js/kodilla.lib.js"></script> 
    <script src="../public/static/js/views/knowledge-base.js"></script> 
    <script src="../public/static/js/libs/tether.min.js"></script> 

    <!-- Tests --> 
    <script src="js/spec/register.spec.js"></script> 

</head> 
<body> 
    <div id="mocha"></div> 
</body> 
</html>

register.js файл:

App.Views.Register = Backbone.View.extend({ 
    events: { 
     'click input[name="terms"]' : 'changeTermsConfirmation', 
     'click [type=submit]': 'onSubmitForm' 
    }, 
    initialize: function(options) { 
     this.$termsConfirmedAtHidden = this.$('input[name="terms_confirmed_at"]'); 
    }, 
    changeTermsConfirmation: function(e) { 
     if ($(e.currentTarget).is(":checked")) { 
      this.$termsConfirmedAtHidden.val(Math.floor(Date.now()/1000)); 
     } else { 
      this.$termsConfirmedAtHidden.val(''); 
     } 
    }, 
    onSubmitForm: function() { 
     if (!this.$el.find('input[name="terms"]').is(':checked')) { 
      analytics.track('auth_register_not_checked_terms'); 
     } 
    } 
});

register.spec.js файл:

$(document).ready(function() { 

    describe('Register Form', function() { 

     App.registerView = new App.Views.Register(); 

     describe('initialize() function', function() { 
      it('Should initialize this.$termsConfirmedAtHidden variable by HTML object', function() { 
       expect(App.registerView.$termsConfirmedAtHidden).to.be.a('object'); 
      }); 
     }); 

     describe('changeTermsConfirmation() function', function() { 
      it('Should set value of $termsConfirmedAtHidden element', function() { 
       //how to test this function 
      }); 
     }); 

    }); 

});

Мой вопрос заключается в том, как написать разумный модульный тест для функции changeTermsConfirmation(). Я буду благодарен за другие замечания, советы по использованию.

источник

2016-10-12 Dominik Krzywiecki

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

Mocha/Chai является модульным, поэтому сначала вам нужно включить в проект проект издевательской/шпионской библиотеки. По умолчанию для большинства людей по умолчанию используется Sinon (вместе с Sinon-Chai).

Затем вы можете проверить и протестировать блок обработчика события:

Создать экземпляр вида для теста.
Настройка шпиона на метод просмотра вы хотите проверить (changeTermsConfirmation в вашем случае)
Trigger события, вызвав trigger на экземпляре вида
Вашего ожидания может проверить как часто называют ваш метод, и с какими аргументами и каково их возвращаемое значение.

Если вы не заботитесь об этом и просто хотите проверить изменения состояния просмотра, вам не нужен шпион (и вам не нужно включать библиотеку, такую как Sinon). Просто создайте экземпляр представления, вызовите trigger и просмотрите результат.

источник

2016-10-12 12:50:52 hashchange

Благодарим за отзыв! Можете ли вы рассказать мне больше о создании представления экземпляра? Вы имеете в виду, что я должен создать разметку html separeted? В этом случае можно вызвать все тесты с одной страницы или с терминала? –

Вы можете использовать HTML-документ, который у вас есть. Возьмите «тело», добавьте 'div', создайте свой вид в' div', очистите 'div'. Если вы запускаете свои тесты в браузере, 'body' принадлежит странице теста (результата) - нет никакой проблемы при использовании этого. Если вы запускаете тесты из командной строки, вы можете использовать (безголовый) браузер, например [PhantomJS] (http://phantomjs.org/), а затем 'body' принадлежит к документу по умолчанию этого браузера. – hashchange

Благодарим вас за это решение. Я знаю, что это будет работать, но это хорошая практика (я имею в виду добавить некоторые «div» к телу на текущей странице html)? Извините, может быть, глупый вопрос, но я действительно начинаю эту тему;) –

Как написать модульные тесты для событий в backbone.js

ответ

Смежные вопросы