From b8097e782a2e11339572cdb73db69cc525f8b1be Mon Sep 17 00:00:00 2001
From: Christophe Robillard <christophe.robillard@beta.gouv.fr>
Date: Thu, 11 Feb 2021 15:27:39 +0100
Subject: [PATCH] rend accessible la selection multiple usager
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

en remplaçant select2 par ComboMultipleDropdownList
---
 .../_multiple_drop_down_list.html.haml        |  9 +++------
 spec/features/users/brouillon_spec.rb         |  7 ++++---
 spec/support/feature_helpers.rb               | 19 +++++++++++++++++++
 .../shared/dossiers/_edit.html.haml_spec.rb   |  2 +-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml b/app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml
index e227cf775..4911753ee 100644
--- a/app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml
@@ -7,10 +7,7 @@
           = b.text
 
   - else
-    = form.select :value,
-        champ.options,
-        { selected: champ.selected_options,
-          disabled: champ.disabled_options },
-        multiple: true,
-        class: 'select2'
+    - hidden_field_id = SecureRandom.uuid
+    = form.hidden_field :value, { data: { uuid: hidden_field_id } }
+    = react_component("ComboMultipleDropdownList", options: champ.options, selected: champ.selected_options, disabled: champ.disabled_options, hiddenFieldId: hidden_field_id, label: champ.libelle)
 
diff --git a/spec/features/users/brouillon_spec.rb b/spec/features/users/brouillon_spec.rb
index cb02a6d55..9f3b9fa0f 100644
--- a/spec/features/users/brouillon_spec.rb
+++ b/spec/features/users/brouillon_spec.rb
@@ -25,8 +25,9 @@ feature 'The user' do
     check('val1')
     check('val3')
     select('bravo', from: form_id_for('simple_choice_drop_down_list_long'))
-    select('alpha', from: form_id_for('multiple_choice_drop_down_list_long'))
-    select('charly', from: form_id_for('multiple_choice_drop_down_list_long'))
+    select_multi('multiple_choice_drop_down_list_long', 'alpha')
+    select_multi('multiple_choice_drop_down_list_long', 'charly')
+
     select_champ_geo('pays', 'aust', 'AUSTRALIE')
 
     select_champ_geo('regions', 'Ma', 'Martinique')
@@ -83,7 +84,7 @@ feature 'The user' do
     expect(page).to have_checked_field('val1')
     expect(page).to have_checked_field('val3')
     expect(page).to have_selected_value('simple_choice_drop_down_list_long', selected: 'bravo')
-    expect(page).to have_selected_value('multiple_choice_drop_down_list_long', selected: ['alpha', 'charly'])
+    check_selected_values('multiple_choice_drop_down_list_long', ['alpha', 'charly'])
     expect(page).to have_hidden_field('pays', with: 'AUSTRALIE')
     expect(page).to have_hidden_field('regions', with: 'Martinique')
     expect(page).to have_hidden_field('departements', with: '02 - Aisne')
diff --git a/spec/support/feature_helpers.rb b/spec/support/feature_helpers.rb
index 56347bbfa..cb1bd6c9c 100644
--- a/spec/support/feature_helpers.rb
+++ b/spec/support/feature_helpers.rb
@@ -103,6 +103,25 @@ module FeatureHelpers
     end
   end
 
+  def select_multi(champ, with)
+    input = find("input[aria-label='#{champ}'")
+    input.click
+
+    # 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
+  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)
+  end
+
   # Keep the brower window open after a test success of failure, to
   # allow inspecting the page or the console.
   #
diff --git a/spec/views/shared/dossiers/_edit.html.haml_spec.rb b/spec/views/shared/dossiers/_edit.html.haml_spec.rb
index 12e24fad4..531f2d32c 100644
--- a/spec/views/shared/dossiers/_edit.html.haml_spec.rb
+++ b/spec/views/shared/dossiers/_edit.html.haml_spec.rb
@@ -82,7 +82,7 @@ describe 'shared/dossiers/edit.html.haml', type: :view do
       let(:type_de_champ) { create(:type_de_champ_multiple_drop_down_list, :long, procedure: dossier.procedure) }
 
       it 'renders the list as a multiple-selection dropdown' do
-        expect(subject).to have_selector('select.select2')
+        expect(subject).to have_selector('[data-react-class="ComboMultipleDropdownList"]')
       end
     end
   end