Extract ReplyPlaceholder from NoteableDiscussion component
This commit is contained in:
parent
74abc77503
commit
63975b4a68
6 changed files with 79 additions and 25 deletions
|
@ -0,0 +1,17 @@
|
|||
<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>
|
|
@ -24,6 +24,7 @@ import autosave from '../mixins/autosave';
|
|||
import noteable from '../mixins/noteable';
|
||||
import resolvable from '../mixins/resolvable';
|
||||
import discussionNavigation from '../mixins/discussion_navigation';
|
||||
import ReplyPlaceholder from './discussion_reply_placeholder.vue';
|
||||
import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
|
||||
|
||||
export default {
|
||||
|
@ -39,6 +40,7 @@ export default {
|
|||
resolveDiscussionButton,
|
||||
jumpToNextDiscussionButton,
|
||||
toggleRepliesWidget,
|
||||
ReplyPlaceholder,
|
||||
placeholderNote,
|
||||
placeholderSystemNote,
|
||||
systemNote,
|
||||
|
@ -447,14 +449,7 @@ Please check your network connection and try again.`;
|
|||
>
|
||||
<template v-if="!isReplying && canReply">
|
||||
<div class="discussion-with-resolve-btn">
|
||||
<button
|
||||
type="button"
|
||||
class="js-vue-discussion-reply btn btn-text-field qa-discussion-reply"
|
||||
title="Add a reply"
|
||||
@click="showReplyForm"
|
||||
>
|
||||
Reply...
|
||||
</button>
|
||||
<reply-placeholder class="qa-discussion-reply" @onClick="showReplyForm" />
|
||||
<resolve-discussion-button
|
||||
v-if="discussion.resolvable"
|
||||
:is-resolving="isResolving"
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Extracted ReplyPlaceholder to its own component
|
||||
merge_request: 24507
|
||||
author: Martin Hobert
|
||||
type: other
|
|
@ -4393,9 +4393,15 @@ 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|Add a reply"
|
||||
msgstr ""
|
||||
|
||||
msgid "MergeRequests|Jump to next unresolved discussion"
|
||||
msgstr ""
|
||||
|
||||
msgid "MergeRequests|Reply..."
|
||||
msgstr ""
|
||||
|
||||
msgid "MergeRequests|Resolve this discussion in a new issue"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
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...');
|
||||
});
|
||||
});
|
|
@ -1,6 +1,7 @@
|
|||
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||
import createStore from '~/notes/stores';
|
||||
import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
|
||||
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
|
||||
import '~/behaviors/markdown/render_gfm';
|
||||
import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
|
||||
import mockDiffFile from '../../diffs/mock_data/diff_file';
|
||||
|
@ -57,27 +58,23 @@ describe('noteable_discussion component', () => {
|
|||
});
|
||||
|
||||
describe('actions', () => {
|
||||
it('should render reply button', () => {
|
||||
expect(
|
||||
wrapper
|
||||
.find('.js-vue-discussion-reply')
|
||||
.text()
|
||||
.trim(),
|
||||
).toEqual('Reply...');
|
||||
});
|
||||
|
||||
it('should toggle reply form', done => {
|
||||
wrapper.find('.js-vue-discussion-reply').trigger('click');
|
||||
const replyPlaceholder = wrapper.find(ReplyPlaceholder);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.isReplying).toEqual(true);
|
||||
wrapper.vm
|
||||
.$nextTick()
|
||||
.then(() => {
|
||||
expect(wrapper.vm.isReplying).toEqual(false);
|
||||
|
||||
// There is a watcher for `isReplying` which will init autosave in the next tick
|
||||
wrapper.vm.$nextTick(() => {
|
||||
replyPlaceholder.vm.$emit('onClick');
|
||||
})
|
||||
.then(() => wrapper.vm.$nextTick())
|
||||
.then(() => {
|
||||
expect(wrapper.vm.isReplying).toEqual(true);
|
||||
expect(wrapper.vm.$refs.noteForm).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('does not render jump to discussion button', () => {
|
||||
|
|
Loading…
Reference in a new issue