Merge pull request #6814 from tchak/test-improuve-selector

test(system): simplify select menu selector

app/javascript/components/ComboMultiple.jsx

@@ -110,9 +110,17 @@ function ComboMultiple({
         extraOptions[0] &&
         extraOptions[0][0] == selectedValue
       ) {
-        setNewValues((newValues) => [...newValues, selectedValue]);
+        setNewValues((newValues) => {
+          const set = new Set(newValues);
+          set.add(selectedValue);
+          return [...set];
+        });
       }
-      saveSelection((selections) => [...selections, selectedValue]);
+      saveSelection((selections) => {
+        const set = new Set(selections);
+        set.add(selectedValue);
+        return [...set];
+      });
     }
     setTerm('');
     awaitFormSubmit.done();
@@ -162,18 +170,17 @@ function ComboMultiple({
   };
 
   const onBlur = () => {
-    if (
+    const shouldSelect =
       term &&
-      [...extraOptions, ...options].map(([label]) => label).includes(term)
-    ) {
-      awaitFormSubmit(() => {
+      [...extraOptions, ...options].map(([label]) => label).includes(term);
+
+    awaitFormSubmit(() => {
+      if (shouldSelect) {
         onSelect(term);
-      });
-    } else {
-      setTimeout(() => {
+      } else {
         hidePopover();
-      }, 200);
-    }
+      }
+    });
   };
 
   return (
@@ -232,17 +239,11 @@ function ComboMultiple({
                 </button>
               </li>
             )}
-            {results.map(([label, value], index) => {
+            {results.map(([label], index) => {
               if (label.startsWith('--')) {
                 return <ComboboxSeparator key={index} value={label} />;
               }
-              return (
-                <ComboboxOption
-                  key={index}
-                  value={label}
-                  data-option-value={value}
-                />
-              );
+              return <ComboboxOption key={index} value={label} />;
             })}
           </ComboboxList>
         </ComboboxPopover>

app/javascript/components/ComboSearch.jsx

@@ -122,13 +122,7 @@ function ComboSearch({
                 const label = getLabel(result);
                 const [key, value] = transformResult(result);
                 resultsMap.current[label] = { key, value, result };
-                return (
-                  <ComboboxOption
-                    key={`${key}-${index}`}
-                    value={label}
-                    data-option-value={value}
-                  />
-                );
+                return <ComboboxOption key={`${key}-${index}`} value={label} />;
               })}
             </ComboboxList>
           ) : (

spec/support/system_helpers.rb

@@ -105,8 +105,7 @@ module SystemHelpers
 
   def select_combobox(libelle, fill_with, value, check: true)
     fill_in libelle, with: fill_with
-    selector = "li[data-option-value=\"#{value}\"]"
-    find(selector).click
+    find('li[role="option"]', text: value).click
     if check
       check_selected_value(libelle, with: value)
     end

spec/system/instructeurs/instruction_spec.rb

@@ -165,8 +165,8 @@ describe 'Instructing a dossier:', js: true do
 
     click_on 'Personnes impliquées'
 
-    select_combobox('Emails', instructeur_2.email, instructeur_2.id, check: false)
-    select_combobox('Emails', instructeur_3.email, instructeur_3.id, check: false)
+    select_combobox('Emails', instructeur_2.email, instructeur_2.email, check: false)
+    select_combobox('Emails', instructeur_3.email, instructeur_3.email, check: false)
 
     click_on 'Envoyer'
 

spec/system/instructeurs/procedure_filters_spec.rb

@@ -32,7 +32,7 @@ describe "procedure filters" do
   end
 
   scenario "should add be able to add created_at column", js: true do
-    add_column("Créé le", "self/created_at")
+    add_column("Créé le")
     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 @@ describe "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, "type_de_champ/#{type_de_champ.stable_id}")
+    add_column(type_de_champ.libelle)
     within ".dossiers-table" do
       expect(page).to have_link(type_de_champ.libelle)
       expect(page).to have_link(champ.value)
@@ -123,9 +123,9 @@ describe "procedure filters" do
     click_button "Ajouter le filtre"
   end
 
-  def add_column(column_name, column_path)
+  def add_column(column_name)
     click_on 'Personnaliser'
-    select_combobox('Colonne à afficher', column_name, column_path, check: false)
+    select_combobox('Colonne à afficher', column_name, column_name, check: false)
     click_button "Enregistrer"
   end