Merge branch '218725-selected-suite-index' into 'master'

Change selectedSuite to use index

See merge request gitlab-org/gitlab!36136

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,
     });