Merge branch...

Merge branch '323986-f-u-f-55810-add-vue-component-specs-for-custom-tracking-behavior' into 'master'

Track opening the trial status popover with the tracking mixin

See merge request gitlab-org/gitlab!56996

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -19,6 +19,7 @@ export default {
     GlPopover,
     GlSprintf,
   },
+  mixins: [Tracking.mixin()],
   props: {
     containerId: {
       type: [String, null],
@@ -85,7 +86,7 @@ export default {
       this.updateDisabledState();
     },
     onShown() {
-      Tracking.event(undefined, 'popover_shown', {
+      this.track('popover_shown', {
         label: 'trial_status_popover',
         property: 'experiment:show_trial_status_in_sidebar',
       });

ee/spec/frontend/contextual_sidebar/group_trial_status_popover_spec.js

@@ -3,9 +3,11 @@ import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { shallowMount } from '@vue/test-utils';
 
 import TrialStatusPopover from 'ee/contextual_sidebar/components/trial_status_popover.vue';
+import { mockTracking } from 'helpers/tracking_helper';
 
 describe('TrialStatusPopover component', () => {
   let wrapper;
+  let trackingSpy;
 
   const getGlButton = (testId) => wrapper.find(`[data-testid="${testId}"]`);
 
@@ -24,6 +26,7 @@ describe('TrialStatusPopover component', () => {
 
   beforeEach(() => {
     wrapper = createComponent();
+    trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
   });
 
   afterEach(() => {
@@ -31,6 +34,8 @@ describe('TrialStatusPopover component', () => {
     wrapper = null;
   });
 
+  const getGlPopover = () => wrapper.findComponent(GlPopover);
+
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
@@ -51,8 +56,6 @@ describe('TrialStatusPopover component', () => {
 
   describe('methods', () => {
     describe('onResize', () => {
-      const getGlPopover = () => wrapper.findComponent(GlPopover);
-
       it.each`
         bp      | isDisabled
         ${'xs'} | ${'true'}
@@ -72,5 +75,18 @@ describe('TrialStatusPopover component', () => {
         },
       );
     });
+
+    describe('onShown', () => {
+      beforeEach(() => {
+        getGlPopover().vm.$emit('shown');
+      });
+
+      it('dispatches tracking event', () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'popover_shown', {
+          label: 'trial_status_popover',
+          property: 'experiment:show_trial_status_in_sidebar',
+        });
+      });
+    });
   });
 });