Cocoon callbacks aren't fired when called from rspec

Question

I have a page with nested fields that works well in development environment. I use an after-insert callback to number the field labels. So this creates the "pericoop 1, pericoop 2" labels. However, when I test the page from rspec, the labels aren't numbered. When I save_and_open_page, I see just the text "pericoop". So, for whatever reason it seems that the callback isn't fired.

Here's my rspec:

  scenario 'to multiple pericopes with valid attributes', js: true do
    fill_in 'pericoop 1', with: 'Jona 1:1 - 1:10'
    click_on 'Voeg nog een pericoop toe'
    should_see 'pericoop 2'
    fill_in 'pericoop 2', with: 'Jona 2:20 - 3:3'

    submit_form

    should_see 'Jona 1:1 - 10 | Jona 2:20 - 3:3'
  end

And the coffee-script

$ ->
  $("#pericopes").on "cocoon:after-insert", (event, added_item) ->
    num = $("#pericopes div.nested-fields").length
    added_item.find('.control-label').html('pericoop '+num)
    console.log('pericope numbered')

The console log is not displaying anything when run from the test (I've configured Firefox to keep the logs).

The form:

= simple_form_for studynote, validate: true do |f|
  #pericopes
    = f.simple_fields_for :pericopes do |ff|
      .nested-fields
        = ff.input :name,
                  label: "#{t('simple_form.labels.pericopes.name')} 1",
                  placeholder: 'Genesis 1:1-3:21',
                  autofocus: true
        = link_to_remove_association 'remove pericope', ff
    .links
      = link_to_add_association t('add_pericope'), f, :pericopes
  = f.input :title
  = f.input :note, :input_html => { :rows => 20 }    
  = f.button :submit, class: "btn-primary"

And the partial:

.nested-fields
  = f.input :name,
            label: "#{ t('simple_form.labels.pericopes.name') }",
            placeholder: 'Genesis 1:1-3:21',
            autofocus: true
  = link_to_remove_association 'remove pericope', f

EDIT, I've refactored the form and the partial to dry up some code, hoping that this might solve the issue, but no luck yet. Partial _pericope_fields.html.haml

.nested-fields
  - index = index
  = f.input :name,
            label: "#{ t('simple_form.labels.pericopes.name') } #{index}",
            placeholder: 'Genesis 1:1-3:21',
            autofocus: true
  = link_to_remove_association 'remove pericope', f

Form, _form.html.haml

= simple_form_for studynote, validate: true do |f|
  #pericopes
    = f.simple_fields_for :pericopes do |pericope|
      = render 'pericope_fields', f: pericope, index: 1
    .links
      = link_to_add_association t('add_pericope'), f, :pericopes, class: 'new btn-xs'
  = f.input :title
  = f.input :note, :input_html => { :rows => 20 }
  = f.button :submit, class: "btn-primary"

I've looked at this post, 300 but there the callbacks are not working at all. And another post (that I can't find right now) where the spec did not include a js: true. But that's not the problem here.

Any ideas what could be wrong here?

Answer 1

Not sure if you especially configured it to be so, but the tests depended on the presence of compiled assets.

So either, you once compiled the assets and then forgot to do it again, so the application.js did not contain the latest version, or you never compiled the assets.

I simply disabled the compiled assets in test by editing the config/environments/test.rb file and adding

config.assets.debug = true
config.assets.digest = true
config.assets.raise_runtime_errors = true

And then your tests seemed to work as expected (well two tests still failed: deleting studynotes and deleting pericopes but I am guessing that is something else).

Note: I also had to edit your seeds, since a field nr_of_verses was renamed in a later migration to nrofverses.