Javascript libraries not loaded in integration tests

Question

I implemented my integration tests using RSpec, Capybara and the Poltergeist driver. Here is an example:

describe "Answer a question", type: :feature, js: true do
  subject(:visit_page) do
    login_as create(:user)

    exercise = create(:exercise)
    question = create_a_question_to_exercise(exercise)
    create(:test_case, :hello_world, question: question)

    visit new_answer_path(question)
  end

  it "shows the answer" do
    visit_page
    content = "puts 'Hello, world!'"
    fill_in_editor_field content
    expect(page).to have_editor_display text: content
  end
end

Here is the javascript used in the view visited in the test:

<script>
  function adjust_screen() {
    var new_height =  $('.content-wrapper').height()
                      - $('#test-results').height()
                      - $('#error_explanation').height();
    $('.content-wrapper').height(new_height);
    $('#test-results').empty();
    $('#error_explanation').remove();
    $('#answer-result').remove();
    $('.submit').append('<i class="fa fa-refresh fa-spin"></i>');
  }

  var textarea = $('#editor');
  textarea.hide();

  var editor = ace.edit("editor_div");
  editor.setTheme("ace/theme/twilight");
  editor.getSession().setMode("ace/mode/pascal");

  // When click put ace editor content in form hidden textarea.
  $('input[name="commit"]').on('click', function() {
    textarea.val(editor.getSession().getValue());
    adjust_screen();
  });
</script>

Running the test, I receive the following error:

Capybara::Poltergeist::JavascriptError: One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

SyntaxError: Parse error SyntaxError: Parse error ReferenceError: Can't find variable: $ ReferenceError: Can't find variable: $

(That happens in all tests which involve javascript)

The conclusion that javascript libraries aren't loaded because this experiment: I added <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> to the header of my layout, and this error is gone. However, a new error appears, accusing that the ace variable is not defined (it comes from another library, ace-editor).

Originally, all my javascript libraries are referenced in application.js. So I shouldn't need to load that in header.

I tested with capybara-webkit too, and the same happens.

I'm completely out of ideas. Any suggestions?

Answer 1

When JS works in development mode but appears not to be loaded at all in dev mode it's usually because of an error somewhere in one of your JS files. In dev mode each file is loaded separately which means an error in one doesn't stop the loading/parsing of other files. However, in test mode the rails asset pipeline concatenates all the files referenced in application.js into one file. This means an error in one file can abort the parsing of any JS concatenated after it. You can check for this by looking for errors in your browsers developer console in dev mode and fixing any shown.