2

ジャスミンを使用してフォーム送信をテストしたい。
フォームは、次のようなバックボーン ビューで定義されます (1)。
次のテスト(2)を実施しましたが、効果がわかりません。
たとえば、テキストエリアが空の場合、onError 関数を呼び出す必要があります。
このコンテキストで、ジャスミンを使用してフォームの送信をテストする最良の方法はありますか?

(1)

var MyView = Backbone.View.extend({

    events: {
        'focus [data-tid="message"]' : 'focusForm',
        'blur [data-tid="message"]' : 'blurForm',
        'submit   form' : 'submitForm'
    },

    focusedClass: 'is-form-focused',

    focusForm: function () {
        this.$el.find('form').addClass(this.focusedClass);
    },

    blurForm: function () {
        this.$el.find('form').removeClass(this.focusedClass);
    },

    submitForm: function (event) {
        event.preventDefault();

        var formElement =  event.currentTarget,
            message = this.$el.find('.message');

        if (formElement.checkValidity && !formElement.checkValidity()) {
            this.onError();
        } else {
            // makes a POST ajax call
            backendController.submitFeedback(message.val()).done(this.onSuccess).fail(this.onError);

        }
    },

    onError: function () {
        this.$el.find('.message').focus();
    },

    onSuccess: function () {
        this.$el.find('.message').val('');
        this.$el.find('form').removeClass(this.focusedClass);
    }
});

(2)

describe('When Submit button handler fired', function () {
    beforeEach(function () {
        this.popupSpy = sinon.spy();
        this.view.render();
        this.view.$el.find('form').on('submit', this.popupSpy);
        this.view.$el.find('form').trigger('submit');
    });
    it('submitForm should be called', function () {
        expect(this.popupSpy.callCount).toBe(1);
    });
});
4

1 に答える 1

4

あなたの例では、独自のテストをテストしています。

私はむしろ次のようなものを提案します：

// code simplified and no tested
describe("When Submit button handler fired", function () {
  it("submitForm should be called", function () {
    this.view.render();
    spyOn( this.view, "submitForm" );
    this.view.$el.find("form").submit();
    expect( this.view.submitForm ).toHaveBeenCalled();
  });
});

アップデート

おそらく私の上記のコードは機能しません。Routerメソッドをスパイする場合のように、ハンドラーは初期化時に設定されるため、それ以上spyは呼び出されません。

ビューをインスタンス化する前に、クラス レベルでスパイする必要があります。

// code simplified and no tested
describe("When Submit button handler fired", function () {
  it("submitForm should be called", function () {
    spyOn( MyView.prototype, "submitForm" );

    this.view = new MyView();
    this.view.render();

    this.view.$el.find("form").submit();

    expect( MyView.prototype.submitForm ).toHaveBeenCalled();
  });
});
于 2012-08-14T14:52:38.687 に答える