Request test_reports.json on demand

Added eventLister to pipeline tabs
Only request test_reports when Test tab is selected

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -99,8 +99,26 @@ export default () => {
     window.gon && window.gon.features && window.gon.features.junitPipelineView;
 
   if (testReportsEnabled) {
+    const fetchReportsAction = 'fetchReports';
     testReportsStore.dispatch('setEndpoint', dataset.testReportEndpoint);
-    testReportsStore.dispatch('fetchReports');
+
+    const tabsElmement = document.querySelector('.pipelines-tabs');
+    const isTestTabActive = Boolean(
+      document.querySelector('.pipelines-tabs > li > a.test-tab.active'),
+    );
+
+    if (isTestTabActive) {
+      testReportsStore.dispatch(fetchReportsAction);
+    } else {
+      const tabClickHandler = e => {
+        if (e.target.className === 'test-tab') {
+          testReportsStore.dispatch(fetchReportsAction);
+          tabsElmement.removeEventListener('click', tabClickHandler);
+        }
+      };
+
+      tabsElmement.addEventListener('click', tabClickHandler);
+    }
 
     // eslint-disable-next-line no-new
     new Vue({

changelogs/unreleased/37725-request-test-reports-on-demand.yml

+---
+title: Test reports in the pipeline details page will now load when clicking the tests
+  tab.
+merge_request: 24577
+author:
+type: changed

spec/features/projects/pipelines/pipeline_spec.rb

@@ -359,13 +359,27 @@ describe 'Pipeline', :js do
     context 'test tabs' do
       let(:pipeline) { create(:ci_pipeline, :with_test_reports, project: project) }
 
-      it 'shows badge counter in Tests tab' do
+      before do
         visit_pipeline
         wait_for_requests
+      end
 
+      it 'shows badge counter in Tests tab' do
         expect(pipeline.test_reports.total_count).to eq(4)
         expect(page.find('.js-test-report-badge-counter').text).to eq(pipeline.test_reports.total_count.to_s)
       end
+
+      it 'does not call test_report.json endpoint by default', :js do
+        expect(page).to have_selector('.js-no-tests-to-show', visible: :all)
+      end
+
+      it 'does call test_report.json endpoint when tab is selected', :js do
+        find('.js-tests-tab-link').click
+        wait_for_requests
+
+        expect(page).to have_content('Test suites')
+        expect(page).to have_selector('.js-tests-detail', visible: :all)
+      end
     end
 
     context 'retrying jobs' do