Add latest changes from gitlab-org/gitlab@master

4 files changed, 105 insertions, 15 deletions

diff --git a/spec/javascripts/releases/list/components/app_spec.js b/spec/javascripts/releases/list/components/app_spec.js
index 471c442e497..994488581d7 100644
--- a/spec/javascripts/releases/list/components/app_spec.js
+++ b/spec/javascripts/releases/list/components/app_spec.js
@@ -1,15 +1,22 @@
 import Vue from 'vue';
+import _ from 'underscore';
 import app from '~/releases/list/components/app.vue';
 import createStore from '~/releases/list/store';
 import api from '~/api';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore } from '../store/helpers';
-import { releases } from '../../mock_data';
+import {
+  pageInfoHeadersWithoutPagination,
+  pageInfoHeadersWithPagination,
+  release,
+  releases,
+} from '../../mock_data';
 
 describe('Releases App ', () => {
   const Component = Vue.extend(app);
   let store;
   let vm;
+  let releasesPagination;
 
   const props = {
     projectId: 'gitlab-ce',
@@ -19,6 +26,7 @@ describe('Releases App ', () => {
 
   beforeEach(() => {
     store = createStore();
+    releasesPagination = _.range(21).map(index => ({ ...release, tag_name: `${index}.00` }));
   });
 
   afterEach(() => {
@@ -28,7 +36,7 @@ describe('Releases App ', () => {
 
   describe('while loading', () => {
     beforeEach(() => {
-      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: [] }));
+      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: [], headers: {} }));
       vm = mountComponentWithStore(Component, { props, store });
     });
 
@@ -36,6 +44,7 @@ describe('Releases App ', () => {
       expect(vm.$el.querySelector('.js-loading')).not.toBeNull();
       expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
       expect(vm.$el.querySelector('.js-success-state')).toBeNull();
+      expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
 
       setTimeout(() => {
         done();
@@ -45,7 +54,9 @@ describe('Releases App ', () => {
 
   describe('with successful request', () => {
     beforeEach(() => {
-      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: releases }));
+      spyOn(api, 'releases').and.returnValue(
+        Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination }),
+      );
       vm = mountComponentWithStore(Component, { props, store });
     });
 
@@ -54,6 +65,27 @@ describe('Releases App ', () => {
         expect(vm.$el.querySelector('.js-loading')).toBeNull();
         expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
         expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
+        expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
+
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with successful request and pagination', () => {
+    beforeEach(() => {
+      spyOn(api, 'releases').and.returnValue(
+        Promise.resolve({ data: releasesPagination, headers: pageInfoHeadersWithPagination }),
+      );
+      vm = mountComponentWithStore(Component, { props, store });
+    });
+
+    it('renders success state', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.js-loading')).toBeNull();
+        expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
+        expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
+        expect(vm.$el.querySelector('.gl-pagination')).not.toBeNull();
 
         done();
       }, 0);
@@ -62,7 +94,7 @@ describe('Releases App ', () => {
 
   describe('with empty request', () => {
     beforeEach(() => {
-      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: [] }));
+      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: [], headers: {} }));
       vm = mountComponentWithStore(Component, { props, store });
     });
 
@@ -71,6 +103,7 @@ describe('Releases App ', () => {
         expect(vm.$el.querySelector('.js-loading')).toBeNull();
         expect(vm.$el.querySelector('.js-empty-state')).not.toBeNull();
         expect(vm.$el.querySelector('.js-success-state')).toBeNull();
+        expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
 
         done();
       }, 0);
diff --git a/spec/javascripts/releases/list/store/actions_spec.js b/spec/javascripts/releases/list/store/actions_spec.js
index 8e78a631a5f..c4b49c39e28 100644
--- a/spec/javascripts/releases/list/store/actions_spec.js
+++ b/spec/javascripts/releases/list/store/actions_spec.js
@@ -7,14 +7,17 @@ import {
 import state from '~/releases/list/store/state';
 import * as types from '~/releases/list/store/mutation_types';
 import api from '~/api';
+import { parseIntPagination } from '~/lib/utils/common_utils';
 import testAction from 'spec/helpers/vuex_action_helper';
-import { releases } from '../../mock_data';
+import { pageInfoHeadersWithoutPagination, releases } from '../../mock_data';
 
 describe('Releases State actions', () => {
   let mockedState;
+  let pageInfo;
 
   beforeEach(() => {
     mockedState = state();
+    pageInfo = parseIntPagination(pageInfoHeadersWithoutPagination);
   });
 
   describe('requestReleases', () => {
@@ -25,12 +28,16 @@ describe('Releases State actions', () => {
 
   describe('fetchReleases', () => {
     describe('success', () => {
-      it('dispatches requestReleases and receiveReleasesSuccess ', done => {
-        spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: releases }));
+      it('dispatches requestReleases and receiveReleasesSuccess', done => {
+        spyOn(api, 'releases').and.callFake((id, options) => {
+          expect(id).toEqual(1);
+          expect(options.page).toEqual('1');
+          return Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination });
+        });
 
         testAction(
           fetchReleases,
-          releases,
+          { projectId: 1 },
           mockedState,
           [],
           [
@@ -38,7 +45,31 @@ describe('Releases State actions', () => {
               type: 'requestReleases',
             },
             {
-              payload: releases,
+              payload: { data: releases, headers: pageInfoHeadersWithoutPagination },
+              type: 'receiveReleasesSuccess',
+            },
+          ],
+          done,
+        );
+      });
+
+      it('dispatches requestReleases and receiveReleasesSuccess on page two', done => {
+        spyOn(api, 'releases').and.callFake((_, options) => {
+          expect(options.page).toEqual('2');
+          return Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination });
+        });
+
+        testAction(
+          fetchReleases,
+          { page: '2', projectId: 1 },
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestReleases',
+            },
+            {
+              payload: { data: releases, headers: pageInfoHeadersWithoutPagination },
               type: 'receiveReleasesSuccess',
             },
           ],
@@ -48,12 +79,12 @@ describe('Releases State actions', () => {
     });
 
     describe('error', () => {
-      it('dispatches requestReleases and receiveReleasesError ', done => {
+      it('dispatches requestReleases and receiveReleasesError', done => {
         spyOn(api, 'releases').and.returnValue(Promise.reject());
 
         testAction(
           fetchReleases,
-          null,
+          { projectId: null },
           mockedState,
           [],
           [
@@ -74,9 +105,9 @@ describe('Releases State actions', () => {
     it('should commit RECEIVE_RELEASES_SUCCESS mutation', done => {
       testAction(
         receiveReleasesSuccess,
-        releases,
+        { data: releases, headers: pageInfoHeadersWithoutPagination },
         mockedState,
-        [{ type: types.RECEIVE_RELEASES_SUCCESS, payload: releases }],
+        [{ type: types.RECEIVE_RELEASES_SUCCESS, payload: { pageInfo, data: releases } }],
         [],
         done,
       );
diff --git a/spec/javascripts/releases/list/store/mutations_spec.js b/spec/javascripts/releases/list/store/mutations_spec.js
index d2577891495..d756c69d53b 100644
--- a/spec/javascripts/releases/list/store/mutations_spec.js
+++ b/spec/javascripts/releases/list/store/mutations_spec.js
@@ -1,13 +1,16 @@
 import state from '~/releases/list/store/state';
 import mutations from '~/releases/list/store/mutations';
 import * as types from '~/releases/list/store/mutation_types';
-import { releases } from '../../mock_data';
+import { parseIntPagination } from '~/lib/utils/common_utils';
+import { pageInfoHeadersWithoutPagination, releases } from '../../mock_data';
 
 describe('Releases Store Mutations', () => {
   let stateCopy;
+  let pageInfo;
 
   beforeEach(() => {
     stateCopy = state();
+    pageInfo = parseIntPagination(pageInfoHeadersWithoutPagination);
   });
 
   describe('REQUEST_RELEASES', () => {
@@ -20,7 +23,7 @@ describe('Releases Store Mutations', () => {
 
   describe('RECEIVE_RELEASES_SUCCESS', () => {
     beforeEach(() => {
-      mutations[types.RECEIVE_RELEASES_SUCCESS](stateCopy, releases);
+      mutations[types.RECEIVE_RELEASES_SUCCESS](stateCopy, { pageInfo, data: releases });
     });
 
     it('sets is loading to false', () => {
@@ -34,6 +37,10 @@ describe('Releases Store Mutations', () => {
     it('sets data', () => {
       expect(stateCopy.releases).toEqual(releases);
     });
+
+    it('sets pageInfo', () => {
+      expect(stateCopy.pageInfo).toEqual(pageInfo);
+    });
   });
 
   describe('RECEIVE_RELEASES_ERROR', () => {
@@ -42,6 +49,7 @@ describe('Releases Store Mutations', () => {
 
       expect(stateCopy.isLoading).toEqual(false);
       expect(stateCopy.releases).toEqual([]);
+      expect(stateCopy.pageInfo).toEqual({});
     });
   });
 });
diff --git a/spec/javascripts/releases/mock_data.js b/spec/javascripts/releases/mock_data.js
index 7197eb7bca8..72875dff172 100644
--- a/spec/javascripts/releases/mock_data.js
+++ b/spec/javascripts/releases/mock_data.js
@@ -1,3 +1,21 @@
+export const pageInfoHeadersWithoutPagination = {
+  'X-NEXT-PAGE': '',
+  'X-PAGE': '1',
+  'X-PER-PAGE': '20',
+  'X-PREV-PAGE': '',
+  'X-TOTAL': '19',
+  'X-TOTAL-PAGES': '1',
+};
+
+export const pageInfoHeadersWithPagination = {
+  'X-NEXT-PAGE': '2',
+  'X-PAGE': '1',
+  'X-PER-PAGE': '20',
+  'X-PREV-PAGE': '',
+  'X-TOTAL': '21',
+  'X-TOTAL-PAGES': '2',
+};
+
 export const release = {
   name: 'Bionic Beaver',
   tag_name: '18.04',