Add link to test case attachment in test report

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

 <script>
-import { GlBadge, GlModal } from '@gitlab/ui';
-import { __, n__, sprintf } from '~/locale';
+import { GlBadge, GlFriendlyWrap, GlLink, GlModal } from '@gitlab/ui';
+import { __, n__, s__, sprintf } from '~/locale';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 
 export default {
@@ -8,6 +8,8 @@ export default {
   components: {
     CodeBlock,
     GlBadge,
+    GlFriendlyWrap,
+    GlLink,
     GlModal,
   },
   props: {
@@ -50,6 +52,7 @@ export default {
     duration: __('Execution time'),
     history: __('History'),
     trace: __('System output'),
+    attachment: s__('TestReports|Attachment'),
   },
   modalCloseButton: {
     text: __('Close'),
@@ -85,6 +88,18 @@ export default {
       </div>
     </div>
 
+    <div v-if="testCase.attachment_url" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
+      <strong class="gl-text-right col-sm-3">{{ $options.text.attachment }}</strong>
+      <gl-link
+        class="col-sm-9"
+        :href="testCase.attachment_url"
+        target="_blank"
+        data-testid="test-case-attachment-url"
+      >
+        <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.attachment_url" />
+      </gl-link>
+    </div>
+
     <div
       v-if="testCase.system_output"
       class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"

locale/gitlab.pot

@@ -31528,6 +31528,9 @@ msgstr ""
 msgid "TestReports|%{rate}%{sign} success rate"
 msgstr ""
 
+msgid "TestReports|Attachment"
+msgstr ""
+
 msgid "TestReports|Jobs"
 msgstr ""
 

spec/frontend/pipelines/test_reports/test_case_details_spec.js

 import { GlModal } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import TestCaseDetails from '~/pipelines/components/test_reports/test_case_details.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 
@@ -18,14 +19,16 @@ describe('Test case details', () => {
     system_output: 'Line 42 is broken',
   };
 
-  const findModal = () => wrapper.find(GlModal);
-  const findName = () => wrapper.find('[data-testid="test-case-name"]');
-  const findDuration = () => wrapper.find('[data-testid="test-case-duration"]');
-  const findRecentFailures = () => wrapper.find('[data-testid="test-case-recent-failures"]');
-  const findSystemOutput = () => wrapper.find('[data-testid="test-case-trace"]');
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findName = () => wrapper.findByTestId('test-case-name');
+  const findDuration = () => wrapper.findByTestId('test-case-duration');
+  const findRecentFailures = () => wrapper.findByTestId('test-case-recent-failures');
+  const findAttachmentUrl = () => wrapper.findByTestId('test-case-attachment-url');
+  const findSystemOutput = () => wrapper.findByTestId('test-case-trace');
 
   const createComponent = (testCase = {}) => {
-    wrapper = shallowMount(TestCaseDetails, {
+    wrapper = extendedWrapper(
+      shallowMount(TestCaseDetails, {
         localVue,
         propsData: {
           modalId: 'my-modal',
@@ -35,7 +38,8 @@ describe('Test case details', () => {
           },
         },
         stubs: { CodeBlock, GlModal },
-    });
+      }),
+    );
   };
 
   afterEach(() => {
@@ -91,6 +95,25 @@ describe('Test case details', () => {
     });
   });
 
+  describe('when test case has attachment URL', () => {
+    it('renders the attachment URL as a link', () => {
+      const expectedUrl = '/my/path.jpg';
+      createComponent({ attachment_url: expectedUrl });
+      const attachmentUrl = findAttachmentUrl();
+
+      expect(attachmentUrl.exists()).toBe(true);
+      expect(attachmentUrl.attributes('href')).toBe(expectedUrl);
+    });
+  });
+
+  describe('when test case does not have attachment URL', () => {
+    it('does not render the attachment URL', () => {
+      createComponent({ attachment_url: null });
+
+      expect(findAttachmentUrl().exists()).toBe(false);
+    });
+  });
+
   describe('when test case has system output', () => {
     it('renders the test case system output', () => {
       createComponent();