无法通过我的JavaScript click事件的Rspec测试

Question

我需要帮助对我的Rails 4应用程序中的Java单击事件的Rspec功能测试进行故障排除。 我正在使用水豚，FactoryGirl和一个种子文件来存储数据。 Poltergeist是Capybara的JavaScript驱动程序。 我遇到的测试涉及一张图片地图，当用户单击热点时，会选择下拉菜单选项。 我的应用程序代码在浏览器中可以正常工作。 该脚本在测试期间按预期执行，但是我在编写通过测试（期望）时遇到了麻烦。

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

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：“ Chest-pectoralis”）预期会找到带有至少选项的选择框“ #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>

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

Answer 1

have_select匹配器采用选择框的标签，名称或ID（而不是CSS选择器），而with_options则采用Array，因此应为

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

它将检查是否存在至少带有选项“胸部-胸大肌”的选择。 如果要验证选择是否存在并且已选择该选项，则将

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

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

另外，在您的JS中，您正在使用.attr（“ selected”，“ selected”）设置选定状态，该状态实际上应该是.prop（“ selected”，true）（所有布尔属性相同），该属性设置了elements属性这是是否选择选项的正确指示（而不是属性，在此上下文中，该属性实际上仅在页面加载时才相关）