Testing vue-select with Capybara

I recently wrote some feature tests with Rspec and Capybara for a Rails application that made use of the vue-select component. This needs to be done with a js driver such as headless-chrome activated. This method worked for me:

  scenario 'prefill from book', js: true do
    visit x_path
    page.find('div.dropdown').click
    page.find('ul.dropdown-menu li a', text: item.title).click
    click_button "Submit"
    expect(page).to have_text('something expected')
  end

I have been using Vue a fair bit in a number of Ruby on Rails projects that I maintain. I’ve been finding it great for features where a full-blown single page application is not necessary, but there is interactive behavior on the page that might otherwise become a mess of hard to maintain javascript. Vue is easy to install in Rails thanks to webpacker, and a breeze to use.

I am available for Ruby on Rails and Vue consulting work – get in touch to learn more!