diff options
3 files changed, 56 insertions, 3 deletions
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index f6842fa240e..29740ddf6ae 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -68,7 +68,7 @@ export default { isReplying: false, isResolving: false, resolveAsThread: true, - isRepliesCollapsed: (!this.discussion.diff_discussion && this.discussion.resolved) || false, + isRepliesToggledByUser: false, }; }, computed: { @@ -189,6 +189,15 @@ export default { return isExpanded || this.alwaysExpanded || isResolvedNonDiffDiscussion; }, + isRepliesCollapsed() { + const { discussion, isRepliesToggledByUser } = this; + const { resolved, notes } = discussion; + const hasReplies = notes.length > 1; + + return ( + (!discussion.diff_discussion && resolved && hasReplies && !isRepliesToggledByUser) || false + ); + }, }, watch: { isReplying() { @@ -233,7 +242,7 @@ export default { this.toggleDiscussion({ discussionId: this.discussion.id }); }, toggleReplies() { - this.isRepliesCollapsed = !this.isRepliesCollapsed; + this.isRepliesToggledByUser = !this.isRepliesToggledByUser; }, showReplyForm() { this.isReplying = true; diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index e9d05c5cdcd..72a8ff28466 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -42,7 +42,7 @@ export default { </script> <template> - <li :class="className" class="replies-toggle"> + <li :class="className" class="replies-toggle js-toggle-replies"> <template v-if="collapsed"> <icon name="chevron-right" @click.native="toggle" /> <div> diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js index 81cb3e1f74d..4b4403689d9 100644 --- a/spec/javascripts/notes/components/noteable_discussion_spec.js +++ b/spec/javascripts/notes/components/noteable_discussion_spec.js @@ -6,6 +6,7 @@ import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data'; import mockDiffFile from '../../diffs/mock_data/diff_file'; const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json'; +const diffDiscussionFixture = 'merge_requests/diff_discussion.json'; describe('noteable_discussion component', () => { const Component = Vue.extend(noteableDiscussion); @@ -115,6 +116,49 @@ describe('noteable_discussion component', () => { .catch(done.fail); }); }); + + describe('isRepliesCollapsed', () => { + it('should return false for diff discussions', done => { + const diffDiscussion = getJSONFixture(diffDiscussionFixture)[0]; + vm.$store.dispatch('setInitialNotes', [diffDiscussion]); + + Vue.nextTick() + .then(() => { + expect(vm.isRepliesCollapsed).toEqual(false); + expect(vm.$el.querySelector('.js-toggle-replies')).not.toBeNull(); + expect(vm.$el.querySelector('.discussion-reply-holder')).not.toBeNull(); + }) + .then(done) + .catch(done.fail); + }); + + it('should return false if discussion does not have a reply', () => { + const discussion = { ...discussionMock, resolved: true }; + discussion.notes = discussion.notes.slice(0, 1); + const noRepliesVm = new Component({ + store, + propsData: { discussion }, + }).$mount(); + + expect(noRepliesVm.isRepliesCollapsed).toEqual(false); + expect(noRepliesVm.$el.querySelector('.js-toggle-replies')).toBeNull(); + expect(vm.$el.querySelector('.discussion-reply-holder')).not.toBeNull(); + noRepliesVm.$destroy(); + }); + + it('should return true for resolved non-diff discussion which has replies', () => { + const discussion = { ...discussionMock, resolved: true }; + const resolvedDiscussionVm = new Component({ + store, + propsData: { discussion }, + }).$mount(); + + expect(resolvedDiscussionVm.isRepliesCollapsed).toEqual(true); + expect(resolvedDiscussionVm.$el.querySelector('.js-toggle-replies')).not.toBeNull(); + expect(vm.$el.querySelector('.discussion-reply-holder')).not.toBeNull(); + resolvedDiscussionVm.$destroy(); + }); + }); }); describe('methods', () => { |