How can I write a capybara integration test with a form using jquery.selectize?
I\'d like to test a user entering a couple of values.
selectize
uses all key events (keydown
, keypress
, keyup
) to provide a great UI, but doesn't seem to provide an easy way to set data from javascript.
One solution is to use the syn.js library to trigger the right key events. Here's a helper that works:
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']
Note that the delay
is needed because focussing on the input isn't instant.
This is my helper I mix in with my feature specs. It tweaks and extends Christian's answer.
select
and text
input typesfill_in
methodfind_field
to find the input. So, you can use the label's text, the element's id or the element's name to find the element.The only assumption this code makes is that your text input has a name
attribute (which, of course, the Rails input helpers add automatically)
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
Example usage:
selectize "Single-choice field", with: "Only option"
selectize "Multi-choice field", with: ["Option A", "Option B"]
The API allows it but the options need to be added first before the value can be set:
var selectize = $('.selector')[0].selectize
selectize.addOptions([{text: 'Hello', value: 'Hello'}, {text: 'World', value: 'World'}])
selectize.setValue(['Hello', 'World'])
Most of the answers here change stuff from beneath the covers and aren't the same as the users interaction. Here is a version which is close to the what the user does.
# 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
I created a helper that I mix in to my capybara feature specs:
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
And here's an example of how it is used:
# Single value
fill_in_selectized('candidate_offices', 'Santa Monica')
# Multiple values
fill_in_selectized('candidate_offices', ['San Francisco', 'Santa Monica'])
The first parameter is a "key" and works in our application given our markup. Depending on your markup, you might need a little tweak. This requires a Javascript enabled capybara driver (we use poltergeist).