1 files changed, 172 insertions, 22 deletions
diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 0dcb712e720..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,
         },
@@ -53,7 +53,29 @@ describe('Pagination component', () => {
           component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
         ).toEqual(true);
 
-        component.$el.querySelector('.js-previous-button a').click();
+        component.$el.querySelector('.js-previous-button .page-link').click();
+
+        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();
       });
@@ -71,7 +93,25 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        component.$el.querySelector('.js-previous-button a').click();
+        component.$el.querySelector('.js-previous-button .page-link').click();
+
+        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);
       });
@@ -91,7 +131,29 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        const button = component.$el.querySelector('.js-first-button a');
+        const button = component.$el.querySelector('.js-first-button .page-link');
+
+        expect(button.textContent.trim()).toEqual('« First');
+
+        button.click();
+
+        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');
 
@@ -115,7 +177,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        const button = component.$el.querySelector('.js-last-button a');
+        const button = component.$el.querySelector('.js-last-button .page-link');
 
         expect(button.textContent.trim()).toEqual('Last »');
 
@@ -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,
           },
@@ -141,7 +219,27 @@ describe('Pagination component', () => {
 
         expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
 
-        component.$el.querySelector('.js-next-button a').click();
+        component.$el.querySelector('.js-next-button .page-link').click();
+
+        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();
       });
@@ -159,7 +257,25 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        component.$el.querySelector('.js-next-button a').click();
+        component.$el.querySelector('.js-next-button .page-link').click();
+
+        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);
       });
@@ -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();
+      });
     });
   });
 });