Add tracking to review app link

To help with tracking usage of review apps
and visual review tools, added tracking
to the review app link.

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

@@ -18,7 +18,14 @@ export default {
 };
 </script>
 <template>
-  <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
+  <a
+    :href="link"
+    target="_blank"
+    rel="noopener noreferrer nofollow"
+    :class="cssClass"
+    data-track-event="open_review_app"
+    data-track-label="review_app"
+  >
     {{ __('View app') }} <icon class="fgray" name="external-link" />
   </a>
 </template>

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -132,7 +132,14 @@ export default {
       ok-variant="success"
     >
       <template slot="modal-ok">
-        <a :href="link" target="_blank" rel="noopener noreferrer nofollow" class="text-white">
+        <a
+          :href="link"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+          class="text-white js-review-app-link"
+          data-track-event="open_review_app"
+          data-track-label="review_app"
+        >
           {{ s__('VisualReviewApp|Open review app') }}
           <icon class="fwhite" name="external-link" />
         </a>

ee/spec/frontend/vue_mr_widget/components/visual_review_app_spec.js

@@ -2,6 +2,7 @@ import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import VisualReviewAppLink from 'ee/vue_merge_request_widget/components/visual_review_app_link.vue';
 import { GlButton, GlModal } from '@gitlab/ui';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 
 const localVue = createLocalVue();
 
@@ -81,10 +82,20 @@ describe('Visual Review App Link', () => {
       expect(
         wrapper
           .find(GlModal)
-          .find('a')
+          .find('a.js-review-app-link')
           .attributes('href'),
       ).toEqual(propsData.link);
     });
+
+    it('tracks an event when review app link is clicked', () => {
+      const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
+      const appLink = wrapper.find(GlModal).find('a.js-review-app-link');
+      triggerEvent(appLink.element);
+
+      expect(spy).toHaveBeenCalledWith('_category_', 'open_review_app', {
+        label: 'review_app',
+      });
+    });
   });
 
   describe('renders the copyToClipboard button', () => {

spec/javascripts/vue_mr_widget/components/review_app_link_spec.js

 import Vue from 'vue';
 import component from '~/vue_merge_request_widget/components/review_app_link.vue';
+import { mockTracking, triggerEvent } from 'spec/helpers/tracking_helper';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('review app link', () => {
@@ -35,4 +36,13 @@ describe('review app link', () => {
   it('renders svg icon', () => {
     expect(el.querySelector('svg')).not.toBeNull();
   });
+
+  it('tracks an event when clicked', () => {
+    const spy = mockTracking('_category_', el, spyOn);
+    triggerEvent(el);
+
+    expect(spy).toHaveBeenCalledWith('_category_', 'open_review_app', {
+      label: 'review_app',
+    });
+  });
 });