1 files changed, 109 insertions, 1 deletions

diff --git a/spec/frontend/reports/components/grouped_test_reports_app_spec.js b/spec/frontend/reports/components/grouped_test_reports_app_spec.js
index 556904b7da5..ae2718db17f 100644
--- a/spec/frontend/reports/components/grouped_test_reports_app_spec.js
+++ b/spec/frontend/reports/components/grouped_test_reports_app_spec.js
@@ -1,11 +1,13 @@
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { mockTracking } from 'helpers/tracking_helper';
 import GroupedTestReportsApp from '~/reports/components/grouped_test_reports_app.vue';
 import { getStoreConfig } from '~/reports/store';
 
 import { failedReport } from '../mock_data/mock_data';
 import successTestReports from '../mock_data/no_failures_report.json';
 import newFailedTestReports from '../mock_data/new_failures_report.json';
+import recentFailuresTestReports from '../mock_data/recent_failures_report.json';
 import newErrorsTestReports from '../mock_data/new_errors_report.json';
 import mixedResultsTestReports from '../mock_data/new_and_fixed_failures_report.json';
 import resolvedFailures from '../mock_data/resolved_failures.json';
@@ -20,7 +22,7 @@ describe('Grouped test reports app', () => {
   let wrapper;
   let mockStore;
 
-  const mountComponent = ({ props = { pipelinePath } } = {}) => {
+  const mountComponent = ({ props = { pipelinePath }, testFailureHistory = false } = {}) => {
     wrapper = mount(Component, {
       store: mockStore,
       localVue,
@@ -29,6 +31,11 @@ describe('Grouped test reports app', () => {
         pipelinePath,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          testFailureHistory,
+        },
+      },
     });
   };
 
@@ -39,6 +46,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 findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]');
@@ -96,6 +104,35 @@ describe('Grouped test reports app', () => {
     });
   });
 
+  describe('`Expand` button', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      setReports(newFailedTestReports);
+      mountComponent();
+      document.body.dataset.page = 'projects:merge_requests:show';
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+    });
+
+    it('tracks an event on click', () => {
+      findExpandButton().trigger('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'expand_test_report_widget', {});
+    });
+
+    it('only tracks the first expansion', () => {
+      expect(trackingSpy).not.toHaveBeenCalled();
+
+      const button = findExpandButton();
+
+      button.trigger('click');
+      button.trigger('click');
+      button.trigger('click');
+
+      expect(trackingSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('with new failed result', () => {
     beforeEach(() => {
       setReports(newFailedTestReports);
@@ -203,6 +240,77 @@ describe('Grouped test reports app', () => {
     });
   });
 
+  describe('recent failures counts', () => {
+    describe('with recent failures counts', () => {
+      beforeEach(() => {
+        setReports(recentFailuresTestReports);
+      });
+
+      describe('with feature flag enabled', () => {
+        beforeEach(() => {
+          mountComponent({ testFailureHistory: true });
+        });
+
+        it('renders the recently failed tests summary', () => {
+          expect(findHeader().text()).toContain(
+            '2 out of 3 failed tests have failed more than once in the last 14 days',
+          );
+        });
+
+        it('renders the recently failed count on the test suite', () => {
+          expect(findSummaryDescription().text()).toContain(
+            '1 out of 2 failed tests has failed more than once in the last 14 days',
+          );
+        });
+
+        it('renders the recent failures count on the test case', () => {
+          expect(findIssueDescription().text()).toContain('Failed 8 times in the last 14 days');
+        });
+      });
+
+      describe('with feature flag disabled', () => {
+        beforeEach(() => {
+          mountComponent({ testFailureHistory: false });
+        });
+
+        it('does not render the recently failed tests summary', () => {
+          expect(findHeader().text()).not.toContain('failed more than once in the last 14 days');
+        });
+
+        it('does not render the recently failed count on the test suite', () => {
+          expect(findSummaryDescription().text()).not.toContain(
+            'failed more than once in the last 14 days',
+          );
+        });
+
+        it('renders the recent failures count on the test case', () => {
+          expect(findIssueDescription().text()).not.toContain('in the last 14 days');
+        });
+      });
+    });
+
+    describe('without recent failures counts', () => {
+      beforeEach(() => {
+        setReports(mixedResultsTestReports);
+        mountComponent();
+      });
+
+      it('does not render the recently failed tests summary', () => {
+        expect(findHeader().text()).not.toContain('failed more than once in the last 14 days');
+      });
+
+      it('does not render the recently failed count on the test suite', () => {
+        expect(findSummaryDescription().text()).not.toContain(
+          'failed more than once in the last 14 days',
+        );
+      });
+
+      it('does not render the recent failures count on the test case', () => {
+        expect(findIssueDescription().text()).not.toContain('in the last 14 days');
+      });
+    });
+  });
+
   describe('with a report that failed to load', () => {
     beforeEach(() => {
       setReports(failedReport);