Merge branch '48237-toggle-file-comments' into 'master'

Resolve "Toggle file comments in merge request does not update toggle buttons"

Closes #48237 and #48537

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

6 files changed, 271 insertions, 73 deletions

diff --git a/spec/features/projects/merge_requests/user_comments_on_diff_spec.rb b/spec/features/projects/merge_requests/user_comments_on_diff_spec.rb
index 1828b60fec7..95666a667ac 100644
--- a/spec/features/projects/merge_requests/user_comments_on_diff_spec.rb
+++ b/spec/features/projects/merge_requests/user_comments_on_diff_spec.rb
@@ -31,7 +31,7 @@ describe 'User comments on a diff', :js do
           page.within('.files > div:nth-child(3)') do
             expect(page).to have_content('Line is wrong')
 
-            find('.js-toggle-diff-comments').click
+            find('.js-btn-vue-toggle-comments').click
 
             expect(page).not_to have_content('Line is wrong')
           end
@@ -64,7 +64,7 @@ describe 'User comments on a diff', :js do
 
           # Hide the comment.
           page.within('.files > div:nth-child(3)') do
-            find('.js-toggle-diff-comments').click
+            find('.js-btn-vue-toggle-comments').click
 
             expect(page).not_to have_content('Line is wrong')
           end
@@ -77,7 +77,7 @@ describe 'User comments on a diff', :js do
 
           # Show the comment.
           page.within('.files > div:nth-child(3)') do
-            find('.js-toggle-diff-comments').click
+            find('.js-btn-vue-toggle-comments').click
           end
 
           # Now both the comments should be shown.
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 05f5d47ce42..0f3a95da5bf 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -1,7 +1,10 @@
 import Vue from 'vue';
+import Vuex from 'vuex';
+import diffsModule from '~/diffs/store/modules';
+import notesModule from '~/notes/stores/modules';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 
 const discussionFixture = 'merge_requests/diff_discussion.json';
 
@@ -9,6 +12,12 @@ describe('diff_file_header', () => {
   let vm;
   let props;
   const Component = Vue.extend(DiffFileHeader);
+  const store = new Vuex.Store({
+    modules: {
+      diffs: diffsModule,
+      notes: notesModule,
+    },
+  });
 
   beforeEach(() => {
     const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
@@ -26,13 +35,13 @@ describe('diff_file_header', () => {
   describe('computed', () => {
     describe('icon', () => {
       beforeEach(() => {
-        props.diffFile.blob.icon = 'dummy icon';
+        props.diffFile.blob.icon = 'file-text-o';
       });
 
       it('returns the blob icon for files', () => {
         props.diffFile.submodule = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.icon).toBe(props.diffFile.blob.icon);
       });
@@ -40,7 +49,7 @@ describe('diff_file_header', () => {
       it('returns the archive icon for submodules', () => {
         props.diffFile.submodule = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.icon).toBe('archive');
       });
@@ -58,7 +67,7 @@ describe('diff_file_header', () => {
       it('returns the fileHash for files', () => {
         props.diffFile.submodule = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.titleLink).toBe(`#${props.diffFile.fileHash}`);
       });
@@ -66,7 +75,7 @@ describe('diff_file_header', () => {
       it('returns the submoduleTreeUrl for submodules', () => {
         props.diffFile.submodule = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.titleLink).toBe(props.diffFile.submoduleTreeUrl);
       });
@@ -77,7 +86,7 @@ describe('diff_file_header', () => {
           submoduleTreeUrl: null,
         });
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.titleLink).toBe(props.diffFile.submoduleLink);
       });
@@ -94,7 +103,7 @@ describe('diff_file_header', () => {
       it('returns the filePath for files', () => {
         props.diffFile.submodule = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.filePath).toBe(props.diffFile.filePath);
       });
@@ -102,7 +111,7 @@ describe('diff_file_header', () => {
       it('appends the truncated blob id for submodules', () => {
         props.diffFile.submodule = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.filePath).toBe(
           `${props.diffFile.filePath} @ ${props.diffFile.blob.id.substr(0, 8)}`,
@@ -114,7 +123,7 @@ describe('diff_file_header', () => {
       it('returns a link tag if fileHash is set', () => {
         props.diffFile.fileHash = 'some hash';
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.titleTag).toBe('a');
       });
@@ -122,7 +131,7 @@ describe('diff_file_header', () => {
       it('returns a span tag if fileHash is not set', () => {
         props.diffFile.fileHash = null;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.titleTag).toBe('span');
       });
@@ -137,7 +146,7 @@ describe('diff_file_header', () => {
       });
 
       it('returns true if file is stored in LFS', () => {
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.isUsingLfs).toBe(true);
       });
@@ -145,7 +154,7 @@ describe('diff_file_header', () => {
       it('returns false if file is not stored externally', () => {
         props.diffFile.storedExternally = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.isUsingLfs).toBe(false);
       });
@@ -153,7 +162,7 @@ describe('diff_file_header', () => {
       it('returns false if file is not stored in LFS', () => {
         props.diffFile.externalStorage = 'not lfs';
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.isUsingLfs).toBe(false);
       });
@@ -163,7 +172,7 @@ describe('diff_file_header', () => {
       it('returns chevron-down if the diff is expanded', () => {
         props.expanded = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.collapseIcon).toBe('chevron-down');
       });
@@ -171,49 +180,18 @@ describe('diff_file_header', () => {
       it('returns chevron-right if the diff is collapsed', () => {
         props.expanded = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.collapseIcon).toBe('chevron-right');
       });
     });
 
-    describe('isDiscussionsExpanded', () => {
-      beforeEach(() => {
-        Object.assign(props, {
-          discussionsExpanded: true,
-          expanded: true,
-        });
-      });
-
-      it('returns true if diff and discussion are expanded', () => {
-        vm = mountComponent(Component, props);
-
-        expect(vm.isDiscussionsExpanded).toBe(true);
-      });
-
-      it('returns false if discussion is collapsed', () => {
-        props.discussionsExpanded = false;
-
-        vm = mountComponent(Component, props);
-
-        expect(vm.isDiscussionsExpanded).toBe(false);
-      });
-
-      it('returns false if diff is collapsed', () => {
-        props.expanded = false;
-
-        vm = mountComponent(Component, props);
-
-        expect(vm.isDiscussionsExpanded).toBe(false);
-      });
-    });
-
     describe('viewFileButtonText', () => {
       it('contains the truncated content SHA', () => {
         const dummySha = 'deebd00f is no SHA';
         props.diffFile.contentSha = dummySha;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.viewFileButtonText).not.toContain(dummySha);
         expect(vm.viewFileButtonText).toContain(dummySha.substr(0, 8));
@@ -225,7 +203,7 @@ describe('diff_file_header', () => {
         const dummySha = 'deadabba sings no more';
         props.diffFile.diffRefs.baseSha = dummySha;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.viewReplacedFileButtonText).not.toContain(dummySha);
         expect(vm.viewReplacedFileButtonText).toContain(dummySha.substr(0, 8));
@@ -234,25 +212,25 @@ describe('diff_file_header', () => {
   });
 
   describe('methods', () => {
-    describe('handleToggle', () => {
+    describe('handleToggleFile', () => {
       beforeEach(() => {
         spyOn(vm, '$emit').and.stub();
       });
 
       it('emits toggleFile if checkTarget is false', () => {
-        vm.handleToggle(null, false);
+        vm.handleToggleFile(null, false);
 
         expect(vm.$emit).toHaveBeenCalledWith('toggleFile');
       });
 
       it('emits toggleFile if checkTarget is true and event target is header', () => {
-        vm.handleToggle({ target: vm.$refs.header }, true);
+        vm.handleToggleFile({ target: vm.$refs.header }, true);
 
         expect(vm.$emit).toHaveBeenCalledWith('toggleFile');
       });
 
       it('does not emit toggleFile if checkTarget is true and event target is not header', () => {
-        vm.handleToggle({ target: 'not header' }, true);
+        vm.handleToggleFile({ target: 'not header' }, true);
 
         expect(vm.$emit).not.toHaveBeenCalled();
       });
@@ -266,7 +244,7 @@ describe('diff_file_header', () => {
       it('is visible if collapsible is true', () => {
         props.collapsible = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(collapseToggle()).not.toBe(null);
       });
@@ -274,14 +252,14 @@ describe('diff_file_header', () => {
       it('is hidden if collapsible is false', () => {
         props.collapsible = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(collapseToggle()).toBe(null);
       });
     });
 
     it('displays an file icon in the title', () => {
-      vm = mountComponent(Component, props);
+      vm = mountComponentWithStore(Component, { props, store });
       expect(vm.$el.querySelector('svg.js-file-icon use').getAttribute('xlink:href')).toContain(
         'ruby',
       );
@@ -293,7 +271,7 @@ describe('diff_file_header', () => {
       it('displays the path of a added file', () => {
         props.diffFile.renamedFile = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(filePaths()).toHaveLength(1);
         expect(filePaths()[0]).toHaveText(props.diffFile.filePath);
@@ -303,7 +281,7 @@ describe('diff_file_header', () => {
         props.diffFile.renamedFile = false;
         props.diffFile.deletedFile = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(filePaths()).toHaveLength(1);
         expect(filePaths()[0]).toHaveText(`${props.diffFile.filePath} deleted`);
@@ -312,7 +290,7 @@ describe('diff_file_header', () => {
       it('displays old and new path if the file was renamed', () => {
         props.diffFile.renamedFile = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(filePaths()).toHaveLength(2);
         expect(filePaths()[0]).toHaveText(props.diffFile.oldPath);
@@ -321,7 +299,7 @@ describe('diff_file_header', () => {
     });
 
     it('displays a copy to clipboard button', () => {
-      vm = mountComponent(Component, props);
+      vm = mountComponentWithStore(Component, { props, store });
 
       const button = vm.$el.querySelector('.btn-clipboard');
       expect(button).not.toBe(null);
@@ -332,7 +310,7 @@ describe('diff_file_header', () => {
       it('it displays old and new file mode if it changed', () => {
         props.diffFile.modeChanged = true;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         const { fileMode } = vm.$refs;
         expect(fileMode).not.toBe(undefined);
@@ -343,7 +321,7 @@ describe('diff_file_header', () => {
       it('does not display the file mode if it has not changed', () => {
         props.diffFile.modeChanged = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         const { fileMode } = vm.$refs;
         expect(fileMode).toBe(undefined);
@@ -359,7 +337,7 @@ describe('diff_file_header', () => {
           externalStorage: 'lfs',
         });
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(lfsLabel()).not.toBe(null);
         expect(lfsLabel()).toHaveText('LFS');
@@ -368,7 +346,7 @@ describe('diff_file_header', () => {
       it('does not display the LFS label for files stored in repository', () => {
         props.diffFile.storedExternally = false;
 
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(lfsLabel()).toBe(null);
       });
@@ -376,7 +354,7 @@ describe('diff_file_header', () => {
 
     describe('edit button', () => {
       it('should not render edit button if addMergeRequestButtons is not true', () => {
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.$el.querySelector('.js-edit-blob')).toEqual(null);
       });
@@ -384,7 +362,7 @@ describe('diff_file_header', () => {
       it('should show edit button when file is editable', () => {
         props.addMergeRequestButtons = true;
         props.diffFile.editPath = '/';
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.$el.querySelector('.js-edit-blob')).toContainText('Edit');
       });
@@ -393,7 +371,7 @@ describe('diff_file_header', () => {
         props.addMergeRequestButtons = true;
         props.diffFile.deletedFile = true;
         props.diffFile.editPath = '/';
-        vm = mountComponent(Component, props);
+        vm = mountComponentWithStore(Component, { props, store });
 
         expect(vm.$el.querySelector('.js-edit-blob')).toEqual(null);
       });
@@ -413,7 +391,7 @@ describe('diff_file_header', () => {
           props.diffFile.externalUrl = url;
           props.diffFile.formattedExternalUrl = title;
 
-          vm = mountComponent(Component, props);
+          vm = mountComponentWithStore(Component, { props, store });
 
           expect(vm.$el.querySelector(`a[href="${url}"]`)).not.toBe(null);
           expect(vm.$el.querySelector(`a[data-original-title="View on ${title}"]`)).not.toBe(null);
@@ -423,11 +401,39 @@ describe('diff_file_header', () => {
           props.diffFile.externalUrl = '';
           props.diffFile.formattedExternalUrl = title;
 
-          vm = mountComponent(Component, props);
+          vm = mountComponentWithStore(Component, { props, store });
 
           expect(vm.$el.querySelector(`a[data-original-title="View on ${title}"]`)).toBe(null);
         });
       });
     });
+
+    describe('handles toggle 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;
+
+        vm = mountComponentWithStore(Component, {
+          props: propsCopy,
+          store,
+        });
+
+        spyOn(vm, 'toggleFileDiscussions');
+
+        vm.$el.querySelector('.js-btn-vue-toggle-comments').click();
+
+        expect(vm.toggleFileDiscussions).toHaveBeenCalled();
+      });
+    });
   });
 });
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index 6829c1e956a..c1560dac1a0 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -191,4 +191,48 @@ describe('DiffsStoreActions', () => {
       );
     });
   });
+
+  describe('toggleFileDiscussions', () => {
+    it('should dispatch collapseDiscussion when all discussions are expanded', () => {
+      const getters = {
+        getDiffFileDiscussions: jasmine.createSpy().and.returnValue([{ id: 1 }]),
+        diffHasAllExpandedDiscussions: jasmine.createSpy().and.returnValue(true),
+        diffHasAllCollpasedDiscussions: jasmine.createSpy().and.returnValue(false),
+      };
+
+      const dispatch = jasmine.createSpy('dispatch');
+
+      actions.toggleFileDiscussions({ getters, dispatch });
+
+      expect(dispatch).toHaveBeenCalledWith('collapseDiscussion', { discussionId: 1 }, { root: true });
+    });
+
+    it('should dispatch expandDiscussion when all discussions are collapsed', () => {
+      const getters = {
+        getDiffFileDiscussions: jasmine.createSpy().and.returnValue([{ id: 1 }]),
+        diffHasAllExpandedDiscussions: jasmine.createSpy().and.returnValue(false),
+        diffHasAllCollpasedDiscussions: jasmine.createSpy().and.returnValue(true),
+      };
+
+      const dispatch = jasmine.createSpy();
+
+      actions.toggleFileDiscussions({ getters, dispatch });
+
+      expect(dispatch).toHaveBeenCalledWith('expandDiscussion', { discussionId: 1 }, { root: true });
+    });
+
+    it('should dispatch expandDiscussion when some discussions are collapsed and others are expanded for the collapsed discussion', () => {
+      const getters = {
+        getDiffFileDiscussions: jasmine.createSpy().and.returnValue([{ expanded: false, id: 1 }]),
+        diffHasAllExpandedDiscussions: jasmine.createSpy().and.returnValue(false),
+        diffHasAllCollpasedDiscussions: jasmine.createSpy().and.returnValue(false),
+      };
+
+      const dispatch = jasmine.createSpy();
+
+      actions.toggleFileDiscussions({ getters, dispatch });
+
+      expect(dispatch).toHaveBeenCalledWith('expandDiscussion', { discussionId: 1 }, { root: true });
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js
index 7a94f18778b..919b612bb6a 100644
--- a/spec/javascripts/diffs/store/getters_spec.js
+++ b/spec/javascripts/diffs/store/getters_spec.js
@@ -1,12 +1,24 @@
 import * as getters from '~/diffs/store/getters';
 import state from '~/diffs/store/modules/diff_state';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
+import discussion from '../mock_data/diff_discussions';
 
-describe('DiffsStoreGetters', () => {
+describe('Diffs Module Getters', () => {
   let localState;
+  let discussionMock;
+  let discussionMock1;
+
+  const diffFileMock = {
+    fileHash: '9732849daca6ae818696d9575f5d1207d1a7f8bb',
+  };
 
   beforeEach(() => {
     localState = state();
+    discussionMock = Object.assign({}, discussion);
+    discussionMock.diff_file.file_hash = diffFileMock.fileHash;
+
+    discussionMock1 = Object.assign({}, discussion);
+    discussionMock1.diff_file.file_hash = diffFileMock.fileHash;
   });
 
   describe('isParallelView', () => {
@@ -63,4 +75,113 @@ describe('DiffsStoreGetters', () => {
       expect(getters.commitId(localState)).toEqual(null);
     });
   });
+
+  describe('diffHasAllExpandedDiscussions', () => {
+    it('returns true when all discussions are expanded', () => {
+      expect(
+        getters.diffHasAllExpandedDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock, discussionMock],
+        })(diffFileMock),
+      ).toEqual(true);
+    });
+
+    it('returns false when there are no discussions', () => {
+      expect(
+        getters.diffHasAllExpandedDiscussions(localState, {
+          getDiffFileDiscussions: () => [],
+        })(diffFileMock),
+      ).toEqual(false);
+    });
+
+    it('returns false when one discussions is collapsed', () => {
+      discussionMock1.expanded = false;
+
+      expect(
+        getters.diffHasAllExpandedDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock, discussionMock1],
+        })(diffFileMock),
+      ).toEqual(false);
+    });
+  });
+
+  describe('diffHasAllCollpasedDiscussions', () => {
+    it('returns true when all discussions are collapsed', () => {
+      discussionMock.diff_file.file_hash = diffFileMock.fileHash;
+      discussionMock.expanded = false;
+
+      expect(
+        getters.diffHasAllCollpasedDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock],
+        })(diffFileMock),
+      ).toEqual(true);
+    });
+
+    it('returns false when there are no discussions', () => {
+      expect(
+        getters.diffHasAllCollpasedDiscussions(localState, {
+          getDiffFileDiscussions: () => [],
+        })(diffFileMock),
+      ).toEqual(false);
+    });
+
+    it('returns false when one discussions is expanded', () => {
+      discussionMock1.expanded = false;
+
+      expect(
+        getters.diffHasAllCollpasedDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock, discussionMock1],
+        })(diffFileMock),
+      ).toEqual(false);
+    });
+  });
+
+  describe('diffHasExpandedDiscussions', () => {
+    it('returns true when one of the discussions is expanded', () => {
+      discussionMock1.expanded = false;
+
+      expect(
+        getters.diffHasExpandedDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock, discussionMock],
+        })(diffFileMock),
+      ).toEqual(true);
+    });
+
+    it('returns false when there are no discussions', () => {
+      expect(
+        getters.diffHasExpandedDiscussions(localState, { getDiffFileDiscussions: () => [] })(
+          diffFileMock,
+        ),
+      ).toEqual(false);
+    });
+
+    it('returns false when no discussion is expanded', () => {
+      discussionMock.expanded = false;
+      discussionMock1.expanded = false;
+
+      expect(
+        getters.diffHasExpandedDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock, discussionMock1],
+        })(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;
+
+      expect(
+        getters.getDiffFileDiscussions(localState, {}, {}, { discussions: [discussionMock] })(
+          diffFileMock,
+        ).length,
+      ).toEqual(1);
+    });
+
+    it('returns an empty array when no discussions are found in the given diff', () => {
+      expect(
+        getters.getDiffFileDiscussions(localState, {}, {}, { discussions: [] })(diffFileMock)
+          .length,
+      ).toEqual(0);
+    });
+  });
 });
diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index 71ef3aa9b03..b66e8e1ceb3 100644
--- a/spec/javascripts/notes/stores/actions_spec.js
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -128,6 +128,19 @@ describe('Actions Notes Store', () => {
     });
   });
 
+  describe('collapseDiscussion', () => {
+    it('should commit collapse discussion', done => {
+      testAction(
+        actions.collapseDiscussion,
+        { discussionId: discussionMock.id },
+        { notes: [discussionMock] },
+        [{ type: 'COLLAPSE_DISCUSSION', payload: { discussionId: discussionMock.id } }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('async methods', () => {
     const interceptor = (request, next) => {
       next(
diff --git a/spec/javascripts/notes/stores/mutation_spec.js b/spec/javascripts/notes/stores/mutation_spec.js
index ccc7328447b..a15ff1a5888 100644
--- a/spec/javascripts/notes/stores/mutation_spec.js
+++ b/spec/javascripts/notes/stores/mutation_spec.js
@@ -74,6 +74,20 @@ describe('Notes Store mutations', () => {
     });
   });
 
+  describe('COLLAPSE_DISCUSSION', () => {
+    it('should collpase an expanded discussion', () => {
+      const discussion = Object.assign({}, discussionMock, { expanded: true });
+
+      const state = {
+        discussions: [discussion],
+      };
+
+      mutations.COLLAPSE_DISCUSSION(state, { discussionId: discussion.id });
+
+      expect(state.discussions[0].expanded).toEqual(false);
+    });
+  });
+
   describe('REMOVE_PLACEHOLDER_NOTES', () => {
     it('should remove all placeholder notes in indivudal notes and discussion', () => {
       const placeholderNote = Object.assign({}, individualNote, { isPlaceholderNote: true });