Merge branch 'jswain_whats_new_tracking' into 'master'

Add tracking to whats new

See merge request gitlab-org/gitlab!42653

app/assets/javascripts/whats_new/components/app.vue

 <script>
 import { mapState, mapActions } from 'vuex';
 import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui';
+import Tracking from '~/tracking';
+
+const trackingMixin = Tracking.mixin();
 
 export default {
   components: {
@@ -9,6 +12,7 @@ export default {
     GlIcon,
     GlLink,
   },
+  mixins: [trackingMixin],
   props: {
     features: {
       type: String,
@@ -37,6 +41,11 @@ export default {
   },
   mounted() {
     this.openDrawer(this.storageKey);
+
+    const body = document.querySelector('body');
+    const namespaceId = body.getAttribute('data-namespace-id');
+
+    this.track('click_whats_new_drawer', { label: 'namespace_id', value: namespaceId });
   },
   methods: {
     ...mapActions(['openDrawer', 'closeDrawer']),
@@ -52,7 +61,14 @@ export default {
       </template>
       <div class="pb-6">
         <div v-for="feature in parsedFeatures" :key="feature.title" class="mb-6">
-          <gl-link :href="feature.url" target="_blank">
+          <gl-link
+            :href="feature.url"
+            target="_blank"
+            data-testid="whats-new-title-link"
+            data-track-event="click_whats_new_item"
+            :data-track-label="feature.title"
+            :data-track-property="feature.url"
+          >
             <h5 class="gl-font-base">{{ feature.title }}</h5>
           </gl-link>
           <div class="mb-2">
@@ -62,7 +78,13 @@ export default {
               </gl-badge>
             </template>
           </div>
-          <gl-link :href="feature.url" target="_blank">
+          <gl-link
+            :href="feature.url"
+            target="_blank"
+            data-track-event="click_whats_new_item"
+            :data-track-label="feature.title"
+            :data-track-property="feature.url"
+          >
             <img
               :alt="feature.title"
               :src="feature.image_url"
@@ -70,7 +92,14 @@ export default {
             />
           </gl-link>
           <p class="pt-2">{{ feature.body }}</p>
-          <gl-link :href="feature.url" target="_blank">{{ __('Learn more') }}</gl-link>
+          <gl-link
+            :href="feature.url"
+            target="_blank"
+            data-track-event="click_whats_new_item"
+            :data-track-label="feature.title"
+            :data-track-property="feature.url"
+            >{{ __('Learn more') }}</gl-link
+          >
         </div>
       </div>
     </gl-drawer>

spec/frontend/whats_new/components/app_spec.js

 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { GlDrawer } from '@gitlab/ui';
+import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
 import App from '~/whats_new/components/app.vue';
 
 const localVue = createLocalVue();
@@ -12,6 +13,7 @@ describe('App', () => {
   let actions;
   let state;
   let propsData = { features: '[ {"title":"Whats New Drawer"} ]', storageKey: 'storage-key' };
+  let trackingSpy;
 
   const buildWrapper = () => {
     actions = {
@@ -36,11 +38,16 @@ describe('App', () => {
   };
 
   beforeEach(() => {
+    document.body.dataset.page = 'test-page';
+    document.body.dataset.namespaceId = 'namespace-840';
+
+    trackingSpy = mockTracking('_category_', null, jest.spyOn);
     buildWrapper();
   });
 
   afterEach(() => {
     wrapper.destroy();
+    unmockTracking();
   });
 
   const getDrawer = () => wrapper.find(GlDrawer);
@@ -50,8 +57,11 @@ describe('App', () => {
   });
 
   it('dispatches openDrawer when mounted', () => {
-    expect(actions.openDrawer).toHaveBeenCalled();
     expect(actions.openDrawer).toHaveBeenCalledWith(expect.any(Object), 'storage-key');
+    expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_whats_new_drawer', {
+      label: 'namespace_id',
+      value: 'namespace-840',
+    });
   });
 
   it('dispatches closeDrawer when clicking close', () => {
@@ -77,4 +87,25 @@ describe('App', () => {
 
     expect(getDrawer().exists()).toBe(true);
   });
+
+  it('send an event when feature item is clicked', () => {
+    propsData = {
+      features: '[ {"title":"Whats New Drawer", "url": "www.url.com"} ]',
+      storageKey: 'storage-key',
+    };
+    buildWrapper();
+    trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+
+    const link = wrapper.find('[data-testid="whats-new-title-link"]');
+    triggerEvent(link.element);
+
+    expect(trackingSpy.mock.calls[2]).toMatchObject([
+      '_category_',
+      'click_whats_new_item',
+      {
+        label: 'Whats New Drawer',
+        property: 'www.url.com',
+      },
+    ]);
+  });
 });