Update summary row tests

Update the selectors for the summary row tests.

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

@@ -66,13 +66,10 @@ export default {
         css-class="report-block-list-loading-icon"
         size="md"
       />
-      <ci-icon v-else :status="iconStatus" :size="statusIconSize" />
+      <ci-icon v-else :status="iconStatus" :size="statusIconSize" data-testid="summary-row-icon" />
     </div>
     <div class="report-block-list-issue-description">
-      <div
-        class="report-block-list-issue-description-text"
-        data-testid="test-summary-row-description"
-      >
+      <div class="report-block-list-issue-description-text" data-testid="summary-row-description">
         <slot name="summary">{{ summary }}</slot
         ><span v-if="popoverOptions" class="text-nowrap"
           >&nbsp;<popover v-if="popoverOptions" :options="popoverOptions" class="align-top" />

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -42,7 +42,7 @@ describe('Grouped test reports app', () => {
   const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]');
   const findExpandButton = () => wrapper.find('[data-testid="report-section-expand-button"]');
   const findFullTestReportLink = () => wrapper.find('[data-testid="group-test-reports-full-link"]');
-  const findSummaryDescription = () => wrapper.find('[data-testid="test-summary-row-description"]');
+  const findSummaryDescription = () => wrapper.find('[data-testid="summary-row-description"]');
   const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]');
   const findAllIssueDescriptions = () =>
     wrapper.findAll('[data-testid="test-issue-body-description"]');

spec/frontend/reports/components/summary_row_spec.js

 import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import SummaryRow from '~/reports/components/summary_row.vue';
 
 describe('Summary row', () => {
@@ -14,16 +15,19 @@ describe('Summary row', () => {
   };
 
   const createComponent = ({ propsData = {}, slots = {} } = {}) => {
-    wrapper = mount(SummaryRow, {
+    wrapper = extendedWrapper(
+      mount(SummaryRow, {
         propsData: {
           ...props,
           ...propsData,
         },
         slots,
-    });
+      }),
+    );
   };
 
-  const findSummary = () => wrapper.find('.report-block-list-issue-description-text');
+  const findSummary = () => wrapper.findByTestId('summary-row-description');
+  const findStatusIcon = () => wrapper.findByTestId('summary-row-icon');
 
   afterEach(() => {
     wrapper.destroy();
@@ -37,9 +41,7 @@ describe('Summary row', () => {
 
   it('renders provided icon', () => {
     createComponent();
-    expect(wrapper.find('.report-block-list-icon span').classes()).toContain(
-      'js-ci-status-icon-warning',
-    );
+    expect(findStatusIcon().classes()).toContain('js-ci-status-icon-warning');
   });
 
   describe('summary slot', () => {