Commit 3af7723f authored by Martin Hobert's avatar Martin Hobert

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
parent d4d4ebad
<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>
......@@ -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>
......
---
title: Extracted JumpToNextDiscussionButton to its own component
author: Martin Hobert
merge_request: 24506
type: other
......@@ -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 ""
......
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();
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment