如何测试输入表单域是否被聚焦？答案

【问题标题】：How to test whether an input form field is focussed?如何测试输入表单域是否被聚焦？
【发布时间】：2014-01-01 01:58:57
【问题描述】：

对于下面的注册表单，我配置了id="signUpName" 的第一个输入字段在呈现表单时聚焦。 Backbone-forms 用于创建表单。

我想用Jasmine v.1.3.0测试当我加载视图时某个输入表单字段是否被聚焦：

it("should focus the name field of the sign-up form", function() {
  var signUpName = userController.loginView.signUpForm.$el.find("#signUpName");
  userController.loginView.showSignUpForm();
  expect(signUpName).toBeFocused();
  // expect(signUpName.is(":focus")).toBe(true);
});

茉莉花提示：

Expected '<input id="signUpName" name="signUpName" type="text">' to be focused.

从规范中可以看出，我使用来自 jasmine-jquery 的 toBeFocused() 匹配器。我运行扩展的最新版本 1.5.93。我还找到了关于toBeFocused() 实现的讨论，并注意到他们同时将其更改为Ryan Greenberg 建议的alternative implementation。

作为替代方案，我试图监视 focus 事件 - 如果真的有一个？

it("should focus the name field of the sign-up form", function() {
  var signUpName = userController.loginView.signUpForm.$el.find("#signUpName");
  var spyEvent = spyOnEvent(signUpName, 'focus');
  userController.loginView.showSignUpForm();;
  expect('focus').toHaveBeenTriggeredOn(signUpName);
  expect(spyEvent).toHaveBeenTriggered();
});

茉莉花提示：

Expected event focus to have been triggered on [object Object]

【问题讨论】：

stackoverflow.com/questions/967096/…
@SachynKosare 我已经阅读了这个帖子，你可以从我的规范中未注释的行中猜到。我仍然不知道为什么测试失败了。

标签： javascript testing focus jasmine jasmine-jquery

【解决方案1】：

我们在 MindMup 上遇到了类似的问题，问题是焦点不是在该特定对象上触发，而是在与该对象匹配的不同 jQuery 选择器上触发。我们为 Jasmine 编写了一些匹配器，用于检查事件是否实际上是在等效的 jQuery DOM 元素集上触发的。见https://github.com/mindmup/mapjs/blob/master/test-lib/jquery-extension-matchers.js

有了它，你可以这样做：

spyOn(jQuery.fn, 'focus').and.callThrough();
// your test
expect(jQuery.fn.focus).toHaveBeenCalledOnJQueryObject(yourObject);

【讨论】：