Testing fields added dynamically by cocoon using rspec and capybara

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

It might be common knowledge, but sharing this as it worked for me when dealing with a nested attribute that requires a select instead of a text input. I find all instances of my select fields, then pick the select field I want to updated with my preferred option like below:

page.find_all('select[id^="model_model_nested_attributes_"]')[2].select("preferred_option")

Answer 5

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