Fix intermittent category select flake in category_scopes_spec for is…

spec/features/category_scopes_spec.rb

@@ -6,6 +6,28 @@
   let(:course) { create(:course, type: 'ArticleScopedProgram') }
   let(:user) { create(:user) }
 
+  def choose_select_option(selector, search_text, option_text, exact_text: false)
+    find(:css, "#{selector} input").set(search_text)
+
+    option_selector = "#{selector} div[class*=\"option\"]"
+    match_opts = exact_text ? { exact_text: option_text } : { text: option_text }
+
+    # Wait for the loading indicator to disappear (AsyncSelect renders
+    # a "Loading..." indicator while the debounced API call is in flight).
+    expect(page).to have_no_css("#{selector} div[class*='loadingIndicator']", wait: 15)
+
+    # Retry the click to guard against StaleElementReferenceError caused
+    # by React re-rendering the option list between find and click.
+    retries = 3
+    begin
+      find(:css, option_selector, wait: 15, **match_opts).click
+    rescue Selenium::WebDriver::Error::StaleElementReferenceError
+      retries -= 1
+      retry if retries > 0
+      raise
+    end
+  end
+
   before do
     JoinCourse.new(course:, user:, role: CoursesUsers::Roles::INSTRUCTOR_ROLE)
     login_as user
@@ -16,16 +38,14 @@
     visit "/courses/#{course.slug}/articles"
     expect(page).to have_content 'Tracked Categories'
     click_button 'Add category'
-    find(:css, '#categories input').set('Earth ')
-    find(:css, '#categories div[class*="option"]', text: 'Earth sciences').click
+    choose_select_option('#categories', 'Earth ', 'Earth sciences')
     click_button 'Add categories'
     click_button 'OK'
     expect(page).to have_content 'Category:Earth'
 
     # Re-add the same category
     click_button 'Add category'
-    find(:css, '#categories input').set('Earth ')
-    find(:css, '#categories div[class*="option"]', text: 'Earth sciences').click
+    choose_select_option('#categories', 'Earth ', 'Earth sciences')
     click_button 'Add categories'
     click_button 'OK'
 
@@ -37,8 +57,7 @@
     visit "/courses/#{course.slug}/articles"
     click_button 'Add template'
 
-    find(:css, '#templates input').set('Earth ')
-    find(:css, '#templates div[class*="option"]', text: 'Earth mass').click
+    choose_select_option('#templates', 'Earth ', 'Earth mass')
 
     click_button 'Add Templates'
     click_button 'OK'
@@ -49,10 +68,8 @@
     visit "/courses/#{course.slug}/articles"
     click_button 'Add category'
 
-    find(:css, '#categories input').set('Earth ')
-    find(:css, '#categories div[class*="option"]', text: 'Earth sciences').click
-    find(:css, '#categories input').set('Apple ')
-    find(:css, '#categories div[class*="option"]', text: 'en:Apple', exact_text: true).click
+    choose_select_option('#categories', 'Earth ', 'Earth sciences')
+    choose_select_option('#categories', 'Apple ', 'en:Apple', exact_text: true)
 
     click_button 'Add categories'
     click_button 'OK'
@@ -63,14 +80,11 @@
   it 'lets a facilitator add multiple categories from different wikis at once' do
     visit "/courses/#{course.slug}/articles"
     click_button 'Add category'
-    find(:css, '#categories input').set('Earth ')
-    find(:css, '#categories div[class*="option"]', text: 'Earth sciences').click
+    choose_select_option('#categories', 'Earth ', 'Earth sciences')
 
-    find(:css, '.multi-wiki-selector input').set('fr')
-    find(:css, '.multi-wiki-selector div[class*="option"]', text: 'fr.wikipedia.org').click
+    choose_select_option('.multi-wiki-selector', 'fr', 'fr.wikipedia.org')
 
-    find(:css, '#categories input').set('Matériel Apple ')
-    find(:css, '#categories div[class*="option"]', text: 'fr:Matériel Apple', exact_text: true).click # rubocop:disable Layout/LineLength
+    choose_select_option('#categories', 'Matériel Apple ', 'fr:Matériel Apple', exact_text: true)
 
     click_button 'Add categories'
     click_button 'OK'
@@ -82,10 +96,8 @@
     visit "/courses/#{course.slug}/articles"
     click_button 'Add template'
 
-    find(:css, '#templates input').set('Earth ')
-    find(:css, '#templates div[class*="option"]', text: 'Earth mass').click
-    find(:css, '#templates input').set('Apple Inc. ')
-    find(:css, '#templates div[class*="option"]', text: 'en:Apple Inc.', exact_text: true).click
+    choose_select_option('#templates', 'Earth ', 'Earth mass')
+    choose_select_option('#templates', 'Apple Inc. ', 'en:Apple Inc.', exact_text: true)
 
     click_button 'Add Templates'
     click_button 'OK'
@@ -97,14 +109,11 @@
     visit "/courses/#{course.slug}/articles"
     click_button 'Add template'
 
-    find(:css, '#templates input').set('Earth ')
-    find(:css, '#templates div[class*="option"]', text: 'Earth mass').click
+    choose_select_option('#templates', 'Earth ', 'Earth mass')
 
-    find(:css, '.multi-wiki-selector input').set('fr')
-    find(:css, '.multi-wiki-selector div[class*="option"]', text: 'fr.wikipedia.org').click
+    choose_select_option('.multi-wiki-selector', 'fr', 'fr.wikipedia.org')
 
-    find(:css, '#templates input').set('Palette Apple ')
-    find(:css, '#templates div[class*="option"]', text: 'fr:Palette Apple', exact_text: true).click
+    choose_select_option('#templates', 'Palette Apple ', 'fr:Palette Apple', exact_text: true)
 
     click_button 'Add Templates'
     click_button 'OK'
@@ -116,11 +125,9 @@
     visit "/courses/#{course.slug}/articles"
     click_button 'Add category'
 
-    find(:css, '#categories input').set('Earth ')
-    find(:css, '#categories div[class*="option"]', text: 'Earth sciences').click
+    choose_select_option('#categories', 'Earth ', 'Earth sciences')
     find(:css, '#category_depth').set('3')
-    find(:css, '#categories input').set('Apple ')
-    find(:css, '#categories div[class*="option"]', text: 'en:Apple', exact_text: true).click
+    choose_select_option('#categories', 'Apple ', 'en:Apple', exact_text: true)
 
     expect(page).to have_content 'en:Earth sciences - 0'
     expect(page).to have_content 'en:Apple - 3'