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

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

茉莉花提示：

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

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

作为另一种选择，我试图监视焦点事件 - 如果真的有一个？

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]

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