Merge branch '49161-disable-toggle-comments' into 'master'

Resolve "MR refactor: Disable toggle comments button when diff has no discussions"

Closes #49161

See merge request gitlab-org/gitlab-ce!20667

2 files changed, 59 insertions, 7 deletions

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;