如何用Jasmine测试Backbone.js View中模板外的匿名点击事件

前置说明 #

Backbone 默认events配置的所有事件都是委托到View自身的el元素上，仅能响应该元素内部的节点事件。如果你的.right_btn不在View的el范围内，原有代码真实运行时也无法触发回调，可选择两种方案适配：修改事件绑定逻辑，或者实例化View时指定更大范围的el。

方案1：修改View事件绑定逻辑（推荐，生产环境更可控） #

把外部元素的事件手动绑定到全局document，同时补充销毁逻辑避免内存泄漏：

var ForgotPasswordView = Backbone.View.extend({
  template: "templates/forgot-password-view.html",
  initialize: function () {
    console.log('Forgot Password View Initialized');
    // 手动绑定外部元素事件
    this.bindExternalEvents();
  },
  // 把回调抽成独立方法，方便测试和复用
  onRightBtnClick: function(e) {
    alert($(".forgot_password_email").val());
    e.preventDefault();
  },
  bindExternalEvents: function() {
    $(document).on('click', '.right_btn', _.bind(this.onRightBtnClick, this));
  },
  // 补充View销毁逻辑，清理全局绑定的事件
  remove: function() {
    $(document).off('click', '.right_btn', this.onRightBtnClick);
    Backbone.View.prototype.remove.call(this);
  }
});

方案2：不修改原有View代码，测试时指定父级el #

如果不想改动生产代码，只需要在测试实例化View时，把el指定为包含.right_btn的父元素（比如body），原有events配置即可正常生效：

view = new ForgotPasswordView({el: document.body});

Jasmine测试用例 #

describe('ForgotPasswordView', function() {
  var view;
  
  // 每个测试用例执行前初始化环境
  beforeEach(function() {
    // 构造测试需要的DOM结构，插入到页面测试容器
    $('body').append(`
      <div class="right_btn"></div>
      <div id="template_loader">
        <input type="text" class="forgot_password_email" value="test" name="forgot_password_email"/>
      </div>
    `);
    // 实例化View，用方案2的话这里加{el: document.body}参数即可
    view = new ForgotPasswordView();
    // 监听alert方法，方便断言
    spyOn(window, 'alert');
  });

  // 每个测试用例执行后清理环境，避免测试用例之间互相污染
  afterEach(function() {
    view.remove();
    $('.right_btn, #template_loader').remove();
  });

  it('点击外部.right_btn按钮时可以正确获取输入框值', function() {
    // 1. 准备测试数据：修改输入框值
    const testVal = 'test@example.com';
    $('.forgot_password_email').val(testVal);
    
    // 2. 模拟点击外部按钮
    const clickEvent = $.Event('click');
    spyOn(clickEvent, 'preventDefault');
    $('.right_btn').trigger(clickEvent);
    
    // 3. 断言行为符合预期
    expect(window.alert).toHaveBeenCalledWith(testVal);
    expect(clickEvent.preventDefault).toHaveBeenCalled();
  });
});

如果测试环境引入了jasmine-jquery，可以直接使用简化的事件触发写法，不需要手动构造$.Event。

内容的提问来源于stack exchange，提问作者user6927845