From 63975b4a682356b676e1b1da0975c569edcd206c Mon Sep 17 00:00:00 2001 From: Winnie Hellmann <winnie@gitlab.com> Date: Tue, 5 Feb 2019 08:56:34 +0000 Subject: [PATCH] Extract ReplyPlaceholder from NoteableDiscussion component --- .../discussion_reply_placeholder.vue | 17 ++++++++++ .../notes/components/noteable_discussion.vue | 11 ++---- ...70-extract-reply-placeholder-component.yml | 5 +++ locale/gitlab.pot | 6 ++++ .../discussion_reply_placeholder_spec.js | 34 +++++++++++++++++++ .../components/noteable_discussion_spec.js | 31 ++++++++--------- 6 files changed, 79 insertions(+), 25 deletions(-) create mode 100644 app/assets/javascripts/notes/components/discussion_reply_placeholder.vue create mode 100644 changelogs/unreleased/refactor-56370-extract-reply-placeholder-component.yml create mode 100644 spec/javascripts/notes/components/discussion_reply_placeholder_spec.js diff --git a/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue b/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue new file mode 100644 index 00000000000..ea590905e3c --- /dev/null +++ b/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue @@ -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> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 695efe3602f..e26cce1c47f 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -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" diff --git a/changelogs/unreleased/refactor-56370-extract-reply-placeholder-component.yml b/changelogs/unreleased/refactor-56370-extract-reply-placeholder-component.yml new file mode 100644 index 00000000000..a216d294b30 --- /dev/null +++ b/changelogs/unreleased/refactor-56370-extract-reply-placeholder-component.yml @@ -0,0 +1,5 @@ +--- +title: Extracted ReplyPlaceholder to its own component +merge_request: 24507 +author: Martin Hobert +type: other diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 06caccae59f..289ed9792bf 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -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 "" diff --git a/spec/javascripts/notes/components/discussion_reply_placeholder_spec.js b/spec/javascripts/notes/components/discussion_reply_placeholder_spec.js new file mode 100644 index 00000000000..07a366cf339 --- /dev/null +++ b/spec/javascripts/notes/components/discussion_reply_placeholder_spec.js @@ -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...'); + }); +}); diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js index c4b7eb17393..2eae22e095f 100644 --- a/spec/javascripts/notes/components/noteable_discussion_spec.js +++ b/spec/javascripts/notes/components/noteable_discussion_spec.js @@ -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', () => { -- 2.30.9