如何在骨干.js中编写事件的单元测试

Question

I begin my adventure with write unit tests so please be indulgence. 我从写单元测试开始我的冒险，所以请放纵自己。 In my app I am using jQuery, backbone.js and underscore.js and for tests mocha.js and chai.js. 在我的应用程序中，我正在使用jQuery，bones.js和underscore.js，并用于测试mocha.js和chai.js。 I have problem because I have no idea how to test events using this tools. 我有问题，因为我不知道如何使用此工具测试事件。 Fox example I have function which changes value of input. 福克斯的例子我有改变输入值的功能。 It call after change checkbox value. 更改复选框值后调用。

test.html file: 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 file: 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 file: 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
            });
        });

    });

});

My question is how to write sensible unit test for "changeTermsConfirmation()" function. 我的问题是如何为“ changeTermsConfirmation（）”函数编写明智的单元测试。 I'll be thankful for others notes, usage tips. 我将感谢其他注释，使用技巧。

Answer 1

Maybe I can help you out with a few bits of info which might get you started. 也许我可以为您提供一些帮助您入门的信息。

Mocha/Chai is modular, so first you need to include a mocking/spying library into your project. Mocha / Chai是模块化的，因此首先您需要在项目中包括一个模拟/间谍库。 The default choice for most people seems to be Sinon (along with Sinon-Chai ). 对于大多数人而言，默认选择似乎是Sinon （以及Sinon-Chai ）。

Then you can examine and unit test your event handler: 然后，您可以检查事件处理程序并进行单元测试：

Create a view instance for your test. 为您的测试创建一个视图实例。
Set up a spy on the view method you want to test ( changeTermsConfirmation in your case) 在要测试的查看方法上设置间谍（您的情况下为changeTermsConfirmation ）
Trigger the event by calling trigger on your view instance 通过在视图实例上调用trigger来触发事件
Your expectation can check how often your method has been called, and with which arguments, and what its return value has been. 您的期望可以检查您的方法被调用的频率，使用了哪些参数以及其返回值是多少。

If you don't care about any of that and just want to test view state changes, you don't need a spy (and you don't need to include a library like Sinon). 如果您不关心任何这些，只想测试视图状态更改，就不需要间谍（也不需要包括Sinon之类的库）。 Just create a view instance, call trigger and examine the result. 只需创建一个视图实例，调用trigger并检查结果即可。

如何在骨干.js中编写事件的单元测试

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-12 12:50:52

如何在骨干.js中编写事件的单元测试

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-12 12:50:52

解决方案1
1 已采纳 2016-10-12 12:50:52