javascript - バックボーン ビューのテスト時にメモリ内の要素でイベントをトリガーする

Question

バックボーン ビュー/モデル/コレクションの統合テストを書いています。rendermyを呼び出すとView、テンプレートが独自のelプロパティにレンダリングされるだけなので、html はページではなく単にメモリに格納されます。以下は単純なモデルと、クリック イベントが DOM 要素にバインドされたビューです。

var model = Backbone.Model.extend({
    urlRoot: '/api/model'
});

var view = Backbone.View.extend({
    events: {
        'click #remove': 'remove'
    }
    render: function () {
        var html = _.template(this.template, this.model.toJSON());
        this.$el.html(html);
    },
    remove: function () {
        this.model.destroy();
    }
});

Jasmine を使用してテストを作成しています。以下のテストでは、関数をスパイして、ビューに渡すテンプレートに存在removeする要素に対してクリック イベントが発生したときに関数が呼び出されるかどうかを確認します。#remove

// template

<script id="tmpl">
    <input type="button" value="remove" id="remove"/>
</script>

// test

describe('view', function () {

    var view;

    beforeEach(function () {
        view = new view({
            template: $('#tmpl').html(),
            model: new model()
        });
    });

    it('should call remove when #remove click event fired', function () {       
        view.$('#remove').click();

        var ajax = mostRecentAjaxRequest();
        expect(ajax.url).toBe('/api/model');
        expect(ajax.method).toBe('DELETE');
    });

});

ただし、#remove要素はメモリ内にあり、実際には DOM に追加されていないため、クリック イベントをシミュレートする方法がわかりません。実際、それが可能かどうかさえわかりませんか？

テストでこれを行うのは少し奇妙に思えるかもしれませんが、私のテストでは実装ではなく動作をテストしようとしています。ユーザーがクリックすると、リクエストがサーバーに送り返されます。#removeDELETE