Merge branch '36382-improve-tracking-mixin' into 'master'

Resolve "Improve Tracking.mixin"

Closes #36382

See merge request gitlab-org/gitlab!20232

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -48,6 +48,12 @@ export default {
     },
   },
   computed: {
+    tracking() {
+      return {
+        // eslint-disable-next-line no-underscore-dangle
+        category: this.$options._componentTag,
+      };
+    },
     showLoadingState() {
       return this.subscribed === null;
     },

app/assets/javascripts/tracking.js

@@ -73,20 +73,25 @@ export default class Tracking {
     return handlers;
   }
 
-  static mixin(opts) {
+  static mixin(opts = {}) {
     return {
-      data() {
-        return {
-          tracking: {
-            // eslint-disable-next-line no-underscore-dangle
-            category: this.$options.name || this.$options._componentTag,
-          },
-        };
+      computed: {
+        trackingCategory() {
+          const localCategory = this.tracking ? this.tracking.category : null;
+          return localCategory || opts.category;
+        },
+        trackingOptions() {
+          return { ...opts, ...this.tracking };
+        },
       },
       methods: {
-        track(action, data) {
-          const category = opts.category || data.category || this.tracking.category;
-          Tracking.event(category || 'unspecified', action, { ...opts, ...this.tracking, ...data });
+        track(action, data = {}) {
+          const category = data.category || this.trackingCategory;
+          const options = {
+            ...this.trackingOptions,
+            ...data,
+          };
+          Tracking.event(category, action, options);
         },
       },
     };

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

@@ -56,6 +56,12 @@ export default {
     };
   },
   computed: {
+    tracking() {
+      return {
+        // eslint-disable-next-line no-underscore-dangle
+        category: this.$options._componentTag,
+      };
+    },
     isNoValue() {
       return this.checkIfNoValue(this.weight);
     },

ee/spec/javascripts/sidebar/weight_spec.js

@@ -12,9 +12,11 @@ const DEFAULT_PROPS = {
 describe('Weight', function() {
   let vm;
   let Weight;
+  let trackingSpy;
 
   beforeEach(() => {
     Weight = Vue.extend(weight);
+    trackingSpy = mockTracking('_category_', null, spyOn);
   });
 
   afterEach(() => {
@@ -116,12 +118,11 @@ describe('Weight', function() {
       editable: true,
     });
 
-    const spy = mockTracking('_category_', vm.$el, spyOn, afterEach);
-    triggerEvent('.js-weight-edit-link');
+    triggerEvent(vm.$el.querySelector('.js-weight-edit-link'));
 
     vm.$nextTick()
       .then(() => {
-        expect(spy).toHaveBeenCalled();
+        expect(trackingSpy).toHaveBeenCalled();
       })
       .then(done)
       .catch(done.fail);

spec/frontend/tracking_spec.js

@@ -177,4 +177,70 @@ describe('Tracking', () => {
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'nested_event', {});
     });
   });
+
+  describe('tracking mixin', () => {
+    describe('trackingOptions', () => {
+      it('return the options defined on initialisation', () => {
+        const mixin = Tracking.mixin({ foo: 'bar' });
+        expect(mixin.computed.trackingOptions()).toEqual({ foo: 'bar' });
+      });
+
+      it('local tracking value override and extend options', () => {
+        const mixin = Tracking.mixin({ foo: 'bar' });
+        //  the value of this in the  vue lifecyle is different, but this serve the tests purposes
+        mixin.computed.tracking = { foo: 'baz', baz: 'bar' };
+        expect(mixin.computed.trackingOptions()).toEqual({ foo: 'baz', baz: 'bar' });
+      });
+    });
+
+    describe('trackingCategory', () => {
+      it('return the category set in the component properties first', () => {
+        const mixin = Tracking.mixin({ category: 'foo' });
+        mixin.computed.tracking = {
+          category: 'bar',
+        };
+        expect(mixin.computed.trackingCategory()).toBe('bar');
+      });
+
+      it('return the category set in the options', () => {
+        const mixin = Tracking.mixin({ category: 'foo' });
+        expect(mixin.computed.trackingCategory()).toBe('foo');
+      });
+
+      it('if no category is selected returns undefined', () => {
+        const mixin = Tracking.mixin();
+        expect(mixin.computed.trackingCategory()).toBe(undefined);
+      });
+    });
+
+    describe('track', () => {
+      let eventSpy;
+      let mixin;
+
+      beforeEach(() => {
+        eventSpy = jest.spyOn(Tracking, 'event').mockReturnValue();
+        mixin = Tracking.mixin();
+        mixin = {
+          ...mixin.computed,
+          ...mixin.methods,
+        };
+      });
+
+      it('calls the event method', () => {
+        mixin.trackingCategory = mixin.trackingCategory();
+        mixin.trackingOptions = mixin.trackingOptions();
+
+        mixin.track('foo');
+        expect(eventSpy).toHaveBeenCalledWith(undefined, 'foo', {});
+      });
+
+      it('give precedence to data for category and options', () => {
+        mixin.trackingCategory = mixin.trackingCategory();
+        mixin.trackingOptions = mixin.trackingOptions();
+        const data = { category: 'foo', label: 'baz' };
+        mixin.track('foo', data);
+        expect(eventSpy).toHaveBeenCalledWith('foo', 'foo', data);
+      });
+    });
+  });
 });