Merge branch '11470-snowplow-tracking-for-notes-does-not-work-in-firefox' into 'master'

Resolve "Snowplow tracking for notes does not work in Firefox"

Closes #11470

See merge request gitlab-org/gitlab-ee!12578

app/assets/javascripts/notes/components/note_actions/reply_button.vue

@@ -19,7 +19,7 @@ export default {
     <gl-button
       ref="button"
       v-gl-tooltip
-      class="note-action-button"
+      class="note-action-button js-note-action-reply"
       variant="transparent"
       :title="__('Reply to comment')"
       @click="$emit('startReplying')"

ee/app/assets/javascripts/event_tracking/notes.js

@@ -2,8 +2,8 @@ import Stats from 'ee/stats';
 
 export default () => {
   document.querySelector('.main-notes-list').addEventListener('click', event => {
-    const isReplyButtonClick = event.path.find(
-      el => el.classList && el.classList.contains('js-reply-button'),
+    const isReplyButtonClick = event.target.parentElement.classList.contains(
+      'js-note-action-reply',
     );
 
     if (isReplyButtonClick) {

ee/changelogs/unreleased/11470-snowplow-tracking-for-notes-does-not-work-in-firefox.yml

+---
+title: Resolve Snowplow tracking for notes does not work in Firefox
+merge_request: 12578
+author:
+type: fixed

ee/spec/frontend/event_tracking/notes_spec.js

+import Vue from 'vue';
+import Stats from 'ee_else_ce/stats';
+import { shallowMount } from '@vue/test-utils';
+import initNoteStats from 'ee_else_ce/event_tracking/notes';
+
+describe('initNoteStats', () => {
+  let wrapper;
+  const createComponent = template => {
+    const component = Vue.component('Notes', {
+      name: 'Notes',
+      template,
+    });
+
+    return shallowMount(component, { attachToDocument: true });
+  };
+
+  jest.mock('ee_else_ce/stats');
+  Stats.trackEvent = jest.fn();
+  Stats.bindTrackableContainer = jest.fn();
+
+  afterEach(() => {
+    Stats.trackEvent.mockClear();
+    Stats.bindTrackableContainer.mockClear();
+    wrapper.destroy();
+  });
+
+  describe('is a reply', () => {
+    beforeEach(() => {
+      wrapper = createComponent(
+        "<div class='js-note-action-reply'><button class='main-notes-list'></button></div>",
+      );
+      initNoteStats();
+    });
+
+    it('calls bindTrackableContainer', () => {
+      expect(Stats.bindTrackableContainer).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls trackEvent', () => {
+      wrapper.find('.main-notes-list').trigger('click');
+      expect(Stats.trackEvent).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('is not a reply', () => {
+    it('does not call trackEvent', () => {
+      wrapper = createComponent("<div><button class='main-notes-list'></button></div>");
+      initNoteStats();
+      wrapper.find('.main-notes-list').trigger('click');
+      expect(Stats.trackEvent).not.toHaveBeenCalled();
+    });
+  });
+});