Add latest changes from gitlab-org/gitlab@master

5 files changed, 166 insertions, 285 deletions

diff --git a/spec/frontend/releases/components/releases_pagination_graphql_spec.js b/spec/frontend/releases/components/releases_pagination_graphql_spec.js
deleted file mode 100644
index 5b2dd4bc784..00000000000
--- a/spec/frontend/releases/components/releases_pagination_graphql_spec.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { historyPushState } from '~/lib/utils/common_utils';
-import ReleasesPaginationGraphql from '~/releases/components/releases_pagination_graphql.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_graphql.vue', () => {
-  let wrapper;
-  let indexModule;
-
-  const cursors = {
-    startCursor: 'startCursor',
-    endCursor: 'endCursor',
-  };
-
-  const projectPath = 'my/project';
-
-  const createComponent = (pageInfo) => {
-    indexModule = createIndexModule({ projectPath });
-
-    indexModule.state.graphQlPageInfo = pageInfo;
-
-    indexModule.actions.fetchReleases = jest.fn();
-
-    wrapper = mount(ReleasesPaginationGraphql, {
-      store: createStore({
-        modules: {
-          index: indexModule,
-        },
-        featureFlags: {},
-      }),
-      localVue,
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  const findPrevButton = () => wrapper.find('[data-testid="prevButton"]');
-  const findNextButton = () => wrapper.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,
-      });
-    });
-
-    it('does not render anything', () => {
-      expect(wrapper.html()).toBe('');
-    });
-  });
-
-  describe('when there is a next page, but not a previous page', () => {
-    beforeEach(() => {
-      createComponent({
-        hasPreviousPage: false,
-        hasNextPage: true,
-      });
-    });
-
-    it('renders a disabled "Prev" button', () => {
-      expectDisabledPrev();
-    });
-
-    it('renders an enabled "Next" button', () => {
-      expectEnabledNext();
-    });
-  });
-
-  describe('when there is a previous page, but not a next page', () => {
-    beforeEach(() => {
-      createComponent({
-        hasPreviousPage: true,
-        hasNextPage: 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}`)],
-        ]);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/releases/components/releases_pagination_rest_spec.js b/spec/frontend/releases/components/releases_pagination_rest_spec.js
deleted file mode 100644
index 7d45176967b..00000000000
--- a/spec/frontend/releases/components/releases_pagination_rest_spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { GlPagination } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import * as commonUtils from '~/lib/utils/common_utils';
-import ReleasesPaginationRest from '~/releases/components/releases_pagination_rest.vue';
-import createStore from '~/releases/stores';
-import createIndexModule from '~/releases/stores/modules/index';
-
-commonUtils.historyPushState = jest.fn();
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('~/releases/components/releases_pagination_rest.vue', () => {
-  let wrapper;
-  let indexModule;
-
-  const projectId = 19;
-
-  const createComponent = (pageInfo) => {
-    indexModule = createIndexModule({ projectId });
-
-    indexModule.state.restPageInfo = pageInfo;
-
-    indexModule.actions.fetchReleases = jest.fn();
-
-    wrapper = mount(ReleasesPaginationRest, {
-      store: createStore({
-        modules: {
-          index: indexModule,
-        },
-        featureFlags: {},
-      }),
-      localVue,
-    });
-  };
-
-  const findGlPagination = () => wrapper.find(GlPagination);
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('when a page number is clicked', () => {
-    const newPage = 2;
-
-    beforeEach(() => {
-      createComponent({
-        perPage: 20,
-        page: 1,
-        total: 40,
-        totalPages: 2,
-        nextPage: 2,
-      });
-
-      findGlPagination().vm.$emit('input', newPage);
-    });
-
-    it('calls fetchReleases with the correct page', () => {
-      expect(indexModule.actions.fetchReleases.mock.calls).toEqual([
-        [expect.anything(), { page: newPage }],
-      ]);
-    });
-
-    it('calls historyPushState with the new URL', () => {
-      expect(commonUtils.historyPushState.mock.calls).toEqual([
-        [expect.stringContaining(`?page=${newPage}`)],
-      ]);
-    });
-  });
-});
diff --git a/spec/frontend/releases/components/releases_pagination_spec.js b/spec/frontend/releases/components/releases_pagination_spec.js
index 69d83e13497..2d08f72ad8b 100644
--- a/spec/frontend/releases/components/releases_pagination_spec.js
+++ b/spec/frontend/releases/components/releases_pagination_spec.js
@@ -1,39 +1,177 @@
-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,
-      },
-    });
-
-    wrapper = shallowMount(ReleasesPagination, { store, localVue });
+  const cursors = {
+    startCursor: 'startCursor',
+    endCursor: 'endCursor',
   };
 
-  beforeEach(() => {
-    createComponent(true);
-  });
+  const projectPath = 'my/project';
+
+  const createComponent = (pageInfo) => {
+    indexModule = createIndexModule({ projectPath });
+
+    indexModule.state.pageInfo = pageInfo;
+
+    indexModule.actions.fetchReleases = jest.fn();
+
+    wrapper = mount(ReleasesPagination, {
+      store: createStore({
+        modules: {
+          index: indexModule,
+        },
+        featureFlags: {},
+      }),
+      localVue,
+    });
+  };
 
   afterEach(() => {
     wrapper.destroy();
     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,
+      });
+    });
+
+    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({
+        hasPreviousPage: false,
+        hasNextPage: true,
+      });
+    });
+
+    it('renders a disabled "Prev" button', () => {
+      expectDisabledPrev();
+    });
+
+    it('renders an enabled "Next" button', () => {
+      expectEnabledNext();
+    });
+  });
+
+  describe('when there is a previous page, but not a next page', () => {
+    beforeEach(() => {
+      createComponent({
+        hasPreviousPage: true,
+        hasNextPage: 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 the GraphQL pagination component', () => {
-    expect(findGraphQlPagination().exists()).toBe(true);
-    expect(findRestPagination().exists()).toBe(false);
+    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}`)],
+        ]);
+      });
+    });
   });
 });
diff --git a/spec/frontend/releases/stores/modules/list/actions_spec.js b/spec/frontend/releases/stores/modules/list/actions_spec.js
index bae74285594..af520c2eb20 100644
--- a/spec/frontend/releases/stores/modules/list/actions_spec.js
+++ b/spec/frontend/releases/stores/modules/list/actions_spec.js
@@ -141,7 +141,7 @@ describe('Releases State actions', () => {
               type: types.RECEIVE_RELEASES_SUCCESS,
               payload: {
                 data: convertedResponse.data,
-                graphQlPageInfo: convertedResponse.paginationInfo,
+                pageInfo: convertedResponse.paginationInfo,
               },
             },
           ],
diff --git a/spec/frontend/releases/stores/modules/list/mutations_spec.js b/spec/frontend/releases/stores/modules/list/mutations_spec.js
index abf78bcdf6b..08d803b3c2c 100644
--- a/spec/frontend/releases/stores/modules/list/mutations_spec.js
+++ b/spec/frontend/releases/stores/modules/list/mutations_spec.js
@@ -1,10 +1,9 @@
 import { getJSONFixture } from 'helpers/fixtures';
-import { parseIntPagination, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import * as types from '~/releases/stores/modules/index/mutation_types';
 import mutations from '~/releases/stores/modules/index/mutations';
 import createState from '~/releases/stores/modules/index/state';
 import { convertAllReleasesGraphQLResponse } from '~/releases/util';
-import { pageInfoHeadersWithoutPagination } from '../../../mock_data';
 
 const originalRelease = getJSONFixture('api/releases/release.json');
 const originalReleases = [originalRelease];
@@ -15,14 +14,12 @@ const graphqlReleasesResponse = getJSONFixture(
 
 describe('Releases Store Mutations', () => {
   let stateCopy;
-  let restPageInfo;
-  let graphQlPageInfo;
+  let pageInfo;
   let releases;
 
   beforeEach(() => {
     stateCopy = createState({});
-    restPageInfo = parseIntPagination(pageInfoHeadersWithoutPagination);
-    graphQlPageInfo = convertAllReleasesGraphQLResponse(graphqlReleasesResponse).paginationInfo;
+    pageInfo = convertAllReleasesGraphQLResponse(graphqlReleasesResponse).paginationInfo;
     releases = convertObjectPropsToCamelCase(originalReleases, { deep: true });
   });
 
@@ -37,8 +34,7 @@ describe('Releases Store Mutations', () => {
   describe('RECEIVE_RELEASES_SUCCESS', () => {
     beforeEach(() => {
       mutations[types.RECEIVE_RELEASES_SUCCESS](stateCopy, {
-        restPageInfo,
-        graphQlPageInfo,
+        pageInfo,
         data: releases,
       });
     });
@@ -55,20 +51,15 @@ describe('Releases Store Mutations', () => {
       expect(stateCopy.releases).toEqual(releases);
     });
 
-    it('sets restPageInfo', () => {
-      expect(stateCopy.restPageInfo).toEqual(restPageInfo);
-    });
-
-    it('sets graphQlPageInfo', () => {
-      expect(stateCopy.graphQlPageInfo).toEqual(graphQlPageInfo);
+    it('sets pageInfo', () => {
+      expect(stateCopy.pageInfo).toEqual(pageInfo);
     });
   });
 
   describe('RECEIVE_RELEASES_ERROR', () => {
     it('resets data', () => {
       mutations[types.RECEIVE_RELEASES_SUCCESS](stateCopy, {
-        restPageInfo,
-        graphQlPageInfo,
+        pageInfo,
         data: releases,
       });
 
@@ -76,8 +67,7 @@ describe('Releases Store Mutations', () => {
 
       expect(stateCopy.isLoading).toEqual(false);
       expect(stateCopy.releases).toEqual([]);
-      expect(stateCopy.restPageInfo).toEqual({});
-      expect(stateCopy.graphQlPageInfo).toEqual({});
+      expect(stateCopy.pageInfo).toEqual({});
     });
   });