Use zero based pagination parameter

By default, Select2 passes `page=2` to fetch the second page. This is
incompatible with the ActiveAdmin's zero based pagination. Pass `data`
option to change `page` param.

* Add end-to-end spec for loading more options.

* Make ajax spec helpers more robust against additional ajax requests.

* Include CSS in dummy app, to make measuring work.

* Add `sass-rails` dependency to fix Active Admin 1.0 compatibility
  with `select2-rails`.

Author: tf

Gemfile

@@ -1,3 +1,7 @@
 source 'https://rubygems.org'
 
+# Required for select2-rails to work with Active Admin 1.1
+# see https://github.com/activeadmin/activeadmin/issues/5226
+gem 'sass-rails'
+
 gemspec

activeadmin-searchable_select.gemspec

@@ -1,5 +1,3 @@
-# -*- encoding: utf-8 -*-
-
 lib = File.expand_path('../lib', __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require 'activeadmin/searchable_select/version'

app/assets/javascripts/active_admin/searchable_select/init.js

@@ -12,7 +12,14 @@
         $.extend(options, {
           ajax: {
             url: url,
-            dataType: 'json'
+            dataType: 'json',
+
+            data: function (params) {
+              return {
+                term: params.term,
+                page: pageParamWithBaseZero(params)
+              };
+            }
           }
         });
       }
@@ -21,6 +28,10 @@
     });
   }
 
+  function pageParamWithBaseZero(params) {
+    return params.page ? params.page - 1 : undefined;
+  }
+
   $(document).on('has_many_add:after', '.has_many_container', function(e, fieldset) {
     initSearchableSelects(fieldset.find('.searchable-select-input'));
   });

gemfiles/rails_4.2_active_admin_1.0.0.pre4.gemfile

@@ -2,6 +2,7 @@
 
 source "https://rubygems.org"
 
+gem "sass-rails"
 gem "rails", "~> 4.2"
 gem "activeadmin", "1.0.0.pre4"
 gem "jquery-ui-rails", "~> 5.0"

gemfiles/rails_5.1_active_admin_1.0.gemfile

@@ -2,6 +2,7 @@
 
 source "https://rubygems.org"
 
+gem "sass-rails"
 gem "rails", "~> 5.1"
 gem "activeadmin", "~> 1.0"
 

gemfiles/rails_5.1_active_admin_1.1.gemfile

@@ -2,6 +2,7 @@
 
 source "https://rubygems.org"
 
+gem "sass-rails"
 gem "rails", "~> 5.1"
 gem "activeadmin", "~> 1.1"
 

spec/features/end_to_end_spec.rb

@@ -24,35 +24,42 @@
   end
 
   describe 'index page with searchable select filter' do
-    before(:each) do
-      music_category = Category.create(name: 'Music')
-      travel_category = Category.create(name: 'Travel')
-
-      Post.create(title: 'Best songs',
-                  category: music_category)
-      Post.create(title: 'Best places',
-                  category: travel_category)
-    end
-
     it 'loads filter input options' do
+      Category.create(name: 'Music')
+      Category.create(name: 'Travel')
+
       visit '/admin/posts'
 
       expand_select_box
+      wait_for_ajax
 
       expect(select_box_items).to eq(%w(Music Travel))
     end
 
     it 'allows filtering options by term' do
+      Category.create(name: 'Music')
+      Category.create(name: 'Travel')
+
       visit '/admin/posts'
 
       expand_select_box
-
-      wait_for_ajax do
-        enter_search_term('T')
-      end
+      enter_search_term('T')
+      wait_for_ajax
 
       expect(select_box_items).to eq(%w(Travel))
     end
+
+    it 'loads more items when scrolling down' do
+      15.times { |i| Category.create(name: "Category #{i}") }
+      visit '/admin/posts'
+
+      expand_select_box
+      wait_for_ajax
+      scroll_select_box_list
+      wait_for_ajax
+
+      expect(select_box_items.size).to eq(15)
+    end
   end
 
   def expand_select_box
@@ -63,21 +70,21 @@ def enter_search_term(term)
     find('.select2-dropdown input').send_keys(term)
   end
 
+  def scroll_select_box_list
+    page.execute_script '$(".select2-container ul").scrollTop(1000)'
+  end
+
   def select_box_items
     all('.select2-dropdown li').map(&:text)
   end
 
-  def wait_for_ajax(count = 1)
-    page.execute_script 'window._ajaxCalls = 0'
-    page.execute_script 'window._ajaxCompleteCounter = function() { window._ajaxCalls += 1; }'
-    page.execute_script '$(document).ajaxComplete(window._ajaxCompleteCounter)'
-
-    yield
-
-    sleep(0.5) until finished_all_ajax_requests?(count)
+  def wait_for_ajax
+    Timeout.timeout(Capybara.default_max_wait_time) do
+      loop until finished_all_ajax_requests?
+    end
   end
 
-  def finished_all_ajax_requests?(count)
-    page.evaluate_script('window._ajaxCalls') == count
+  def finished_all_ajax_requests?
+    page.evaluate_script('jQuery.active').zero?
   end
 end

spec/internal/app/assets/stylesheets/active_admin.scss

@@ -1,2 +1,4 @@
 @import "active_admin/mixins";
 @import "active_admin/base";
+
+@import "active_admin/searchable_select";