Paginate test report

Add pageInfo to state
Use GlPagination to manipulate pageInfo
Use pageInfo to slice test case array

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

 <script>
-import { mapGetters } from 'vuex';
-import { GlModalDirective, GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui';
+import { mapState, mapGetters, mapActions } from 'vuex';
+import {
+  GlModalDirective,
+  GlTooltipDirective,
+  GlFriendlyWrap,
+  GlIcon,
+  GlButton,
+  GlPagination,
+} from '@gitlab/ui';
 import { __ } from '~/locale';
 import TestCaseDetails from './test_case_details.vue';
 
@@ -10,6 +17,7 @@ export default {
     GlIcon,
     GlFriendlyWrap,
     GlButton,
+    GlPagination,
     TestCaseDetails,
   },
   directives: {
@@ -24,11 +32,15 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['getSuiteTests']),
+    ...mapState(['pageInfo']),
+    ...mapGetters(['getSuiteTests', 'getSuiteTestCount']),
     hasSuites() {
       return this.getSuiteTests.length > 0;
     },
   },
+  methods: {
+    ...mapActions(['setPage']),
+  },
   wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'],
 };
 </script>
@@ -129,6 +141,14 @@ export default {
           </div>
         </div>
       </div>
+
+      <gl-pagination
+        v-model="pageInfo.page"
+        class="gl-display-flex gl-justify-content-center"
+        :per-page="pageInfo.perPage"
+        :total-items="getSuiteTestCount"
+        @input="setPage"
+      />
     </div>
 
     <div v-else>

app/assets/javascripts/pipelines/stores/test_reports/actions.js

@@ -47,6 +47,7 @@ export const fetchTestSuite = ({ state, commit, dispatch }, index) => {
     });
 };
 
+export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
 export const setSelectedSuiteIndex = ({ commit }, data) =>
   commit(types.SET_SELECTED_SUITE_INDEX, data);
 export const removeSelectedSuiteIndex = ({ commit }) =>

app/assets/javascripts/pipelines/stores/test_reports/getters.js

@@ -14,5 +14,10 @@ export const getSelectedSuite = state =>
 
 export const getSuiteTests = state => {
   const { test_cases: testCases = [] } = getSelectedSuite(state);
-  return testCases.map(addIconStatus);
+  const { page, perPage } = state.pageInfo;
+  const start = (page - 1) * perPage;
+
+  return testCases.map(addIconStatus).slice(start, start + perPage);
 };
+
+export const getSuiteTestCount = state => getSelectedSuite(state)?.test_cases?.length || 0;

app/assets/javascripts/pipelines/stores/test_reports/mutation_types.js

+export const SET_PAGE = 'SET_PAGE';
 export const SET_SELECTED_SUITE_INDEX = 'SET_SELECTED_SUITE_INDEX';
 export const SET_SUMMARY = 'SET_SUMMARY';
 export const SET_SUITE = 'SET_SUITE';

app/assets/javascripts/pipelines/stores/test_reports/mutations.js

 import * as types from './mutation_types';
 
 export default {
+  [types.SET_PAGE](state, page) {
+    Object.assign(state, {
+      pageInfo: Object.assign(state.pageInfo, {
+        page,
+      }),
+    });
+  },
+
   [types.SET_SUITE](state, { suite = {}, index = null }) {
     state.testReports.test_suites[index] = { ...suite, hasFullSuite: true };
   },

app/assets/javascripts/pipelines/stores/test_reports/state.js

@@ -4,4 +4,8 @@ export default ({ summaryEndpoint = '', suiteEndpoint = '' }) => ({
   testReports: {},
   selectedSuiteIndex: null,
   isLoading: false,
+  pageInfo: {
+    page: 1,
+    perPage: 20,
+  },
 });

changelogs/unreleased/280512-paginate-test-report.yml

+---
+title: Paginate unit test report
+merge_request: 47953
+author:
+type: performance

spec/frontend/pipelines/test_reports/stores/getters_spec.js

@@ -10,11 +10,19 @@ describe('Getters TestReports Store', () => {
   const defaultState = {
     testReports,
     selectedSuiteIndex: 0,
+    pageInfo: {
+      page: 1,
+      perPage: 2,
+    },
   };
 
   const emptyState = {
     testReports: {},
     selectedSuite: null,
+    pageInfo: {
+      page: 1,
+      perPage: 2,
+    },
   };
 
   beforeEach(() => {
@@ -59,15 +67,17 @@ describe('Getters TestReports Store', () => {
   });
 
   describe('getSuiteTests', () => {
-    it('should return the test cases inside the suite', () => {
+    it('should return the current page of test cases inside the suite', () => {
       setupState();
 
       const cases = getters.getSuiteTests(state);
-      const expected = testReports.test_suites[0].test_cases.map(x => ({
-        ...x,
-        formattedTime: formattedTime(x.execution_time),
-        icon: iconForTestStatus(x.status),
-      }));
+      const expected = testReports.test_suites[0].test_cases
+        .map(x => ({
+          ...x,
+          formattedTime: formattedTime(x.execution_time),
+          icon: iconForTestStatus(x.status),
+        }))
+        .slice(0, state.pageInfo.perPage);
 
       expect(cases).toEqual(expected);
     });
@@ -78,4 +88,15 @@ describe('Getters TestReports Store', () => {
       expect(getters.getSuiteTests(state)).toEqual([]);
     });
   });
+
+  describe('getSuiteTestCount', () => {
+    it('should return the total number of test cases', () => {
+      setupState();
+
+      const testCount = getters.getSuiteTestCount(state);
+      const expected = testReports.test_suites[0].test_cases.length;
+
+      expect(testCount).toEqual(expected);
+    });
+  });
 });

spec/frontend/pipelines/test_reports/stores/mutations_spec.js

@@ -12,12 +12,25 @@ describe('Mutations TestReports Store', () => {
     testReports: {},
     selectedSuite: null,
     isLoading: false,
+    pageInfo: {
+      page: 1,
+      perPage: 2,
+    },
   };
 
   beforeEach(() => {
     mockState = { ...defaultState };
   });
 
+  describe('set page', () => {
+    it('should set the current page to display', () => {
+      const pageToDisplay = 3;
+      mutations[types.SET_PAGE](mockState, pageToDisplay);
+
+      expect(mockState.pageInfo.page).toEqual(pageToDisplay);
+    });
+  });
+
   describe('set suite', () => {
     it('should set the suite at the given index', () => {
       mockState.testReports = testReports;

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { getJSONFixture } from 'helpers/fixtures';
-import { GlButton, GlFriendlyWrap } from '@gitlab/ui';
+import { GlButton, GlFriendlyWrap, GlPagination } from '@gitlab/ui';
 import SuiteTable from '~/pipelines/components/test_reports/test_suite_table.vue';
 import * as getters from '~/pipelines/stores/test_reports/getters';
 import { TestStatus } from '~/pipelines/constants';
@@ -26,13 +26,17 @@ describe('Test reports suite table', () => {
   const findCaseRowAtIndex = index => wrapper.findAll('.js-case-row').at(index);
   const findIconForRow = (row, status) => row.find(`.ci-status-icon-${status}`);
 
-  const createComponent = (suite = testSuite) => {
+  const createComponent = (suite = testSuite, perPage = 20) => {
     store = new Vuex.Store({
       state: {
         testReports: {
           test_suites: [suite],
         },
         selectedSuiteIndex: 0,
+        pageInfo: {
+          page: 1,
+          perPage,
+        },
       },
       getters,
     });
@@ -86,4 +90,20 @@ describe('Test reports suite table', () => {
       expect(button.attributes('data-clipboard-text')).toBe(file);
     });
   });
+
+  describe('when a test suite has more test cases than the pagination size', () => {
+    const perPage = 2;
+
+    beforeEach(() => {
+      createComponent(testSuite, perPage);
+    });
+
+    it('renders one page of test cases', () => {
+      expect(allCaseRows().length).toBe(perPage);
+    });
+
+    it('renders a pagination component', () => {
+      expect(wrapper.find(GlPagination).exists()).toBe(true);
+    });
+  });
 });