What is the best way to run a Jasmine test for this (following Behavior Driven Development principles)?

Question

What is the best way to run a Jasmine test for this (following Behavior Driven Development principles)?

I have recently finished creating a JavaScript/Backbone module for a web page project. I'm interested in writing a Jasmine test for it, but I am new to Jasmine and unsure of what exactly needs to be tested in this class. Can someone provide guidance on the key components that should be included in the test structure? Additionally, how can redundancy in tests be avoided?

editdestinationview.js:

define([
    'common/jqueryex',
    'backbone',
    'marionette',
    'handlebars',
    'text!education/eet/templates/editdestination.hb',
    'text!common/templates/validationerror.hb',
    'lang/languageinclude',
    'common/i18nhelper'
], function ($, Backbone, Marionette, Handlebars, templateSource, errorTemplateSource, i18n) {
    'use strict';

    var errorTemplate = Handlebars.compile(errorTemplateSource),
        EditDestinationView = Marionette.ItemView.extend({

            initialize: function (options) {
                this._destinationTypes = options.destinationTypes;
            },

            onRender: function () {
                this.stickit();
                this._bindValidation();
            },

            _bindValidation: function () {
                Backbone.Validation.bind(this, {
                    valid: this._validAttributeCallback,
                    invalid: this._invalidAttributeCallback,
                    forceUpdate: true
                });
            },

            _validAttributeCallback: function (view, attr) {
                view.$('#error-message-' + attr).remove();
            },

            _invalidAttributeCallback: function (view, attr, error) {
                view.$('#error-message-' + attr).remove();
                view.$('#destinationTypes').parent('div').append(errorTemplate({
                    attr: attr,
                    error: error
                }));
            },

            template: Handlebars.compile(templateSource),

            ui: {
                saveAnchor: '#ed_eetSaveDestinationAnchor',
                deleteAnchor: '#ed_eetDeleteDestinationIcon'
            },

            triggers: {
                'click @ui.saveAnchor': 'click:saveDestination',
                'click @ui.deleteAnchor': 'click:deleteDestination'
            },

            bindings: {
                'select#destinationTypes': {
                    observe: 'destinationTypeId',
                    selectOptions: {
                        collection: function () {
                            return this._destinationTypes;
                        },
                        labelPath: 'description',
                        valuePath: 'destinationTypeId',
                        defaultOption: {label: i18n.EDUCATION_EET_SELECT_INTENDED_DESTINATION, value: null}
                    }
                }
            }

        });

    return EditDestinationView;
});

Thank you for your help!

UPDATE: Upon further reflection, I believe the following aspects should be considered in testing: -Triggers: Verify if they are clickable. -"_validAttributeCallback" and "_invalidAttributeCallback": Ensure they function as intended based on the code. -Template: Optionally spy on it to confirm its functionality.

The proposed test skeleton is as follows:

define([
    'education/eet/views/editdestinationview'
], function (EditDestinationView) {

    describe('description...', function () {

        beforeEach(function () {
            //EditDestinationView.triggers
        });

        describe('blablabla', function () {
            // Additional setup goes here

            it('blablabla', function () {
      // Test logic here
            });

        });
    });

});

If anyone has suggestions on how to approach testing for this scenario, please share them.

javascript unit-testing backbone.js jasmine bdd

Answer 1

Answer №1

When writing tests, a common pattern is to use two separate describe statements - one for the class and another for the method that you want to test. Each test scenario is then outlined using an it statement within the respective describe block. In the world of RSpec (which I also apply in my JavaScript tests), there is a standard convention where a '#' is used in the method describe for instance methods, while a "." is used for static methods.

To illustrate how this framework can be applied, let's say we want to verify that a click-handling method on our View triggers a specific event on the Model. The testing script might look something like this:

define([
    'education/eet/views/editdestinationview'
], function (EditDestinationView) {
    describe('EditDestinationView', function () {
        var view;
        beforeEach(function () {
            // perform setup tasks applicable to all EditDestinationView tests
            view = new EditDestinationView({model: new Backbone.Model()});
        });
        describe('#handleClick', function () {
            beforeEach(function () {
                // set up specific tasks just for handleClick tests
            });
            it('triggers a foo event', function () {
                var wasTriggered;
                view.model.on('foo', function() {
                    wasTriggered = true;
                });
                view.handleClick();
                expect(wasTriggered).toBe(true);
            });
        });
    });
});

As a side note, instead of manually creating a fake "foo" handler as shown above, many developers opt to use mocking libraries like Sinon. By utilizing such a library, the "it" statement could be written differently:

it('triggers a foo event', function () {
    var triggerStub = sinon.stub(view.model, 'trigger');
    view.handleClick();
    expect(triggerStub.calledOnce).toBe(true);
    expect(triggerStub.args[0][0]).toBe('foo');
    //NOTE: args[0][0] == first arg of first call
});

Answer 2

When writing tests, a common pattern is to use two separate describe statements - one for the class and another for the method that you want to test. Each test scenario is then outlined using an it statement within the respective describe block. In the world of RSpec (which I also apply in my JavaScript tests), there is a standard convention where a '#' is used in the method describe for instance methods, while a "." is used for static methods.

To illustrate how this framework can be applied, let's say we want to verify that a click-handling method on our View triggers a specific event on the Model. The testing script might look something like this:

define([
    'education/eet/views/editdestinationview'
], function (EditDestinationView) {
    describe('EditDestinationView', function () {
        var view;
        beforeEach(function () {
            // perform setup tasks applicable to all EditDestinationView tests
            view = new EditDestinationView({model: new Backbone.Model()});
        });
        describe('#handleClick', function () {
            beforeEach(function () {
                // set up specific tasks just for handleClick tests
            });
            it('triggers a foo event', function () {
                var wasTriggered;
                view.model.on('foo', function() {
                    wasTriggered = true;
                });
                view.handleClick();
                expect(wasTriggered).toBe(true);
            });
        });
    });
});

As a side note, instead of manually creating a fake "foo" handler as shown above, many developers opt to use mocking libraries like Sinon. By utilizing such a library, the "it" statement could be written differently:

it('triggers a foo event', function () {
    var triggerStub = sinon.stub(view.model, 'trigger');
    view.handleClick();
    expect(triggerStub.calledOnce).toBe(true);
    expect(triggerStub.args[0][0]).toBe('foo');
    //NOTE: args[0][0] == first arg of first call
});

What is the best way to run a Jasmine test for this (following Behavior Driven Development principles)?

Answer №1

Similar questions

The value remains unchanged after performing JavaScript calculations and attempting to save it

Discovering the magic of nesting maps in React-Native without the need for

Steps to bring life to your JavaScript counter animation

Looking to make changes to a value within a deeply nested array?

Add a variable from a callback function in AJAX's success response

Maintain the markup created by jQuery inside the AJAX function called by setInterval

Developing a vue.js component library without the need for constant rebuilding after every edit

The update in state is not reflected immediately by setState, instead, it is rendered after subsequent state changes

How can I properly choose distinct values for an individual attribute from a JavaScript array containing objects?

Best practice for detecting external modifications to an ngModel within a directive

Is there a way to verify if a FormData file has no content?

Access a webpage on a raspberry pi 3 using a smartphone

Results of Search Query Available Here

JavaScript query: Counting items that begin with a specific letter

List with pulldown options

When quickly typing, the input formatting using a computed property in Vue.js is not getting applied

Combining multiple arrays in Node.js to create a single JSON file

Suggested package structure for Selenium test suite automation for testing on multiple browsers

Navigate to the following section on an HTML page by clicking a button using jQuery

Identifying an anonymous function with a name (using .name versus .displayName)