Pagination when total items is not in the header response

app/assets/javascripts/issuables_list/components/issuables_list_app.vue

@@ -118,6 +118,29 @@ export default {
     baseUrl() {
       return window.location.href.replace(/(\?.*)?(#.*)?$/, '');
     },
+    paginationNext() {
+      return this.page + 1;
+    },
+    paginationPrev() {
+      return this.page - 1;
+    },
+    paginationProps() {
+      const paginationProps = { value: this.page };
+
+      if (this.totalItems) {
+        return {
+          ...paginationProps,
+          perPage: this.itemsPerPage,
+          totalItems: this.totalItems,
+        };
+      }
+
+      return {
+        ...paginationProps,
+        prevPage: this.paginationPrev,
+        nextPage: this.paginationNext,
+      };
+    },
   },
   watch: {
     selection() {
@@ -272,11 +295,8 @@ export default {
     </ul>
     <div class="mt-3">
       <gl-pagination
-        v-if="totalItems"
-        :value="page"
-        :per-page="itemsPerPage"
-        :total-items="totalItems"
-        class="justify-content-center"
+        v-bind="paginationProps"
+        class="gl-justify-content-center"
         @input="onPaginate"
       />
     </div>

spec/frontend/issuables_list/components/issuables_list_app_spec.js

@@ -454,43 +454,73 @@ describe('Issuables list component', () => {
   describe('when paginates', () => {
     const newPage = 3;
 
-    beforeEach(() => {
-      window.history.pushState = jest.fn();
-      setupApiMock(() => [
-        200,
-        MOCK_ISSUES.slice(0, PAGE_SIZE),
-        {
-          'x-total': 100,
-          'x-page': 2,
-        },
-      ]);
+    describe('when total-items is defined in response headers', () => {
+      beforeEach(() => {
+        window.history.pushState = jest.fn();
+        setupApiMock(() => [
+          200,
+          MOCK_ISSUES.slice(0, PAGE_SIZE),
+          {
+            'x-total': 100,
+            'x-page': 2,
+          },
+        ]);
 
-      factory();
+        factory();
 
-      return waitForPromises();
-    });
+        return waitForPromises();
+      });
 
-    afterEach(() => {
-      // reset to original value
-      window.history.pushState.mockRestore();
-    });
+      afterEach(() => {
+        // reset to original value
+        window.history.pushState.mockRestore();
+      });
+
+      it('calls window.history.pushState one time', () => {
+        // Trigger pagination
+        wrapper.find(GlPagination).vm.$emit('input', newPage);
+
+        expect(window.history.pushState).toHaveBeenCalledTimes(1);
+      });
 
-    it('calls window.history.pushState one time', () => {
-      // Trigger pagination
-      wrapper.find(GlPagination).vm.$emit('input', newPage);
+      it('sets params in the url', () => {
+        // Trigger pagination
+        wrapper.find(GlPagination).vm.$emit('input', newPage);
 
-      expect(window.history.pushState).toHaveBeenCalledTimes(1);
+        expect(window.history.pushState).toHaveBeenCalledWith(
+          {},
+          '',
+          `${TEST_LOCATION}?state=opened&order_by=priority&sort=asc&page=${newPage}`,
+        );
+      });
     });
 
-    it('sets params in the url', () => {
-      // Trigger pagination
-      wrapper.find(GlPagination).vm.$emit('input', newPage);
+    describe('when total-items is not defined in the headers', () => {
+      const page = 2;
+      const prevPage = page - 1;
+      const nextPage = page + 1;
 
-      expect(window.history.pushState).toHaveBeenCalledWith(
-        {},
-        '',
-        `${TEST_LOCATION}?state=opened&order_by=priority&sort=asc&page=${newPage}`,
-      );
+      beforeEach(() => {
+        setupApiMock(() => [
+          200,
+          MOCK_ISSUES.slice(0, PAGE_SIZE),
+          {
+            'x-page': page,
+          },
+        ]);
+
+        factory();
+
+        return waitForPromises();
+      });
+
+      it('finds the correct props applied to GlPagination', () => {
+        expect(wrapper.find(GlPagination).props()).toMatchObject({
+          nextPage,
+          prevPage,
+          value: page,
+        });
+      });
     });
   });
 });