Move fetchFullReport to vue app

Instead of fetching the full report from the
select suite index action, we should do it
in the tests_reports app. This will make the
function more clean, and ensure the app
is in charge of all actions being called.

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

@@ -14,7 +14,7 @@ export default {
     TestSummaryTable,
   },
   computed: {
-    ...mapState(['isLoading', 'selectedSuiteIndex', 'testReports']),
+    ...mapState(['hasFullReport', 'isLoading', 'selectedSuiteIndex', 'testReports']),
     ...mapGetters(['getSelectedSuite']),
     showSuite() {
       return this.selectedSuiteIndex !== null;
@@ -28,12 +28,22 @@ export default {
     this.fetchSummary();
   },
   methods: {
-    ...mapActions(['fetchSummary', 'setSelectedSuiteIndex', 'removeSelectedSuiteIndex']),
+    ...mapActions([
+      'fetchFullReport',
+      'fetchSummary',
+      'setSelectedSuiteIndex',
+      'removeSelectedSuiteIndex',
+    ]),
     summaryBackClick() {
       this.removeSelectedSuiteIndex();
     },
     summaryTableRowClick(index) {
       this.setSelectedSuiteIndex(index);
+
+      // Fetch the full report when the user clicks to see more details
+      if (!this.hasFullReport) {
+        this.fetchFullReport();
+      }
     },
     beforeEnterTransition() {
       document.documentElement.style.overflowX = 'hidden';

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

@@ -20,9 +20,7 @@ export const fetchSummary = ({ state, commit, dispatch }) => {
         // Set the tab counter badge to total_count
         // This is temporary until we can server-side render that count number
         // (see https://gitlab.com/gitlab-org/gitlab/-/issues/223134)
-        if (data.total_count !== undefined) {
-          document.querySelector('.js-test-report-badge-counter').innerHTML = data.total_count;
-        }
+        document.querySelector('.js-test-report-badge-counter').innerHTML = data.total_count || 0;
       }
     })
     .catch(() => {
@@ -49,15 +47,8 @@ export const fetchFullReport = ({ state, commit, dispatch }) => {
     });
 };
 
-export const setSelectedSuiteIndex = ({ state, commit, dispatch }, data) => {
+export const setSelectedSuiteIndex = ({ commit }, data) =>
   commit(types.SET_SELECTED_SUITE_INDEX, data);
-
-  // Fetch the full report when the user clicks to see more details
-  if (!state.hasFullReport) {
-    dispatch('fetchFullReport');
-  }
-};
-
 export const removeSelectedSuiteIndex = ({ commit }) =>
   commit(types.SET_SELECTED_SUITE_INDEX, null);
 export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING);

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

@@ -134,32 +134,17 @@ describe('Actions TestReports Store', () => {
   });
 
   describe('set selected suite index', () => {
-    const selectedSuiteIndex = 0;
+    it('sets selectedSuiteIndex', done => {
+      const selectedSuiteIndex = 0;
 
-    describe('when state does not have full report', () => {
-      it('sets selectedSuiteIndex', done => {
-        testAction(
-          actions.setSelectedSuiteIndex,
-          selectedSuiteIndex,
-          state,
-          [{ type: types.SET_SELECTED_SUITE_INDEX, payload: selectedSuiteIndex }],
-          [{ type: 'fetchFullReport' }],
-          done,
-        );
-      });
-    });
-
-    describe('when state has full report', () => {
-      it('sets selectedSuiteIndex', done => {
-        testAction(
-          actions.setSelectedSuiteIndex,
-          selectedSuiteIndex,
-          { ...state, hasFullReport: true },
-          [{ type: types.SET_SELECTED_SUITE_INDEX, payload: selectedSuiteIndex }],
-          [],
-          done,
-        );
-      });
+      testAction(
+        actions.setSelectedSuiteIndex,
+        selectedSuiteIndex,
+        { ...state, hasFullReport: true },
+        [{ type: types.SET_SELECTED_SUITE_INDEX, payload: selectedSuiteIndex }],
+        [],
+        done,
+      );
     });
   });
 

spec/frontend/pipelines/test_reports/test_reports_spec.js

@@ -2,7 +2,8 @@ import Vuex from 'vuex';
 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 TestSummary from '~/pipelines/components/test_reports/test_summary.vue';
+import TestSummaryTable from '~/pipelines/components/test_reports/test_summary_table.vue';
 import * as getters from '~/pipelines/stores/test_reports/getters';
 
 const localVue = createLocalVue();
@@ -17,19 +18,25 @@ describe('Test reports app', () => {
   const loadingSpinner = () => wrapper.find('.js-loading-spinner');
   const testsDetail = () => wrapper.find('.js-tests-detail');
   const noTestsToShow = () => wrapper.find('.js-no-tests-to-show');
+  const testSummary = () => wrapper.find(TestSummary);
+  const testSummaryTable = () => wrapper.find(TestSummaryTable);
+
+  const actionSpies = {
+    fetchFullReport: jest.fn(),
+    fetchSummary: jest.fn(),
+    setSelectedSuiteIndex: jest.fn(),
+    removeSelectedSuiteIndex: jest.fn(),
+  };
 
   const createComponent = (state = {}) => {
     store = new Vuex.Store({
       state: {
         isLoading: false,
-        selectedSuite: {},
+        selectedSuiteIndex: null,
         testReports,
         ...state,
       },
-      actions: {
-        ...actions,
-        fetchSummary: () => {},
-      },
+      actions: actionSpies,
       getters,
     });
 
@@ -43,6 +50,16 @@ describe('Test reports app', () => {
     wrapper.destroy();
   });
 
+  describe('when component is created', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('should call fetchSummary', () => {
+      expect(actionSpies.fetchSummary).toHaveBeenCalled();
+    });
+  });
+
   describe('when loading', () => {
     beforeEach(() => createComponent({ isLoading: true }));
 
@@ -72,4 +89,41 @@ describe('Test reports app', () => {
       expect(wrapper.vm.showTests).toBeTruthy();
     });
   });
+
+  describe('when a suite is clicked', () => {
+    describe('when the full test report has already been received', () => {
+      beforeEach(() => {
+        createComponent({ hasFullReport: true });
+        testSummaryTable().vm.$emit('row-click', 0);
+      });
+
+      it('should only call setSelectedSuiteIndex', () => {
+        expect(actionSpies.setSelectedSuiteIndex).toHaveBeenCalled();
+        expect(actionSpies.fetchFullReport).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when the full test report has not been received', () => {
+      beforeEach(() => {
+        createComponent({ hasFullReport: false });
+        testSummaryTable().vm.$emit('row-click', 0);
+      });
+
+      it('should call setSelectedSuiteIndex and fetchFullReport', () => {
+        expect(actionSpies.setSelectedSuiteIndex).toHaveBeenCalled();
+        expect(actionSpies.fetchFullReport).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when clicking back to summary', () => {
+    beforeEach(() => {
+      createComponent({ selectedSuiteIndex: 0 });
+      testSummary().vm.$emit('on-back-click');
+    });
+
+    it('should call removeSelectedSuiteIndex', () => {
+      expect(actionSpies.removeSelectedSuiteIndex).toHaveBeenCalled();
+    });
+  });
 });