Rails System Test Not Loading Vue

Question

I have a Vue feature in my rails 5.1 app that basically accepts a deeply nested form. The feature works perfectly in development, staging and production, however, when using the new minitest system tests with selenium and capybara, vue doesn't appear to load. As Selenium shows you whats happening in real time, I can see that the rails elements (such as _header, _footer, h1-Title) are all loading fine, but the Vue piece never appears.

Here is my testing setup:

Gemfile

group :test do
  gem 'minitest-rails'
  gem 'minitest-reporters'
  gem 'minitest-rails-capybara'
  gem 'faker'
  gem 'capybara', '~> 2.7', '>= 2.7.1'
  gem 'selenium-webdriver'
  gem 'simplecov', :require => false
end

test/test_helper.rb

ENV["RAILS_ENV"] = "test"
require 'simplecov'
SimpleCov.start 'rails'
require File.expand_path("../../config/environment", __FILE__)
require "rails/test_help"
require "minitest/rails"
require "minitest/rails/capybara"
require "minitest/pride"
require 'minitest/reporters'
require "support/test_password_helper"
Minitest::Reporters.use! Minitest::Reporters::SpecReporter.new

ActiveRecord::FixtureSet.context_class.send :include, TestPasswordHelper

class ActiveSupport::TestCase
  require "#{Rails.root}/db/seeds.rb"
  fixtures :all
  require 'minitest/autorun'
  include TestPasswordHelper

  # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
  # Add more helper methods to be used by all tests here...
  def sign_in(user)
    post user_session_path \
      'user[email]'    => user.email,
      'user[password]' => user.password
  end

  def submit_form
    find('input[name="commit"]').click
  end
end

test/application_system_test_case.rb

require "test_helper"

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
  include Devise::Test::IntegrationHelpers
end

test/system/proposals_test.rb

require "application_system_test_case"

class ProposalsTest < ApplicationSystemTestCase
  test 'create a proposal' do
    sign_in users(:martin)
    @supplier = businesses(:supplier_two)
    @project = projects(:pete_project_three)
    visit dashboard_path

    assert_selector 'h3', text: @supplier.display_name
    assert_link text: 'Propose for project'
    click_on 'Create Proposal'
    assert_selector 'h1', text: 'New Proposal'
    assert_selector 'small', text: '(Version: 1)'
    fill_in 'title0', with: 'This is a title'
    fill_in 'body0', with: 'This is a body'
    click_on 'Add Section'
    fill_in 'title1', with: 'This is a second title'
    fill_in 'body1', with: 'This is a second body'
  end
end

The test itself is failing at fill_in 'title0', with: 'This is a title' because the vue feature doesn't load

Note I am using turbolinks, but as mentioned, it's all working perfecting in practice, its just not loading for the system tests.

Happy to provide more detail if needed

Update

As was suggested I was able to get into the browser console logs using byebug in the test (thanks Thomas), which allowed me to engage with the console when the test paused. This is the error in the console:

 Uncaught Error: Module build failed: SyntaxError: Unexpected token, expected (27:7)

25 | //
26 | 
27 | import import bus from '../bus'
   |        ^
28 | import ClientDetails from './ClientDetails.vue'
29 | import SupplierDetails from './SupplierDetails.vue'
30 | import Sections from './Sections.vue'


at Object.disposed (proposal.js:518)
at __webpack_require__ (proposal.js:20)
at Object.module.exports.render._vm (proposal.js:539)
at __webpack_require__ (proposal.js:20)
at Object.exports.byteLength (proposal.js:15148)
at __webpack_require__ (proposal.js:20)
at module.exports.rawScriptExports (proposal.js:66)
at proposal.js:69

Seems the issue may be with an import import typo, but that isn't my bus, so it must be Vue.js itself?

Answer 1

Firstly, you're mixing the use of Capybara with request methods (get, post, etc). You can't do that since the request methods don't affect the session Capybara uses (a commit was recently made to rails to undefine the request methods in SystemTestCase because of the confusion they cause - https://github.com/rails/rails/commit/1aea1ddd2a4b3bfa7bb556e4c7cd40f9531ac2e3). To fix this your sign_in method needs to change to actually visit the page, fill in the fields, and submit the form. Secondly, At the end of sign_in you need to assert for something that would indicate the login has completed. If that isn't done the visit immediately following the call to sign_in can occur before the cookies get sent back to the browser and you can still end up not signed in.

def sign_in(user)
  visit new_user_session_path # wherever the login page is
  fill_in('user[email]', with: user.email)
  fill_in('user[password], with: user.password)
  click_button('Sign in') # whatever needs to be clicked to login
  assert_text('You are now logged in') # whatever message confirms the login succeeded
end