Update spec to look for case name by ref

We can no longer use ('js-case-row').at(index).text() to check case name
since we're shallowMounting and case name is now inside a component
so we use a ref to find the case name instead

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

@@ -81,7 +81,11 @@ export default {
           <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 :symbols="$options.wrapSymbols" :text="testCase.name" />
+              <gl-friendly-wrap
+                ref="casename"
+                :symbols="$options.wrapSymbols"
+                :text="testCase.name"
+              />
             </div>
           </div>
 

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

@@ -23,6 +23,7 @@ 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 findCaseNameAtIndex = index => wrapper.findAll({ ref: 'casename' }).at(index);
   const findIconForRow = (row, status) => row.find(`.ci-status-icon-${status}`);
 
   const createComponent = (suite = testSuite) => {
@@ -70,9 +71,9 @@ describe('Test reports suite table', () => {
         .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(findCaseNameAtIndex(0).attributes('text')).toEqual(failedCaseNames[0]);
+      expect(findCaseNameAtIndex(1).attributes('text')).toEqual(failedCaseNames[1]);
+      expect(findCaseNameAtIndex(2).attributes('text')).toEqual(skippedCaseNames[0]);
     });
 
     it('renders the correct icon for each status', () => {