Merge branch...

Merge branch '199458-track-jump-to-next-unresolved-thread-buttons-usage-in-merge-requests' into 'master'

Use Snowplow to track clicks on "Jump To Next" MR buttons

See merge request gitlab-org/gitlab!26319

app/assets/javascripts/notes/components/discussion_counter.vue

@@ -77,6 +77,9 @@ export default {
           v-gl-tooltip
           title="Jump to next unresolved thread"
           class="btn btn-default discussion-next-btn"
+          data-track-event="click_button"
+          data-track-label="mr_next_unresolved_thread"
+          data-track-property="click_next_unresolved_thread_top"
           @click="jumpToNextDiscussion"
         >
           <icon name="comment-next" />

app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue

@@ -28,6 +28,9 @@ export default {
       v-gl-tooltip
       class="btn btn-default discussion-next-btn"
       :title="s__('MergeRequests|Jump to next unresolved thread')"
+      data-track-event="click_button"
+      data-track-label="mr_next_unresolved_thread"
+      data-track-property="click_next_unresolved_thread"
       @click="jumpToNextRelativeDiscussion(fromDiscussionId)"
     >
       <icon name="comment-next" />

changelogs/unreleased/feature-199458-track-jump-to-next-unresolved-thread.yml

+---
+title: Added tracking to merge request jump to next thread buttons
+merge_request: 26319
+author: Martin Hobert
+type: added

spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap

@@ -7,6 +7,9 @@ exports[`JumpToNextDiscussionButton matches the snapshot 1`] = `
 >
   <button
     class="btn btn-default discussion-next-btn"
+    data-track-event="click_button"
+    data-track-label="mr_next_unresolved_thread"
+    data-track-property="click_next_unresolved_thread"
     title="Jump to next unresolved thread"
   >
     <icon-stub

spec/frontend/notes/components/discussion_jump_to_next_button_spec.js

 import { shallowMount } from '@vue/test-utils';
 import JumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
+import { mockTracking } from '../../helpers/tracking_helper';
 
 describe('JumpToNextDiscussionButton', () => {
-  let wrapper;
   const fromDiscussionId = 'abc123';
+  let wrapper;
+  let trackingSpy;
+  let jumpFn;
 
   beforeEach(() => {
+    jumpFn = jest.fn();
     wrapper = shallowMount(JumpToNextDiscussionButton, {
       propsData: { fromDiscussionId },
     });
+    wrapper.setMethods({ jumpToNextRelativeDiscussion: jumpFn });
+
+    trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
   });
 
   afterEach(() => {
@@ -20,9 +27,17 @@ describe('JumpToNextDiscussionButton', () => {
   });
 
   it('calls jumpToNextRelativeDiscussion when clicked', () => {
-    const jumpToNextRelativeDiscussion = jest.fn();
-    wrapper.setMethods({ jumpToNextRelativeDiscussion });
     wrapper.find({ ref: 'button' }).trigger('click');
-    expect(jumpToNextRelativeDiscussion).toHaveBeenCalledWith(fromDiscussionId);
+
+    expect(jumpFn).toHaveBeenCalledWith(fromDiscussionId);
+  });
+
+  it('sends the correct tracking event when clicked', () => {
+    wrapper.find({ ref: 'button' }).trigger('click');
+
+    expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
+      label: 'mr_next_unresolved_thread',
+      property: 'click_next_unresolved_thread',
+    });
   });
 });