Capybara and selectize

selectize_spec.rb

page.execute_script("$('.selectize-input input').val('ber')")
sleep 0.5
page.execute_script("$('.selectize-input input').keyup()")
sleep 0.5
page.execute_script("$('.full-name').mousedown()")


# https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js

Another version of the same.

  def selectize_single_select(selector, value)
    page.execute_script(%{
      var $select = $('#{ selector }').selectize();
      var selectize = $select[0].selectize;
      selectize.setValue(#{ value });
    })
  end

  def selectize_multi_select(selector, *values)
    page.execute_script(%{
      var $select = $('#{ selector }').selectize();
      var selectize = $select[0].selectize;
      selectize.setValue(#{ values });
    })
  end

To DRY this code a bit one could implement it as one method with extra-parameter. Like:

def fill_in_selectize(selector, multi=false, *values)
  ...
end

Here's yet another version of the same. I recently did some shuffling of code such that jQuery was not in the global namespace. Instead it's imported as needed. So my test helpers no longer had access to jQuery. This moves the helper code to using vanilla with querySelector{All} instead of the jquery finder helpers.

module SelectizeSelectHelper
  delegate :execute_script, to: :page

  def find_selectized_control_js(key)
    %{ document.querySelector('##{key}.selectized').nextElementSibling }
  end

  def open_selectize_chooser(key)
    execute_script %{ document.querySelector('##{key}').selectize.open(); }
  end

  def close_selectize_chooser(key)
    execute_script %{ document.querySelector('##{key}').selectize.close(); }
  end

  # Select a single item from a selectized select input where multiple=false given the id for base field
  def selectize_single_select(key, value)
    # It may be tempting to combine these into one execute_script, but don't; it will cause failures.
    open_selectize_chooser(key)
    execute_script %{
                   var options = #{find_selectized_control_js(key)}.querySelectorAll('.option');
                   var option = Array.from(options).find((opt) => opt.innerHTML.match(/#{value}/));
                   option.click() }
  end
end