Merge branch 'mf-wrap-junit-text-friendlily' into 'master'

Use gl-friendly-wrap for test case suite and name

See merge request gitlab-org/gitlab!37653

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

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlFriendlyWrap } from '@gitlab/ui';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
@@ -10,6 +10,7 @@ export default {
   components: {
     Icon,
     SmartVirtualList,
+    GlFriendlyWrap,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -29,6 +30,7 @@ export default {
   },
   maxShownRows: 30,
   typicalRowHeight: 75,
+  wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'],
 };
 </script>
 
@@ -72,14 +74,18 @@ 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">
-              {{ testCase.classname }}
+              <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">
-              {{ testCase.name }}
+              <gl-friendly-wrap
+                data-testid="caseName"
+                :symbols="$options.wrapSymbols"
+                :text="testCase.name"
+              />
             </div>
           </div>
 

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

@@ -23,6 +23,8 @@ describe('Test reports suite table', () => {
   const noCasesMessage = () => wrapper.find('.js-no-test-cases');
   const allCaseRows = () => wrapper.findAll('.js-case-row');
   const findCaseRowAtIndex = index => wrapper.findAll('.js-case-row').at(index);
+  const allCaseNames = () =>
+    wrapper.findAll('[data-testid="caseName"]').wrappers.map(el => el.attributes('text'));
   const findIconForRow = (row, status) => row.find(`.ci-status-icon-${status}`);
 
   const createComponent = (suite = testSuite) => {
@@ -61,18 +63,14 @@ describe('Test reports suite table', () => {
       expect(allCaseRows().length).toBe(testCases.length);
     });
 
-    it('renders the failed tests first', () => {
-      const failedCaseNames = testCases
-        .filter(x => x.status === TestStatus.FAILED)
-        .map(x => x.name);
+    it('renders the failed tests first, skipped tests next, then successful tests', () => {
+      const expectedCaseOrder = [
+        ...testCases.filter(x => x.status === TestStatus.FAILED),
+        ...testCases.filter(x => x.status === TestStatus.SKIPPED),
+        ...testCases.filter(x => x.status === TestStatus.SUCCESS),
+      ].map(x => x.name);
 
-      const skippedCaseNames = testCases
-        .filter(x => x.status === TestStatus.SKIPPED)
-        .map(x => x.name);
-
-      expect(findCaseRowAtIndex(0).text()).toContain(failedCaseNames[0]);
-      expect(findCaseRowAtIndex(1).text()).toContain(failedCaseNames[1]);
-      expect(findCaseRowAtIndex(2).text()).toContain(skippedCaseNames[0]);
+      expect(allCaseNames()).toEqual(expectedCaseOrder);
     });
 
     it('renders the correct icon for each status', () => {