javascript - 如何用 Jasmine 测试(行为驱动开发)来测试这个？

Question

我刚刚开发了这个 JavaScript/Backbone 模块，作为我正在开发的网页的一部分。我想为它创建一个 Jasmine 测试，但我是 Jasmine 的新手，因此我不确定我应该在这门课上测试什么。测试的“骨架”应该是什么？为了避免测试冗余，您将测试哪些部分？

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;
});

谢谢大家!

更新: 思前想后，我觉得应该从这几个方面去尝试: -触发器:检查它们是否可以被点击。 -“_validAttributeCallback”和“_invalidAttributeCallback”:检查它们的行为是否符合代码。 -模板:监视它以检查它是否正在执行任务。 (可选测试)

因此，测试框架将是:

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

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

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

        describe('blablabla', function () {

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

            it('blablabla', function () {
//      blablabla
            });

        });
    });

});

关于如何测试这个有什么帮助吗？

Answer 1

一种常见的模式是使用两个 describe语句，一个用于类，一个用于被测试的方法，然后是 it关于该方法要测试的每件事的声明。 rspec 人员有一个约定(我在我的 JS 测试中使用它)在方法 describe 上使用“#”对于一个实例方法，和一个“。”对于 describe静态方法。

现在，如果您采用以上所有方法，并且想要测试(例如)您的 View的点击处理方法触发了 View 上的特定事件的 Model ，它看起来像这样:

define([
    'education/eet/views/editdestinationview'
], function (EditDestinationView) {
    describe('EditDestinationView', function () {
        var view;
        beforeEach(function () {
            // do setup work that applies to all EditDestinationView tests
            view = new EditDestinationView({model: new Backbone.Model()});
        });
        describe('#handleClick', function () {
            beforeEach(function () {
                // do setup work that applies only to handleClick tests
            });
            it('triggers a foo event', function () {
                var wasTriggered;
                view.model.on('foo', function() {
                    wasTriggered = true;
                });
                view.handleClick();
                expect(wasTriggered).toBe(true);
            });
        });
    });
});

附言大多数人不像我那样创建一个假的“foo”处理程序，而是使用像 Sinon 这样的模拟库。使用该库，我们的“it”语句可以改为:

            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
            });