Add recent failures to test report

Show the recent failures in the pipeline test
report. Added them in the pipeline details modal.

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

 <script>
 import { GlModal } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, n__, sprintf } from '~/locale';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 
 export default {
@@ -21,9 +21,29 @@ export default {
         Boolean(classname) && Boolean(formattedTime) && Boolean(name),
     },
   },
+  computed: {
+    failureHistoryMessage() {
+      if (!this.testCase.recent_failures) {
+        return null;
+      }
+
+      return sprintf(
+        n__(
+          'Reports|Failed %{count} time in %{baseBranch} in the last 14 days',
+          'Reports|Failed %{count} times in %{baseBranch} in the last 14 days',
+          this.testCase.recent_failures.count,
+        ),
+        {
+          count: this.testCase.recent_failures.count,
+          baseBranch: this.testCase.recent_failures.base_branch,
+        },
+      );
+    },
+  },
   text: {
     name: __('Name'),
     duration: __('Execution time'),
+    history: __('History'),
     trace: __('System output'),
   },
   modalCloseButton: {
@@ -53,6 +73,13 @@ export default {
       </div>
     </div>
 
+    <div v-if="testCase.recent_failures" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
+      <strong class="gl-text-right col-sm-3">{{ $options.text.history }}</strong>
+      <div class="col-sm-9" data-testid="test-case-recent-failures">
+        {{ failureHistoryMessage }}
+      </div>
+    </div>
+
     <div
       v-if="testCase.system_output"
       class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"

changelogs/unreleased/235525-test-report-recent-failures.yml

+---
+title: Show recent test case failures in the pipeline test report
+merge_request:
+author:
+type: added

locale/gitlab.pot

@@ -23999,6 +23999,11 @@ msgstr ""
 msgid "Reports|Execution time"
 msgstr ""
 
+msgid "Reports|Failed %{count} time in %{baseBranch} in the last 14 days"
+msgid_plural "Reports|Failed %{count} times in %{baseBranch} in the last 14 days"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Reports|Failed %{count} time in %{base_branch} in the last 14 days"
 msgid_plural "Reports|Failed %{count} times in %{base_branch} in the last 14 days"
 msgstr[0] ""

spec/frontend/pipelines/test_reports/test_case_details_spec.js

@@ -11,12 +11,17 @@ describe('Test case details', () => {
     classname: 'spec.test_spec',
     name: 'Test#something cool',
     formattedTime: '10.04ms',
+    recent_failures: {
+      count: 2,
+      base_branch: 'master',
+    },
     system_output: 'Line 42 is broken',
   };
 
   const findModal = () => wrapper.find(GlModal);
   const findName = () => wrapper.find('[data-testid="test-case-name"]');
   const findDuration = () => wrapper.find('[data-testid="test-case-duration"]');
+  const findRecentFailures = () => wrapper.find('[data-testid="test-case-recent-failures"]');
   const findSystemOutput = () => wrapper.find('[data-testid="test-case-trace"]');
 
   const createComponent = (testCase = {}) => {
@@ -56,6 +61,36 @@ describe('Test case details', () => {
     });
   });
 
+  describe('when test case has recent failures', () => {
+    describe('has only 1 recent failure', () => {
+      it('renders the recent failure', () => {
+        createComponent({ recent_failures: { ...defaultTestCase.recent_failures, count: 1 } });
+
+        expect(findRecentFailures().text()).toContain(
+          `Failed 1 time in ${defaultTestCase.recent_failures.base_branch} in the last 14 days`,
+        );
+      });
+    });
+
+    describe('has more than 1 recent failure', () => {
+      it('renders the recent failures', () => {
+        createComponent();
+
+        expect(findRecentFailures().text()).toContain(
+          `Failed ${defaultTestCase.recent_failures.count} times in ${defaultTestCase.recent_failures.base_branch} in the last 14 days`,
+        );
+      });
+    });
+  });
+
+  describe('when test case does not have recent failures', () => {
+    it('does not render the recent failures', () => {
+      createComponent({ recent_failures: null });
+
+      expect(findRecentFailures().exists()).toBe(false);
+    });
+  });
+
   describe('when test case has system output', () => {
     it('renders the test case system output', () => {
       createComponent();