Rails 系统测试未加载 Vue

Question

我的 rails 5.1 应用程序中有一个 Vue 功能，它基本上接受深度嵌套的表单。该功能在开发、登台和生产中完美运行，但是，当使用带有 selenium 和 capybara 的新 minitest 系统测试时，vue 似乎没有加载。当 Selenium 向您展示实时发生的事情时，我可以看到 rails 元素（例如 _header、_footer、h1-Title）都可以正常加载，但 Vue 片段从未出现。

这是我的测试设置：

宝石文件

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

测试本身在 fill_in 'title0', with: 'This is a title' 失败，因为未加载 vue 功能

请注意，我使用的是 turbolinks，但如前所述，它在实践中都在完善，只是没有为系统测试加载。

如果需要，很乐意提供更多详细信息

更新

正如建议的那样，我能够在测试中使用 byebug 进入浏览器控制台日志（感谢 Thomas），这让我可以在测试暂停时使用控制台。这是控制台中的错误：

 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

似乎问题可能出在import import 错字上，但这不是我的bus，所以一定是Vue.js 本身？

Answer 1

首先，您将 Capybara 的使用与请求方法（get、post 等）混合使用。您不能这样做，因为请求方法不会影响 Capybara 使用的会话（最近对 rails 进行了提交以取消定义 SystemTestCase 中的请求方法，因为它们引起了混淆 - https://github.com/rails/rails/commit/1aea1ddd2a4b3bfa7bb556e4c7cd40f9531ac2e3）。要解决此问题，您的 sign_in 方法需要更改为实际访问页面、填写字段并提交表单。 其次，在 sign_in 结束时，您需要声明一些表明登录已完成的内容。如果不这样做，则在调用 sign_in 之后立即进行访问，可能会在 cookie 被发送回浏览器之前进行，您仍然可能最终无法登录。

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