Merge branch 'test-jiraconnect-pagination' into 'master'

Add pagination spec for jira_connect app

See merge request gitlab-org/gitlab!58213

app/assets/javascripts/jira_connect/components/groups_list.vue

 <script>
 import { GlLoadingIcon, GlPagination, GlAlert, GlSearchBoxByType } from '@gitlab/ui';
 import { fetchGroups } from '~/jira_connect/api';
-import { defaultPerPage } from '~/jira_connect/constants';
+import { DEFAULT_GROUPS_PER_PAGE } from '~/jira_connect/constants';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import GroupsListItem from './groups_list_item.vue';
@@ -25,11 +25,15 @@ export default {
       isLoadingInitial: true,
       isLoadingMore: false,
       page: 1,
-      perPage: defaultPerPage,
       totalItems: 0,
       errorMessage: null,
     };
   },
+  computed: {
+    showPagination() {
+      return this.totalItems > this.$options.DEFAULT_GROUPS_PER_PAGE && this.groups.length > 0;
+    },
+  },
   mounted() {
     return this.loadGroups().finally(() => {
       this.isLoadingInitial = false;
@@ -41,7 +45,7 @@ export default {
 
       return fetchGroups(this.groupsPath, {
         page: this.page,
-        perPage: this.perPage,
+        perPage: this.$options.DEFAULT_GROUPS_PER_PAGE,
         search: searchTerm,
       })
         .then((response) => {
@@ -61,6 +65,7 @@ export default {
       return this.loadGroups({ searchTerm });
     },
   },
+  DEFAULT_GROUPS_PER_PAGE,
 };
 </script>
 
@@ -102,10 +107,10 @@ export default {
 
     <div class="gl-display-flex gl-justify-content-center gl-mt-5">
       <gl-pagination
-        v-if="totalItems > perPage && groups.length > 0"
+        v-if="showPagination"
         v-model="page"
         class="gl-mb-0"
-        :per-page="perPage"
+        :per-page="$options.DEFAULT_GROUPS_PER_PAGE"
         :total-items="totalItems"
         @input="loadGroups"
       />

app/assets/javascripts/jira_connect/constants.js

-export const defaultPerPage = 10;
+export const DEFAULT_GROUPS_PER_PAGE = 10;
 export const ALERT_LOCALSTORAGE_KEY = 'gitlab_alert';

spec/frontend/jira_connect/components/groups_list_spec.js

-import { GlAlert, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlSearchBoxByType, GlPagination } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { fetchGroups } from '~/jira_connect/api';
 import GroupsList from '~/jira_connect/components/groups_list.vue';
 import GroupsListItem from '~/jira_connect/components/groups_list_item.vue';
+import { DEFAULT_GROUPS_PER_PAGE } from '~/jira_connect/constants';
 import { mockGroup1, mockGroup2 } from '../mock_data';
 
+const createMockGroup = (groupId) => {
+  return {
+    ...mockGroup1,
+    id: groupId,
+  };
+};
+
+const createMockGroups = (count) => {
+  return [...new Array(count)].map((_, idx) => createMockGroup(idx));
+};
+
 jest.mock('~/jira_connect/api', () => {
   return {
     fetchGroups: jest.fn(),
@@ -42,6 +54,7 @@ describe('GroupsList', () => {
   const findSecondItem = () => findAllItems().at(1);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
   const findGroupsList = () => wrapper.findByTestId('groups-list');
+  const findPagination = () => wrapper.findComponent(GlPagination);
 
   describe('when groups are loading', () => {
     it('renders loading icon', async () => {
@@ -167,4 +180,53 @@ describe('GroupsList', () => {
       });
     });
   });
+
+  describe('pagination', () => {
+    it.each`
+      scenario                        | totalItems                     | shouldShowPagination
+      ${'renders pagination'}         | ${DEFAULT_GROUPS_PER_PAGE + 1} | ${true}
+      ${'does not render pagination'} | ${DEFAULT_GROUPS_PER_PAGE}     | ${false}
+      ${'does not render pagination'} | ${2}                           | ${false}
+      ${'does not render pagination'} | ${0}                           | ${false}
+    `('$scenario with $totalItems groups', async ({ totalItems, shouldShowPagination }) => {
+      const mockGroups = createMockGroups(totalItems);
+      fetchGroups.mockResolvedValue({
+        headers: { 'X-TOTAL': totalItems, 'X-PAGE': 1 },
+        data: mockGroups,
+      });
+      createComponent();
+
+      await waitForPromises();
+
+      const paginationEl = findPagination();
+
+      expect(paginationEl.exists()).toBe(shouldShowPagination);
+      if (shouldShowPagination) {
+        expect(paginationEl.props('totalItems')).toBe(totalItems);
+      }
+    });
+
+    describe('when `input` event triggered', () => {
+      beforeEach(async () => {
+        const MOCK_TOTAL_ITEMS = DEFAULT_GROUPS_PER_PAGE + 1;
+        fetchGroups.mockResolvedValue({
+          headers: { 'X-TOTAL': MOCK_TOTAL_ITEMS, 'X-PAGE': 1 },
+          data: createMockGroups(MOCK_TOTAL_ITEMS),
+        });
+
+        createComponent();
+        await waitForPromises();
+      });
+
+      it('executes `fetchGroups` with correct arguments', async () => {
+        const paginationEl = findPagination();
+        paginationEl.vm.$emit('input', 2);
+
+        expect(fetchGroups).toHaveBeenCalledWith(mockGroupsPath, {
+          page: 2,
+          perPage: 10,
+        });
+      });
+    });
+  });
 });