Commit 63975b4a authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Phil Hughes

Extract ReplyPlaceholder from NoteableDiscussion component

parent 74abc775
<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"
......
---
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 ""
......
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 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', () => {
......
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