Improuve ComboMultipleDropdownList style

spec/features/instructeurs/instruction_spec.rb

@@ -130,8 +130,8 @@ feature 'Instructing a dossier:', js: true do
 
     click_on 'Personnes impliquées'
 
-    select_multi('email instructeur', instructeur_2.email)
-    select_multi('email instructeur', instructeur_3.email)
+    select_multi_combobox('email instructeur', instructeur_2.email, instructeur_2.id)
+    select_multi_combobox('email instructeur', instructeur_3.email, instructeur_3.id)
 
     click_on 'Envoyer'
 

spec/features/instructeurs/procedure_filters_spec.rb

@@ -32,7 +32,7 @@ feature "procedure filters" do
   end
 
   scenario "should add be able to add created_at column", js: true do
-    add_column("Créé le")
+    add_column("Créé le", "self/created_at")
     within ".dossiers-table" do
       expect(page).to have_link("Créé le")
       expect(page).to have_link(new_unfollow_dossier.created_at.strftime('%d/%m/%Y'))
@@ -40,7 +40,7 @@ feature "procedure filters" do
   end
 
   scenario "should add be able to add and remove custom type_de_champ column", js: true do
-    add_column(type_de_champ.libelle)
+    add_column(type_de_champ.libelle, "type_de_champ/#{type_de_champ.stable_id}")
     within ".dossiers-table" do
       expect(page).to have_link(type_de_champ.libelle)
       expect(page).to have_link(champ.value)
@@ -123,15 +123,16 @@ feature "procedure filters" do
     click_button "Ajouter le filtre"
   end
 
-  def add_column(column_name)
+  def add_column(column_name, column_path)
     click_on 'Personnaliser'
-    select_multi('colonne', column_name)
+    select_multi_combobox('colonne', column_name, column_path)
     click_button "Enregistrer"
   end
 
   def remove_column(column_name)
     click_on 'Personnaliser'
-    find(:xpath, "//li[contains(text(), '#{column_name}')]/span[contains(text(), 'x')]").click
+    find(:xpath, ".//li[contains(text(), \"#{column_name}\")]/button", text: 'Désélectionner').click
+    find("body").native.send_key("Escape")
     click_button "Enregistrer"
   end
 end

spec/features/users/brouillon_spec.rb

@@ -25,16 +25,13 @@ feature 'The user' do
     check('val1')
     check('val3')
     select('bravo', from: form_id_for('simple_choice_drop_down_list_long'))
-    select_multi('multiple_choice_drop_down_list_long', 'alpha')
-    select_multi('multiple_choice_drop_down_list_long', 'charly')
+    select_multi_combobox('multiple_choice_drop_down_list_long', 'alp', 'alpha')
+    select_multi_combobox('multiple_choice_drop_down_list_long', 'cha', 'charly')
 
-    select_champ_geo('pays', 'aust', 'AUSTRALIE')
-
-    select_champ_geo('regions', 'Ma', 'Martinique')
-
-    select_champ_geo('departements', 'Ai', '02 - Aisne')
-
-    select_champ_geo('communes', 'Ambl', 'Ambléon (01300)')
+    select_combobox('pays', 'aust', 'AUSTRALIE')
+    select_combobox('regions', 'Ma', 'Martinique')
+    select_combobox('departements', 'Ai', '02 - Aisne')
+    select_combobox('communes', 'Ambl', 'Ambléon (01300)')
 
     check('engagement')
     fill_in('dossier_link', with: '123')
@@ -320,10 +317,6 @@ feature 'The user' do
     e.sibling('.datetime').first('select')[:id][0..-4]
   end
 
-  def have_hidden_field(libelle, with:)
-    have_css("##{form_id_for(libelle)}[value=\"#{with}\"]")
-  end
-
   def champ_value_for(libelle)
     champs = user_dossier.champs
     champs.find { |c| c.libelle == libelle }.value
@@ -352,14 +345,4 @@ feature 'The user' do
     expect(page).to have_selected_value("#{field}_4i", selected: date.strftime('%H'))
     expect(page).to have_selected_value("#{field}_5i", selected: date.strftime('%M'))
   end
-
-  def select_champ_geo(champ, fill_with, value)
-    input = find("input[aria-label=#{champ}")
-    input.click
-    input.fill_in with: fill_with
-    selector = "li[data-option-value=\"#{value}\"]"
-    find(selector).click
-    expect(page).to have_css(selector)
-    expect(page).to have_hidden_field(champ, with: value)
-  end
 end

spec/support/feature_helpers.rb

@@ -103,23 +103,43 @@ module FeatureHelpers
     end
   end
 
-  def select_multi(champ, with)
-    input = find("input[aria-label='#{champ}'")
+  def select_combobox(champ, fill_with, value)
+    input = find("input[aria-label=\"#{champ}\"")
     input.click
+    input.fill_in with: fill_with
+    selector = "li[data-option-value=\"#{value}\"]"
+    find(selector).click
+    expect(page).to have_css(selector)
+    expect(page).to have_hidden_field(champ, with: value)
+  end
 
-    # hack because for unknown reason, the click on input doesn't show combobox-popover with selenium driver
-    script = "document.evaluate(\"//input[@aria-label='#{champ}']//ancestor::div[@data-reach-combobox]/div[@data-reach-combobox-popover]\", document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null).iterateNext().removeAttribute(\"hidden\")"
-    execute_script(script)
-
-    element = find(:xpath, "//input[@aria-label='#{champ}']/ancestor::div[@data-reach-combobox]//div[@data-reach-combobox-popover]//li/span[normalize-space(text())='#{with}']")
-    element.click
+  def select_multi_combobox(champ, fill_with, value)
+    input = find("input[aria-label=\"#{champ}\"")
+    input.click
+    input.fill_in with: fill_with
+    selector = "li[data-option-value=\"#{value}\"]"
+    find(selector).click
+    check_selected_value(champ, value)
   end
 
   def check_selected_values(champ, values)
-    combobox = find(:xpath, "//input[@aria-label='#{champ}']/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
-    hiddenFieldId = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
-    hiddenField = find("input[data-uuid='#{hiddenFieldId}']")
-    expect(values.sort).to eq(JSON.parse(hiddenField.value).sort)
+    combobox = find(:xpath, "//input[@aria-label=\"#{champ}\"]/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
+    hidden_field_id = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
+    hidden_field = find("input[data-uuid=\"#{hidden_field_id}\"]")
+    hidden_field_values = JSON.parse(hidden_field.value)
+    expect(values.sort).to eq(hidden_field_values.sort)
+  end
+
+  def check_selected_value(champ, value)
+    combobox = find(:xpath, "//input[@aria-label=\"#{champ}\"]/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
+    hidden_field_id = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
+    hidden_field = find("input[data-uuid=\"#{hidden_field_id}\"]")
+    hidden_field_values = JSON.parse(hidden_field.value)
+    expect(hidden_field_values).to include(value)
+  end
+
+  def have_hidden_field(libelle, with:)
+    have_css("##{form_id_for(libelle)}[value=\"#{with}\"]")
   end
 
   # Keep the brower window open after a test success of failure, to