5

2 つのバックボーン ビューMainViewとPopupView.

MainView にはヘルプ ボタンがあります。ヘルプ ボタン ハンドラーが起動されると、Backbone.View が表示されます。

MainView私の質問は、モジュールからこの動作をどのようにテストすればよいですか?

これが私のコードですMainView：

var MainView = Backbone.View.extend({
    events: {
        'click #help' : 'showPopUp'
    },

    showPopUp: function() {
       var popupView = new PopupView();
       app.vent.trigger('showModal', popupView);
    }    
});

mainView.spec に関する私のコードは次のとおりです。

describe("When help button handler fired", function() {
    beforeEach(function() {
        this.view.render();
        this.view.$el.find('#help').trigger('click');
    });
    it("shows the popup", function() {
        // what should I do?
    });
});

アプリに関する私のコードは次のとおりです。

var app = new Marionette.Application();

app.addRegions({
    header: '#header',
    sidebar: '#sidebar',
    main: '#main',
    modal: '#modal'
});

app.vent.on('showModal', function(view) {
    var modal = app.modal;

    modal.show(view);
    modal.$el.modal({
        show: true,
        keyboard: true,
        backdrop: 'static'
    });
});
4

3 に答える 3

6

Sinon と Chai を使用している場合は、これを試すことができます。

describe("When help button handler fired", function() {
  beforeEach(function() {
      this.popupSpy = sinon.spy()
      app.vent.on('showModal', this.popupSpy);
      this.view.render();
      this.view.$el.find('#help').trigger('click');
  });
  it("shows the popup", function() {
      this.popupSpy.callCount.should.equal(1);
      this.popupSpy.args[0][0].should.be.an.instanceOf(PopupView);
  });
});
于 2012-07-23T08:09:16.527 に答える
3

したがって、メイン ビューはポップアップを開くべきではなく、このようなものが存在することさえ知らないはずです。イベントを発生させてポップアップを開く必要があることを、イベントバスを介して他のモジュールに通知するだけです。

あなたが使用app.ventしているように、マリオネットを使用していると思います。私のプロジェクトでは、オーバーレイ ビューを処理する Marionette.Region があります。そして、この領域はビューを開閉する必要があります。

このようにすると、テストがはるかに簡単になります。メイン ビューでは、関数をスパイしapp.vent、ボタンがクリックされたときに関数が実行されることをテストできます。あなたの地域では、イベントを発生app.ventさせて関数をスパイすることができますview.render。

テストしたいオブジェクトに新しいインスタンスを作成すると、テストが常に難しくなります。たとえば Java のように、JavaScript では実行時に既存の関数をオーバーライドできるため、確かに JavaScript の方が簡単ですが、何らかの依存性注入の方法を使用すると、依存関係を常に簡単にモックおよびスパイできます。

于 2012-07-21T10:40:27.313 に答える
1

これはどう：

describe("When help button handler fired", function() {
    var popupShown;

    beforeEach(function() {
        popupShown = false;

        this.view.render();
        app.vent.on('showModal', function() {
            popupShown = true;      
        });
        this.view.$el.find('#help').trigger('click');
    });
    it("shows the popup", function() {
        expect(popupShown).toBe(true);
    });
});

そうは言っても、私はいくつかのことをお勧めします：

  1. 他の場所で述べたように、MainView でモーダル ビューを作成しないでください。これは、この 2 つを強く結び付けすぎます。
  2. テストでは、次のようなことを言いたい場合がありますit("triggers the help event")。そのオブジェクトを分離して単体テストしているため、これは特に重要です。統合テストの場合は、その逆になります。
  3. あなたが自分の機能であまり多くのことをしていないかどうかはわかりませんbeforeEach。少なくともitスコープ内でボタンのクリックをトリガーしたい場合がありますが、何を行っているかに基づいてdescribe、これで問題ない場合があります。
于 2012-07-25T13:48:31.397 に答える