Link to test reports from MR

Link to test reports from MR

Rendering config + tests

Prettier linting change

Adding missing path prop

Fixing undefined path prop

Undefined test variable

Adding missing TestHost import

Wrong helper path

Fixing tests descriptions

Fixes to widget tests

Changes to component testing

Add full report button specs

Adding specs to check that the full report
link button is rendered if the feature
flag is enabled, and not rendered when
the feature flag is disabled.

Add full report button specs

Adding specs to check that the full report
link button is rendered if the feature
flag is enabled, and not rendered when
the feature flag is disabled.

Added missing changelog

Change to gitlab-ui button

Missing component registration

Formatting and translations

Fixing broken test

Reverting component change

Changing to GlButton

Apply 1 suggestion(s) to 1 file(s)

Additional check for pipelinePath

Quick formatting fix

Adding group scope to feat flag

Review refactors (@shampton)

app/assets/javascripts/reports/components/grouped_test_reports_app.vue

@@ -6,7 +6,9 @@ import ReportSection from './report_section.vue';
 import SummaryRow from './summary_row.vue';
 import IssuesList from './issues_list.vue';
 import Modal from './modal.vue';
+import { GlButton } from '@gitlab/ui';
 import createStore from '../store';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
 
 export default {
@@ -17,12 +19,19 @@ export default {
     SummaryRow,
     IssuesList,
     Modal,
+    GlButton,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     endpoint: {
       type: String,
       required: true,
     },
+    pipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   componentNames,
   computed: {
@@ -43,6 +52,12 @@ export default {
 
       return summaryTextBuilder(s__('Reports|Test summary'), this.summary);
     },
+    testTabURL() {
+      return `${this.pipelinePath}/test_report`;
+    },
+    showViewFullReport() {
+      return Boolean(this.glFeatures.junitPipelineView) && this.pipelinePath.length;
+    },
   },
   created() {
     this.setEndpoint(this.endpoint);
@@ -98,6 +113,11 @@ export default {
     :has-issues="reports.length > 0"
     class="mr-widget-section grouped-security-reports mr-report"
   >
+    <template v-if="showViewFullReport" #actionButtons>
+      <gl-button :href="testTabURL" icon="external-link" data-testid="group-test-reports-full-link">
+        {{ s__('ciReport|View full report') }}
+      </gl-button>
+    </template>
     <template #body>
       <div class="mr-widget-grouped-section report-block">
         <template v-for="(report, i) in reports">

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -384,6 +384,7 @@ export default {
         v-if="mr.testResultsPath"
         class="js-reports-container"
         :endpoint="mr.testResultsPath"
+        :pipeline-path="mr.mergeRequestAddCiConfigPath"
       />
 
       <terraform-plan v-if="mr.terraformReportsPath" :endpoint="mr.terraformReportsPath" />

app/controllers/projects/merge_requests_controller.rb

@@ -40,6 +40,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
 
   before_action do
     push_frontend_feature_flag(:vue_issuable_sidebar, @project.group)
+    push_frontend_feature_flag(:junit_pipeline_view, @project.group)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:index, :show, :discussions]

changelogs/unreleased/201840-link-testwidget.yml

+---
+title: Link to test reports from MR Widget
+merge_request: 29729
+author:
+type: added

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -367,6 +367,7 @@ export default {
         v-if="mr.testResultsPath"
         class="js-reports-container"
         :endpoint="mr.testResultsPath"
+        :pipeline-path="mr.mergeRequestAddCiConfigPath"
       />
 
       <terraform-plan v-if="mr.terraformReportsPath" :endpoint="mr.terraformReportsPath" />

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -15,20 +15,29 @@ localVue.use(Vuex);
 
 describe('Grouped test reports app', () => {
   const endpoint = 'endpoint.json';
+  const pipelinePath = '/path/to/pipeline';
   const Component = localVue.extend(GroupedTestReportsApp);
   let wrapper;
   let mockStore;
 
-  const mountComponent = () => {
+  const mountComponent = ({
+    glFeatures = { junitPipelineView: false },
+    props = { pipelinePath },
+  } = {}) => {
     wrapper = mount(Component, {
       store: mockStore,
       localVue,
       propsData: {
         endpoint,
+        pipelinePath,
+        ...props,
       },
       methods: {
         fetchReports: () => {},
       },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
@@ -39,6 +48,7 @@ describe('Grouped test reports app', () => {
   };
 
   const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]');
+  const findFullTestReportLink = () => wrapper.find('[data-testid="group-test-reports-full-link"]');
   const findSummaryDescription = () => wrapper.find('[data-testid="test-summary-row-description"]');
   const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]');
   const findAllIssueDescriptions = () =>
@@ -67,6 +77,38 @@ describe('Grouped test reports app', () => {
     });
   });
 
+  describe('`View full report` button', () => {
+    it('should not render the full test report link', () => {
+      expect(findFullTestReportLink().exists()).toBe(false);
+    });
+
+    describe('With junitPipelineView feature flag enabled', () => {
+      beforeEach(() => {
+        mountComponent({ glFeatures: { junitPipelineView: true } });
+      });
+
+      it('should render the full test report link', () => {
+        const fullTestReportLink = findFullTestReportLink();
+
+        expect(fullTestReportLink.exists()).toBe(true);
+        expect(fullTestReportLink.attributes('href')).toBe(`${pipelinePath}/test_report`);
+      });
+    });
+
+    describe('Without a pipelinePath', () => {
+      beforeEach(() => {
+        mountComponent({
+          glFeatures: { junitPipelineView: true },
+          props: { pipelinePath: '' },
+        });
+      });
+
+      it('should not render the full test report link', () => {
+        expect(findFullTestReportLink().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('with new failed result', () => {
     beforeEach(() => {
       setReports(newFailedTestReports);