Merge branch '241759-track-test-report-mr-widget-expansions' into 'master'

Track test report widget expansions with snowplow

See merge request gitlab-org/gitlab!46048

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { once } from 'lodash';
 import { GlButton } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import { componentNames } from './issue_body';
@@ -8,6 +9,7 @@ import SummaryRow from './summary_row.vue';
 import IssuesList from './issues_list.vue';
 import Modal from './modal.vue';
 import createStore from '../store';
+import Tracking from '~/tracking';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
 
@@ -21,7 +23,7 @@ export default {
     Modal,
     GlButton,
   },
-  mixins: [glFeatureFlagsMixin()],
+  mixins: [glFeatureFlagsMixin(), Tracking.mixin()],
   props: {
     endpoint: {
       type: String,
@@ -58,6 +60,11 @@ export default {
     showViewFullReport() {
       return this.pipelinePath.length;
     },
+    handleToggleEvent() {
+      return once(() => {
+        this.track(this.$options.expandEvent);
+      });
+    },
   },
   created() {
     this.setEndpoint(this.endpoint);
@@ -102,6 +109,7 @@ export default {
       return report.resolved_failures.concat(report.resolved_errors);
     },
   },
+  expandEvent: 'expand_test_report_widget',
 };
 </script>
 <template>
@@ -111,7 +119,9 @@ export default {
     :loading-text="groupedSummaryText"
     :error-text="groupedSummaryText"
     :has-issues="reports.length > 0"
+    :should-emit-toggle-event="true"
     class="mr-widget-section grouped-security-reports mr-report"
+    @toggleEvent="handleToggleEvent"
   >
     <template v-if="showViewFullReport" #actionButtons>
       <gl-button

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

@@ -189,6 +189,7 @@ export default {
         <button
           v-if="isCollapsible"
           type="button"
+          data-testid="report-section-expand-button"
           class="js-collapse-btn btn float-right btn-sm align-self-center qa-expand-report-button"
           @click="toggleCollapsed"
         >

spec/frontend/reports/components/grouped_test_reports_app_spec.js

 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';
 
@@ -39,6 +40,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 +98,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);