Load pipeline test tab badge counter asynchronously

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -10,6 +10,7 @@ import pipelineHeader from './components/header_component.vue';
 import eventHub from './event_hub';
 import TestReports from './components/test_reports/test_reports.vue';
 import testReportsStore from './stores/test_reports';
+import axios from '~/lib/utils/axios_utils';
 
 Vue.use(Translate);
 
@@ -111,5 +112,12 @@ export default () => {
         return createElement('test-reports');
       },
     });
+
+    axios
+      .get(dataset.testReportEndpoint)
+      .then(({ data }) => {
+        document.querySelector('.js-test-report-badge-counter').innerHTML = data.total_count;
+      })
+      .catch(() => {});
   }
 };

app/views/projects/pipelines/_with_tabs.html.haml

@@ -18,7 +18,7 @@
       %li.js-tests-tab-link
         = link_to test_report_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-tests', action: 'test_report', toggle: 'tab' }, class: 'test-tab' do
           = s_('TestReports|Tests')
-          %span.badge.badge-pill= pipeline.test_reports.total_count
+          %span.badge.badge-pill.js-test-report-badge-counter
     = render_if_exists "projects/pipelines/tabs_holder", pipeline: @pipeline, project: @project
 
 .tab-content

spec/features/projects/pipelines/pipeline_spec.rb

@@ -356,6 +356,18 @@ describe 'Pipeline', :js do
       end
     end
 
+    context 'test tabs' do
+      let(:pipeline) { create(:ci_pipeline, :with_test_reports, project: project) }
+
+      it 'shows badge counter in Tests tab' do
+        visit_pipeline
+        wait_for_requests
+
+        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
+    end
+
     context 'retrying jobs' do
       before do
         visit_pipeline