slim-select capybara helpers

slim_select_helper.rb

## from @dinshaw in https://github.com/brianvoe/slim-select/pull/246
## Assumption is that you have a label who's parent also contains the select list you are choosing from.

def js_select(item_text, options)
  container = find(:xpath, "//parent::*[label[text()='#{options[:from]}']]")
  within "##{container[:id]}", visible: false do
    find('.ss-arrow').click
    input = find(".ss-search input").native
    input.send_keys(item_text)
    find('div.ss-list').click
  end
end

# usage
js_select 'Item name', from: 'Label text'


## An alternative
module MultiSelectHelper
  def select_from_slim_select(item_text, options)
    from = options.fetch(:from)

    if !from.include?("#")
      label = find("label", text: from)
      from = "##{label["for"]}"
    end

    select_field = find(from, visible: false, wait: 2)
    slim_select_id = select_field["data-ssid"]
    slim_select_container = find("div.#{slim_select_id}")

    within(slim_select_container) do
      find(".ss-arrow, .ss-add").click

      sleep(0.5)

      input = find(".ss-search input").native
      input.send_keys(item_text)
      find("div.ss-list").click
    end

    click_off
    expect_ss_list_to_not_be_visible
  end

  private

  def expect_ss_list_to_be_visible
    expect(page).to have_css("div.ss-list")
  end

  def expect_ss_list_to_not_be_visible
    expect(page).to_not have_css("div.ss-list")
  end

  def click_off
    page.execute_script('document.querySelector("body").click();')
  end
end

# usage
select_from_slim_select("Option 1", from: "Name of label")
select_from_slim_select("Option 1", from: "#id-of-label")

If you use https://github.com/brianvoe/slim-select and capybara, consider using one of these helpers.

Thanks to https://github.com/brianvoe and https://github.com/dinshaw!

Thanks! Here is a slightly-modified version of the select method:

  def slim_select(item_text, options)
    within "##{options[:from]}", visible: false do # `from:` contains dom node id instead of label name
      find(".ss-arrow").click
    end

    input = find(".ss-search input").native
    input.send_keys(item_text)

    find("div.ss-list").click
    all("div.ss-option", text: item_text)[0].click
  end

my final version using trigger to cover overlapping components.

def slim_select(item_text, from)
  within from do
    find(".ss-arrow").trigger("click")
  end

  input = find(".ss-search input").native
  input.send_keys(item_text)

  find("div.ss-list").trigger("click")
  all("div.ss-option", text: item_text)[0].trigger("click")
end