Using site_prism with dynamically loaded fields

Question

I’m wrestling to get a test running where I am adding elements dynamically to a page. The adding is done with javascript using the cocoon gem. Here’s a picture of the page. Setting the ‘title’ and the ‘bijbelstudie’ and the ‘perikoop 1’ all works fine. It is also possible to add more pericopes by clicking the ‘add new pericope’ button using site-prism. The elements are grouped und a pericopes div. Each individual element can be recognized with a form-group class.

My first question is: should I make a page object with ‘elements’ or with 'sections’? I can’t tell from the documentation which should be the preferred approach here. My second question, I can’t get it to work. I never get an array of pericopes, neither with sections nor with elements.

Please see the HTML code for a page with 2 elements, to understand the code.

<div id='pericopes'>
    <div class='nested-fields'>
        <div class='input-group'>
            <div class="form-group string required studynote_pericopes_name"><label
                    class="control-label string required" for="studynote_pericopes_attributes_0_name"><abbr
                    title="required">*</abbr> perikoop 1</label>
                <div>
                    <div class="input-group col-sm-12"><input class="form-control string required"
                                                              autofocus="autofocus"
                                                              placeholder="Genesis 1:1-3:21" type="text"
                                                              name="studynote[pericopes_attributes][0][name]"
                                                              id="studynote_pericopes_attributes_0_name"/>
                    </div>
                </div>
            </div>
            <span class='input-group-btn'>
<input type="hidden" name="studynote[pericopes_attributes][0][_destroy]" id="studynote_pericopes_attributes_0__destroy"
value="false"/><a class="delete remove_fields dynamic" style="margin-bottom:-9px" id="delete_pericope"
             href="#"></a>
</span>
        </div>
    </div>

My page object looks like this.

class PericopeSection < SitePrism::Section
  element :pericope_field, '.nested-fields'
  element :add_pericope_button, '#add_pericope'
end

class NewStudynotesPage < SitePrism::Page
  set_url '/studynotes/new'

  sections :pericopes, PericopeSection, 'div#pericopes'

  element :title_field, '#studynote_title'
  element :studynote_field, 'trix-editor'
  element :submit_button, '#submit_form'
end

Answer 1

I fixed it myself. I got rid of the section and solved it with elements.

class NewStudynotesPage < SitePrism::Page
  set_url '/studynotes/new'

  elements :pericopes, '.form-control'
  element :add_pericope_button, '#add_pericope'

  element :title_field, '#studynote_title'
  element :studynote_field, 'trix-editor'
  element :submit_button, '#submit_form'
end

The rspec now looks as follows:

require 'rails_helper'

feature 'Users can add multiple pericopes to a studynote', focus: true do
  let(:user) { create(:user) }

  scenario 'to multiple pericopes with valid attributes', js: true do

    create(:biblebook, name: 'Jona')
    login_as(user)

    nsp = NewStudynotesPage.new
    nsp.load
    nsp.title_field.set('Titel')
    nsp.studynote_field.set('Jona is bijzonder.')
    nsp.add_pericope_button.click
    nsp.pericopes[0].set('Jona 1:1 - 1:10')
    nsp.add_pericope_button.click

    nsp.pericopes[1].set('Jona 2:20 - 3:3')
    nsp.submit_button.click

    expect(StudynoteShowPage.new.pericope_field.text).to eq('Jona 1:1 - 10 | Jona 2:20 - 3:3')
  end
end