refactor(NoteableDiscussion): Extracted JumpToNextDiscussionButton to its own component

fix #56369

chore(changelog): Added changelog entry

chore(prettier): Formated with prettier

test(JumpToNextDiscussionButton): Added test for new component

test(Refactored tests to use vue test-utils):

chore(translations): Added newly generated locales

Update spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
chore(prettier): Formated with prettier

test(JumpToNextDiscussionButton): Updated tests to use a local vue instance

test(JumpToNextDiscussionButton): Running tests in async to prevent maximum stack overflow

5 files changed, 75 insertions, 10 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
new file mode 100644
index 00000000000..07a5bda6bcb
--- /dev/null
+++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
@@ -0,0 +1,28 @@
+<script>
+import icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective } from '@gitlab/ui';
+
+export default {
+  name: 'JumpToNextDiscussionButton',
+  components: {
+    icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+};
+</script>
+
+<template>
+  <div class="btn-group" role="group">
+    <button
+      ref="button"
+      v-gl-tooltip
+      class="btn btn-default discussion-next-btn"
+      :title="s__('MergeRequests|Jump to next unresolved discussion')"
+      @click="$emit('onClick')"
+    >
+      <icon name="comment-next" />
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 4480ec74182..33092d354fb 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -23,6 +23,7 @@ import autosave from '../mixins/autosave';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
 import discussionNavigation from '../mixins/discussion_navigation';
+import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
 
 export default {
   name: 'NoteableDiscussion',
@@ -34,6 +35,7 @@ export default {
     noteSignedOutWidget,
     noteEditedText,
     noteForm,
+    jumpToNextDiscussionButton,
     toggleRepliesWidget,
     placeholderNote,
     placeholderSystemNote,
@@ -461,16 +463,10 @@ Please check your network connection and try again.`;
                           <icon name="issue-new" />
                         </a>
                       </div>
-                      <div v-if="shouldShowJumpToNextDiscussion" class="btn-group" role="group">
-                        <button
-                          v-gl-tooltip
-                          class="btn btn-default discussion-next-btn"
-                          title="Jump to next unresolved discussion"
-                          @click="jumpToNextDiscussion"
-                        >
-                          <icon name="comment-next" />
-                        </button>
-                      </div>
+                      <jump-to-next-discussion-button
+                        v-if="shouldShowJumpToNextDiscussion"
+                        @onClick="jumpToNextDiscussion"
+                      />
                     </div>
                   </div>
                 </template>
diff --git a/changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml b/changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml
new file mode 100644
index 00000000000..9a0d16c2d70
--- /dev/null
+++ b/changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml
@@ -0,0 +1,5 @@
+---
+title: Extracted JumpToNextDiscussionButton to its own component
+author: Martin Hobert
+merge_request: 24506
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 795a46382a7..3da5250117e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4282,6 +4282,9 @@ msgstr ""
 msgid "Merge requests are a place to propose changes you've made to a project and discuss those changes with others"
 msgstr ""
 
+msgid "MergeRequests|Jump to next unresolved discussion"
+msgstr ""
+
 msgid "MergeRequests|Resolve this discussion in a new issue"
 msgstr ""
 
diff --git a/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js b/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
new file mode 100644
index 00000000000..c41b29fa788
--- /dev/null
+++ b/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
@@ -0,0 +1,33 @@
+import jumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+const localVue = createLocalVue();
+
+describe('jumpToNextDiscussionButton', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(jumpToNextDiscussionButton, {
+      localVue,
+      sync: false,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('emits onClick event on button click', done => {
+    const button = wrapper.find({ ref: 'button' });
+
+    button.trigger('click');
+
+    localVue.nextTick(() => {
+      expect(wrapper.emitted()).toEqual({
+        onClick: [[]],
+      });
+
+      done();
+    });
+  });
+});