Switch sprintf to computed property

Switch from using GlSprintf to just a computed
sprintf property.

Also adjusted the spec file to also check that we
passed in the right issue to the modal.

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

 <script>
-import { GlBadge, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlBadge, GlButton } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import { sprintf, n__ } from '~/locale';
 import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
 
 export default {
@@ -8,7 +9,6 @@ export default {
   components: {
     GlBadge,
     GlButton,
-    GlSprintf,
     IssueStatusIcon,
   },
   props: {
@@ -18,6 +18,16 @@ export default {
     },
   },
   computed: {
+    recentFailureMessage() {
+      return sprintf(
+        n__(
+          'Reports|Failed %{count} time in %{base_branch} in the last 14 days',
+          'Reports|Failed %{count} times in %{base_branch} in the last 14 days',
+          this.issue.recent_failures.count,
+        ),
+        this.issue.recent_failures,
+      );
+    },
     showRecentFailures() {
       return this.issue.recent_failures?.count && this.issue.recent_failures?.base_branch;
     },
@@ -33,28 +43,21 @@ export default {
 <template>
   <div class="gl-display-flex gl-mt-2 gl-mb-2">
     <issue-status-icon :status="status" :status-icon-size="24" class="gl-mr-3" />
-    <div data-testid="test-issue-body-description">
-      <gl-badge v-if="showRecentFailures" variant="warning" class="gl-mr-2">
-        <gl-sprintf
-          :message="
-            n__(
-              'Reports|Failed %{count} time in %{base_branch} in the last 14 days',
-              'Reports|Failed %{count} times in %{base_branch} in the last 14 days',
-              issue.recent_failures.count,
-            )
-          "
-        >
-          <template #count>{{ issue.recent_failures.count }}</template>
-          <template #base_branch>{{ issue.recent_failures.base_branch }}</template>
-        </gl-sprintf>
-      </gl-badge>
-      <gl-button
-        button-text-classes="gl-white-space-normal! gl-word-break-all gl-text-left"
-        variant="link"
-        @click="openModal({ issue })"
-      >
-        {{ issue.name }}
-      </gl-button>
-    </div>
+    <gl-badge
+      v-if="showRecentFailures"
+      variant="warning"
+      class="gl-mr-2"
+      data-testid="test-issue-body-recent-failures"
+    >
+      {{ recentFailureMessage }}
+    </gl-badge>
+    <gl-button
+      button-text-classes="gl-white-space-normal! gl-word-break-all gl-text-left"
+      variant="link"
+      data-testid="test-issue-body-description"
+      @click="openModal({ issue })"
+    >
+      {{ issue.name }}
+    </gl-button>
   </div>
 </template>

spec/features/merge_request/user_sees_merge_widget_spec.rb

@@ -651,7 +651,6 @@ RSpec.describe 'Merge request > User sees merge widget', :js do
             within(".js-report-section-container") do
               expect(page).to have_content('rspec found 1 failed out of 1 total test')
               expect(page).to have_content('junit found no changed test results out of 1 total test')
-              expect(page).not_to have_content('New')
               expect(page).to have_content('Test#sum when a is 1 and b is 3 returns summary')
             end
           end
@@ -792,7 +791,6 @@ RSpec.describe 'Merge request > User sees merge widget', :js do
             within(".js-report-section-container") do
               expect(page).to have_content('rspec found 1 error out of 1 total test')
               expect(page).to have_content('junit found no changed test results out of 1 total test')
-              expect(page).not_to have_content('New')
               expect(page).to have_content('Test#sum when a is 4 and b is 4 returns summary')
             end
           end

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -46,6 +46,8 @@ describe('Grouped test reports app', () => {
   const findIssueListUnresolvedHeading = () => wrapper.find('[data-testid="unresolvedHeading"]');
   const findIssueListResolvedHeading = () => wrapper.find('[data-testid="resolvedHeading"]');
   const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]');
+  const findIssueRecentFailures = () =>
+    wrapper.find('[data-testid="test-issue-body-recent-failures"]');
   const findAllIssueDescriptions = () =>
     wrapper.findAll('[data-testid="test-issue-body-description"]');
 
@@ -268,7 +270,7 @@ describe('Grouped test reports app', () => {
       });
 
       it('renders the recent failures count on the test case', () => {
-        expect(findIssueDescription().text()).toContain(
+        expect(findIssueRecentFailures().text()).toBe(
           'Failed 8 times in master in the last 14 days',
         );
       });

spec/frontend/reports/components/test_issue_body_spec.js

@@ -44,7 +44,6 @@ describe('Test issue body', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('when issue has failed status', () => {
@@ -53,7 +52,7 @@ describe('Test issue body', () => {
     });
 
     it('renders issue name', () => {
-      expect(findDescription().text()).toContain(failedIssue.name);
+      expect(findDescription().text()).toBe(failedIssue.name);
     });
 
     it('renders failed status icon', () => {
@@ -77,7 +76,7 @@ describe('Test issue body', () => {
     });
 
     it('renders issue name', () => {
-      expect(findDescription().text()).toContain(successIssue.name);
+      expect(findDescription().text()).toBe(successIssue.name);
     });
 
     it('renders success status icon', () => {
@@ -90,7 +89,9 @@ describe('Test issue body', () => {
       createComponent();
       wrapper.findComponent(GlButton).trigger('click');
 
-      expect(actionSpies.openModal).toHaveBeenCalled();
+      expect(actionSpies.openModal).toHaveBeenCalledWith(expect.any(Object), {
+        issue: failedIssue,
+      });
     });
   });
 });