Merge branch 'master' into qa-264mikeformus/gitlab-ce-qa-264

17 files changed, 696 insertions, 586 deletions

diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js
index 2d57af6137c..f737e8fa38e 100644
--- a/spec/javascripts/diffs/components/changed_files_spec.js
+++ b/spec/javascripts/diffs/components/changed_files_spec.js
@@ -1,12 +1,17 @@
 import Vue from 'vue';
-import $ from 'jquery';
+import Vuex from 'vuex';
 import { mountComponentWithStore } from 'spec/helpers';
-import store from '~/diffs/store';
-import ChangedFiles from '~/diffs/components/changed_files.vue';
+import diffsModule from '~/diffs/store/modules';
+import changedFiles from '~/diffs/components/changed_files.vue';
 
 describe('ChangedFiles', () => {
-  const Component = Vue.extend(ChangedFiles);
-  const createComponent = props => mountComponentWithStore(Component, { props, store });
+  const Component = Vue.extend(changedFiles);
+  const store = new Vuex.Store({
+    modules: {
+      diffs: diffsModule,
+    },
+  });
+
   let vm;
 
   beforeEach(() => {
@@ -14,6 +19,7 @@ describe('ChangedFiles', () => {
       <div id="dummy-element"></div>
       <div class="js-tabs-affix"></div>
     `);
+
     const props = {
       diffFiles: [
         {
@@ -26,7 +32,8 @@ describe('ChangedFiles', () => {
         },
       ],
     };
-    vm = createComponent(props);
+
+    vm = mountComponentWithStore(Component, { props, store });
   });
 
   describe('with single file added', () => {
@@ -40,58 +47,56 @@ describe('ChangedFiles', () => {
     });
   });
 
-  describe('template', () => {
-    describe('diff view mode buttons', () => {
-      let inlineButton;
-      let parallelButton;
+  describe('diff view mode buttons', () => {
+    let inlineButton;
+    let parallelButton;
 
-      beforeEach(() => {
-        inlineButton = vm.$el.querySelector('.js-inline-diff-button');
-        parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
-      });
+    beforeEach(() => {
+      inlineButton = vm.$el.querySelector('.js-inline-diff-button');
+      parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
+    });
+
+    it('should have Inline and Side-by-side buttons', () => {
+      expect(inlineButton).toBeDefined();
+      expect(parallelButton).toBeDefined();
+    });
+
+    it('should add active class to Inline button', done => {
+      vm.$store.state.diffs.diffViewType = 'inline';
+
+      vm.$nextTick(() => {
+        expect(inlineButton.classList.contains('active')).toEqual(true);
+        expect(parallelButton.classList.contains('active')).toEqual(false);
 
-      it('should have Inline and Side-by-side buttons', () => {
-        expect(inlineButton).toBeDefined();
-        expect(parallelButton).toBeDefined();
+        done();
       });
+    });
 
-      it('should add active class to Inline button', done => {
-        vm.$store.state.diffs.diffViewType = 'inline';
+    it('should toggle active state of buttons when diff view type changed', done => {
+      vm.$store.state.diffs.diffViewType = 'parallel';
 
-        vm.$nextTick(() => {
-          expect(inlineButton.classList.contains('active')).toEqual(true);
-          expect(parallelButton.classList.contains('active')).toEqual(false);
+      vm.$nextTick(() => {
+        expect(inlineButton.classList.contains('active')).toEqual(false);
+        expect(parallelButton.classList.contains('active')).toEqual(true);
 
-          done();
-        });
+        done();
       });
+    });
 
-      it('should toggle active state of buttons when diff view type changed', done => {
-        vm.$store.state.diffs.diffViewType = 'parallel';
+    describe('clicking them', () => {
+      it('should toggle the diff view type', done => {
+        parallelButton.click();
 
         vm.$nextTick(() => {
           expect(inlineButton.classList.contains('active')).toEqual(false);
           expect(parallelButton.classList.contains('active')).toEqual(true);
 
-          done();
-        });
-      });
-
-      describe('clicking them', () => {
-        it('should toggle the diff view type', done => {
-          $(parallelButton).click();
+          inlineButton.click();
 
           vm.$nextTick(() => {
-            expect(inlineButton.classList.contains('active')).toEqual(false);
-            expect(parallelButton.classList.contains('active')).toEqual(true);
-
-            $(inlineButton).click();
-
-            vm.$nextTick(() => {
-              expect(inlineButton.classList.contains('active')).toEqual(true);
-              expect(parallelButton.classList.contains('active')).toEqual(false);
-              done();
-            });
+            expect(inlineButton.classList.contains('active')).toEqual(true);
+            expect(parallelButton.classList.contains('active')).toEqual(false);
+            done();
           });
         });
       });
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/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index eb8e49d81fe..79f33c5bc8a 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -18,7 +18,7 @@ describe('Rollback Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+    expect(component.$el).toHaveSpriteIcon('repeat');
   });
 
   it('Should render Rollback label when isLastDeployment is false', () => {
@@ -30,6 +30,6 @@ describe('Rollback Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+    expect(component.$el).toHaveSpriteIcon('redo');
   });
 });
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 3f95faf466a..4d9caa57566 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -4,7 +4,6 @@ import stopComp from '~/environments/components/environment_stop.vue';
 describe('Stop Component', () => {
   let StopComponent;
   let component;
-  const stopURL = '/stop';
 
   beforeEach(() => {
     StopComponent = Vue.extend(stopComp);
@@ -12,20 +11,13 @@ describe('Stop Component', () => {
 
     component = new StopComponent({
       propsData: {
-        stopUrl: stopURL,
+        environment: {},
       },
     }).$mount();
   });
 
-  describe('computed', () => {
-    it('title', () => {
-      expect(component.title).toEqual('Stop');
-    });
-  });
-
   it('should render a button to stop the environment', () => {
     expect(component.$el.tagName).toEqual('BUTTON');
-    expect(component.$el.getAttribute('data-original-title')).toEqual('Stop');
-    expect(component.$el.getAttribute('aria-label')).toEqual('Stop');
+    expect(component.$el.getAttribute('data-original-title')).toEqual('Stop environment');
   });
 });
diff --git a/spec/javascripts/fixtures/commit.rb b/spec/javascripts/fixtures/commit.rb
index 351db6ba184..24ab8159a18 100644
--- a/spec/javascripts/fixtures/commit.rb
+++ b/spec/javascripts/fixtures/commit.rb
@@ -14,7 +14,7 @@ describe Projects::CommitController, '(JavaScript fixtures)', type: :controller
   end
 
   before do
-    project.add_master(user)
+    project.add_maintainer(user)
     sign_in(user)
   end
 
diff --git a/spec/javascripts/fixtures/groups.rb b/spec/javascripts/fixtures/groups.rb
index 35be52fbf97..a2035ceae15 100644
--- a/spec/javascripts/fixtures/groups.rb
+++ b/spec/javascripts/fixtures/groups.rb
@@ -13,7 +13,7 @@ describe 'Groups (JavaScript fixtures)', type: :controller do
   end
 
   before do
-    group.add_master(admin)
+    group.add_maintainer(admin)
     sign_in(admin)
   end
 
diff --git a/spec/javascripts/fixtures/projects.rb b/spec/javascripts/fixtures/projects.rb
index e8865b04874..57c78182abc 100644
--- a/spec/javascripts/fixtures/projects.rb
+++ b/spec/javascripts/fixtures/projects.rb
@@ -17,7 +17,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
   end
 
   before do
-    project.add_master(admin)
+    project.add_maintainer(admin)
     sign_in(admin)
   end
 
diff --git a/spec/javascripts/helpers/wait_for_promises.js b/spec/javascripts/helpers/wait_for_promises.js
new file mode 100644
index 00000000000..1d2b53fc770
--- /dev/null
+++ b/spec/javascripts/helpers/wait_for_promises.js
@@ -0,0 +1 @@
+export default () => new Promise(resolve => requestAnimationFrame(resolve));
diff --git a/spec/javascripts/issuable_time_tracker_spec.js b/spec/javascripts/issuable_time_tracker_spec.js
deleted file mode 100644
index 5add150f874..00000000000
--- a/spec/javascripts/issuable_time_tracker_spec.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/* eslint-disable no-unused-vars, func-call-spacing, no-spaced-func, semi, quotes, space-infix-ops, max-len */
-
-import $ from 'jquery';
-import Vue from 'vue';
-
-import timeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
-
-function initTimeTrackingComponent(opts) {
-  setFixtures(`
-    <div>
-      <div id="mock-container"></div>
-    </div>
-  `);
-
-  this.initialData = {
-    time_estimate: opts.timeEstimate,
-    time_spent: opts.timeSpent,
-    human_time_estimate: opts.timeEstimateHumanReadable,
-    human_time_spent: opts.timeSpentHumanReadable,
-    rootPath: '/',
-  };
-
-  const TimeTrackingComponent = Vue.extend(timeTracker);
-  this.timeTracker = new TimeTrackingComponent({
-    el: '#mock-container',
-    propsData: this.initialData,
-  });
-}
-
-describe('Issuable Time Tracker', function() {
-  describe('Initialization', function() {
-    beforeEach(function() {
-      initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
-    });
-
-    it('should return something defined', function() {
-      expect(this.timeTracker).toBeDefined();
-    });
-
-    it ('should correctly set timeEstimate', function(done) {
-      Vue.nextTick(() => {
-        expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate);
-        done();
-      });
-    });
-    it ('should correctly set time_spent', function(done) {
-      Vue.nextTick(() => {
-        expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent);
-        done();
-      });
-    });
-  });
-
-  describe('Content Display', function() {
-    describe('Panes', function() {
-      describe('Comparison pane', function() {
-        beforeEach(function() {
-          initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
-        });
-
-        it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) {
-          Vue.nextTick(() => {
-            const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane');
-            expect(this.timeTracker.showComparisonState).toBe(true);
-            done();
-          });
-        });
-
-        describe('Remaining meter', function() {
-          it('should display the remaining meter with the correct width', function(done) {
-            Vue.nextTick(() => {
-              const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
-              const correctWidth = '5%';
-
-              expect(meterWidth).toBe(correctWidth);
-              done();
-            })
-          });
-
-          it('should display the remaining meter with the correct background color when within estimate', function(done) {
-            Vue.nextTick(() => {
-              const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill');
-              expect(styledMeter.length).toBe(1);
-              done()
-            });
-          });
-
-          it('should display the remaining meter with the correct background color when over estimate', function(done) {
-            this.timeTracker.time_estimate = 100000;
-            this.timeTracker.time_spent = 20000000;
-            Vue.nextTick(() => {
-              const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill');
-              expect(styledMeter.length).toBe(1);
-              done();
-            });
-          });
-        });
-      });
-
-      describe("Estimate only pane", function() {
-        beforeEach(function() {
-          initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' });
-        });
-
-        it('should display the human readable version of time estimated', function(done) {
-          Vue.nextTick(() => {
-            const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText;
-            const correctText = 'Estimated: 2h 46m';
-
-            expect(estimateText).toBe(correctText);
-            done();
-          });
-        });
-      });
-
-      describe('Spent only pane', function() {
-        beforeEach(function() {
-          initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
-        });
-
-        it('should display the human readable version of time spent', function(done) {
-          Vue.nextTick(() => {
-            const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText;
-            const correctText = 'Spent: 1h 23m';
-
-            expect(spentText).toBe(correctText);
-            done();
-          });
-        });
-      });
-
-      describe('No time tracking pane', function() {
-        beforeEach(function() {
-          initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
-        });
-
-        it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', function(done) {
-          Vue.nextTick(() => {
-            const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane');
-            const noTrackingText =$noTrackingPane.innerText;
-            const correctText = 'No estimate or time spent';
-
-            expect(this.timeTracker.showNoTimeTrackingState).toBe(true);
-            expect($noTrackingPane).toBeVisible();
-            expect(noTrackingText).toBe(correctText);
-            done();
-          });
-        });
-      });
-
-      describe("Help pane", function() {
-        beforeEach(function() {
-          initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 });
-        });
-
-        it('should not show the "Help" pane by default', function(done) {
-          Vue.nextTick(() => {
-            const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
-
-            expect(this.timeTracker.showHelpState).toBe(false);
-            expect($helpPane).toBeNull();
-            done();
-          });
-        });
-
-        it('should show the "Help" pane when help button is clicked', function(done) {
-          Vue.nextTick(() => {
-            $(this.timeTracker.$el).find('.help-button').click();
-
-            setTimeout(() => {
-              const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
-              expect(this.timeTracker.showHelpState).toBe(true);
-              expect($helpPane).toBeVisible();
-              done();
-            }, 10);
-          });
-        });
-
-        it('should not show the "Help" pane when help button is clicked and then closed', function(done) {
-          Vue.nextTick(() => {
-            $(this.timeTracker.$el).find('.help-button').click();
-
-            setTimeout(() => {
-
-              $(this.timeTracker.$el).find('.close-help-button').click();
-
-              setTimeout(() => {
-                const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
-
-                expect(this.timeTracker.showHelpState).toBe(false);
-                expect($helpPane).toBeNull();
-
-                done();
-              }, 1000);
-            }, 1000);
-          });
-        });
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/job_spec.js b/spec/javascripts/job_spec.js
index 79e375aa02e..2fcb5566ebc 100644
--- a/spec/javascripts/job_spec.js
+++ b/spec/javascripts/job_spec.js
@@ -5,6 +5,7 @@ import { numberToHumanSize } from '~/lib/utils/number_utils';
 import '~/lib/utils/datetime_utility';
 import Job from '~/job';
 import '~/breakpoints';
+import waitForPromises from 'spec/helpers/wait_for_promises';
 
 describe('Job', () => {
   const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;
@@ -12,10 +13,6 @@ describe('Job', () => {
   let response;
   let job;
 
-  function waitForPromise() {
-    return new Promise(resolve => requestAnimationFrame(resolve));
-  }
-
   preloadFixtures('builds/build-with-artifacts.html.raw');
 
   beforeEach(() => {
@@ -49,7 +46,7 @@ describe('Job', () => {
       beforeEach(function (done) {
         job = new Job();
 
-        waitForPromise()
+        waitForPromises()
           .then(done)
           .catch(done.fail);
       });
@@ -93,7 +90,7 @@ describe('Job', () => {
 
         job = new Job();
 
-        waitForPromise()
+        waitForPromises()
           .then(() => {
             expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
             expect(job.state).toBe('newstate');
@@ -107,7 +104,7 @@ describe('Job', () => {
             };
           })
           .then(() => jasmine.clock().tick(4001))
-          .then(waitForPromise)
+          .then(waitForPromises)
           .then(() => {
             expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
             expect(job.state).toBe('finalstate');
@@ -126,7 +123,7 @@ describe('Job', () => {
 
         job = new Job();
 
-        waitForPromise()
+        waitForPromises()
           .then(() => {
             expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
 
@@ -137,7 +134,7 @@ describe('Job', () => {
             };
           })
           .then(() => jasmine.clock().tick(4001))
-          .then(waitForPromise)
+          .then(waitForPromises)
           .then(() => {
             expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
             expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
@@ -160,7 +157,7 @@ describe('Job', () => {
 
           job = new Job();
 
-          waitForPromise()
+          waitForPromises()
             .then(() => {
               expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
             })
@@ -181,7 +178,7 @@ describe('Job', () => {
 
           job = new Job();
 
-          waitForPromise()
+          waitForPromises()
             .then(() => {
               expect(
                 document.querySelector('.js-truncated-info-size').textContent.trim(),
@@ -203,7 +200,7 @@ describe('Job', () => {
 
           job = new Job();
 
-          waitForPromise()
+          waitForPromises()
             .then(() => {
               expect(
                 document.querySelector('.js-truncated-info-size').textContent.trim(),
@@ -219,7 +216,7 @@ describe('Job', () => {
               };
             })
             .then(() => jasmine.clock().tick(4001))
-            .then(waitForPromise)
+            .then(waitForPromises)
             .then(() => {
               expect(
                 document.querySelector('.js-truncated-info-size').textContent.trim(),
@@ -258,7 +255,7 @@ describe('Job', () => {
 
           job = new Job();
 
-          waitForPromise()
+          waitForPromises()
             .then(() => {
               expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
             })
@@ -280,7 +277,7 @@ describe('Job', () => {
 
         job = new Job();
 
-        waitForPromise()
+        waitForPromises()
           .then(done)
           .catch(done.fail);
       });
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 });
diff --git a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
new file mode 100644
index 00000000000..b58de607ece
--- /dev/null
+++ b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
@@ -0,0 +1,243 @@
+import $ from 'jquery';
+import Vue from 'vue';
+
+import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('Issuable Time Tracker', () => {
+  let initialData;
+  let vm;
+
+  const initTimeTrackingComponent = opts => {
+    setFixtures(`
+    <div>
+      <div id="mock-container"></div>
+    </div>
+  `);
+
+    initialData = {
+      time_estimate: opts.timeEstimate,
+      time_spent: opts.timeSpent,
+      human_time_estimate: opts.timeEstimateHumanReadable,
+      human_time_spent: opts.timeSpentHumanReadable,
+      rootPath: '/',
+    };
+
+    const TimeTrackingComponent = Vue.extend({
+      ...TimeTracker,
+      components: {
+        ...TimeTracker.components,
+        transition: {
+          // disable animations
+          template: '<div><slot></slot></div>',
+        },
+      },
+    });
+    vm = mountComponent(TimeTrackingComponent, initialData, '#mock-container');
+  };
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('Initialization', () => {
+    beforeEach(() => {
+      initTimeTrackingComponent({
+        timeEstimate: 100000,
+        timeSpent: 5000,
+        timeEstimateHumanReadable: '2h 46m',
+        timeSpentHumanReadable: '1h 23m',
+      });
+    });
+
+    it('should return something defined', () => {
+      expect(vm).toBeDefined();
+    });
+
+    it('should correctly set timeEstimate', done => {
+      Vue.nextTick(() => {
+        expect(vm.timeEstimate).toBe(initialData.time_estimate);
+        done();
+      });
+    });
+
+    it('should correctly set time_spent', done => {
+      Vue.nextTick(() => {
+        expect(vm.timeSpent).toBe(initialData.time_spent);
+        done();
+      });
+    });
+  });
+
+  describe('Content Display', () => {
+    describe('Panes', () => {
+      describe('Comparison pane', () => {
+        beforeEach(() => {
+          initTimeTrackingComponent({
+            timeEstimate: 100000,
+            timeSpent: 5000,
+            timeEstimateHumanReadable: '',
+            timeSpentHumanReadable: '',
+          });
+        });
+
+        it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', done => {
+          Vue.nextTick(() => {
+            expect(vm.showComparisonState).toBe(true);
+            const $comparisonPane = vm.$el.querySelector('.time-tracking-comparison-pane');
+            expect($comparisonPane).toBeVisible();
+            done();
+          });
+        });
+
+        describe('Remaining meter', () => {
+          it('should display the remaining meter with the correct width', done => {
+            Vue.nextTick(() => {
+              const meterWidth = vm.$el.querySelector('.time-tracking-comparison-pane .meter-fill')
+                .style.width;
+              const correctWidth = '5%';
+
+              expect(meterWidth).toBe(correctWidth);
+              done();
+            });
+          });
+
+          it('should display the remaining meter with the correct background color when within estimate', done => {
+            Vue.nextTick(() => {
+              const styledMeter = $(vm.$el).find(
+                '.time-tracking-comparison-pane .within_estimate .meter-fill',
+              );
+              expect(styledMeter.length).toBe(1);
+              done();
+            });
+          });
+
+          it('should display the remaining meter with the correct background color when over estimate', done => {
+            vm.time_estimate = 100000;
+            vm.time_spent = 20000000;
+            Vue.nextTick(() => {
+              const styledMeter = $(vm.$el).find(
+                '.time-tracking-comparison-pane .over_estimate .meter-fill',
+              );
+              expect(styledMeter.length).toBe(1);
+              done();
+            });
+          });
+        });
+      });
+
+      describe('Estimate only pane', () => {
+        beforeEach(() => {
+          initTimeTrackingComponent({
+            timeEstimate: 100000,
+            timeSpent: 0,
+            timeEstimateHumanReadable: '2h 46m',
+            timeSpentHumanReadable: '',
+          });
+        });
+
+        it('should display the human readable version of time estimated', done => {
+          Vue.nextTick(() => {
+            const estimateText = vm.$el.querySelector('.time-tracking-estimate-only-pane')
+              .innerText;
+            const correctText = 'Estimated: 2h 46m';
+
+            expect(estimateText).toBe(correctText);
+            done();
+          });
+        });
+      });
+
+      describe('Spent only pane', () => {
+        beforeEach(() => {
+          initTimeTrackingComponent({
+            timeEstimate: 0,
+            timeSpent: 5000,
+            timeEstimateHumanReadable: '2h 46m',
+            timeSpentHumanReadable: '1h 23m',
+          });
+        });
+
+        it('should display the human readable version of time spent', done => {
+          Vue.nextTick(() => {
+            const spentText = vm.$el.querySelector('.time-tracking-spend-only-pane').innerText;
+            const correctText = 'Spent: 1h 23m';
+
+            expect(spentText).toBe(correctText);
+            done();
+          });
+        });
+      });
+
+      describe('No time tracking pane', () => {
+        beforeEach(() => {
+          initTimeTrackingComponent({
+            timeEstimate: 0,
+            timeSpent: 0,
+            timeEstimateHumanReadable: '',
+            timeSpentHumanReadable: '',
+          });
+        });
+
+        it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', done => {
+          Vue.nextTick(() => {
+            const $noTrackingPane = vm.$el.querySelector('.time-tracking-no-tracking-pane');
+            const noTrackingText = $noTrackingPane.innerText;
+            const correctText = 'No estimate or time spent';
+
+            expect(vm.showNoTimeTrackingState).toBe(true);
+            expect($noTrackingPane).toBeVisible();
+            expect(noTrackingText).toBe(correctText);
+            done();
+          });
+        });
+      });
+
+      describe('Help pane', () => {
+        const helpButton = () => vm.$el.querySelector('.help-button');
+        const closeHelpButton = () => vm.$el.querySelector('.close-help-button');
+        const helpPane = () => vm.$el.querySelector('.time-tracking-help-state');
+
+        beforeEach(done => {
+          initTimeTrackingComponent({ timeEstimate: 0, timeSpent: 0 });
+
+          Vue.nextTick()
+            .then(done)
+            .catch(done.fail);
+        });
+
+        it('should not show the "Help" pane by default', () => {
+          expect(vm.showHelpState).toBe(false);
+          expect(helpPane()).toBeNull();
+        });
+
+        it('should show the "Help" pane when help button is clicked', done => {
+          helpButton().click();
+
+          Vue.nextTick()
+            .then(() => {
+              expect(vm.showHelpState).toBe(true);
+              expect(helpPane()).toBeVisible();
+            })
+            .then(done)
+            .catch(done.fail);
+        });
+
+        it('should not show the "Help" pane when help button is clicked and then closed', done => {
+          helpButton().click();
+
+          Vue.nextTick()
+            .then(() => closeHelpButton().click())
+            .then(() => Vue.nextTick())
+            .then(() => {
+              expect(vm.showHelpState).toBe(false);
+              expect(helpPane()).toBeNull();
+            })
+            .then(done)
+            .catch(done.fail);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/sidebar/todo_spec.js b/spec/javascripts/sidebar/todo_spec.js
deleted file mode 100644
index a929b804a29..00000000000
--- a/spec/javascripts/sidebar/todo_spec.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import Vue from 'vue';
-
-import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const createComponent = ({
-  issuableId = 1,
-  issuableType = 'epic',
-  isTodo,
-  isActionActive,
-  collapsed,
-}) => {
-  const Component = Vue.extend(SidebarTodos);
-
-  return mountComponent(Component, {
-    issuableId,
-    issuableType,
-    isTodo,
-    isActionActive,
-    collapsed,
-  });
-};
-
-describe('SidebarTodo', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent({});
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('buttonClasses', () => {
-      it('returns todo button classes for when `collapsed` prop is `false`', () => {
-        expect(vm.buttonClasses).toBe('btn btn-default btn-todo issuable-header-btn float-right');
-      });
-
-      it('returns todo button classes for when `collapsed` prop is `true`', done => {
-        vm.collapsed = true;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.buttonClasses).toBe('btn-blank btn-todo sidebar-collapsed-icon dont-change-state');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-
-    describe('buttonLabel', () => {
-      it('returns todo button text for marking todo as done when `isTodo` prop is `true`', () => {
-        expect(vm.buttonLabel).toBe('Mark todo as done');
-      });
-
-      it('returns todo button text for add todo when `isTodo` prop is `false`', done => {
-        vm.isTodo = false;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.buttonLabel).toBe('Add todo');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-
-    describe('collapsedButtonIconClasses', () => {
-      it('returns collapsed button icon class when `isTodo` prop is `true`', () => {
-        expect(vm.collapsedButtonIconClasses).toBe('todo-undone');
-      });
-
-      it('returns empty string when `isTodo` prop is `false`', done => {
-        vm.isTodo = false;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.collapsedButtonIconClasses).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-
-    describe('collapsedButtonIcon', () => {
-      it('returns button icon name when `isTodo` prop is `true`', () => {
-        expect(vm.collapsedButtonIcon).toBe('todo-done');
-      });
-
-      it('returns button icon name when `isTodo` prop is `false`', done => {
-        vm.isTodo = false;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.collapsedButtonIcon).toBe('todo-add');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('handleButtonClick', () => {
-      it('emits `toggleTodo` event on component', () => {
-        spyOn(vm, '$emit');
-        vm.handleButtonClick();
-        expect(vm.$emit).toHaveBeenCalledWith('toggleTodo');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element', () => {
-      const dataAttributes = {
-        issuableId: '1',
-        issuableType: 'epic',
-        originalTitle: 'Mark todo as done',
-        placement: 'left',
-        container: 'body',
-        boundary: 'viewport',
-      };
-      expect(vm.$el.nodeName).toBe('BUTTON');
-
-      const elDataAttrs = vm.$el.dataset;
-      Object.keys(elDataAttrs).forEach((attr) => {
-        expect(elDataAttrs[attr]).toBe(dataAttributes[attr]);
-      });
-    });
-
-    it('renders button label element when `collapsed` prop is `false`', () => {
-      const buttonLabelEl = vm.$el.querySelector('span.issuable-todo-inner');
-      expect(buttonLabelEl).not.toBeNull();
-      expect(buttonLabelEl.innerText.trim()).toBe('Mark todo as done');
-    });
-
-    it('renders button icon when `collapsed` prop is `true`', done => {
-      vm.collapsed = true;
-      Vue.nextTick()
-        .then(() => {
-          const buttonIconEl = vm.$el.querySelector('svg');
-          expect(buttonIconEl).not.toBeNull();
-          expect(buttonIconEl.querySelector('use').getAttribute('xlink:href')).toContain('todo-done');
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('renders loading icon when `isActionActive` prop is true', done => {
-      vm.isActionActive = true;
-      Vue.nextTick()
-        .then(() => {
-          const loadingEl = vm.$el.querySelector('span.loading-container');
-          expect(loadingEl).not.toBeNull();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});
diff --git a/spec/javascripts/smart_interval_spec.js b/spec/javascripts/smart_interval_spec.js
index 60153672214..d9b6dd1d487 100644
--- a/spec/javascripts/smart_interval_spec.js
+++ b/spec/javascripts/smart_interval_spec.js
@@ -1,12 +1,12 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import SmartInterval from '~/smart_interval';
+import waitForPromises from 'spec/helpers/wait_for_promises';
 
 describe('SmartInterval', function () {
   const DEFAULT_MAX_INTERVAL = 100;
   const DEFAULT_STARTING_INTERVAL = 5;
   const DEFAULT_SHORT_TIMEOUT = 75;
-  const DEFAULT_LONG_TIMEOUT = 1000;
   const DEFAULT_INCREMENT_FACTOR = 2;
 
   function createDefaultSmartInterval(config) {
@@ -27,52 +27,65 @@ describe('SmartInterval', function () {
     return new SmartInterval(defaultParams);
   }
 
+  beforeEach(() => {
+    jasmine.clock().install();
+  });
+
+  afterEach(() => {
+    jasmine.clock().uninstall();
+  });
+
   describe('Increment Interval', function () {
-    beforeEach(function () {
-      this.smartInterval = createDefaultSmartInterval();
-    });
+    it('should increment the interval delay', (done) => {
+      const smartInterval = createDefaultSmartInterval();
 
-    it('should increment the interval delay', function (done) {
-      const interval = this.smartInterval;
-      setTimeout(() => {
-        const intervalConfig = this.smartInterval.cfg;
-        const iterationCount = 4;
-        const maxIntervalAfterIterations = intervalConfig.startingInterval *
-          (intervalConfig.incrementByFactorOf ** (iterationCount - 1)); // 40
-        const currentInterval = interval.getCurrentInterval();
-
-        // Provide some flexibility for performance of testing environment
-        expect(currentInterval).toBeGreaterThan(intervalConfig.startingInterval);
-        expect(currentInterval <= maxIntervalAfterIterations).toBeTruthy();
-
-        done();
-      }, DEFAULT_SHORT_TIMEOUT); // 4 iterations, increment by 2x = (5 + 10 + 20 + 40)
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
+
+      waitForPromises()
+        .then(() => {
+          const intervalConfig = smartInterval.cfg;
+          const iterationCount = 4;
+          const maxIntervalAfterIterations = intervalConfig.startingInterval *
+            (intervalConfig.incrementByFactorOf ** iterationCount);
+          const currentInterval = smartInterval.getCurrentInterval();
+
+          // Provide some flexibility for performance of testing environment
+          expect(currentInterval).toBeGreaterThan(intervalConfig.startingInterval);
+          expect(currentInterval).toBeLessThanOrEqual(maxIntervalAfterIterations);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('should not increment past maxInterval', function (done) {
-      const interval = this.smartInterval;
+    it('should not increment past maxInterval', (done) => {
+      const smartInterval = createDefaultSmartInterval({ maxInterval: DEFAULT_STARTING_INTERVAL });
 
-      setTimeout(() => {
-        const currentInterval = interval.getCurrentInterval();
-        expect(currentInterval).toBe(interval.cfg.maxInterval);
+      jasmine.clock().tick(DEFAULT_STARTING_INTERVAL);
+      jasmine.clock().tick(DEFAULT_STARTING_INTERVAL * DEFAULT_INCREMENT_FACTOR);
 
-        done();
-      }, DEFAULT_LONG_TIMEOUT);
+      waitForPromises()
+        .then(() => {
+          const currentInterval = smartInterval.getCurrentInterval();
+          expect(currentInterval).toBe(smartInterval.cfg.maxInterval);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('does not increment while waiting for callback', function () {
-      jasmine.clock().install();
-
+    it('does not increment while waiting for callback', done => {
       const smartInterval = createDefaultSmartInterval({
         callback: () => new Promise($.noop),
       });
 
       jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
 
-      const oneInterval = smartInterval.cfg.startingInterval * DEFAULT_INCREMENT_FACTOR;
-      expect(smartInterval.getCurrentInterval()).toEqual(oneInterval);
-
-      jasmine.clock().uninstall();
+      waitForPromises()
+        .then(() => {
+          const oneInterval = smartInterval.cfg.startingInterval * DEFAULT_INCREMENT_FACTOR;
+          expect(smartInterval.getCurrentInterval()).toEqual(oneInterval);
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
@@ -84,34 +97,39 @@ describe('SmartInterval', function () {
     it('should cancel an interval', function (done) {
       const interval = this.smartInterval;
 
-      setTimeout(() => {
-        interval.cancel();
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
 
-        const { intervalId } = interval.state;
-        const currentInterval = interval.getCurrentInterval();
-        const intervalLowerLimit = interval.cfg.startingInterval;
+      interval.cancel();
 
-        expect(intervalId).toBeUndefined();
-        expect(currentInterval).toBe(intervalLowerLimit);
+      waitForPromises()
+        .then(() => {
+          const { intervalId } = interval.state;
+          const currentInterval = interval.getCurrentInterval();
+          const intervalLowerLimit = interval.cfg.startingInterval;
 
-        done();
-      }, DEFAULT_SHORT_TIMEOUT);
+          expect(intervalId).toBeUndefined();
+          expect(currentInterval).toBe(intervalLowerLimit);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('should resume an interval', function (done) {
       const interval = this.smartInterval;
 
-      setTimeout(() => {
-        interval.cancel();
-
-        interval.resume();
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
 
-        const { intervalId } = interval.state;
+      interval.cancel();
 
-        expect(intervalId).toBeTruthy();
+      interval.resume();
 
-        done();
-      }, DEFAULT_SHORT_TIMEOUT);
+      waitForPromises()
+        .then(() => {
+          const { intervalId } = interval.state;
+          expect(intervalId).toBeTruthy();
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
@@ -126,64 +144,79 @@ describe('SmartInterval', function () {
     it('should pause when page is not visible', function (done) {
       const interval = this.smartInterval;
 
-      setTimeout(() => {
-        expect(interval.state.intervalId).toBeTruthy();
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
+
+      waitForPromises()
+        .then(() => {
+          expect(interval.state.intervalId).toBeTruthy();
 
-        // simulates triggering of visibilitychange event
-        interval.handleVisibilityChange({ target: { visibilityState: 'hidden' } });
+          // simulates triggering of visibilitychange event
+          interval.handleVisibilityChange({ target: { visibilityState: 'hidden' } });
 
-        expect(interval.state.intervalId).toBeUndefined();
-        done();
-      }, DEFAULT_SHORT_TIMEOUT);
+          expect(interval.state.intervalId).toBeUndefined();
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('should change to the hidden interval when page is not visible', function (done) {
+    it('should change to the hidden interval when page is not visible', done => {
       const HIDDEN_INTERVAL = 1500;
       const interval = createDefaultSmartInterval({ hiddenInterval: HIDDEN_INTERVAL });
 
-      setTimeout(() => {
-        expect(interval.state.intervalId).toBeTruthy();
-        expect(interval.getCurrentInterval() >= DEFAULT_STARTING_INTERVAL &&
-          interval.getCurrentInterval() <= DEFAULT_MAX_INTERVAL).toBeTruthy();
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
+
+      waitForPromises()
+        .then(() => {
+          expect(interval.state.intervalId).toBeTruthy();
+          expect(interval.getCurrentInterval() >= DEFAULT_STARTING_INTERVAL &&
+            interval.getCurrentInterval() <= DEFAULT_MAX_INTERVAL).toBeTruthy();
 
-        // simulates triggering of visibilitychange event
-        interval.handleVisibilityChange({ target: { visibilityState: 'hidden' } });
+          // simulates triggering of visibilitychange event
+          interval.handleVisibilityChange({ target: { visibilityState: 'hidden' } });
 
-        expect(interval.state.intervalId).toBeTruthy();
-        expect(interval.getCurrentInterval()).toBe(HIDDEN_INTERVAL);
-        done();
-      }, DEFAULT_SHORT_TIMEOUT);
+          expect(interval.state.intervalId).toBeTruthy();
+          expect(interval.getCurrentInterval()).toBe(HIDDEN_INTERVAL);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('should resume when page is becomes visible at the previous interval', function (done) {
       const interval = this.smartInterval;
 
-      setTimeout(() => {
-        expect(interval.state.intervalId).toBeTruthy();
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
 
-        // simulates triggering of visibilitychange event
-        interval.handleVisibilityChange({ target: { visibilityState: 'hidden' } });
+      waitForPromises()
+        .then(() => {
+          expect(interval.state.intervalId).toBeTruthy();
 
-        expect(interval.state.intervalId).toBeUndefined();
+          // simulates triggering of visibilitychange event
+          interval.handleVisibilityChange({ target: { visibilityState: 'hidden' } });
 
-        // simulates triggering of visibilitychange event
-        interval.handleVisibilityChange({ target: { visibilityState: 'visible' } });
+          expect(interval.state.intervalId).toBeUndefined();
 
-        expect(interval.state.intervalId).toBeTruthy();
+          // simulates triggering of visibilitychange event
+          interval.handleVisibilityChange({ target: { visibilityState: 'visible' } });
 
-        done();
-      }, DEFAULT_SHORT_TIMEOUT);
+          expect(interval.state.intervalId).toBeTruthy();
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('should cancel on page unload', function (done) {
       const interval = this.smartInterval;
 
-      setTimeout(() => {
-        $(document).triggerHandler('beforeunload');
-        expect(interval.state.intervalId).toBeUndefined();
-        expect(interval.getCurrentInterval()).toBe(interval.cfg.startingInterval);
-        done();
-      }, DEFAULT_SHORT_TIMEOUT);
+      jasmine.clock().tick(DEFAULT_SHORT_TIMEOUT);
+
+      waitForPromises()
+        .then(() => {
+          $(document).triggerHandler('beforeunload');
+          expect(interval.state.intervalId).toBeUndefined();
+          expect(interval.getCurrentInterval()).toBe(interval.cfg.startingInterval);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('should execute callback before first interval', function () {