1 files changed, 147 insertions, 22 deletions

diff --git a/spec/frontend/releases/components/releases_pagination_spec.js b/spec/frontend/releases/components/releases_pagination_spec.js
index 1d47da31f38..2d08f72ad8b 100644
--- a/spec/frontend/releases/components/releases_pagination_spec.js
+++ b/spec/frontend/releases/components/releases_pagination_spec.js
@@ -1,23 +1,46 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlKeysetPagination } from '@gitlab/ui';
+import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { historyPushState } from '~/lib/utils/common_utils';
 import ReleasesPagination from '~/releases/components/releases_pagination.vue';
-import ReleasesPaginationGraphql from '~/releases/components/releases_pagination_graphql.vue';
-import ReleasesPaginationRest from '~/releases/components/releases_pagination_rest.vue';
+import createStore from '~/releases/stores';
+import createIndexModule from '~/releases/stores/modules/index';
+
+jest.mock('~/lib/utils/common_utils', () => ({
+  ...jest.requireActual('~/lib/utils/common_utils'),
+  historyPushState: jest.fn(),
+}));
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('~/releases/components/releases_pagination.vue', () => {
   let wrapper;
+  let indexModule;
 
-  const createComponent = (useGraphQLEndpoint) => {
-    const store = new Vuex.Store({
-      getters: {
-        useGraphQLEndpoint: () => useGraphQLEndpoint,
-      },
-    });
+  const cursors = {
+    startCursor: 'startCursor',
+    endCursor: 'endCursor',
+  };
+
+  const projectPath = 'my/project';
+
+  const createComponent = (pageInfo) => {
+    indexModule = createIndexModule({ projectPath });
+
+    indexModule.state.pageInfo = pageInfo;
 
-    wrapper = shallowMount(ReleasesPagination, { store, localVue });
+    indexModule.actions.fetchReleases = jest.fn();
+
+    wrapper = mount(ReleasesPagination, {
+      store: createStore({
+        modules: {
+          index: indexModule,
+        },
+        featureFlags: {},
+      }),
+      localVue,
+    });
   };
 
   afterEach(() => {
@@ -25,28 +48,130 @@ describe('~/releases/components/releases_pagination.vue', () => {
     wrapper = null;
   });
 
-  const findRestPagination = () => wrapper.find(ReleasesPaginationRest);
-  const findGraphQlPagination = () => wrapper.find(ReleasesPaginationGraphql);
+  const findGlKeysetPagination = () => wrapper.findComponent(GlKeysetPagination);
+  const findPrevButton = () => findGlKeysetPagination().find('[data-testid="prevButton"]');
+  const findNextButton = () => findGlKeysetPagination().find('[data-testid="nextButton"]');
+
+  const expectDisabledPrev = () => {
+    expect(findPrevButton().attributes().disabled).toBe('disabled');
+  };
+  const expectEnabledPrev = () => {
+    expect(findPrevButton().attributes().disabled).toBe(undefined);
+  };
+  const expectDisabledNext = () => {
+    expect(findNextButton().attributes().disabled).toBe('disabled');
+  };
+  const expectEnabledNext = () => {
+    expect(findNextButton().attributes().disabled).toBe(undefined);
+  };
+
+  describe('when there is only one page of results', () => {
+    beforeEach(() => {
+      createComponent({
+        hasPreviousPage: false,
+        hasNextPage: false,
+      });
+    });
 
-  describe('when one of necessary feature flags is disabled', () => {
+    it('does not render a GlKeysetPagination', () => {
+      expect(findGlKeysetPagination().exists()).toBe(false);
+    });
+  });
+
+  describe('when there is a next page, but not a previous page', () => {
     beforeEach(() => {
-      createComponent(false);
+      createComponent({
+        hasPreviousPage: false,
+        hasNextPage: true,
+      });
     });
 
-    it('renders the REST pagination component', () => {
-      expect(findRestPagination().exists()).toBe(true);
-      expect(findGraphQlPagination().exists()).toBe(false);
+    it('renders a disabled "Prev" button', () => {
+      expectDisabledPrev();
+    });
+
+    it('renders an enabled "Next" button', () => {
+      expectEnabledNext();
     });
   });
 
-  describe('when all the necessary feature flags are enabled', () => {
+  describe('when there is a previous page, but not a next page', () => {
     beforeEach(() => {
-      createComponent(true);
+      createComponent({
+        hasPreviousPage: true,
+        hasNextPage: false,
+      });
     });
 
-    it('renders the GraphQL pagination component', () => {
-      expect(findGraphQlPagination().exists()).toBe(true);
-      expect(findRestPagination().exists()).toBe(false);
+    it('renders a enabled "Prev" button', () => {
+      expectEnabledPrev();
+    });
+
+    it('renders an disabled "Next" button', () => {
+      expectDisabledNext();
+    });
+  });
+
+  describe('when there is both a previous page and a next page', () => {
+    beforeEach(() => {
+      createComponent({
+        hasPreviousPage: true,
+        hasNextPage: true,
+      });
+    });
+
+    it('renders a enabled "Prev" button', () => {
+      expectEnabledPrev();
+    });
+
+    it('renders an enabled "Next" button', () => {
+      expectEnabledNext();
+    });
+  });
+
+  describe('button behavior', () => {
+    beforeEach(() => {
+      createComponent({
+        hasPreviousPage: true,
+        hasNextPage: true,
+        ...cursors,
+      });
+    });
+
+    describe('next button behavior', () => {
+      beforeEach(() => {
+        findNextButton().trigger('click');
+      });
+
+      it('calls fetchReleases with the correct after cursor', () => {
+        expect(indexModule.actions.fetchReleases.mock.calls).toEqual([
+          [expect.anything(), { after: cursors.endCursor }],
+        ]);
+      });
+
+      it('calls historyPushState with the new URL', () => {
+        expect(historyPushState.mock.calls).toEqual([
+          [expect.stringContaining(`?after=${cursors.endCursor}`)],
+        ]);
+      });
+    });
+
+    describe('previous button behavior', () => {
+      beforeEach(() => {
+        findPrevButton().trigger('click');
+      });
+
+      it('calls fetchReleases with the correct before cursor', () => {
+        expect(indexModule.actions.fetchReleases.mock.calls).toEqual([
+          [expect.anything(), { before: cursors.startCursor }],
+        ]);
+      });
+
+      it('calls historyPushState with the new URL', () => {
+        expect(historyPushState.mock.calls).toEqual([
+          [expect.stringContaining(`?before=${cursors.startCursor}`)],
+        ]);
+      });
     });
   });
 });