Fix pagination on user snippets page

4 files changed, 47 insertions, 6 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 934dabe743a..657a4bf723c 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -8,6 +8,7 @@ v 8.12.0 (unreleased)
   - Add font color contrast to external label in admin area (ClemMakesApps)
   - Change logo animation to CSS (ClemMakesApps)
   - Instructions for enabling Git packfile bitmaps !6104
+  - Fix pagination on user snippets page
   - Change merge_error column from string to text type
   - Reduce contributions calendar data payload (ClemMakesApps)
   - Add `web_url` field to issue, merge request, and snippet API objects (Ben Boeckel)
diff --git a/app/assets/javascripts/snippets_list.js b/app/assets/javascripts/snippets_list.js
new file mode 100644
index 00000000000..dce3d71aeee
--- /dev/null
+++ b/app/assets/javascripts/snippets_list.js
@@ -0,0 +1,7 @@
+(function() {
+  this.gl.SnippetsList = function() {
+    $('.snippets-list-holder .pagination').on('ajax:success', function(e, data) {
+      $('.snippets-list-holder').replaceWith(data.html);
+    });
+  };
+}).call(this);
diff --git a/app/views/snippets/_snippets.html.haml b/app/views/snippets/_snippets.html.haml
index 80a3e731e1d..7be4a471579 100644
--- a/app/views/snippets/_snippets.html.haml
+++ b/app/views/snippets/_snippets.html.haml
@@ -1,7 +1,11 @@
-%ul.content-list
-  = render partial: 'shared/snippets/snippet', collection: @snippets
-  - if @snippets.empty?
-    %li
-      .nothing-here-block Nothing here.
+.snippets-list-holder
+  %ul.content-list
+    = render partial: 'shared/snippets/snippet', collection: @snippets
+    - if @snippets.empty?
+      %li
+        .nothing-here-block Nothing here.
 
-= paginate @snippets, theme: 'gitlab'
+  = paginate @snippets, theme: 'gitlab', remote: true
+
+:javascript
+  gl.SnippetsList();
diff --git a/spec/features/users/snippets_spec.rb b/spec/features/users/snippets_spec.rb
new file mode 100644
index 00000000000..356a8d668b0
--- /dev/null
+++ b/spec/features/users/snippets_spec.rb
@@ -0,0 +1,29 @@
+require 'spec_helper'
+
+describe 'Snippets tab on a user profile', feature: true, js: true do
+  include WaitForAjax
+
+  let(:user) { create(:user) }
+
+  context 'when the user has snippets' do
+    before do
+      create_list(:snippet, 25, :public, author: user)
+
+      visit user_path(user)
+      page.within('.user-profile-nav') { click_link 'Snippets' }
+      wait_for_ajax
+    end
+
+    it 'is limited to 20 items per page' do
+      expect(page.all('.snippets-list-holder .snippet-row').count).to eq(20)
+    end
+
+    context 'clicking on the link to the second page' do
+      before { click_link('2') }
+
+      it 'shows the remaining snippets' do
+        expect(page.all('.snippets-list-holder .snippet-row').count).to eq(5)
+      end
+    end
+  end
+end