Javascript 集成测试中未加载的库
Javascript libraries not loaded in integration tests
我使用 RSpec、Capybara 和 Poltergeist driver 实现了我的集成测试。这是一个例子:
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
这里是测试访问的视图中使用的javascript:
<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>
运行 测试,我收到以下错误:
水豚::闹鬼::Javascript错误:
页面上的 Javascript 代码出现了一个或多个错误。如果您不关心这些错误,可以通过在 Poltergeist 配置中设置 js_errors: false 来忽略它们(有关详细信息,请参阅文档)。
SyntaxError: 解析错误
SyntaxError: 解析错误
ReferenceError:找不到变量:$
ReferenceError:找不到变量:$
(这发生在所有涉及 javascript 的测试中)
javascript 库未加载的结论是因为这个实验:我将 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
添加到布局的 header 中,此错误消失了。但是又出现了新的错误,提示未定义ace
变量(来自另一个库,ace-editor
)。
最初,application.js
中引用了我所有的 javascript 库。所以我不需要在 header.
中加载它
我也用 capybara-webkit
测试过,结果也是一样。
我完全没主意了。有什么建议么?
我曾经在 运行 功能测试之前预编译资产
# Don't forget to include this on rails_helper.rb
Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }
# spec/support/feature_helper.rb
RSpec.configure do |config|
config.before :all do
ENV['PRECOMPILE_ASSETS'] ||= begin
case self.class.metadata[:type]
when :feature, :view
STDOUT.write "Precompiling assets..."
system "bundle exec rake assets:precompile > /dev/null 2>&1"
STDOUT.puts "\n Done."
Time.now.to_s
end
end
end
end
当 JS 在开发模式下工作但在开发模式下似乎根本没有加载时,这通常是因为您的某个 JS 文件中某处存在错误。在开发模式下,每个文件都是单独加载的,这意味着一个文件中的错误不会阻止其他文件的 loading/parsing。但是,在测试模式下,rails 资产管道将 application.js 中引用的所有文件连接到一个文件中。这意味着一个文件中的错误可以中止在它之后连接的任何 JS 的解析。您可以通过在开发模式下的浏览器开发人员控制台中查找错误并修复任何显示的错误来检查这一点。
我使用 RSpec、Capybara 和 Poltergeist driver 实现了我的集成测试。这是一个例子:
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
这里是测试访问的视图中使用的javascript:
<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>
运行 测试,我收到以下错误:
水豚::闹鬼::Javascript错误: 页面上的 Javascript 代码出现了一个或多个错误。如果您不关心这些错误,可以通过在 Poltergeist 配置中设置 js_errors: false 来忽略它们(有关详细信息,请参阅文档)。
SyntaxError: 解析错误 SyntaxError: 解析错误 ReferenceError:找不到变量:$ ReferenceError:找不到变量:$
(这发生在所有涉及 javascript 的测试中)
javascript 库未加载的结论是因为这个实验:我将 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
添加到布局的 header 中,此错误消失了。但是又出现了新的错误,提示未定义ace
变量(来自另一个库,ace-editor
)。
最初,application.js
中引用了我所有的 javascript 库。所以我不需要在 header.
我也用 capybara-webkit
测试过,结果也是一样。
我完全没主意了。有什么建议么?
我曾经在 运行 功能测试之前预编译资产
# Don't forget to include this on rails_helper.rb
Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }
# spec/support/feature_helper.rb
RSpec.configure do |config|
config.before :all do
ENV['PRECOMPILE_ASSETS'] ||= begin
case self.class.metadata[:type]
when :feature, :view
STDOUT.write "Precompiling assets..."
system "bundle exec rake assets:precompile > /dev/null 2>&1"
STDOUT.puts "\n Done."
Time.now.to_s
end
end
end
end
当 JS 在开发模式下工作但在开发模式下似乎根本没有加载时,这通常是因为您的某个 JS 文件中某处存在错误。在开发模式下,每个文件都是单独加载的,这意味着一个文件中的错误不会阻止其他文件的 loading/parsing。但是,在测试模式下,rails 资产管道将 application.js 中引用的所有文件连接到一个文件中。这意味着一个文件中的错误可以中止在它之后连接的任何 JS 的解析。您可以通过在开发模式下的浏览器开发人员控制台中查找错误并修复任何显示的错误来检查这一点。