Renames Tracking to EventTracking to match rubyevent-tracking-rename

This renames the Tracking class to EventTracking because it was
requested to be renamed from two of the backend engineers. This will
also require an EE merge request.

3 files changed, 48 insertions, 41 deletions

diff --git a/app/assets/javascripts/tracking.js b/app/assets/javascripts/event_tracking.js
index a852f937eec..0290e09ad40 100644
--- a/app/assets/javascripts/tracking.js
+++ b/app/assets/javascripts/event_tracking.js
@@ -1,20 +1,21 @@
 import $ from 'jquery';
 
 const extractData = (el, opts = {}) => {
-  const { trackEvent, trackLabel = '', trackProperty = '' } = el.dataset;
+  const { trackAction, trackLabel = '', trackProperty = '', trackContext } = el.dataset;
   let trackValue = el.dataset.trackValue || el.value || '';
   if (el.type === 'checkbox' && !el.checked) trackValue = false;
   return [
-    trackEvent + (opts.suffix || ''),
+    trackAction + (opts.suffix || ''),
     {
       label: trackLabel,
       property: trackProperty,
       value: trackValue,
+      context: trackContext,
     },
   ];
 };
 
-export default class Tracking {
+export default class EventTracking {
   static trackable() {
     return !['1', 'yes'].includes(
       window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack,
@@ -25,7 +26,7 @@ export default class Tracking {
     return typeof window.snowplow === 'function' && this.trackable();
   }
 
-  static event(category = document.body.dataset.page, event = 'generic', data = {}) {
+  static track(category = document.body.dataset.page, action = 'generic', data = {}) {
     if (!this.enabled()) return false;
     // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
     if (!category) throw new Error('Tracking: no category provided for tracking.');
@@ -33,8 +34,8 @@ export default class Tracking {
     return window.snowplow(
       'trackStructEvent',
       category,
-      event,
-      Object.assign({}, { label: '', property: '', value: '' }, data),
+      action,
+      Object.assign({}, { label: '', property: '', value: '', context: undefined }, data),
     );
   }
 
@@ -44,7 +45,7 @@ export default class Tracking {
 
   bind(container = document) {
     if (!this.constructor.enabled()) return;
-    container.querySelectorAll(`[data-track-event]`).forEach(el => {
+    container.querySelectorAll(`[data-track-action]`).forEach(el => {
       if (this.customHandlingFor(el)) return;
       // jquery is required for select2, so we use it always
       // see: https://github.com/select2/select2/issues/4686
@@ -67,7 +68,7 @@ export default class Tracking {
 
   eventHandler(category = null, opts = {}) {
     return e => {
-      this.constructor.event(category || this.category, ...extractData(e.currentTarget, opts));
+      this.constructor.track(category || this.category, ...extractData(e.currentTarget, opts));
     };
   }
 }
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index fda494fec07..97fe984dc31 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -384,7 +384,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     qa-comment-button"
                   type="submit"
                   :data-track-label="trackingLabel"
-                  data-track-event="click_button"
+                  data-track-action="click_button"
                   @click.prevent="handleSave()"
                 >
                   {{ commentButtonTitle }}
diff --git a/spec/frontend/tracking_spec.js b/spec/frontend/event_tracking_spec.js
index 0e862c683d3..f3b8530dfa9 100644
--- a/spec/frontend/tracking_spec.js
+++ b/spec/frontend/event_tracking_spec.js
@@ -1,20 +1,17 @@
 import $ from 'jquery';
 import { setHTMLFixture } from './helpers/fixtures';
 
-import Tracking from '~/tracking';
+import EventTracking from '~/event_tracking';
+
+describe('EventTracking', () => {
+  let snowplowSpy;
 
-describe('Tracking', () => {
   beforeEach(() => {
     window.snowplow = window.snowplow || (() => {});
+    snowplowSpy = jest.spyOn(window, 'snowplow');
   });
 
-  describe('.event', () => {
-    let snowplowSpy = null;
-
-    beforeEach(() => {
-      snowplowSpy = jest.spyOn(window, 'snowplow');
-    });
-
+  describe('.track', () => {
     afterEach(() => {
       window.doNotTrack = undefined;
       navigator.doNotTrack = undefined;
@@ -22,9 +19,9 @@ describe('Tracking', () => {
     });
 
     it('tracks to snowplow (our current tracking system)', () => {
-      Tracking.event('_category_', '_eventName_', { label: '_label_' });
+      EventTracking.track('_category_', '_action_', { label: '_label_' });
 
-      expect(snowplowSpy).toHaveBeenCalledWith('trackStructEvent', '_category_', '_eventName_', {
+      expect(snowplowSpy).toHaveBeenCalledWith('trackStructEvent', '_category_', '_action_', {
         label: '_label_',
         property: '',
         value: '',
@@ -33,74 +30,84 @@ describe('Tracking', () => {
 
     it('skips tracking if snowplow is unavailable', () => {
       window.snowplow = false;
-      Tracking.event('_category_', '_eventName_');
+      EventTracking.track('_category_', '_action_');
 
       expect(snowplowSpy).not.toHaveBeenCalled();
     });
 
     it('skips tracking if the user does not want to be tracked (general spec)', () => {
       window.doNotTrack = '1';
-      Tracking.event('_category_', '_eventName_');
+      EventTracking.track('_category_', '_action_');
 
       expect(snowplowSpy).not.toHaveBeenCalled();
     });
 
     it('skips tracking if the user does not want to be tracked (firefox legacy)', () => {
       navigator.doNotTrack = 'yes';
-      Tracking.event('_category_', '_eventName_');
+      EventTracking.track('_category_', '_action_');
 
       expect(snowplowSpy).not.toHaveBeenCalled();
     });
 
     it('skips tracking if the user does not want to be tracked (IE legacy)', () => {
       navigator.msDoNotTrack = '1';
-      Tracking.event('_category_', '_eventName_');
+      EventTracking.track('_category_', '_action_');
 
       expect(snowplowSpy).not.toHaveBeenCalled();
     });
   });
 
   describe('tracking interface events', () => {
-    let eventSpy = null;
-    let subject = null;
+    let eventSpy;
 
     beforeEach(() => {
-      eventSpy = jest.spyOn(Tracking, 'event');
-      subject = new Tracking('_category_');
+      eventSpy = jest.spyOn(EventTracking, 'track');
       setHTMLFixture(`
-        <input data-track-event="click_input1" data-track-label="_label_" value="_value_"/>
-        <input data-track-event="click_input2" data-track-value="_value_override_" value="_value_"/>
-        <input type="checkbox" data-track-event="toggle_checkbox" value="_value_" checked/>
-        <input class="dropdown" data-track-event="toggle_dropdown"/>
+        <input data-track-action="click_input1" data-track-label="_label_" value="_value_"/>
+        <input data-track-action="click_input2" data-track-value="_value_override_" value="_value_"/>
+        <input data-track-action="click_input3" data-track-context="{foo: 'bar'}"/>
+        <input type="checkbox" data-track-action="toggle_checkbox" value="_value_" checked/>
+        <input class="dropdown" data-track-action="toggle_dropdown"/>
         <div class="js-projects-list-holder"></div>
       `);
+      new EventTracking('_category_').bind();
     });
 
-    it('binds to clicks on elements matching [data-track-event]', () => {
-      subject.bind(document);
-      $('[data-track-event="click_input1"]').click();
+    it('binds to clicks on elements matching [data-track-action]', () => {
+      $('[data-track-action="click_input1"]').click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', {
         label: '_label_',
         value: '_value_',
         property: '',
+        context: undefined,
       });
     });
 
     it('allows value override with the data-track-value attribute', () => {
-      subject.bind(document);
-      $('[data-track-event="click_input2"]').click();
+      $('[data-track-action="click_input2"]').click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', {
         label: '',
         value: '_value_override_',
         property: '',
+        context: undefined,
+      });
+    });
+
+    it('allows providing context for the tracking call', () => {
+      $('[data-track-action="click_input3"]').click();
+
+      expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input3', {
+        label: '',
+        property: '',
+        value: '',
+        context: "{foo: 'bar'}",
       });
     });
 
     it('handles checkbox values correctly', () => {
-      subject.bind(document);
-      const $checkbox = $('[data-track-event="toggle_checkbox"]');
+      const $checkbox = $('[data-track-action="toggle_checkbox"]');
 
       $checkbox.click(); // unchecking
 
@@ -120,8 +127,7 @@ describe('Tracking', () => {
     });
 
     it('handles bootstrap dropdowns', () => {
-      new Tracking('_category_').bind(document);
-      const $dropdown = $('[data-track-event="toggle_dropdown"]');
+      const $dropdown = $('[data-track-action="toggle_dropdown"]');
 
       $dropdown.trigger('show.bs.dropdown'); // showing