使用jquery.selectize进行Capybara集成测试

Question

如何使用表格编写水豚集成测试jquery.selectize？

我想测试用户输入几个值.

Answer 1

我创建了一个帮助器,我将其混合到我的水豚功能规格中:

module PageSteps
  def fill_in_selectized(key, *values)
    values.flatten.each do |value|
      page.execute_script(%{
        $('.#{key} .selectize-input input').val('#{value}');
        $('##{key}').selectize()[0].selectize.createItem();
      })
    end
  end
end

以下是如何使用它的示例:

# Single value
fill_in_selectized('candidate_offices', 'Santa Monica')

# Multiple values
fill_in_selectized('candidate_offices', ['San Francisco', 'Santa Monica'])

第一个参数是"键",并且在我们的应用程序中使用我们的标记.根据您的标记,您可能需要进行一些调整.这需要启用Javascript的capybara驱动程序(我们使用poltergeist).

Answer 2

这里的大多数答案都会从封面下改变内容,并且与用户交互不同.这是一个接近用户所做的版本.

# waits for the text to show up in autocomplete and then selects it
def selectize_select(selectize_class, text)
  find("#{selectize_class} .selectize-input input").native.send_keys(text) #fill the input text
  find(:xpath, "//div[@data-selectable and contains(., '#{text}')]").click #wait for the input and then click on it
  # convert css selector to xpath selector using Nokogiri::CSS.xpath_for
end

Answer 3

selectize使用所有关键事件（keydown、keypress、keyup）来提供出色的 UI，但似乎没有提供从 javascript 设置数据的简单方法。

\n\n

一种解决方案是使用syn.js库来触发正确的按键事件。这是一个有效的助手：

\n\n

def fill_in_selectize_area selector, options\n  # Syn appears to require an id, so assign a temporary one\n  @selectize_unique_id ||= 0\n  unique_id = "temp_selectize_id_#{@selectize_unique_id +=1}"\n  with = options.fetch(:with)\n  page.execute_script %Q{\n    var selectize = $(#{selector.to_json})[0].selectize;\n    var type = #{with.to_json}.join(selectize.settings.delimiter) + \'\\t\';\n    selectize.$control_input.attr(\'id\', #{unique_id.to_json});\n    Syn.click({}, #{unique_id.to_json}).delay().type(type);\n  }\n  # make sure that it worked *and* that it\'s finished:\n  page.should have_content with.join(\'\xc3\x97\') << \'\xc3\x97\' \nend\n\n# example use:\nfill_in_selectize_area \'[name="blog[tags]"]\', with: [\'awesome subject\', \'other tag\']\n

\n\n

请注意，这delay是必需的，因为关注输入不是即时的。

\n