Move visibility control to parent component

This commit updates releases_pagination_apollo_client.vue to not
control its own visibility and instead gives this responsibility to its
parent.

app/assets/javascripts/releases/components/app_index_apollo_client.vue

@@ -108,7 +108,11 @@ export default {
       return this.isLoading && !this.hasError;
     },
     shouldRenderPagination() {
-      return !this.isLoading && !this.hasError;
+      return (
+        !this.isLoading &&
+        !this.hasError &&
+        (this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage)
+      );
     },
   },
   created() {

app/assets/javascripts/releases/components/releases_pagination_apollo_client.vue

@@ -13,11 +13,6 @@ export default {
       validator: (info) => isBoolean(info.hasPreviousPage) && isBoolean(info.hasNextPage),
     },
   },
-  computed: {
-    showPagination() {
-      return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
-    },
-  },
   methods: {
     onPrev(before) {
       historyPushState(buildUrlWithCurrentLocation(`?before=${before}`));
@@ -31,7 +26,6 @@ export default {
 <template>
   <div class="gl-display-flex gl-justify-content-center">
     <gl-keyset-pagination
-      v-if="showPagination"
       v-bind="pageInfo"
       v-on="$listeners"
       @prev="onPrev($event)"

spec/frontend/releases/components/app_index_apollo_client_spec.js

@@ -160,7 +160,7 @@ describe('app_index_apollo_client.vue', () => {
     expectNoFlashMessage();
     expectNewReleaseButton();
     expectReleases(0);
-    expectPagination();
+    expectNoPagination();
   });
 
   describe('when an error occurs while loading data', () => {
@@ -176,11 +176,25 @@ describe('app_index_apollo_client.vue', () => {
     expectNoPagination();
   });
 
-  describe('when the data has successfully loaded', () => {
+  describe('when the data has successfully loaded with a single page of results', () => {
     beforeEach(() => {
       createComponent();
     });
 
+    expectNoLoadingIndicator();
+    expectNoEmptyState();
+    expectNoFlashMessage();
+    expectNewReleaseButton();
+    expectReleases(originalAllReleasesQueryResponse.data.project.releases.nodes.length);
+    expectNoPagination();
+  });
+
+  describe('when the data has successfully loaded with multiple pages of results', () => {
+    beforeEach(() => {
+      allReleasesQueryResponse.data.project.releases.pageInfo.hasNextPage = true;
+      createComponent(Promise.resolve(allReleasesQueryResponse));
+    });
+
     expectNoLoadingIndicator();
     expectNoEmptyState();
     expectNoFlashMessage();
@@ -260,13 +274,16 @@ describe('app_index_apollo_client.vue', () => {
   });
 
   describe('pagination', () => {
-    it('requeries the GraphQL endpoint when a pagination button is clicked', async () => {
+    beforeEach(async () => {
       mockQueryParams = { before };
 
-      createComponent();
+      allReleasesQueryResponse.data.project.releases.pageInfo.hasNextPage = true;
+      createComponent(Promise.resolve(allReleasesQueryResponse));
 
       await wrapper.vm.$nextTick();
+    });
 
+    it('requeries the GraphQL endpoint when a pagination button is clicked', async () => {
       expect(allReleasesQueryMock.mock.calls).toEqual([[expect.objectContaining({ before })]]);
 
       mockQueryParams = { after };

spec/frontend/releases/components/releases_pagination_apollo_client_spec.js

-import { GlKeysetPagination } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { historyPushState } from '~/lib/utils/common_utils';
 import ReleasesPaginationApolloClient from '~/releases/components/releases_pagination_apollo_client.vue';
@@ -62,43 +61,30 @@ describe('releases_pagination_apollo_client.vue', () => {
     endCursor,
   };
 
-  const findGlKeysetPagination = () => wrapper.findComponent(GlKeysetPagination);
   const findPrevButton = () => wrapper.findByTestId('prevButton');
   const findNextButton = () => wrapper.findByTestId('nextButton');
 
   describe.each`
-    description                                             | pageInfo               | paginationRendered | prevEnabled | nextEnabled
-    ${'when there is only one page of results'}             | ${singlePageInfo}      | ${false}           | ${'N/A'}    | ${'N/A'}
-    ${'when there is a next page, but not a previous page'} | ${onlyNextPageInfo}    | ${true}            | ${false}    | ${true}
-    ${'when there is a previous page, but not a next page'} | ${onlyPrevPageInfo}    | ${true}            | ${true}     | ${false}
-    ${'when there is both a previous and next page'}        | ${prevAndNextPageInfo} | ${true}            | ${true}     | ${true}
-  `(
-    'component states',
-    ({ description, pageInfo, paginationRendered, prevEnabled, nextEnabled }) => {
-      describe(description, () => {
-        beforeEach(() => {
-          createComponent(pageInfo);
-        });
-
-        it(`does ${paginationRendered ? '' : 'not '}render a GlKeysetPagination`, () => {
-          expect(findGlKeysetPagination().exists()).toBe(paginationRendered);
-        });
-
-        // The remaining tests don't apply if the GlKeysetPagination component is not rendered
-        if (!paginationRendered) {
-          return;
-        }
-
-        it(`renders the "Prev" button as ${prevEnabled ? 'enabled' : 'disabled'}`, () => {
-          expect(findPrevButton().attributes().disabled).toBe(prevEnabled ? undefined : 'disabled');
-        });
-
-        it(`renders the "Next" button as ${nextEnabled ? 'enabled' : 'disabled'}`, () => {
-          expect(findNextButton().attributes().disabled).toBe(nextEnabled ? undefined : 'disabled');
-        });
+    description                                             | pageInfo               | prevEnabled | nextEnabled
+    ${'when there is only one page of results'}             | ${singlePageInfo}      | ${false}    | ${false}
+    ${'when there is a next page, but not a previous page'} | ${onlyNextPageInfo}    | ${false}    | ${true}
+    ${'when there is a previous page, but not a next page'} | ${onlyPrevPageInfo}    | ${true}     | ${false}
+    ${'when there is both a previous and next page'}        | ${prevAndNextPageInfo} | ${true}     | ${true}
+  `('component states', ({ description, pageInfo, prevEnabled, nextEnabled }) => {
+    describe(description, () => {
+      beforeEach(() => {
+        createComponent(pageInfo);
+      });
+
+      it(`renders the "Prev" button as ${prevEnabled ? 'enabled' : 'disabled'}`, () => {
+        expect(findPrevButton().attributes().disabled).toBe(prevEnabled ? undefined : 'disabled');
       });
-    },
-  );
+
+      it(`renders the "Next" button as ${nextEnabled ? 'enabled' : 'disabled'}`, () => {
+        expect(findNextButton().attributes().disabled).toBe(nextEnabled ? undefined : 'disabled');
+      });
+    });
+  });
 
   describe('button behavior', () => {
     beforeEach(() => {