Testing fields added dynamically by cocoon using rspec and capybara

6
votes

I was wondering whether anybody tests fields that were dynamically added by cocoon?

It's a great little time saver but all of the fields that are added dynamically have really long numerics added to the ID and name. This means that I have to skip testing that requires more than one (set of) field(s) on the page.

4
ruby-on-railsrspeccapybaracocoon-gem
The question is not entirely clear: you want to test the fields are present? You want to set the fields? – nathanvda
Hey Nathan, thanks for the gem! I was just struggling with locating anything generated dynamically by it due to the long numerics that get attached to said elements. For instance, clicking add fields would give something like <input class="string required form-control" id="foo_foo_attributes_1398082250289_name" name="foo[foo_attributes_attributes][1398082250289][name]" type="text"> on refresh these get set to their index in the ActiveRecord object but it was unclear how to find an element that had been added on the fly – DazBaldwin
I generally use the count, I count to see if a new child has been added (or removed), and using css selectors you can easily find the second (n-th) association. – nathanvda
out of curiosity, whet do the numerics correspond to? – DazBaldwin
I am sorry, I do not understand that question? – nathanvda

4 Answers

4
votes

Maybe using Capybara finders all, first and the selector input. Something like this:

visit new_resource_path
click_link "Add a Nested Resource"
first("input[name='nested_resource[name]']").set("Nested Resource")
click_button "submit"

Or

visit new_resource_path
click_link "Add a Nested Resource"
click_link "Add a Nested resource"
all("input[name='nested_resource[name]']").each do |input|
  input.set("Nested Resource")
end
click_button "submit

This is only an approach, I've never worked with cocoon. This is however, a form to test dynamic inputs.

8
votes

Afaik you could test for two things:

  • that the dynamic addition of the nested elements works
  • creating elements, filling it in and storing them in the database

So assume the relevant part of your view looks like this (default example):

#tasks
  = f.semantic_fields_for :tasks do |task|
    = render 'task_fields', :f => task
  .links
    = link_to_add_association 'add task', f, :tasks

and your nested element looks like

.nested-fields
  = f.input :description
  = f.input :done, :as => :boolean
  = link_to_remove_association "remove task", f

So normally you give it a class, i normally just test the count of elements on the page.

So if one element is already there, creating a new element, the count should be two. This you could test with

 find("#tasks .nested-fields").count.should == 2

Filling in the newly added nested element, you could use the :last-child css selector

 find("#tasks .nested-fields:last-child input#description").set("something")

How names and id are formed, are close to rails internals, so i try to stay away of those.

0
votes

A possible alternate that I just used is to dynamically update the label of each added form field (using the technique mentioned in https://github.com/nathanvda/cocoon/issues/374) and now my Cucumber/Capybara tests can easily insert text into the different multiple form fields distinguishing them via the different labels they have.

Full details on what I did in this PR https://github.com/AgileVentures/WebsiteOne/pull/1818

0
votes

Strange.

i have in the form (haml):

= link_to_add_association f, :staff_phases, class: :button, id: 'add-staff-phase-link' do
  %i.fas.fa-plus

and in my test

click_link 'add-staff-phase-link'
save_and_open_page

the click_link works but i can see no added association. if i, then on the opened page, click the link by mouse, the cocoon-link works and adds a association