javascript - 无法通过 JavaScript 点击事件的 Rspec 测试

Question

我需要帮助对 Rails 4 应用程序中的 Javascript 单击事件的 Rspec 功能测试进行故障排除。我正在使用 Capybara、FactoryGirl 和数据种子文件。 Poltergeist 是 Capybara 的 JavaScript 驱动程序。我遇到问题的测试涉及图像 map ，当用户单击热点时，会在其中选择下拉菜单选项。我的应用程序代码在浏览器中按预期工作。该脚本在测试期间按预期执行，但我在编写通过测试(预期)时遇到困难。

以下是规范文件中的相关代码:

feature 'Clicking hotspots on image map' do

scenario 'selects chest muscle group', js:true do
  login
  expect(page).to have_content ("New Strength Exercise")
  #binding.pry
  page.execute_script("$('#map_chest_strength').click()")
  #save_and_open_page
  expect(page).to have_select("#strength_exercise_muscle_group_id", with_options: "Chest - pectoralis")
end
end

当我运行测试时，出现以下错误: 失败/错误:expect(page).to have_select("#strength_exercise_muscle_group_id", with_options: "胸部 - 胸肌") 预计会找到至少包含选项“胸部 - 胸肌”的选择框“#strength_exercise_muscle_group_id”，但没有匹配项

以下是相关的 JavaScript/JQuery 代码:

//Chest Muscle Group & Strength Exercise     
$("#map_chest_strength").click(function(){
    var chestID = 1;
    var muscle_group = $("#strength_exercise_muscle_group_id option[value='" + chestID + "']").attr("selected","selected");
    console.log(muscle_group);
 //Filters Strength Exercises by Chest Muscle Group        
    filterStrengthExercises();
 //Gets exercise description when user clicks muscle group via image map
    getDescription();
 }); // end image map - chest click event

以下是相关的 HTML 源代码:

<h4><span class="number">1</span>Choose target muscles</h4><br>
<label class="string optional" for="strength_exercise_muscle_group">Muscle group</label><br />
<select id="strength_exercise_muscle_group_id" name="strength_exercise[muscle_group_id]"><option value="">Your target muscles</option>
<option value="1">Chest - pectoralis</option></select>

种子文件已加载到测试环境中，并且单击事件按预期触发。在浏览器中选择“胸部 - 胸肌”作为下拉选项。为什么我的 Rspec 期望失败？我做错了什么，如何修复测试？感谢您的帮助!

Answer 1

have_select matcher 接受选择框的标签、名称或 id(不是 css 选择器)，而 with_options 接受一个数组，所以它应该是

expect(page).to have_select("strength_exercise_muscle_group_id", with_options: ["Chest - pectoralis"])

这将检查至少包含“Chest - pectoralis”选项的选择是否存在。如果您想验证选择是否存在并且该选项已被选择，则为

expect(page).to have_select("strength_exercise_muscle_group_id", selected: "Chest - pectoralis")

注意 - 如果选择框是多重选择，则所选选项可以是字符串数组

此外，在您的JS中，您使用 .attr("selected","selected") 来设置选定状态，实际上应该是 .prop("selected", true) (对于所有 bool 属性都相同) elements 属性是是否选择选项的正确指示符(而不是属性，在这种情况下，属性实际上仅在页面加载时相关)