Merge branch '235525-test-report-recent-failures' into 'master'

Add recent failures to test report

See merge request gitlab-org/gitlab!52606

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

 <script>
-import { GlModal } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlBadge, GlModal } from '@gitlab/ui';
+import { __, n__, sprintf } from '~/locale';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 
 export default {
   name: 'TestCaseDetails',
   components: {
     CodeBlock,
+    GlBadge,
     GlModal,
   },
   props: {
@@ -21,9 +22,35 @@ export default {
         Boolean(classname) && Boolean(formattedTime) && Boolean(name),
     },
   },
+  computed: {
+    failureHistoryMessage() {
+      if (!this.hasRecentFailures) {
+        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.recentFailures.count,
+        ),
+        {
+          count: this.recentFailures.count,
+          baseBranch: this.recentFailures.base_branch,
+        },
+      );
+    },
+    hasRecentFailures() {
+      return Boolean(this.recentFailures);
+    },
+    recentFailures() {
+      return this.testCase.recent_failures;
+    },
+  },
   text: {
     name: __('Name'),
     duration: __('Execution time'),
+    history: __('History'),
     trace: __('System output'),
   },
   modalCloseButton: {
@@ -53,6 +80,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">
+        <gl-badge variant="warning">{{ failureHistoryMessage }}</gl-badge>
+      </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: 52606
+author:
+type: added

doc/ci/unit_test_reports.md

@@ -67,8 +67,9 @@ execution time and the error output.
 
 ### Number of recent failures
 
-> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/241759) in GitLab 13.7.
+> - [Introduced in Merge Requests](https://gitlab.com/gitlab-org/gitlab/-/issues/241759) in GitLab 13.7.
 > - [Feature flag removed](https://gitlab.com/gitlab-org/gitlab/-/issues/268249) in GitLab 13.8.
+> - [Introduced in Test Reports](https://gitlab.com/gitlab-org/gitlab/-/issues/235525) in GitLab 13.9.
 
 If a test failed in the project's default branch in the last 14 days, a message like
 `Failed {n} time(s) in {default_branch} in the last 14 days` is displayed for that test.

locale/gitlab.pot

@@ -24059,6 +24059,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();