1 files changed, 17 insertions, 42 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 5ccd38af735..4d51624dfff 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, GlPagination } from '@gitlab/ui';
+import { GlSkeletonLoader, GlAlert, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -8,12 +8,7 @@ import getJobsQuery from '~/jobs/components/table/graphql/queries/get_jobs.query
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import JobsTableTabs from '~/jobs/components/table/jobs_table_tabs.vue';
-import {
-  mockJobsQueryResponse,
-  mockJobsQueryEmptyResponse,
-  mockJobsQueryResponseLastPage,
-  mockJobsQueryResponseFirstPage,
-} from '../../mock_data';
+import { mockJobsQueryResponse, mockJobsQueryEmptyResponse } from '../../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';
 Vue.use(VueApollo);
@@ -30,10 +25,9 @@ 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 triggerInfiniteScroll = () =>
+    wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
 
   const createMockApolloProvider = (handler) => {
     const requestHandlers = [[getJobsQuery, handler]];
@@ -53,7 +47,7 @@ describe('Job table app', () => {
         };
       },
       provide: {
-        projectPath,
+        fullPath: projectPath,
       },
       apolloProvider: createMockApolloProvider(handler),
     });
@@ -69,7 +63,6 @@ describe('Job table app', () => {
 
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findTable().exists()).toBe(false);
-      expect(findPagination().exists()).toBe(false);
     });
   });
 
@@ -83,7 +76,6 @@ 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 refetch jobs query on fetchJobsByStatus event', async () => {
@@ -95,41 +87,24 @@ describe('Job table app', () => {
 
       expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(1);
     });
-  });
 
-  describe('pagination', () => {
-    it('should disable the next page button on the last page', async () => {
-      createComponent({
-        handler: jest.fn().mockResolvedValue(mockJobsQueryResponseLastPage),
-        mountFn: mount,
-        data: {
-          pagination: { currentPage: 3 },
-        },
+    describe('when infinite scrolling is triggered', () => {
+      beforeEach(() => {
+        triggerInfiniteScroll();
       });
 
-      await waitForPromises();
-
-      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: jest.fn().mockResolvedValue(mockJobsQueryResponseFirstPage),
-        mountFn: mount,
-        data: {
-          pagination: {
-            currentPage: 1,
-          },
-        },
+      it('does not display a skeleton loader', () => {
+        expect(findSkeletonLoader().exists()).toBe(false);
       });
 
-      await waitForPromises();
+      it('handles infinite scrolling by calling fetch more', async () => {
+        await waitForPromises();
 
-      expect(findPrevious().exists()).toBe(true);
-      expect(findPrevious().classes('disabled')).toBe(true);
-      expect(findNext().exists()).toBe(true);
+        expect(successHandler).toHaveBeenCalledWith({
+          after: 'eyJpZCI6IjIzMTcifQ',
+          fullPath: 'gitlab-org/gitlab',
+        });
+      });
     });
   });