Change selectedSuite to use index

`selectedSuite` in the test reports store was
setting the whole suite object. This worked, but
we are moving towards not having the whole
suite object loaded at first. If we were to keep this,
then when clicking on the suite, the report wouldn't
show any test cases because they hadn't loaded yet.

Instead, we can set the index of the selectedSuite so
that when we load the whole suite we can still use
the index to get the testCases from the suite.

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

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import TestSuiteTable from './test_suite_table.vue';
 import TestSummary from './test_summary.vue';
@@ -14,9 +14,10 @@ export default {
     TestSummaryTable,
   },
   computed: {
-    ...mapState(['isLoading', 'selectedSuite', 'testReports']),
+    ...mapState(['isLoading', 'selectedSuiteIndex', 'testReports']),
+    ...mapGetters(['getSelectedSuite']),
     showSuite() {
-      return this.selectedSuite.total_count > 0;
+      return this.selectedSuiteIndex !== null;
     },
     showTests() {
       const { test_suites: testSuites = [] } = this.testReports;
@@ -27,12 +28,12 @@ export default {
     this.fetchSummary();
   },
   methods: {
-    ...mapActions(['fetchSummary', 'setSelectedSuite', 'removeSelectedSuite']),
+    ...mapActions(['fetchSummary', 'setSelectedSuiteIndex', 'removeSelectedSuiteIndex']),
     summaryBackClick() {
-      this.removeSelectedSuite();
+      this.removeSelectedSuiteIndex();
     },
-    summaryTableRowClick(suite) {
-      this.setSelectedSuite(suite);
+    summaryTableRowClick(index) {
+      this.setSelectedSuiteIndex(index);
     },
     beforeEnterTransition() {
       document.documentElement.style.overflowX = 'hidden';
@@ -60,7 +61,7 @@ export default {
       @after-leave="afterLeaveTransition"
     >
       <div v-if="showSuite" key="detail" class="w-100 position-absolute slide-enter-to-element">
-        <test-summary :report="selectedSuite" show-back @on-back-click="summaryBackClick" />
+        <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" />
 
         <test-suite-table />
       </div>

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

@@ -27,8 +27,8 @@ export default {
     },
   },
   methods: {
-    tableRowClick(suite) {
-      this.$emit('row-click', suite);
+    tableRowClick(index) {
+      this.$emit('row-click', index);
     },
   },
   maxShownRows: 20,
@@ -82,7 +82,7 @@ export default {
           :class="{
             'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
           }"
-          @click="tableRowClick(testSuite)"
+          @click="tableRowClick(index)"
         >
           <div class="table-section section-25">
             <div role="rowheader" class="table-mobile-header font-weight-bold">

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

@@ -35,8 +35,10 @@ export const fetchFullReport = ({ state, commit, dispatch }) => {
     });
 };
 
-export const setSelectedSuite = ({ commit }, data) => commit(types.SET_SELECTED_SUITE, data);
-export const removeSelectedSuite = ({ commit }) => commit(types.SET_SELECTED_SUITE, {});
+export const setSelectedSuiteIndex = ({ commit }, data) =>
+  commit(types.SET_SELECTED_SUITE_INDEX, data);
+export const removeSelectedSuiteIndex = ({ commit }) =>
+  commit(types.SET_SELECTED_SUITE_INDEX, null);
 export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING);
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests

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

@@ -9,14 +9,12 @@ export const getTestSuites = state => {
   }));
 };
 
-export const getSuiteTests = state => {
-  const { selectedSuite } = state;
-
-  if (selectedSuite.test_cases) {
-    return selectedSuite.test_cases.sort(sortTestCases).map(addIconStatus);
-  }
+export const getSelectedSuite = state =>
+  state.testReports?.test_suites?.[state.selectedSuiteIndex] || {};
 
-  return [];
+export const getSuiteTests = state => {
+  const { test_cases: testCases = [] } = getSelectedSuite(state);
+  return testCases.sort(sortTestCases).map(addIconStatus);
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests

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

 export const SET_REPORTS = 'SET_REPORTS';
-export const SET_SELECTED_SUITE = 'SET_SELECTED_SUITE';
+export const SET_SELECTED_SUITE_INDEX = 'SET_SELECTED_SUITE_INDEX';
 export const SET_SUMMARY = 'SET_SUMMARY';
 export const TOGGLE_LOADING = 'TOGGLE_LOADING';

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

@@ -5,8 +5,8 @@ export default {
     Object.assign(state, { testReports });
   },
 
-  [types.SET_SELECTED_SUITE](state, selectedSuite) {
-    Object.assign(state, { selectedSuite });
+  [types.SET_SELECTED_SUITE_INDEX](state, selectedSuiteIndex) {
+    Object.assign(state, { selectedSuiteIndex });
   },
 
   [types.SET_SUMMARY](state, summary) {

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

@@ -2,7 +2,7 @@ export default ({ fullReportEndpoint = '', summaryEndpoint = '' }) => ({
   summaryEndpoint,
   fullReportEndpoint,
   testReports: {},
-  selectedSuite: {},
+  selectedSuiteIndex: null,
   summary: {},
   isLoading: false,
 });

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

@@ -22,7 +22,7 @@ describe('Actions TestReports Store', () => {
     fullReportEndpoint,
     summaryEndpoint,
     testReports: {},
-    selectedSuite: {},
+    selectedSuite: null,
     summary: {},
   };
 
@@ -101,28 +101,28 @@ describe('Actions TestReports Store', () => {
     });
   });
 
-  describe('set selected suite', () => {
-    const selectedSuite = testReports.test_suites[0];
+  describe('set selected suite index', () => {
+    const selectedSuiteIndex = 0;
 
-    it('sets selectedSuite', done => {
+    it('sets selectedSuiteIndex', done => {
       testAction(
-        actions.setSelectedSuite,
-        selectedSuite,
+        actions.setSelectedSuiteIndex,
+        selectedSuiteIndex,
         state,
-        [{ type: types.SET_SELECTED_SUITE, payload: selectedSuite }],
+        [{ type: types.SET_SELECTED_SUITE_INDEX, payload: selectedSuiteIndex }],
         [],
         done,
       );
     });
   });
 
-  describe('remove selected suite', () => {
-    it('sets selectedSuite to {}', done => {
+  describe('remove selected suite index', () => {
+    it('sets selectedSuiteIndex to null', done => {
       testAction(
-        actions.removeSelectedSuite,
+        actions.removeSelectedSuiteIndex,
         {},
         state,
-        [{ type: types.SET_SELECTED_SUITE, payload: {} }],
+        [{ type: types.SET_SELECTED_SUITE_INDEX, payload: null }],
         [],
         done,
       );

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

@@ -9,12 +9,12 @@ describe('Getters TestReports Store', () => {
 
   const defaultState = {
     testReports,
-    selectedSuite: testReports.test_suites[0],
+    selectedSuiteIndex: 0,
   };
 
   const emptyState = {
     testReports: {},
-    selectedSuite: {},
+    selectedSuite: null,
   };
 
   beforeEach(() => {
@@ -47,6 +47,17 @@ describe('Getters TestReports Store', () => {
     });
   });
 
+  describe('getSelectedSuite', () => {
+    it('should return the selected suite', () => {
+      setupState();
+
+      const selectedSuite = getters.getSelectedSuite(state);
+      const expected = testReports.test_suites[state.selectedSuiteIndex];
+
+      expect(selectedSuite).toEqual(expected);
+    });
+  });
+
   describe('getSuiteTests', () => {
     it('should return the test cases inside the suite', () => {
       setupState();

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

@@ -10,7 +10,7 @@ describe('Mutations TestReports Store', () => {
   const defaultState = {
     endpoint: '',
     testReports: {},
-    selectedSuite: {},
+    selectedSuite: null,
     isLoading: false,
   };
 
@@ -27,12 +27,12 @@ describe('Mutations TestReports Store', () => {
     });
   });
 
-  describe('set selected suite', () => {
-    it('should set selectedSuite', () => {
-      const selectedSuite = testReports.test_suites[0];
-      mutations[types.SET_SELECTED_SUITE](mockState, selectedSuite);
+  describe('set selected suite index', () => {
+    it('should set selectedSuiteIndex', () => {
+      const selectedSuiteIndex = 0;
+      mutations[types.SET_SELECTED_SUITE_INDEX](mockState, selectedSuiteIndex);
 
-      expect(mockState.selectedSuite).toEqual(selectedSuite);
+      expect(mockState.selectedSuiteIndex).toEqual(selectedSuiteIndex);
     });
   });
 

spec/frontend/pipelines/test_reports/test_reports_spec.js

@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { getJSONFixture } from 'helpers/fixtures';
 import TestReports from '~/pipelines/components/test_reports/test_reports.vue';
 import * as actions from '~/pipelines/stores/test_reports/actions';
+import * as getters from '~/pipelines/stores/test_reports/getters';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -29,6 +30,7 @@ describe('Test reports app', () => {
         ...actions,
         fetchSummary: () => {},
       },
+      getters,
     });
 
     wrapper = shallowMount(TestReports, {

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

@@ -28,7 +28,10 @@ describe('Test reports suite table', () => {
   const createComponent = (suite = testSuite) => {
     store = new Vuex.Store({
       state: {
-        selectedSuite: suite,
+        testReports: {
+          test_suites: [suite],
+        },
+        selectedSuiteIndex: 0,
       },
       getters,
     });