0

I am looking for some assistance with acceptance testing of the Selectize jQuery plugin using the Capybara test framework.

We are having a problem with the way Selectize lays out the HTML it generates, there is no definitive link between the select dropdown and the values contained within the dropdown

As you can see from my jsfiddle here : http://jsfiddle.net/et4t20wz/

$('.test').selectize({ create: false, dropdownParent: 'body' });

Viewing the source code, the containing div has the 3 selects within it and the values for the dropdown are contained within the body tag.

I need a way for our test team to be able to create a 1 - 1 connection between the two elements. So far we have come up with a rather weak connection, as we know the first Selectize values will be stored in the first div.selectize-dropdown we can use this logic to map to the first div.selectize-control

This is rather flimsy and probably not the best approach, but the best we can come up with thus far. We have found a few solutions on the web, but sadly they appear to be out dated or reliant on different DOM structures.

For example: http://climber2002.github.io/blog/2014/09/22/capybara-integration-tests-with-jquery-selectize/

Hopefully we are not the only ones to have come in contact with this problem and someone can offer some assistance / advice

Thanks in advance.

Coderrrr
  • 230
  • 1
  • 16

2 Answers2

1

I believe the link is just positional in the html, the two divs that make up a a selectize control are inserted immediately after the select element that is converted. Therefore if you know the id of the original select you should be able to get the associated divs using the sibling selectors

page.find(:css, '#test + div.selectize-control + div.selectize-dropdown')

or

page.first(:css, '#test ~ div.selectize-dropdown')

if you've already clicked on the div.selective-control (or maybe the input in it) then the elements in the .selectize-dropdown should be visible and you can click on them

Thomas Walpole
  • 48,548
  • 5
  • 64
  • 78
  • Thanks for the help, Tom. We actually managed to fix it using jQuery in the end. The method we used allowed us to write specific tests for each drop down :) appreciate the support though! – Coderrrr Nov 06 '15 at 14:48
  • Ok, just so you realize that doing it through jquery/execute_script is less like a real user - may be fine for your tests though, all depends on what exactly you are testing for – Thomas Walpole Nov 06 '15 at 15:37
  • I agree. In our case, the testing is more for data completion than for user testing so executing jQuery scripting is okay – Coderrrr Nov 06 '15 at 16:08
0

So we managed to fix this problem using a solution I found here : Capybara integration tests with jquery.selectize

The code didn't really work, however. So I ended up using this script I wrote.

  var selectize = jQuery('#key').selectize()[0].selectize;

  jQuery(selectize.setValue(selectize.search('#value').items[0].id));
Community
  • 1
  • 1
Coderrrr
  • 230
  • 1
  • 16