如何测试输入表单字段是否被聚焦？

Question

对于以下注册表单，我配置了在呈现表单时聚焦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);
});

Jasmine提示：

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

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

作为替代方案，我试图窥探焦点事件 - 如果确实存在？

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();
});

Jasmine提示：

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

Answer 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);