Capybara integration tests with jquery.selectize

Question

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.

Answer 1

I had various methods for filling in selectize input, but none of them worked with the case when options where loaded dynamically based on user input. It was needed because select otherwise would have few thousands of options and the page would load quite slow.

So here's the version that finally worked (it's based on most voted answer in this thread but with improved CSS selectors)

def fill_in_selectize(key, options = {})
    # fill the input text
    find("##{key} + .selectize-control .selectize-input input").native.send_keys(options[:with])
    # wait for the input and then click on it
    find(:xpath, "//div[@data-selectable and contains(., '#{options[:with]}')]").click
  end

Answer 2

None of the above worked reliably for me in 2022, here's what I use now:

def selectize_select(option_name, from:)
  page.execute_script <<~JS
    const id = $('label:contains(#{from.to_json})').attr('for').replace(/-selectized$/, '')
    const selectize = $(`#${id}`).selectize({})[0].selectize;
    selectize.setValue(selectize.search(#{option_name.to_json}).items[0].id);
  JS
end

It matches on the Label and option names instead of input ID and option values:

selectize_select 'Capybara', from: 'Your favorite animal'

Answer 3

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

Answer 4

This is my helper I mix in with my feature specs. It tweaks and extends Christian's answer.

• It addresses both select and text input types
• It reads like the regular Capybara fill_in method
• It can accept any identifier that works for find_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"]

Answer 5

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

Answer 6

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'])

Answer 7

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.