jquery - Rails3-jquery-自动完成 : how to test with RSpec and Capybara?

Question

我正在使用 Rails 3.2.8

• gem 'jquery-rails', '2.1.2'
• gem“rails3-jquery-autocomplete”，“1.0.9”
• gem“rspec-rails”，“2.11.4”
• gem “ capybara ”，“1.1.3”
• gem ' capybara -webkit', '0.12.1'

我最近将选择下拉列表转换为自动完成(使用rails3-jquery-autocomplete)，并尝试更新我的请求规范以填写自动完成。

我的方法是创建一个助手，如this gist所示:

def fill_autocomplete(field, options = {})
  fill_in field, :with => options[:with]

  selector = "ul.ui-autocomplete a:contains('#{options[:select]}')"

  page.should have_selector selector
  page.execute_script "$(\"#{selector}\").mouseenter().click()"
end

如果我使用 Webkit 进行测试，测试会失败并显示以下消息:

expected css "ul.ui-autocomplete a:contains('Firstname Lastname')" to return something.

如果我使用 Selenium 进行测试，当我在 Firefox 中观察测试进行时，我看不到出现下拉选择列表。添加 sleep 3 来等待下拉列表没有帮助。

我明白了here capybara-webkit 有一个相关但有点老的问题，当填写字段时，它会立即变得模糊，这当然会阻止自动完成选择列表的出现。但这似乎与其他已经实现此功能的人不一致。

当前是否可以使用 RSpec 和 Capybara 测试包含有 Rails3-jquery-autocomplete 字段的表单？如何？如果没有，是否有办法手动填写相应的隐藏 id 字段，以便我仍然可以测试表单是否创建了正确的数据？

Answer 1

终于让自动完成测试至少与 Selenium 驱动程序一起工作。

解决方案是将焦点放在该字段上并发出 keydown 事件。

我首先通过在浏览器中进行手动测试来确认这一点。如果我使用鼠标(而不是 Ctrl-V)将搜索词粘贴到自动完成字段中，则不会发生任何情况 - 不会显示下拉选择列表。这显然相当于 capybara 发送 fill_in 命令时发生的情况。但是，在该术语位于该字段中之后，当焦点仍在该字段上时，如果我触摸任何键，例如按 Shift 键，将出现选择列表。因此显然只有当按下某个键时才会出现选择列表。

选项 1

一种解决方案是从原始问题扩展函数，如下所示:

def fill_autocomplete(field, options = {})
  fill_in field, :with => options[:with]

  page.execute_script %Q{ $('##{field}').trigger("focus") }
  page.execute_script %Q{ $('##{field}').trigger("keydown") }
  selector = "ul.ui-autocomplete a:contains('#{options[:select]}')"

  page.should have_selector selector
  page.execute_script "$(\"#{selector}\").mouseenter().click()"
end

然后这样调用它:

fill_autocomplete "to_contact_name", with: "Jone", select: "Bob Jones"

选项 2

类似的方法，改编自 Steak test在主要的rails3-jquery-autocomplete gem中，使用标准fill_in，后跟这个choose_autocomplete_result:

def choose_autocomplete_result(item_text, input_selector="input[data-autocomplete]")
  page.execute_script %Q{ $('#{input_selector}').trigger("focus") }
  page.execute_script %Q{ $('#{input_selector}').trigger("keydown") }
  # Set up a selector, wait for it to appear on the page, then use it.
  item_selector = "ul.ui-autocomplete li.ui-menu-item a:contains('#{item_text}')"
  page.should have_selector item_selector
  page.execute_script %Q{ $("#{item_selector}").trigger("mouseenter").trigger("click"); }
end

它的名字是这样的:

fill_in "to_contact_name", :with => "Jone"
choose_autocomplete_result "Bob Jones", "#to_contact_name"

我的测试采用了第二种方法。它对于 Selenium 来说似乎相当可靠，但不适用于 webkit，这太糟糕了，因为相比之下，Selenium 测试相当慢。欢迎在 webkit 下工作的解决方案!