Ruby on rails 3 使用jquery.selectize进行Capybara集成测试

如何使用表单编写水豚集成测试

我想测试一个用户输入几个值。

selectize使用所有按键事件keydown、keypress、keyup来提供一个很好的UI，但似乎没有提供一种从javascript设置数据的简单方法

一种解决方案是使用库触发正确的键事件。以下是一个有效的帮助器：

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

# example use:
fill_in_selectize_area '[name="blog[tags]"]', with: ['awesome subject', 'other tag']

---

请注意，需要延迟，因为关注输入不是即时的

API允许它，但需要先添加选项，然后才能设置值：

var selectize = $('.selector')[0].selectize
selectize.addOptions([{text: 'Hello', value: 'Hello'}, {text: 'World', value: 'World'}])
selectize.setValue(['Hello', 'World'])

---

我创建了一个助手，我将其混入我的水豚功能规格中：

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的水豚驱动程序，我们使用的是poltergeist。

这是我的助手，我将其与我的功能规范混合在一起。它可以调整和扩展

它处理选择和文本输入类型 它读起来像常规的水豚填充法 它可以接受任何适用于find_字段的标识符来查找输入。因此，您可以使用标签的文本、元素的id或元素的名称来查找元素。 这段代码的唯一假设是，文本输入有一个name属性，当然，Rails输入助手会自动添加该属性

def selectize(key, with:)
  field = page.find_field(key, visible: false)
  case field.tag_name
  when "select"
    page.execute_script(%{
      $("select[name='#{field["name"]}']")
        .selectize()[0].selectize.setValue(#{Array(with)});
    })
  else
    Array(with).each do |value|
      page.execute_script(%{
        $("input[name='#{field["name"]}']")
          .next()
          .find(".selectize-input input").val('#{value}')
          .end()
          .prev()
          .selectize()[0].selectize.createItem();
      })
    end
  end
end

用法示例：

selectize "Single-choice field", with: "Only option"
selectize "Multi-choice field", with: ["Option A", "Option B"]

---

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

# 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

---

对-1的解释总是受欢迎的。是的，如果你没有对不太明显的否决票发表评论，这总是很烦人的=\n也许，我们应该提出一些建议，比如降低没有评论的否决票的声誉。我想这与帖子中缺乏细节有关。不管怎样，这是一个我目前正在努力解决的问题。很难不在这个答案上找到一个-1侮辱性的答案。如果你喜欢的话，就不喜欢这个问题，但是假设它是一个有效的问题，这只能是一个好的答案，不是吗？在到处寻找答案之后，这条路线对我来说是最好的。这种方法最大的缺点是它绕过了Ajax加载。但是，为了测试selectize是否有效，以及值是否传递到表单，这对我来说是有效的！需要注意的是，如果您正在使用valueField和labelField初始化selectize，则需要修改addOptions散列以匹配传入数据。