Merge branch...

Merge branch '346645-eng-add-structured-event-tracking-to-secure-your-project-banner-on-saas' into 'master'

Add structured event tracking to Security upgrade banner

See merge request gitlab-org/gitlab!78919

app/assets/javascripts/security_configuration/components/upgrade_banner.vue

 <script>
 import { GlBanner } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+
+export const SECURITY_UPGRADE_BANNER = 'security_upgrade_banner';
+export const UPGRADE_OR_FREE_TRIAL = 'upgrade_or_free_trial';
 
 export default {
   components: {
     GlBanner,
   },
+  mixins: [Tracking.mixin({ property: SECURITY_UPGRADE_BANNER })],
   inject: ['upgradePath'],
   i18n: {
     title: s__('SecurityConfiguration|Secure your project'),
@@ -22,6 +27,17 @@ export default {
     ],
     buttonText: s__('SecurityConfiguration|Upgrade or start a free trial'),
   },
+  mounted() {
+    this.track('display_banner', { label: SECURITY_UPGRADE_BANNER });
+  },
+  methods: {
+    bannerClosed() {
+      this.track('dismiss_banner', { label: SECURITY_UPGRADE_BANNER });
+    },
+    bannerButtonClicked() {
+      this.track('click_button', { label: UPGRADE_OR_FREE_TRIAL });
+    },
+  },
 };
 </script>
 
@@ -31,6 +47,8 @@ export default {
     :button-text="$options.i18n.buttonText"
     :button-link="upgradePath"
     variant="introduction"
+    @close="bannerClosed"
+    @primary="bannerButtonClicked"
     v-on="$listeners"
   >
     <p>{{ $options.i18n.bodyStart }}</p>

spec/frontend/security_configuration/components/upgrade_banner_spec.js

 import { GlBanner } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import UpgradeBanner from '~/security_configuration/components/upgrade_banner.vue';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import UpgradeBanner, {
+  SECURITY_UPGRADE_BANNER,
+  UPGRADE_OR_FREE_TRIAL,
+} from '~/security_configuration/components/upgrade_banner.vue';
 
 const upgradePath = '/upgrade';
 
 describe('UpgradeBanner component', () => {
   let wrapper;
   let closeSpy;
+  let primarySpy;
+  let trackingSpy;
 
   const createComponent = (propsData) => {
     closeSpy = jest.fn();
+    primarySpy = jest.fn();
 
     wrapper = shallowMountExtended(UpgradeBanner, {
       provide: {
@@ -18,43 +25,83 @@ describe('UpgradeBanner component', () => {
       propsData,
       listeners: {
         close: closeSpy,
+        primary: primarySpy,
       },
     });
   };
 
   const findGlBanner = () => wrapper.findComponent(GlBanner);
 
+  const expectTracking = (action, label) => {
+    return expect(trackingSpy).toHaveBeenCalledWith(undefined, action, {
+      label,
+      property: SECURITY_UPGRADE_BANNER,
+    });
+  };
+
   beforeEach(() => {
-    createComponent();
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
   });
 
   afterEach(() => {
     wrapper.destroy();
+    unmockTracking();
   });
 
-  it('passes the expected props to GlBanner', () => {
-    expect(findGlBanner().props()).toMatchObject({
-      title: UpgradeBanner.i18n.title,
-      buttonText: UpgradeBanner.i18n.buttonText,
-      buttonLink: upgradePath,
+  describe('when the component renders', () => {
+    it('tracks an event', () => {
+      expect(trackingSpy).not.toHaveBeenCalled();
+
+      createComponent();
+
+      expectTracking('display_banner', SECURITY_UPGRADE_BANNER);
     });
   });
 
-  it('renders the list of benefits', () => {
-    const wrapperText = wrapper.text();
+  describe('when ready', () => {
+    beforeEach(() => {
+      createComponent();
+      trackingSpy.mockClear();
+    });
 
-    expect(wrapperText).toContain('Immediately begin risk analysis and remediation');
-    expect(wrapperText).toContain('statistics in the merge request');
-    expect(wrapperText).toContain('statistics across projects');
-    expect(wrapperText).toContain('Runtime security metrics');
-    expect(wrapperText).toContain('More scan types, including Container Scanning,');
-  });
+    it('passes the expected props to GlBanner', () => {
+      expect(findGlBanner().props()).toMatchObject({
+        title: UpgradeBanner.i18n.title,
+        buttonText: UpgradeBanner.i18n.buttonText,
+        buttonLink: upgradePath,
+      });
+    });
 
-  it(`re-emits GlBanner's close event`, () => {
-    expect(closeSpy).not.toHaveBeenCalled();
+    it('renders the list of benefits', () => {
+      const wrapperText = wrapper.text();
 
-    wrapper.findComponent(GlBanner).vm.$emit('close');
+      expect(wrapperText).toContain('Immediately begin risk analysis and remediation');
+      expect(wrapperText).toContain('statistics in the merge request');
+      expect(wrapperText).toContain('statistics across projects');
+      expect(wrapperText).toContain('Runtime security metrics');
+      expect(wrapperText).toContain('More scan types, including Container Scanning,');
+    });
+
+    describe('when user interacts', () => {
+      it(`re-emits GlBanner's close event & tracks an event`, () => {
+        expect(closeSpy).not.toHaveBeenCalled();
+        expect(trackingSpy).not.toHaveBeenCalled();
+
+        wrapper.findComponent(GlBanner).vm.$emit('close');
+
+        expect(closeSpy).toHaveBeenCalledTimes(1);
+        expectTracking('dismiss_banner', SECURITY_UPGRADE_BANNER);
+      });
 
-    expect(closeSpy).toHaveBeenCalledTimes(1);
+      it(`re-emits GlBanner's primary event & tracks an event`, () => {
+        expect(primarySpy).not.toHaveBeenCalled();
+        expect(trackingSpy).not.toHaveBeenCalled();
+
+        wrapper.findComponent(GlBanner).vm.$emit('primary');
+
+        expect(primarySpy).toHaveBeenCalledTimes(1);
+        expectTracking('click_button', UPGRADE_OR_FREE_TRIAL);
+      });
+    });
   });
 });