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

谢谢大家！

更新在考虑了很多之后，我认为我应该尝试以下方面： -Triggers：检查是否可以点击它们。 - “_ 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上的特定事件1}}，它看起来像这样：

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

P.S。我没有像我那样创建假的“foo”处理程序，而是使用像Sinon这样的模拟库。使用该库我们的“它”声明可能是：

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

如何使用Jasmine测试（行为驱动开发）进行测试？

1 个答案: