Refactor injected props

Refactor provide/inject data to not use
"type" property. Also switched the help
page data to using to the help page helper.

Also updated tests to be more clear.

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

 <script>
 import { GlEmptyState } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 
 export const i18n = {
@@ -20,17 +21,11 @@ export default {
   },
   inject: {
     emptyStateImagePath: {
-      type: String,
       default: '',
     },
     hasTestReport: {
-      type: Boolean,
       default: false,
     },
-    testReportDocPath: {
-      type: String,
-      default: '',
-    },
   },
   computed: {
     emptyStateText() {
@@ -47,6 +42,9 @@ export default {
         title: this.$options.i18n.noReportsTitle,
       };
     },
+    testReportDocPath() {
+      return helpPagePath('ci/unit_test_reports');
+    },
   },
 };
 </script>

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

@@ -17,7 +17,6 @@ export default {
   },
   inject: {
     hasTestReport: {
-      type: Boolean,
       default: false,
     },
   },

app/assets/javascripts/pipelines/pipeline_details_bundle.js

 import Vue from 'vue';
 import { deprecatedCreateFlash as Flash } from '~/flash';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import Translate from '~/vue_shared/translate';
 import PipelineGraphLegacy from './components/graph/graph_component_legacy.vue';
@@ -63,14 +64,8 @@ const createLegacyPipelinesDetailApp = (mediator) => {
 
 const createTestDetails = () => {
   const el = document.querySelector(SELECTORS.PIPELINE_TESTS);
-  const {
-    blobPath,
-    emptyStateImagePath,
-    hasTestReport,
-    summaryEndpoint,
-    suiteEndpoint,
-    testReportDocPath,
-  } = el?.dataset || {};
+  const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } =
+    el?.dataset || {};
   const testReportsStore = createTestReportsStore({
     blobPath,
     summaryEndpoint,
@@ -85,8 +80,7 @@ const createTestDetails = () => {
     },
     provide: {
       emptyStateImagePath,
-      hasTestReport: hasTestReport !== undefined, // if hasTestReport is false that means the attribute isn't included
-      testReportDocPath,
+      hasTestReport: parseBoolean(hasTestReport),
     },
     store: testReportsStore,
     render(createElement) {

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

@@ -84,7 +84,6 @@
     #js-pipeline-tests-detail{ data: { summary_endpoint: summary_project_pipeline_tests_path(@project, @pipeline, format: :json),
       suite_endpoint: project_pipeline_test_path(@project, @pipeline, suite_name: 'suite', format: :json),
       blob_path: project_blob_path(@project, @pipeline.sha),
-      has_test_report: @pipeline.has_reports?(Ci::JobArtifact.test_reports),
-      test_report_doc_path: help_page_path('ci/unit_test_reports'),
+      has_test_report: @pipeline.has_reports?(Ci::JobArtifact.test_reports).to_s,
       empty_state_image_path: image_path('illustrations/empty-state/empty-test-cases-lg.svg') } }
   = render_if_exists "projects/pipelines/tabs_content", pipeline: @pipeline, project: @project

spec/frontend/pipelines/test_reports/empty_state_spec.js

@@ -7,12 +7,11 @@ describe('Test report empty state', () => {
 
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
 
-  const createComponent = (hasTestReport = true) => {
+  const createComponent = ({ hasTestReport = true } = {}) => {
     wrapper = shallowMount(EmptyState, {
       provide: {
         emptyStateImagePath: '/image/path',
         hasTestReport,
-        testReportDocPath: '/docs/path',
       },
       stubs: {
         GlEmptyState,
@@ -34,7 +33,7 @@ describe('Test report empty state', () => {
 
   describe('when pipeline does not have a test report', () => {
     it('should render no test report message', () => {
-      createComponent(false);
+      createComponent({ hasTestReport: false });
 
       expect(findEmptyState().props()).toMatchObject({
         primaryButtonText: i18n.noReportsButton,

spec/frontend/pipelines/test_reports/test_reports_spec.js

@@ -31,7 +31,7 @@ describe('Test reports app', () => {
     removeSelectedSuiteIndex: jest.fn(),
   };
 
-  const createComponent = (state = {}, hasTestReport = true) => {
+  const createComponent = ({ state = {}, hasTestReport = true } = {}) => {
     store = new Vuex.Store({
       state: {
         isLoading: false,
@@ -66,14 +66,14 @@ describe('Test reports app', () => {
     });
 
     it('should not call fetchSummary when pipeline does not have test report', () => {
-      createComponent({}, false);
+      createComponent({ state: {}, hasTestReport: false });
 
       expect(actionSpies.fetchSummary).not.toHaveBeenCalled();
     });
   });
 
   describe('when loading', () => {
-    beforeEach(() => createComponent({ isLoading: true }));
+    beforeEach(() => createComponent({ state: { isLoading: true } }));
 
     it('shows the loading spinner', () => {
       expect(emptyState().exists()).toBe(false);
@@ -84,7 +84,7 @@ describe('Test reports app', () => {
 
   describe('when the api returns no data', () => {
     it('displays empty state component', () => {
-      createComponent({ testReports: {} });
+      createComponent({ state: { testReports: {} } });
 
       expect(emptyState().exists()).toBe(true);
     });
@@ -105,7 +105,7 @@ describe('Test reports app', () => {
 
   describe('when a suite is clicked', () => {
     beforeEach(() => {
-      createComponent({ hasFullReport: true });
+      createComponent({ state: { hasFullReport: true } });
       testSummaryTable().vm.$emit('row-click', 0);
     });
 
@@ -117,7 +117,7 @@ describe('Test reports app', () => {
 
   describe('when clicking back to summary', () => {
     beforeEach(() => {
-      createComponent({ selectedSuiteIndex: 0 });
+      createComponent({ state: { selectedSuiteIndex: 0 } });
       testSummary().vm.$emit('on-back-click');
     });