diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-07-17 12:54:33 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-07-31 09:24:36 +0100 |
commit | 32de37536e29d2acb1d1ddb8e92b59c493470059 (patch) | |
tree | fbcaf2c95af6bbf67a682eac04072ec4bbaf61af | |
parent | ff060ad4056494d32c00a06b134b1f4e20751e19 (diff) | |
download | gitlab-ce-32de37536e29d2acb1d1ddb8e92b59c493470059.tar.gz |
Disables toggle comments button for diff with no discussions
5 files changed, 74 insertions, 8 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 0441d9f9e42..d3ffbe0415a 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -50,7 +50,7 @@ export default { }; }, computed: { - ...mapGetters('diffs', ['diffHasExpandedDiscussions']), + ...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']), hasExpandedDiscussions() { return this.diffHasExpandedDiscussions(this.diffFile); }, @@ -221,6 +221,7 @@ export default { v-if="diffFile.blob && diffFile.blob.readableText" > <button + :disabled="!diffHasDiscussions(diffFile)" :class="{ active: hasExpandedDiscussions }" :title="s__('MergeRequests|Toggle comments for this file')" class="js-btn-vue-toggle-comments btn" diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js index c7b9b1a16e6..fc1d15b8d54 100644 --- a/app/assets/javascripts/diffs/store/getters.js +++ b/app/assets/javascripts/diffs/store/getters.js @@ -48,6 +48,14 @@ export const diffHasExpandedDiscussions = (state, getters) => diff => { }; /** + * Checks if the diff has any discussion + * @param {Boolean} diff + * @returns {Boolean} + */ +export const diffHasDiscussions = (state, getters) => diff => + getters.getDiffFileDiscussions(diff).length > 0; + +/** * Returns an array with the discussions of the given diff * @param {Object} diff * @returns {Array} diff --git a/changelogs/unreleased/49161-disable-toggle-comments.yml b/changelogs/unreleased/49161-disable-toggle-comments.yml new file mode 100644 index 00000000000..5ec16191f07 --- /dev/null +++ b/changelogs/unreleased/49161-disable-toggle-comments.yml @@ -0,0 +1,5 @@ +--- +title: Disables toggle comments button if diff has no discussions +merge_request: +author: +type: other diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js index 860a976e7cd..92b2004c4d7 100644 --- a/spec/javascripts/diffs/components/diff_file_header_spec.js +++ b/spec/javascripts/diffs/components/diff_file_header_spec.js @@ -11,7 +11,9 @@ const discussionFixture = 'merge_requests/diff_discussion.json'; describe('diff_file_header', () => { let vm; let props; + const diffDiscussionMock = getJSONFixture(discussionFixture)[0]; const Component = Vue.extend(DiffFileHeader); + const store = new Vuex.Store({ modules: { diffs: diffsModule, @@ -20,7 +22,6 @@ describe('diff_file_header', () => { }); beforeEach(() => { - const diffDiscussionMock = getJSONFixture(discussionFixture)[0]; const diffFile = convertObjectPropsToCamelCase(diffDiscussionMock.diff_file, { deep: true }); props = { diffFile, @@ -409,7 +410,7 @@ describe('diff_file_header', () => { }); describe('handles toggle discussions', () => { - it('dispatches toggleFileDiscussions when user clicks on toggle discussions button', () => { + it('renders a disabled button when diff has no discussions', () => { const propsCopy = Object.assign({}, props); propsCopy.diffFile.submodule = false; propsCopy.diffFile.blob = { @@ -428,11 +429,44 @@ describe('diff_file_header', () => { store, }); - spyOn(vm, 'toggleFileDiscussions'); - - vm.$el.querySelector('.js-btn-vue-toggle-comments').click(); - - expect(vm.toggleFileDiscussions).toHaveBeenCalled(); + expect( + vm.$el.querySelector('.js-btn-vue-toggle-comments').getAttribute('disabled'), + ).toEqual('disabled'); + }); + + describe('with discussions', () => { + it('dispatches toggleFileDiscussions when user clicks on toggle discussions button', () => { + const propsCopy = Object.assign({}, props); + propsCopy.diffFile.submodule = false; + propsCopy.diffFile.blob = { + id: '848ed9407c6730ff16edb3dd24485a0eea24292a', + path: 'lib/base.js', + name: 'base.js', + mode: '100644', + readableText: true, + icon: 'file-text-o', + }; + propsCopy.addMergeRequestButtons = true; + propsCopy.diffFile.deletedFile = true; + + const discussionGetter = () => [diffDiscussionMock]; + notesModule.getters.discussions = discussionGetter; + vm = mountComponentWithStore(Component, { + props: propsCopy, + store: new Vuex.Store({ + modules: { + diffs: diffsModule, + notes: notesModule, + }, + }), + }); + + spyOn(vm, 'toggleFileDiscussions'); + + vm.$el.querySelector('.js-btn-vue-toggle-comments').click(); + + expect(vm.toggleFileDiscussions).toHaveBeenCalled(); + }); }); }); }); diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js index f5628a01a55..987c4dbcb26 100644 --- a/spec/javascripts/diffs/store/getters_spec.js +++ b/spec/javascripts/diffs/store/getters_spec.js @@ -167,6 +167,24 @@ describe('Diffs Module Getters', () => { }); }); + describe('diffHasDiscussions', () => { + it('returns true when getDiffFileDiscussions returns discussions', () => { + expect( + getters.diffHasDiscussions(localState, { + getDiffFileDiscussions: () => [discussionMock], + })(diffFileMock), + ).toEqual(true); + }); + + it('returns false when getDiffFileDiscussions returns no discussions', () => { + expect( + getters.diffHasDiscussions(localState, { + getDiffFileDiscussions: () => [], + })(diffFileMock), + ).toEqual(false); + }); + }); + describe('getDiffFileDiscussions', () => { it('returns an array with discussions when fileHash matches and the discussion belongs to a diff', () => { discussionMock.diff_file.file_hash = diffFileMock.fileHash; |