Merge branch '57991-frontend-pagination-needs-to-handle-cases-where-the-x-total-pages-header-isn-t-present' into 'master'

Improve the JS pagination to handle the case when the `X-Total` and `X-Total-Pages` headers aren't present

Closes #57991

See merge request gitlab-org/gitlab-ce!25601

1 files changed, 166 insertions, 16 deletions

diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 407d1d59f83..42cd41381dc 100644
--- a/spec/javascripts/vue_shared/components/table_pagination_spec.js
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js
@@ -22,10 +22,10 @@ describe('Pagination component', () => {
     it('should not render anything', () => {
       component = mountComponent({
         pageInfo: {
-          nextPage: 1,
+          nextPage: NaN,
           page: 1,
           perPage: 20,
-          previousPage: null,
+          previousPage: NaN,
           total: 15,
           totalPages: 1,
         },
@@ -58,6 +58,28 @@ describe('Pagination component', () => {
         expect(spy).not.toHaveBeenCalled();
       });
 
+      it('should be disabled and non clickable when total and totalPages are NaN', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 2,
+            page: 1,
+            perPage: 20,
+            previousPage: NaN,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        expect(
+          component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
+        ).toEqual(true);
+
+        component.$el.querySelector('.js-previous-button .page-link').click();
+
+        expect(spy).not.toHaveBeenCalled();
+      });
+
       it('should be enabled and clickable', () => {
         component = mountComponent({
           pageInfo: {
@@ -75,6 +97,24 @@ describe('Pagination component', () => {
 
         expect(spy).toHaveBeenCalledWith(1);
       });
+
+      it('should be enabled and clickable when total and totalPages are NaN', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 3,
+            page: 2,
+            perPage: 20,
+            previousPage: 1,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        component.$el.querySelector('.js-previous-button .page-link').click();
+
+        expect(spy).toHaveBeenCalledWith(1);
+      });
     });
 
     describe('first button', () => {
@@ -99,6 +139,28 @@ describe('Pagination component', () => {
 
         expect(spy).toHaveBeenCalledWith(1);
       });
+
+      it('should call the change callback with the first page when total and totalPages are NaN', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 3,
+            page: 2,
+            perPage: 20,
+            previousPage: 1,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        const button = component.$el.querySelector('.js-first-button .page-link');
+
+        expect(button.textContent.trim()).toEqual('« First');
+
+        button.click();
+
+        expect(spy).toHaveBeenCalledWith(1);
+      });
     });
 
     describe('last button', () => {
@@ -123,16 +185,32 @@ describe('Pagination component', () => {
 
         expect(spy).toHaveBeenCalledWith(5);
       });
+
+      it('should not render', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 3,
+            page: 2,
+            perPage: 20,
+            previousPage: 1,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        expect(component.$el.querySelector('.js-last-button .page-link')).toBeNull();
+      });
     });
 
     describe('next button', () => {
       it('should be disabled and non clickable', () => {
         component = mountComponent({
           pageInfo: {
-            nextPage: 5,
+            nextPage: NaN,
             page: 5,
             perPage: 20,
-            previousPage: 1,
+            previousPage: 4,
             total: 84,
             totalPages: 5,
           },
@@ -146,6 +224,26 @@ describe('Pagination component', () => {
         expect(spy).not.toHaveBeenCalled();
       });
 
+      it('should be disabled and non clickable when total and totalPages are NaN', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: NaN,
+            page: 5,
+            perPage: 20,
+            previousPage: 4,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
+
+        component.$el.querySelector('.js-next-button .page-link').click();
+
+        expect(spy).not.toHaveBeenCalled();
+      });
+
       it('should be enabled and clickable', () => {
         component = mountComponent({
           pageInfo: {
@@ -163,6 +261,24 @@ describe('Pagination component', () => {
 
         expect(spy).toHaveBeenCalledWith(4);
       });
+
+      it('should be enabled and clickable when total and totalPages are NaN', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 4,
+            page: 3,
+            perPage: 20,
+            previousPage: 2,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        component.$el.querySelector('.js-next-button .page-link').click();
+
+        expect(spy).toHaveBeenCalledWith(4);
+      });
     });
 
     describe('numbered buttons', () => {
@@ -181,22 +297,56 @@ describe('Pagination component', () => {
 
         expect(component.$el.querySelectorAll('.page').length).toEqual(5);
       });
+
+      it('should not render any page', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 4,
+            page: 3,
+            perPage: 20,
+            previousPage: 2,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        expect(component.$el.querySelectorAll('.page').length).toEqual(0);
+      });
     });
 
-    it('should render the spread operator', () => {
-      component = mountComponent({
-        pageInfo: {
-          nextPage: 4,
-          page: 3,
-          perPage: 20,
-          previousPage: 2,
-          total: 84,
-          totalPages: 10,
-        },
-        change: spy,
+    describe('spread operator', () => {
+      it('should render', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 4,
+            page: 3,
+            perPage: 20,
+            previousPage: 2,
+            total: 84,
+            totalPages: 10,
+          },
+          change: spy,
+        });
+
+        expect(component.$el.querySelector('.separator').textContent.trim()).toEqual('...');
       });
 
-      expect(component.$el.querySelector('.separator').textContent.trim()).toEqual('...');
+      it('should not render', () => {
+        component = mountComponent({
+          pageInfo: {
+            nextPage: 4,
+            page: 3,
+            perPage: 20,
+            previousPage: 2,
+            total: NaN,
+            totalPages: NaN,
+          },
+          change: spy,
+        });
+
+        expect(component.$el.querySelector('.separator')).toBeNull();
+      });
     });
   });
 });