1 files changed, 84 insertions, 6 deletions
diff --git a/spec/frontend/jobs/components/table/job_table_app_spec.js b/spec/frontend/jobs/components/table/job_table_app_spec.js
index 9d1135e26c8..482d0df4e9a 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -1,4 +1,4 @@
-import { GlSkeletonLoader, GlAlert, GlEmptyState } from '@gitlab/ui';
+import { GlSkeletonLoader, GlAlert, GlEmptyState, GlPagination } from '@gitlab/ui';
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -25,6 +25,10 @@ describe('Job table app', () => {
   const findTabs = () => wrapper.findComponent(JobsTableTabs);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findPagination = () => wrapper.findComponent(GlPagination);
+
+  const findPrevious = () => findPagination().findAll('.page-item').at(0);
+  const findNext = () => findPagination().findAll('.page-item').at(1);
 
   const createMockApolloProvider = (handler) => {
     const requestHandlers = [[getJobsQuery, handler]];
@@ -32,8 +36,17 @@ describe('Job table app', () => {
     return createMockApollo(requestHandlers);
   };
 
-  const createComponent = (handler = successHandler, mountFn = shallowMount) => {
+  const createComponent = ({
+    handler = successHandler,
+    mountFn = shallowMount,
+    data = {},
+  } = {}) => {
     wrapper = mountFn(JobsTableApp, {
+      data() {
+        return {
+          ...data,
+        };
+      },
       provide: {
         projectPath,
       },
@@ -52,6 +65,7 @@ describe('Job table app', () => {
 
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findTable().exists()).toBe(false);
+      expect(findPagination().exists()).toBe(false);
     });
   });
 
@@ -65,9 +79,10 @@ describe('Job table app', () => {
     it('should display the jobs table with data', () => {
       expect(findTable().exists()).toBe(true);
       expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findPagination().exists()).toBe(true);
     });
 
-    it('should retfech jobs query on fetchJobsByStatus event', async () => {
+    it('should refetch jobs query on fetchJobsByStatus event', async () => {
       jest.spyOn(wrapper.vm.$apollo.queries.jobs, 'refetch').mockImplementation(jest.fn());
 
       expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
@@ -78,9 +93,72 @@ describe('Job table app', () => {
     });
   });
 
+  describe('pagination', () => {
+    it('should disable the next page button on the last page', async () => {
+      createComponent({
+        handler: successHandler,
+        mountFn: mount,
+        data: {
+          pagination: {
+            currentPage: 3,
+          },
+          jobs: {
+            pageInfo: {
+              hasPreviousPage: true,
+              startCursor: 'abc',
+              endCursor: 'bcd',
+            },
+          },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      wrapper.setData({
+        jobs: {
+          pageInfo: {
+            hasNextPage: false,
+          },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findPrevious().exists()).toBe(true);
+      expect(findNext().exists()).toBe(true);
+      expect(findNext().classes('disabled')).toBe(true);
+    });
+
+    it('should disable the previous page button on the first page', async () => {
+      createComponent({
+        handler: successHandler,
+        mountFn: mount,
+        data: {
+          pagination: {
+            currentPage: 1,
+          },
+          jobs: {
+            pageInfo: {
+              hasNextPage: true,
+              hasPreviousPage: false,
+              startCursor: 'abc',
+              endCursor: 'bcd',
+            },
+          },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findPrevious().exists()).toBe(true);
+      expect(findPrevious().classes('disabled')).toBe(true);
+      expect(findNext().exists()).toBe(true);
+    });
+  });
+
   describe('error state', () => {
     it('should show an alert if there is an error fetching the data', async () => {
-      createComponent(failedHandler);
+      createComponent({ handler: failedHandler });
 
       await waitForPromises();
 
@@ -90,7 +168,7 @@ describe('Job table app', () => {
 
   describe('empty state', () => {
     it('should display empty state if there are no jobs and tab scope is null', async () => {
-      createComponent(emptyHandler, mount);
+      createComponent({ handler: emptyHandler, mountFn: mount });
 
       await waitForPromises();
 
@@ -99,7 +177,7 @@ describe('Job table app', () => {
     });
 
     it('should not display empty state if there are jobs and tab scope is not null', async () => {
-      createComponent(successHandler, mount);
+      createComponent({ handler: successHandler, mountFn: mount });
 
       await waitForPromises();