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

How to write unit tests for events in backbone.js

本文关键字：事件 单元测试 backbone js      更新时间：2023-09-26

我从编写单元测试开始我的冒险，所以请原谅。在我的应用程序中，我使用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()"函数编写合理的单元测试。我将感谢其他人的笔记，使用技巧。

也许我可以提供一些信息帮助你。

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

然后你可以检查和单元测试你的事件处理程序:

  • 为您的测试创建一个视图实例。
  • 设置一个监视你想要测试的视图方法(在你的例子中是changeTermsConfirmation)
  • 通过调用视图实例上的trigger触发事件
  • 你的期望可以检查你的方法被调用的频率，使用哪些参数，以及它的返回值是什么。

如果你不关心这些，只是想测试视图状态的变化，你不需要一个spy(也不需要包含像Sinon这样的库)。只需创建一个视图实例，调用trigger并检查结果

相关文章：