Commit 25f9248b authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Phil Hughes

Extract ReplyPlaceholder from NoteableDiscussion component (EE-port)

parent 600abf54
<script>
export default {
name: 'ReplyPlaceholder',
};
</script>
<template>
<button
ref="button"
type="button"
class="js-vue-discussion-reply btn btn-text-field"
:title="s__('MergeRequests|Add a reply')"
@click="$emit('onClick')"
>
{{ s__('MergeRequests|Reply...') }}
</button>
</template>
...@@ -26,6 +26,7 @@ import autosave from '../mixins/autosave'; ...@@ -26,6 +26,7 @@ import autosave from '../mixins/autosave';
import noteable from '../mixins/noteable'; import noteable from '../mixins/noteable';
import resolvable from '../mixins/resolvable'; import resolvable from '../mixins/resolvable';
import discussionNavigation from '../mixins/discussion_navigation'; import discussionNavigation from '../mixins/discussion_navigation';
import ReplyPlaceholder from './discussion_reply_placeholder.vue';
import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue'; import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
export default { export default {
...@@ -41,6 +42,7 @@ export default { ...@@ -41,6 +42,7 @@ export default {
resolveDiscussionButton, resolveDiscussionButton,
jumpToNextDiscussionButton, jumpToNextDiscussionButton,
toggleRepliesWidget, toggleRepliesWidget,
ReplyPlaceholder,
placeholderNote, placeholderNote,
placeholderSystemNote, placeholderSystemNote,
systemNote, systemNote,
...@@ -462,14 +464,7 @@ Please check your network connection and try again.`; ...@@ -462,14 +464,7 @@ Please check your network connection and try again.`;
> >
<template v-if="!isReplying && canReply"> <template v-if="!isReplying && canReply">
<div class="discussion-with-resolve-btn"> <div class="discussion-with-resolve-btn">
<button <reply-placeholder class="qa-discussion-reply" @onClick="showReplyForm" />
type="button"
class="js-vue-discussion-reply btn btn-text-field qa-discussion-reply"
title="Add a reply"
@click="showReplyForm"
>
Reply...
</button>
<resolve-discussion-button <resolve-discussion-button
v-if="discussion.resolvable" v-if="discussion.resolvable"
:is-resolving="isResolving" :is-resolving="isResolving"
......
---
title: Extracted ReplyPlaceholder to its own component
merge_request: 24507
author: Martin Hobert
type: other
...@@ -5734,6 +5734,9 @@ msgstr "" ...@@ -5734,6 +5734,9 @@ msgstr ""
msgid "Merge requests are a place to propose changes you've made to a project and discuss those changes with others" msgid "Merge requests are a place to propose changes you've made to a project and discuss those changes with others"
msgstr "" msgstr ""
msgid "MergeRequests|Add a reply"
msgstr ""
msgid "MergeRequests|An error occurred while saving the draft comment." msgid "MergeRequests|An error occurred while saving the draft comment."
msgstr "" msgstr ""
...@@ -5752,6 +5755,9 @@ msgstr "" ...@@ -5752,6 +5755,9 @@ msgstr ""
msgid "MergeRequests|Jump to next unresolved discussion" msgid "MergeRequests|Jump to next unresolved discussion"
msgstr "" msgstr ""
msgid "MergeRequests|Reply..."
msgstr ""
msgid "MergeRequests|Resolve this discussion in a new issue" msgid "MergeRequests|Resolve this discussion in a new issue"
msgstr "" msgstr ""
......
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
const localVue = createLocalVue();
describe('ReplyPlaceholder', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(ReplyPlaceholder, {
localVue,
});
});
afterEach(() => {
wrapper.destroy();
});
it('emits onClick even on button click', () => {
const button = wrapper.find({ ref: 'button' });
button.trigger('click');
expect(wrapper.emitted()).toEqual({
onClick: [[]],
});
});
it('should render reply button', () => {
const button = wrapper.find({ ref: 'button' });
expect(button.text()).toEqual('Reply...');
});
});
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import createStore from '~/notes/stores'; import createStore from '~/notes/stores';
import noteableDiscussion from '~/notes/components/noteable_discussion.vue'; import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import '~/behaviors/markdown/render_gfm'; import '~/behaviors/markdown/render_gfm';
import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data'; import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
import mockDiffFile from '../../diffs/mock_data/diff_file'; import mockDiffFile from '../../diffs/mock_data/diff_file';
...@@ -57,27 +58,23 @@ describe('noteable_discussion component', () => { ...@@ -57,27 +58,23 @@ describe('noteable_discussion component', () => {
}); });
describe('actions', () => { describe('actions', () => {
it('should render reply button', () => {
expect(
wrapper
.find('.js-vue-discussion-reply')
.text()
.trim(),
).toEqual('Reply...');
});
it('should toggle reply form', done => { it('should toggle reply form', done => {
wrapper.find('.js-vue-discussion-reply').trigger('click'); const replyPlaceholder = wrapper.find(ReplyPlaceholder);
wrapper.vm.$nextTick(() => { wrapper.vm
expect(wrapper.vm.isReplying).toEqual(true); .$nextTick()
.then(() => {
expect(wrapper.vm.isReplying).toEqual(false);
// There is a watcher for `isReplying` which will init autosave in the next tick replyPlaceholder.vm.$emit('onClick');
wrapper.vm.$nextTick(() => { })
.then(() => wrapper.vm.$nextTick())
.then(() => {
expect(wrapper.vm.isReplying).toEqual(true);
expect(wrapper.vm.$refs.noteForm).not.toBeNull(); expect(wrapper.vm.$refs.noteForm).not.toBeNull();
done(); })
}); .then(done)
}); .catch(done.fail);
}); });
it('does not render jump to discussion button', () => { it('does not render jump to discussion button', () => {
......
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