Use vanilla JS in spec as much as possible

Author: mshibuya

spec/integration/fields/belongs_to_association_spec.rb

@@ -62,9 +62,9 @@
       it 'allows update', js: true do
         visit edit_path(model_name: 'managed_team', id: teams[0].id)
         find('input.ra-filtering-select-input').set('M')
-        page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+        page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
         expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
-        page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("ManagingUser ##{users[1].id}")').trigger('mouseenter').click()}
+        page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("ManagingUser ##{users[1].id}")).click()}
         click_button 'Save'
         teams[0].reload
         expect(teams[0].user).to eq users[1]

spec/integration/fields/has_many_association_spec.rb

@@ -175,8 +175,6 @@
       it 'allows update', js: true do
         visit edit_path(model_name: 'managing_user', id: user.id)
         find('input.ra-multiselect-search').set('T')
-        page.execute_script("$('input.ra-multiselect-search').trigger('focus')")
-        page.execute_script("$('input.ra-multiselect-search').trigger('keydown')")
         find('.ra-multiselect-collection option', text: teams[1].name).select_option
         find('.ra-multiselect-item-add').click
         click_button 'Save'

spec/integration/fields/has_one_association_spec.rb

@@ -87,10 +87,9 @@
       it 'allows update', js: true do
         visit edit_path(model_name: 'managing_user', id: user.id)
         find('input.ra-filtering-select-input').set('T')
-        page.execute_script("$('input.ra-filtering-select-input').trigger('focus')")
-        page.execute_script("$('input.ra-filtering-select-input').trigger('keydown')")
+        page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
         expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
-        page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("#{team.name}")').trigger('mouseenter').click()}
+        page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("#{team.name}")).click()}
         click_button 'Save'
         expect(ManagingUser.first.team).to eq team
       end

spec/integration/fields/multiple_carrierwave_spec.rb

@@ -38,6 +38,7 @@
 
     it 'supports reordering files', js: true do
       visit edit_path(model_name: 'field_test', id: field_test.id)
+      page.execute_script File.read(File.expand_path('../../../vendor/assets/javascripts/rails_admin/jquery3.js', __dir__))
       page.execute_script File.read(File.expand_path('../../support/jquery.simulate.drag-sortable.js', __dir__))
       page.execute_script %{$(".ui-sortable-handle:first-child").simulateDragSortable({move: 1});}
       click_button 'Save'

spec/integration/fields/polymorphic_assosiation_spec.rb

@@ -9,9 +9,9 @@
       visit new_path(model_name: 'comment')
       select 'Player', from: 'comment[commentable_type]'
       find('input.ra-filtering-select-input').set('Rob')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
-      page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("Jackie Robinson")').trigger('mouseenter').click()}
+      page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("Jackie Robinson")).click()}
       click_button 'Save'
       expect(Comment.first.commentable).to eq @players[0]
     end
@@ -35,10 +35,10 @@
         select 'Polymorphic association test', from: 'comment[commentable_type]'
         find('input.ra-filtering-select-input').set('Rob')
 
-        page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+        page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
         expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
 
-        page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("Jackie Robinson")').trigger('mouseenter').click()}
+        page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("Jackie Robinson")).click()}
         click_button 'Save'
         expect(Comment.first.commentable).to eq polymorphic_association_tests.first
       end
@@ -55,15 +55,15 @@
       expect(find('select#comment_commentable_type').value).to eq 'Team'
       expect(find('select#comment_commentable_id', visible: false).value).to eq team.id.to_s
       find('input.ra-filtering-select-input').set('Los')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all('ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to eq ['Los Angeles Dodgers']
       select 'Player', from: 'comment[commentable_type]'
       find('input.ra-filtering-select-input').set('Rob')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all('ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to eq ['Rob Wooten', 'Jackie Robinson']
-      page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("Jackie Robinson")').trigger('mouseenter').click()}
+      page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("Jackie Robinson")).click()}
       click_button 'Save'
       expect(comment.reload.commentable).to eq players[0]
     end

spec/integration/widgets/filtering_multi_select_spec.rb

@@ -21,10 +21,10 @@
 
     it 'supports filtering' do
       find('input.ra-multiselect-search').set('Alex')
-      page.execute_script("$('input.ra-multiselect-search').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-multiselect-search').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_content 'No objects found'
       find('input.ra-multiselect-search').set('Ma')
-      page.execute_script("$('input.ra-multiselect-search').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-multiselect-search').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_content 'Leonys'
       expect(all('.ra-multiselect-collection option').map(&:text)).to match_array ['Leonys Martin', 'Matt Garza']
     end
@@ -89,11 +89,11 @@
 
     it 'supports filtering' do
       find('input.ra-multiselect-search').set('Alex')
-      page.execute_script("$('input.ra-multiselect-search').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-multiselect-search').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_content 'No objects found'
       players[2].update name: 'Adam Rosales'
       find('input.ra-multiselect-search').set('Ma')
-      page.execute_script("$('input.ra-multiselect-search').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-multiselect-search').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_content 'Leonys'
       expect(all('.ra-multiselect-collection option').map(&:text)).to match_array ['Leonys Martin']
     end
@@ -107,7 +107,7 @@
 
       it 'picks all available items' do
         find('input.ra-multiselect-search').set('Ma')
-        page.execute_script("$('input.ra-multiselect-search').trigger('focus').trigger('keydown')")
+        page.execute_script("document.querySelector('input.ra-multiselect-search').dispatchEvent(new KeyboardEvent('keydown'))")
         expect(page).to have_css('.ra-multiselect-collection option', text: /Matt/)
         click_link 'Choose all'
         expect(all(:css, '#team_player_ids option', visible: false).map(&:value)).to match_array players[1..2].map(&:id).map(&:to_s)

spec/integration/widgets/filtering_select_spec.rb

@@ -21,25 +21,25 @@
 
     it 'supports filtering' do
       find('input.ra-filtering-select-input').set('ge')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all(:css, 'ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to match_array ['Los Angeles Dodgers', 'Texas Rangers']
       find('input.ra-filtering-select-input').set('Los')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all(:css, 'ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to eq ['Los Angeles Dodgers']
       find('input.ra-filtering-select-input').set('Mets')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all(:css, 'ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to match_array ['No objects found']
     end
 
     it 'sets id of the selected item' do
       find('input.ra-filtering-select-input').set('Tex')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
-      page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("Texas Rangers")').trigger('mouseenter').click()}
+      page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("Texas Rangers")).click()}
       expect(find('#player_team_id', visible: false).value).to eq teams[1].id.to_s
     end
   end
@@ -49,17 +49,17 @@
       visit edit_path(model_name: 'player', id: player.id)
       expect(find('#player_team_id', visible: false).value).to eq teams[0].id.to_s
       find('input.ra-filtering-select-input').set('Tex')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item a')
-      page.execute_script %{$('ul.ui-autocomplete li.ui-menu-item a:contains("Texas Rangers")').trigger('mouseenter').click()}
+      page.execute_script %{[...document.querySelectorAll('ul.ui-autocomplete li.ui-menu-item')].find(e => e.innerText.includes("Texas Rangers")).click()}
       expect(find('#player_team_id', visible: false).value).to eq teams[1].id.to_s
     end
 
     it 'clears the current selection with making the search box empty' do
       visit edit_path(model_name: 'player', id: player.id)
       find('input.ra-filtering-select-input').set('')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('keyup')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keyup'))")
       expect(find('#player_team_id', visible: false).value).to be_empty
     end
 
@@ -109,12 +109,12 @@
 
     it 'supports filtering' do
       find('input.ra-filtering-select-input').set('ge')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all(:css, 'ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to match_array ['Los Angeles Dodgers', 'Texas Rangers']
       teams[0].update name: 'Cincinnati Reds'
       find('input.ra-filtering-select-input').set('Red')
-      page.execute_script("$('input.ra-filtering-select-input').trigger('focus').trigger('keydown')")
+      page.execute_script("document.querySelector('input.ra-filtering-select-input').dispatchEvent(new KeyboardEvent('keydown'))")
       is_expected.to have_selector('ul.ui-autocomplete li.ui-menu-item a')
       expect(all(:css, 'ul.ui-autocomplete li.ui-menu-item a').map(&:text)).to eq ['Cincinnati Reds']
     end

spec/integration/widgets/nested_many_spec.rb

@@ -18,7 +18,7 @@
     expect(page).to have_selector('.fields.tab-pane.active', visible: true)
 
     # trigger click via JS, workaround for instability in CI
-    execute_script %($('button[name="_save"]').trigger('click');)
+    execute_script %(document.querySelector('button[name="_save"]').click())
     is_expected.to have_content('Field test successfully updated')
 
     expect(field_test.nested_field_tests.length).to eq(1)
@@ -32,7 +32,7 @@
     edited_id = find('#field_test_nested_field_tests_attributes_0_id', visible: false).value
 
     # trigger click via JS, workaround for instability in CI
-    execute_script %($('button[name="_save"]').trigger('click');)
+    execute_script %(document.querySelector('button[name="_save"]').click())
     is_expected.to have_content('Field test successfully updated')
 
     expect(field_test.nested_field_tests.find(edited_id).title).to eq('nested field test title 1 edited')
@@ -45,7 +45,7 @@
     find('#field_test_nested_field_tests_attributes_0__destroy', visible: false).set('true')
 
     # trigger click via JS, workaround for instability in CI
-    execute_script %($('button[name="_save"]').trigger('click');)
+    execute_script %(document.querySelector('button[name="_save"]').click())
     is_expected.to have_content('Field test successfully updated')
 
     expect(field_test.reload.nested_field_tests.map(&:id)).to eq [nested_field_tests[1].id]

spec/integration/widgets/nested_one_spec.rb

@@ -17,7 +17,7 @@
     fill_in 'field_test_comment_attributes_content', with: 'nested comment content'
 
     # trigger click via JS, workaround for instability in CI
-    execute_script %($('button[name="_save"]').trigger('click');)
+    execute_script %(document.querySelector('button[name="_save"]').click())
     is_expected.to have_content('Field test successfully updated')
 
     expect(field_test.reload.comment.content.strip).to eq('nested comment content')
@@ -31,7 +31,7 @@
     find('.comment_field .remove_nested_fields', visible: false).click
 
     # trigger click via JS, workaround for instability in CI
-    execute_script %($('button[name="_save"]').trigger('click');)
+    execute_script %(document.querySelector('button[name="_save"]').click())
     is_expected.to have_content('Field test successfully updated')
 
     expect(field_test.reload.comment).to be nil
@@ -77,7 +77,7 @@
       find('.comment_field .remove_nested_fields', visible: false).click
 
       # trigger click via JS, workaround for instability in CI
-      execute_script %($('button[name="_save"]').trigger('click');)
+      execute_script %(document.querySelector('button[name="_save"]').click())
       is_expected.to have_content('Field test successfully updated')
 
       expect(field_test.reload.comment).to be nil