Merge branch '119032-add-filename-to-unit-test-report' into 'master'

Add file name column to unit test report with copy button

See merge request gitlab-org/gitlab!43338

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

 <script>
 import { mapGetters } from 'vuex';
-import { GlTooltipDirective, GlFriendlyWrap, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
@@ -8,6 +8,7 @@ export default {
   components: {
     GlIcon,
     GlFriendlyWrap,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -45,6 +46,9 @@ export default {
         <div role="rowheader" class="table-section section-20">
           {{ __('Name') }}
         </div>
+        <div role="rowheader" class="table-section section-10">
+          {{ __('Filename') }}
+        </div>
         <div role="rowheader" class="table-section section-10 text-center">
           {{ __('Status') }}
         </div>
@@ -63,18 +67,30 @@ export default {
       >
         <div class="table-section section-20 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
-          <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
+          <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
             <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
           </div>
         </div>
 
         <div class="table-section section-20 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
-          <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
-            <gl-friendly-wrap
-              data-testid="caseName"
-              :symbols="$options.wrapSymbols"
-              :text="testCase.name"
+          <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
+            <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" />
+          </div>
+        </div>
+
+        <div class="table-section section-10 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Filename') }}</div>
+          <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
+            <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.file" />
+            <gl-button
+              v-gl-tooltip
+              size="small"
+              category="tertiary"
+              icon="copy-to-clipboard"
+              :title="__('Copy to clipboard')"
+              :data-clipboard-text="testCase.file"
+              :aria-label="__('Copy to clipboard')"
             />
           </div>
         </div>

changelogs/unreleased/119032-add-filename-to-unit-test-report.yml

+---
+title: Add file name column to CI unit test report
+merge_request: 43338
+author:
+type: added

locale/gitlab.pot

@@ -11284,6 +11284,9 @@ msgstr ""
 msgid "File upload error."
 msgstr ""
 
+msgid "Filename"
+msgstr ""
+
 msgid "Files"
 msgstr ""
 

spec/frontend/pipelines/test_reports/mock_data.js

@@ -3,6 +3,7 @@ import { TestStatus } from '~/pipelines/constants';
 export default [
   {
     classname: 'spec.test_spec',
+    file: 'spec/trace_spec.rb',
     execution_time: 0,
     name: 'Test#skipped text',
     stack_trace: null,
@@ -11,6 +12,7 @@ export default [
   },
   {
     classname: 'spec.test_spec',
+    file: 'spec/trace_spec.rb',
     execution_time: 0,
     name: 'Test#error text',
     stack_trace: null,
@@ -19,6 +21,7 @@ export default [
   },
   {
     classname: 'spec.test_spec',
+    file: 'spec/trace_spec.rb',
     execution_time: 0,
     name: 'Test#unknown text',
     stack_trace: null,

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { getJSONFixture } from 'helpers/fixtures';
+import { GlButton } from '@gitlab/ui';
 import SuiteTable from '~/pipelines/components/test_reports/test_suite_table.vue';
 import * as getters from '~/pipelines/stores/test_reports/getters';
 import { TestStatus } from '~/pipelines/constants';
@@ -73,5 +74,15 @@ describe('Test reports suite table', () => {
 
       expect(findIconForRow(row, status).exists()).toBe(true);
     });
+
+    it('renders the file name for the test with a copy button', () => {
+      const { file } = testCases[0];
+      const row = findCaseRowAtIndex(0);
+      const button = row.find(GlButton);
+
+      expect(row.text()).toContain(file);
+      expect(button.exists()).toBe(true);
+      expect(button.attributes('data-clipboard-text')).toBe(file);
+    });
   });
 });