Merge branch '235524-test-report-widget-usage-ping' into 'master'

Usage ping for test report widget [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!57543

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

 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
-import { once } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import api from '~/api';
 import { sprintf, s__ } from '~/locale';
-import Tracking from '~/tracking';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import GroupedIssuesList from '../components/grouped_issues_list.vue';
 import { componentNames } from '../components/issue_body';
 import ReportSection from '../components/report_section.vue';
@@ -28,7 +28,7 @@ export default {
     GlButton,
     GlIcon,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [glFeatureFlagsMixin()],
   props: {
     endpoint: {
       type: String,
@@ -70,11 +70,6 @@ export default {
     showViewFullReport() {
       return this.pipelinePath.length;
     },
-    handleToggleEvent() {
-      return once(() => {
-        this.track(this.$options.expandEvent);
-      });
-    },
   },
   created() {
     this.setPaths({
@@ -86,6 +81,11 @@ export default {
   },
   methods: {
     ...mapActions(['setPaths', 'fetchReports', 'closeModal']),
+    handleToggleEvent() {
+      if (this.glFeatures.usageDataITestingSummaryWidgetTotal) {
+        api.trackRedisHllUserEvent(this.$options.expandEvent);
+      }
+    },
     reportText(report) {
       const { name, summary } = report || {};
 
@@ -130,7 +130,7 @@ export default {
       return report.resolved_failures.concat(report.resolved_errors);
     },
   },
-  expandEvent: 'expand_test_report_widget',
+  expandEvent: 'i_testing_summary_widget_total',
 };
 </script>
 <template>
@@ -142,7 +142,7 @@ export default {
     :has-issues="reports.length > 0"
     :should-emit-toggle-event="true"
     class="mr-widget-section grouped-security-reports mr-report"
-    @toggleEvent="handleToggleEvent"
+    @toggleEvent.once="handleToggleEvent"
   >
     <template v-if="showViewFullReport" #action-buttons>
       <gl-button

app/controllers/projects/merge_requests_controller.rb

@@ -42,6 +42,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:paginated_notes, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:new_pipelines_table, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:confidential_notes, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:usage_data_i_testing_summary_widget_total, @project, default_enabled: :yaml)
 
     record_experiment_user(:invite_members_version_b)
 

changelogs/unreleased/235524-test-report-widget-usage-ping.yml

+---
+title: Capture test report summary widget views via usage ping
+merge_request: 57543
+author:
+type: added

config/feature_flags/development/usage_data_i_testing_summary_widget_total.yml

+---
+name: usage_data_i_testing_summary_widget_total
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57543
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/326058
+milestone: '13.11'
+type: development
+group: group::testing
+default_enabled: true

lib/gitlab/usage_data_counters/known_events/common.yml

@@ -288,6 +288,11 @@
   redis_slot: testing
   aggregation: weekly
   feature_flag: usage_data_i_testing_metrics_report_artifact_uploaders
+- name: i_testing_summary_widget_total
+  category: testing
+  redis_slot: testing
+  aggregation: weekly
+  feature_flag: usage_data_i_testing_summary_widget_total
 # Project Management group
 - name: g_project_management_issue_title_changed
   category: issues_edit

spec/frontend/reports/grouped_test_report/grouped_test_reports_app_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { mockTracking } from 'helpers/tracking_helper';
+import Api from '~/api';
 import GroupedTestReportsApp from '~/reports/grouped_test_report/grouped_test_reports_app.vue';
 import { getStoreConfig } from '~/reports/grouped_test_report/store';
 
@@ -12,6 +12,8 @@ import successTestReports from '../mock_data/no_failures_report.json';
 import recentFailuresTestReports from '../mock_data/recent_failures_report.json';
 import resolvedFailures from '../mock_data/resolved_failures.json';
 
+jest.mock('~/api.js');
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -22,7 +24,7 @@ describe('Grouped test reports app', () => {
   let wrapper;
   let mockStore;
 
-  const mountComponent = ({ props = { pipelinePath } } = {}) => {
+  const mountComponent = ({ props = { pipelinePath }, glFeatures = {} } = {}) => {
     wrapper = mount(GroupedTestReportsApp, {
       store: mockStore,
       localVue,
@@ -32,6 +34,9 @@ describe('Grouped test reports app', () => {
         pipelinePath,
         ...props,
       },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
@@ -105,31 +110,33 @@ 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', () => {
+    it('tracks usage ping metric when enabled', () => {
+      mountComponent({ glFeatures: { usageDataITestingSummaryWidgetTotal: true } });
       findExpandButton().trigger('click');
 
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'expand_test_report_widget', {});
+      expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
+      expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(wrapper.vm.$options.expandEvent);
     });
 
     it('only tracks the first expansion', () => {
-      expect(trackingSpy).not.toHaveBeenCalled();
+      mountComponent({ glFeatures: { usageDataITestingSummaryWidgetTotal: true } });
+      const expandButton = findExpandButton();
+      expandButton.trigger('click');
+      expandButton.trigger('click');
+      expandButton.trigger('click');
 
-      const button = findExpandButton();
+      expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
+    });
 
-      button.trigger('click');
-      button.trigger('click');
-      button.trigger('click');
+    it('does not track usage ping metric when disabled', () => {
+      mountComponent({ glFeatures: { usageDataITestingSummaryWidgetTotal: false } });
+      findExpandButton().trigger('click');
 
-      expect(trackingSpy).toHaveBeenCalledTimes(1);
+      expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
     });
   });