CODEWITHSUNDEEP
javascriptjqueryunit-testingbackbone.js
Dominik Krzywiecki
Dominik Krzywiecki

Reputation: 425

How to write unit tests for events in backbone.js

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. 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:

<!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:

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:

$(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. I'll be thankful for others notes, usage tips.

Upvotes: 0

Views: 1088

Answers (1)

hashchange
hashchange

Reputation: 7225

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. The default choice for most people seems to be Sinon (along with 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)
  • Trigger the event by calling trigger on your view instance
  • 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). Just create a view instance, call trigger and examine the result.

Upvotes: 2

Related Questions