如何为 backbone.js 中的事件编写单元测试

Question

我从编写单元测试开始我的冒险，所以请放纵一下。在我的应用程序中，我使用 jQuery、backbone.js 和 underscore.js 并用于测试 mocha.js 和 chai.js。我有问题，因为我不知道如何使用此工具测试事件。 Fox 示例我具有更改输入值的功能。它在更改复选框值后调用。

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()" 函数编写合理的单元测试。我将感谢其他人的笔记、使用技巧。

Answer 1

或许我可以为您提供一些帮助您入门的信息。

Mocha/Chai 是模块化的，所以首先你需要在你的项目中包含一个 mocking/spying 库。大多数人的默认选择似乎是 Sinon (along with Sinon-Chai).

然后您可以检查事件处理程序并对其进行单元测试：

为您的测试创建一个视图实例。
在您要测试的视图方法上设置间谍（changeTermsConfirmation 在您的情况下）
通过在您的视图实例上调用 trigger 触发事件
您的期望值可以检查您的方法被调用的频率、使用哪些参数以及它的 return 值是多少。

如果您不关心这些，只想测试视图状态的变化，则不需要间谍（也不需要包含像 Sinon 这样的库）。只需创建一个视图实例，调用 trigger 并检查结果。

如何为 backbone.js 中的事件编写单元测试

How to write unit tests for events in backbone.js

javascript

jquery

unit-testing

backbone.js