Changes tab VUE refactoring

17 files changed, 451 insertions, 262 deletions

diff --git a/spec/javascripts/notes/components/comment_form_spec.js b/spec/javascripts/notes/components/comment_form_spec.js
index a7d1e4331eb..155c91dcc46 100644
--- a/spec/javascripts/notes/components/comment_form_spec.js
+++ b/spec/javascripts/notes/components/comment_form_spec.js
@@ -1,23 +1,27 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import Autosize from 'autosize';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import CommentForm from '~/notes/components/comment_form.vue';
+import * as constants from '~/notes/constants';
 import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data';
 import { keyboardDownEvent } from '../../issue_show/helpers';
 
 describe('issue_comment_form component', () => {
+  let store;
   let vm;
   const Component = Vue.extend(CommentForm);
   let mountComponent;
 
   beforeEach(() => {
-    mountComponent = (noteableType = 'issue') => new Component({
-      propsData: {
-        noteableType,
-      },
-      store,
-    }).$mount();
+    store = createStore();
+    mountComponent = (noteableType = 'issue') =>
+      new Component({
+        propsData: {
+          noteableType,
+        },
+        store,
+      }).$mount();
   });
 
   afterEach(() => {
@@ -34,7 +38,9 @@ describe('issue_comment_form component', () => {
     });
 
     it('should render user avatar with link', () => {
-      expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
+      expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(
+        userDataMock.path,
+      );
     });
 
     describe('handleSave', () => {
@@ -60,7 +66,7 @@ describe('issue_comment_form component', () => {
         expect(vm.toggleIssueState).toHaveBeenCalled();
       });
 
-      it('should disable action button whilst submitting', (done) => {
+      it('should disable action button whilst submitting', done => {
         const saveNotePromise = Promise.resolve();
         vm.note = 'hello world';
         spyOn(vm, 'saveNote').and.returnValue(saveNotePromise);
@@ -87,16 +93,18 @@ describe('issue_comment_form component', () => {
         ).toEqual('Write a comment or drag your files here…');
       });
 
-      it('should make textarea disabled while requesting', (done) => {
+      it('should make textarea disabled while requesting', done => {
         const $submitButton = $(vm.$el.querySelector('.js-comment-submit-button'));
         vm.note = 'hello world';
         spyOn(vm, 'stopPolling');
         spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
 
-        vm.$nextTick(() => { // Wait for vm.note change triggered. It should enable $submitButton.
+        vm.$nextTick(() => {
+          // Wait for vm.note change triggered. It should enable $submitButton.
           $submitButton.trigger('click');
 
-          vm.$nextTick(() => { // Wait for vm.isSubmitting triggered. It should disable textarea.
+          vm.$nextTick(() => {
+            // Wait for vm.isSubmitting triggered. It should disable textarea.
             expect(vm.$el.querySelector('.js-main-target-form textarea').disabled).toBeTruthy();
             done();
           });
@@ -105,21 +113,27 @@ describe('issue_comment_form component', () => {
 
       it('should support quick actions', () => {
         expect(
-          vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),
+          vm.$el
+            .querySelector('.js-main-target-form textarea')
+            .getAttribute('data-supports-quick-actions'),
         ).toEqual('true');
       });
 
       it('should link to markdown docs', () => {
         const { markdownDocsPath } = notesDataMock;
-        expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+        expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual(
+          'Markdown',
+        );
       });
 
       it('should link to quick actions docs', () => {
         const { quickActionsDocsPath } = notesDataMock;
-        expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
+        expect(
+          vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim(),
+        ).toEqual('quick actions');
       });
 
-      it('should resize textarea after note discarded', (done) => {
+      it('should resize textarea after note discarded', done => {
         spyOn(Autosize, 'update');
         spyOn(vm, 'discard').and.callThrough();
 
@@ -136,7 +150,9 @@ describe('issue_comment_form component', () => {
         it('should enter edit mode when arrow up is pressed', () => {
           spyOn(vm, 'editCurrentUserLastNote').and.callThrough();
           vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
-          vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(38, true));
+          vm.$el
+            .querySelector('.js-main-target-form textarea')
+            .dispatchEvent(keyboardDownEvent(38, true));
 
           expect(vm.editCurrentUserLastNote).toHaveBeenCalled();
         });
@@ -151,7 +167,9 @@ describe('issue_comment_form component', () => {
         it('should save note when cmd+enter is pressed', () => {
           spyOn(vm, 'handleSave').and.callThrough();
           vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
-          vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, true));
+          vm.$el
+            .querySelector('.js-main-target-form textarea')
+            .dispatchEvent(keyboardDownEvent(13, true));
 
           expect(vm.handleSave).toHaveBeenCalled();
         });
@@ -159,7 +177,9 @@ describe('issue_comment_form component', () => {
         it('should save note when ctrl+enter is pressed', () => {
           spyOn(vm, 'handleSave').and.callThrough();
           vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
-          vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, false, true));
+          vm.$el
+            .querySelector('.js-main-target-form textarea')
+            .dispatchEvent(keyboardDownEvent(13, false, true));
 
           expect(vm.handleSave).toHaveBeenCalled();
         });
@@ -168,41 +188,51 @@ describe('issue_comment_form component', () => {
 
     describe('actions', () => {
       it('should be possible to close the issue', () => {
-        expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close issue');
+        expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual(
+          'Close issue',
+        );
       });
 
       it('should render comment button as disabled', () => {
-        expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual('disabled');
+        expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual(
+          'disabled',
+        );
       });
 
-      it('should enable comment button if it has note', (done) => {
+      it('should enable comment button if it has note', done => {
         vm.note = 'Foo';
         Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual(null);
+          expect(
+            vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled'),
+          ).toEqual(null);
           done();
         });
       });
 
-      it('should update buttons texts when it has note', (done) => {
+      it('should update buttons texts when it has note', done => {
         vm.note = 'Foo';
         Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Comment & close issue');
+          expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual(
+            'Comment & close issue',
+          );
           expect(vm.$el.querySelector('.js-note-discard')).toBeDefined();
           done();
         });
       });
 
-      it('updates button text with noteable type', (done) => {
-        vm.noteableType = 'merge_request';
+      it('updates button text with noteable type', done => {
+        vm.noteableType = constants.MERGE_REQUEST_NOTEABLE_TYPE;
 
         Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close merge request');
+          expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual(
+            'Close merge request',
+          );
           done();
         });
       });
 
       describe('when clicking close/reopen button', () => {
-        it('should disable button and show a loading spinner', (done) => {
+        it('should disable button and show a loading spinner', done => {
           const toggleStateButton = vm.$el.querySelector('.js-action-button');
 
           toggleStateButton.click();
@@ -217,7 +247,7 @@ describe('issue_comment_form component', () => {
     });
 
     describe('issue is confidential', () => {
-      it('shows information warning', (done) => {
+      it('shows information warning', done => {
         store.dispatch('setNoteableData', Object.assign(noteableDataMock, { confidential: true }));
         Vue.nextTick(() => {
           expect(vm.$el.querySelector('.confidential-issue-warning')).toBeDefined();
@@ -237,7 +267,9 @@ describe('issue_comment_form component', () => {
     });
 
     it('should render signed out widget', () => {
-      expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
+      expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
+        'Please register or sign in to reply',
+      );
     });
 
     it('should not render submission form', () => {
diff --git a/spec/javascripts/notes/components/diff_file_header_spec.js b/spec/javascripts/notes/components/diff_file_header_spec.js
deleted file mode 100644
index ef6d513444a..00000000000
--- a/spec/javascripts/notes/components/diff_file_header_spec.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import Vue from 'vue';
-import DiffFileHeader from '~/notes/components/diff_file_header.vue';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const discussionFixture = 'merge_requests/diff_discussion.json';
-
-describe('diff_file_header', () => {
-  let vm;
-  const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
-  const diffFile = convertObjectPropsToCamelCase(diffDiscussionMock.diff_file);
-  const props = {
-    diffFile,
-  };
-  const Component = Vue.extend(DiffFileHeader);
-  const selectors = {
-    get copyButton() {
-      return vm.$el.querySelector('button[data-original-title="Copy file path to clipboard"]');
-    },
-    get fileName() {
-      return vm.$el.querySelector('.file-title-name');
-    },
-    get titleWrapper() {
-      return vm.$refs.titleWrapper;
-    },
-  };
-
-  describe('submodule', () => {
-    beforeEach(() => {
-      props.diffFile.submodule = true;
-      props.diffFile.submoduleLink = '<a href="/bha">Submodule</a>';
-
-      vm = mountComponent(Component, props);
-    });
-
-    it('shows submoduleLink', () => {
-      expect(selectors.fileName.innerHTML).toBe(props.diffFile.submoduleLink);
-    });
-
-    it('has button to copy blob path', () => {
-      expect(selectors.copyButton).toExist();
-      expect(selectors.copyButton.getAttribute('data-clipboard-text')).toBe(props.diffFile.submoduleLink);
-    });
-  });
-
-  describe('changed file', () => {
-    beforeEach(() => {
-      props.diffFile.submodule = false;
-      props.diffFile.discussionPath = 'some/discussion/id';
-
-      vm = mountComponent(Component, props);
-    });
-
-    it('shows file type icon', () => {
-      expect(vm.$el.innerHTML).toContain('fa-file-text-o');
-    });
-
-    it('links to discussion path', () => {
-      expect(selectors.titleWrapper).toExist();
-      expect(selectors.titleWrapper.tagName).toBe('A');
-      expect(selectors.titleWrapper.getAttribute('href')).toBe(props.diffFile.discussionPath);
-    });
-
-    it('shows plain title if no link given', () => {
-      props.diffFile.discussionPath = undefined;
-      vm = mountComponent(Component, props);
-
-      expect(selectors.titleWrapper.tagName).not.toBe('A');
-      expect(selectors.titleWrapper.href).toBeFalsy();
-    });
-
-    it('has button to copy file path', () => {
-      expect(selectors.copyButton).toExist();
-      expect(selectors.copyButton.getAttribute('data-clipboard-text')).toBe(props.diffFile.filePath);
-    });
-
-    it('shows file mode change', (done) => {
-      vm.diffFile = {
-        ...props.diffFile,
-        modeChanged: true,
-        aMode: '100755',
-        bMode: '100644',
-      };
-
-      Vue.nextTick(() => {
-        expect(
-          vm.$refs.fileMode.textContent.trim(),
-        ).toBe('100755 → 100644');
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/notes/components/diff_with_note_spec.js b/spec/javascripts/notes/components/diff_with_note_spec.js
index f4ec7132dbd..239d7950907 100644
--- a/spec/javascripts/notes/components/diff_with_note_spec.js
+++ b/spec/javascripts/notes/components/diff_with_note_spec.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
 import DiffWithNote from '~/notes/components/diff_with_note.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import createStore from '~/notes/stores';
+import { mountComponentWithStore } from 'spec/helpers';
 
 const discussionFixture = 'merge_requests/diff_discussion.json';
 const imageDiscussionFixture = 'merge_requests/image_diff_discussion.json';
 
 describe('diff_with_note', () => {
+  let store;
   let vm;
   const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
   const diffDiscussion = convertObjectPropsToCamelCase(diffDiscussionMock);
@@ -29,9 +31,21 @@ describe('diff_with_note', () => {
     },
   };
 
+  beforeEach(() => {
+    store = createStore();
+    store.replaceState({
+      ...store.state,
+      notes: {
+        noteableData: {
+          current_user: {},
+        },
+      },
+    });
+  });
+
   describe('text diff', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, props);
+      vm = mountComponentWithStore(Component, { props, store });
     });
 
     it('shows text diff', () => {
@@ -55,7 +69,7 @@ describe('diff_with_note', () => {
     });
 
     it('shows image diff', () => {
-      vm = mountComponent(Component, props);
+      vm = mountComponentWithStore(Component, { props, store });
 
       expect(selectors.container).toHaveClass('js-image-file');
       expect(selectors.diffTable).not.toExist();
diff --git a/spec/javascripts/notes/components/discussion_counter_spec.js b/spec/javascripts/notes/components/discussion_counter_spec.js
new file mode 100644
index 00000000000..7b2302e6f47
--- /dev/null
+++ b/spec/javascripts/notes/components/discussion_counter_spec.js
@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import createStore from '~/notes/stores';
+import DiscussionCounter from '~/notes/components/discussion_counter.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
+
+describe('DiscussionCounter component', () => {
+  let store;
+  let vm;
+
+  beforeEach(() => {
+    window.mrTabs = {};
+
+    const Component = Vue.extend(DiscussionCounter);
+
+    store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = createComponentWithStore(Component, store);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('methods', () => {
+    describe('jumpToFirstUnresolvedDiscussion', () => {
+      it('expands unresolved discussion', () => {
+        spyOn(vm, 'expandDiscussion').and.stub();
+        const discussions = [
+          {
+            ...discussionMock,
+            id: discussionMock.id,
+            notes: [{ ...discussionMock.notes[0], resolved: true }],
+          },
+          {
+            ...discussionMock,
+            id: discussionMock.id + 1,
+            notes: [{ ...discussionMock.notes[0], resolved: false }],
+          },
+        ];
+        const firstDiscussionId = discussionMock.id + 1;
+        store.replaceState({
+          ...store.state,
+          discussions,
+        });
+        setFixtures(`
+          <div data-discussion-id="${firstDiscussionId}"></div>
+        `);
+
+        vm.jumpToFirstUnresolvedDiscussion();
+
+        expect(vm.expandDiscussion).toHaveBeenCalledWith({ discussionId: firstDiscussionId });
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/note_actions_spec.js b/spec/javascripts/notes/components/note_actions_spec.js
index c9e549d2096..52cc42cb53d 100644
--- a/spec/javascripts/notes/components/note_actions_spec.js
+++ b/spec/javascripts/notes/components/note_actions_spec.js
@@ -1,14 +1,16 @@
 import Vue from 'vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import noteActions from '~/notes/components/note_actions.vue';
 import { userDataMock } from '../mock_data';
 
 describe('issue_note_actions component', () => {
   let vm;
+  let store;
   let Component;
 
   beforeEach(() => {
     Component = Vue.extend(noteActions);
+    store = createStore();
   });
 
   afterEach(() => {
@@ -27,7 +29,9 @@ describe('issue_note_actions component', () => {
         canAwardEmoji: true,
         canReportAsAbuse: true,
         noteId: 539,
-        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
+        noteUrl: 'https://localhost:3000/group/project/merge_requests/1#note_1',
+        reportAbusePath:
+          '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
       };
 
       store.dispatch('setUserData', userDataMock);
@@ -74,7 +78,9 @@ describe('issue_note_actions component', () => {
         canAwardEmoji: false,
         canReportAsAbuse: false,
         noteId: 539,
-        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
+        noteUrl: 'https://localhost:3000/group/project/merge_requests/1#note_1',
+        reportAbusePath:
+          '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
       };
       vm = new Component({
         store,
diff --git a/spec/javascripts/notes/components/note_app_spec.js b/spec/javascripts/notes/components/note_app_spec.js
index d494c63ff11..7eb4d3aed29 100644
--- a/spec/javascripts/notes/components/note_app_spec.js
+++ b/spec/javascripts/notes/components/note_app_spec.js
@@ -3,7 +3,9 @@ import _ from 'underscore';
 import Vue from 'vue';
 import notesApp from '~/notes/components/notes_app.vue';
 import service from '~/notes/services/notes_service';
+import createStore from '~/notes/stores';
 import '~/behaviors/markdown/render_gfm';
+import { mountComponentWithStore } from 'spec/helpers';
 import * as mockData from '../mock_data';
 
 const vueMatchers = {
@@ -22,6 +24,7 @@ const vueMatchers = {
 describe('note_app', () => {
   let mountComponent;
   let vm;
+  let store;
 
   beforeEach(() => {
     jasmine.addMatchers(vueMatchers);
@@ -29,16 +32,18 @@ describe('note_app', () => {
 
     const IssueNotesApp = Vue.extend(notesApp);
 
-    mountComponent = (data) => {
+    store = createStore();
+    mountComponent = data => {
       const props = data || {
         noteableData: mockData.noteableDataMock,
         notesData: mockData.notesDataMock,
         userData: mockData.userDataMock,
       };
 
-      return new IssueNotesApp({
-        propsData: props,
-      }).$mount();
+      return mountComponentWithStore(IssueNotesApp, {
+        props,
+        store,
+      });
     };
   });
 
@@ -48,9 +53,11 @@ describe('note_app', () => {
 
   describe('set data', () => {
     const responseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 200,
-      }));
+      next(
+        request.respondWith(JSON.stringify([]), {
+          status: 200,
+        }),
+      );
     };
 
     beforeEach(() => {
@@ -74,8 +81,8 @@ describe('note_app', () => {
       expect(vm.$store.state.userData).toEqual(mockData.userDataMock);
     });
 
-    it('should fetch notes', () => {
-      expect(vm.$store.state.notes).toEqual([]);
+    it('should fetch discussions', () => {
+      expect(vm.$store.state.discussions).toEqual([]);
     });
   });
 
@@ -89,15 +96,20 @@ describe('note_app', () => {
       Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor);
     });
 
-    it('should render list of notes', (done) => {
-      const note = mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET['/gitlab-org/gitlab-ce/issues/26/discussions.json'][0].notes[0];
+    it('should render list of notes', done => {
+      const note =
+        mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET[
+          '/gitlab-org/gitlab-ce/issues/26/discussions.json'
+        ][0].notes[0];
 
       setTimeout(() => {
         expect(
           vm.$el.querySelector('.main-notes-list .note-header-author-name').textContent.trim(),
         ).toEqual(note.author.name);
 
-        expect(vm.$el.querySelector('.main-notes-list .note-text').innerHTML).toEqual(note.note_html);
+        expect(vm.$el.querySelector('.main-notes-list .note-text').innerHTML).toEqual(
+          note.note_html,
+        );
         done();
       }, 0);
     });
@@ -110,9 +122,9 @@ describe('note_app', () => {
     });
 
     it('should render form comment button as disabled', () => {
-      expect(
-        vm.$el.querySelector('.js-note-new-discussion').getAttribute('disabled'),
-      ).toEqual('disabled');
+      expect(vm.$el.querySelector('.js-note-new-discussion').getAttribute('disabled')).toEqual(
+        'disabled',
+      );
     });
   });
 
@@ -135,7 +147,7 @@ describe('note_app', () => {
 
   describe('update note', () => {
     describe('individual note', () => {
-      beforeEach((done) => {
+      beforeEach(done => {
         Vue.http.interceptors.push(mockData.individualNoteInterceptor);
         spyOn(service, 'updateNote').and.callThrough();
         vm = mountComponent();
@@ -156,7 +168,7 @@ describe('note_app', () => {
         expect(vm).toIncludeElement('.js-vue-issue-note-form');
       });
 
-      it('calls the service to update the note', (done) => {
+      it('calls the service to update the note', done => {
         vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
         vm.$el.querySelector('.js-vue-issue-save').click();
 
@@ -169,7 +181,7 @@ describe('note_app', () => {
     });
 
     describe('discussion note', () => {
-      beforeEach((done) => {
+      beforeEach(done => {
         Vue.http.interceptors.push(mockData.discussionNoteInterceptor);
         spyOn(service, 'updateNote').and.callThrough();
         vm = mountComponent();
@@ -191,7 +203,7 @@ describe('note_app', () => {
         expect(vm).toIncludeElement('.js-vue-issue-note-form');
       });
 
-      it('updates the note and resets the edit form', (done) => {
+      it('updates the note and resets the edit form', done => {
         vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
         vm.$el.querySelector('.js-vue-issue-save').click();
 
@@ -211,12 +223,16 @@ describe('note_app', () => {
 
     it('should render markdown docs url', () => {
       const { markdownDocsPath } = mockData.notesDataMock;
-      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual(
+        'Markdown',
+      );
     });
 
     it('should render quick action docs url', () => {
       const { quickActionsDocsPath } = mockData.notesDataMock;
-      expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
+      expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual(
+        'quick actions',
+      );
     });
   });
 
@@ -230,7 +246,7 @@ describe('note_app', () => {
       Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor);
     });
 
-    it('should render markdown docs url', (done) => {
+    it('should render markdown docs url', done => {
       setTimeout(() => {
         vm.$el.querySelector('.js-note-edit').click();
         const { markdownDocsPath } = mockData.notesDataMock;
@@ -244,15 +260,15 @@ describe('note_app', () => {
       }, 0);
     });
 
-    it('should not render quick actions docs url', (done) => {
+    it('should not render quick actions docs url', done => {
       setTimeout(() => {
         vm.$el.querySelector('.js-note-edit').click();
         const { quickActionsDocsPath } = mockData.notesDataMock;
 
         Vue.nextTick(() => {
-          expect(
-            vm.$el.querySelector(`.edit-note a[href="${quickActionsDocsPath}"]`),
-          ).toEqual(null);
+          expect(vm.$el.querySelector(`.edit-note a[href="${quickActionsDocsPath}"]`)).toEqual(
+            null,
+          );
           done();
         });
       }, 0);
diff --git a/spec/javascripts/notes/components/note_awards_list_spec.js b/spec/javascripts/notes/components/note_awards_list_spec.js
index 1c30d8691b1..9d98ba219da 100644
--- a/spec/javascripts/notes/components/note_awards_list_spec.js
+++ b/spec/javascripts/notes/components/note_awards_list_spec.js
@@ -1,15 +1,17 @@
 import Vue from 'vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import awardsNote from '~/notes/components/note_awards_list.vue';
 import { noteableDataMock, notesDataMock } from '../mock_data';
 
 describe('note_awards_list component', () => {
+  let store;
   let vm;
   let awardsMock;
 
   beforeEach(() => {
     const Component = Vue.extend(awardsNote);
 
+    store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
     awardsMock = [
@@ -41,7 +43,9 @@ describe('note_awards_list component', () => {
 
   it('should render awarded emojis', () => {
     expect(vm.$el.querySelector('.js-awards-block button [data-name="flag_tz"]')).toBeDefined();
-    expect(vm.$el.querySelector('.js-awards-block button [data-name="cartwheel_tone3"]')).toBeDefined();
+    expect(
+      vm.$el.querySelector('.js-awards-block button [data-name="cartwheel_tone3"]'),
+    ).toBeDefined();
   });
 
   it('should be possible to remove awarded emoji', () => {
diff --git a/spec/javascripts/notes/components/note_body_spec.js b/spec/javascripts/notes/components/note_body_spec.js
index 4e551496ff0..efad0785afe 100644
--- a/spec/javascripts/notes/components/note_body_spec.js
+++ b/spec/javascripts/notes/components/note_body_spec.js
@@ -1,15 +1,16 @@
-
 import Vue from 'vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import noteBody from '~/notes/components/note_body.vue';
 import { noteableDataMock, notesDataMock, note } from '../mock_data';
 
 describe('issue_note_body component', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
     const Component = Vue.extend(noteBody);
 
+    store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
@@ -37,7 +38,7 @@ describe('issue_note_body component', () => {
   });
 
   describe('isEditing', () => {
-    beforeEach((done) => {
+    beforeEach(done => {
       vm.isEditing = true;
       Vue.nextTick(done);
     });
diff --git a/spec/javascripts/notes/components/note_form_spec.js b/spec/javascripts/notes/components/note_form_spec.js
index 413d4f69434..95d400ab3df 100644
--- a/spec/javascripts/notes/components/note_form_spec.js
+++ b/spec/javascripts/notes/components/note_form_spec.js
@@ -1,16 +1,18 @@
 import Vue from 'vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import issueNoteForm from '~/notes/components/note_form.vue';
 import { noteableDataMock, notesDataMock } from '../mock_data';
 import { keyboardDownEvent } from '../../issue_show/helpers';
 
 describe('issue_note_form component', () => {
+  let store;
   let vm;
   let props;
 
   beforeEach(() => {
     const Component = Vue.extend(issueNoteForm);
 
+    store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
@@ -31,14 +33,18 @@ describe('issue_note_form component', () => {
   });
 
   describe('conflicts editing', () => {
-    it('should show conflict message if note changes outside the component', (done) => {
+    it('should show conflict message if note changes outside the component', done => {
       vm.isEditing = true;
       vm.noteBody = 'Foo';
-      const message = 'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
+      const message =
+        'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
 
       Vue.nextTick(() => {
         expect(
-          vm.$el.querySelector('.js-conflict-edit-warning').textContent.replace(/\s+/g, ' ').trim(),
+          vm.$el
+            .querySelector('.js-conflict-edit-warning')
+            .textContent.replace(/\s+/g, ' ')
+            .trim(),
         ).toEqual(message);
         done();
       });
@@ -47,14 +53,16 @@ describe('issue_note_form component', () => {
 
   describe('form', () => {
     it('should render text area with placeholder', () => {
-      expect(
-        vm.$el.querySelector('textarea').getAttribute('placeholder'),
-      ).toEqual('Write a comment or drag your files here…');
+      expect(vm.$el.querySelector('textarea').getAttribute('placeholder')).toEqual(
+        'Write a comment or drag your files here…',
+      );
     });
 
     it('should link to markdown docs', () => {
       const { markdownDocsPath } = notesDataMock;
-      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual(
+        'Markdown',
+      );
     });
 
     describe('keyboard events', () => {
@@ -87,7 +95,7 @@ describe('issue_note_form component', () => {
     });
 
     describe('actions', () => {
-      it('should be possible to cancel', (done) => {
+      it('should be possible to cancel', done => {
         spyOn(vm, 'cancelHandler').and.callThrough();
         vm.isEditing = true;
 
@@ -101,7 +109,7 @@ describe('issue_note_form component', () => {
         });
       });
 
-      it('should be possible to update the note', (done) => {
+      it('should be possible to update the note', done => {
         vm.isEditing = true;
 
         Vue.nextTick(() => {
diff --git a/spec/javascripts/notes/components/note_header_spec.js b/spec/javascripts/notes/components/note_header_spec.js
index 5636f8d1a9f..a3c6bf78988 100644
--- a/spec/javascripts/notes/components/note_header_spec.js
+++ b/spec/javascripts/notes/components/note_header_spec.js
@@ -1,13 +1,15 @@
 import Vue from 'vue';
 import noteHeader from '~/notes/components/note_header.vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 
 describe('note_header component', () => {
+  let store;
   let vm;
   let Component;
 
   beforeEach(() => {
     Component = Vue.extend(noteHeader);
+    store = createStore();
   });
 
   afterEach(() => {
@@ -38,12 +40,8 @@ describe('note_header component', () => {
     });
 
     it('should render user information', () => {
-      expect(
-        vm.$el.querySelector('.note-header-author-name').textContent.trim(),
-      ).toEqual('Root');
-      expect(
-        vm.$el.querySelector('.note-header-info a').getAttribute('href'),
-      ).toEqual('/root');
+      expect(vm.$el.querySelector('.note-header-author-name').textContent.trim()).toEqual('Root');
+      expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual('/root');
     });
 
     it('should render timestamp link', () => {
@@ -78,7 +76,7 @@ describe('note_header component', () => {
       expect(vm.$el.querySelector('.js-vue-toggle-button')).toBeDefined();
     });
 
-    it('emits toggle event on click', (done) => {
+    it('emits toggle event on click', done => {
       spyOn(vm, '$emit');
 
       vm.$el.querySelector('.js-vue-toggle-button').click();
@@ -89,24 +87,24 @@ describe('note_header component', () => {
       });
     });
 
-    it('renders up arrow when open', (done) => {
+    it('renders up arrow when open', done => {
       vm.expanded = true;
 
       Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelector('.js-vue-toggle-button i').classList,
-        ).toContain('fa-chevron-up');
+        expect(vm.$el.querySelector('.js-vue-toggle-button i').classList).toContain(
+          'fa-chevron-up',
+        );
         done();
       });
     });
 
-    it('renders down arrow when closed', (done) => {
+    it('renders down arrow when closed', done => {
       vm.expanded = false;
 
       Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelector('.js-vue-toggle-button i').classList,
-        ).toContain('fa-chevron-down');
+        expect(vm.$el.querySelector('.js-vue-toggle-button i').classList).toContain(
+          'fa-chevron-down',
+        );
         done();
       });
     });
diff --git a/spec/javascripts/notes/components/note_signed_out_widget_spec.js b/spec/javascripts/notes/components/note_signed_out_widget_spec.js
index 6cba8053888..e217a2caa73 100644
--- a/spec/javascripts/notes/components/note_signed_out_widget_spec.js
+++ b/spec/javascripts/notes/components/note_signed_out_widget_spec.js
@@ -1,13 +1,15 @@
 import Vue from 'vue';
 import noteSignedOut from '~/notes/components/note_signed_out_widget.vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import { notesDataMock } from '../mock_data';
 
 describe('note_signed_out_widget component', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
     const Component = Vue.extend(noteSignedOut);
+    store = createStore();
     store.dispatch('setNotesData', notesDataMock);
 
     vm = new Component({
@@ -20,18 +22,20 @@ describe('note_signed_out_widget component', () => {
   });
 
   it('should render sign in link provided in the store', () => {
-    expect(
-      vm.$el.querySelector(`a[href="${notesDataMock.newSessionPath}"]`).textContent,
-    ).toEqual('sign in');
+    expect(vm.$el.querySelector(`a[href="${notesDataMock.newSessionPath}"]`).textContent).toEqual(
+      'sign in',
+    );
   });
 
   it('should render register link provided in the store', () => {
-    expect(
-      vm.$el.querySelector(`a[href="${notesDataMock.registerPath}"]`).textContent,
-    ).toEqual('register');
+    expect(vm.$el.querySelector(`a[href="${notesDataMock.registerPath}"]`).textContent).toEqual(
+      'register',
+    );
   });
 
   it('should render information text', () => {
-    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
+    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
+      'Please register or sign in to reply',
+    );
   });
 });
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index cda550760fe..058ddb6202f 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -1,21 +1,24 @@
 import Vue from 'vue';
-import store from '~/notes/stores';
-import issueDiscussion from '~/notes/components/noteable_discussion.vue';
+import createStore from '~/notes/stores';
+import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
+import '~/behaviors/markdown/render_gfm';
 import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
 
-describe('issue_discussion component', () => {
+describe('noteable_discussion component', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(issueDiscussion);
+    const Component = Vue.extend(noteableDiscussion);
 
+    store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
     vm = new Component({
       store,
       propsData: {
-        note: discussionMock,
+        discussion: discussionMock,
       },
     }).$mount();
   });
@@ -55,4 +58,74 @@ describe('issue_discussion component', () => {
       ).toBeNull();
     });
   });
+
+  describe('computed', () => {
+    describe('hasMultipleUnresolvedDiscussions', () => {
+      it('is false if there are no unresolved discussions', done => {
+        spyOnProperty(vm, 'unresolvedDiscussions').and.returnValue([]);
+
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.hasMultipleUnresolvedDiscussions).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('is false if there is one unresolved discussion', done => {
+        spyOnProperty(vm, 'unresolvedDiscussions').and.returnValue([discussionMock]);
+
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.hasMultipleUnresolvedDiscussions).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('is true if there are two unresolved discussions', done => {
+        spyOnProperty(vm, 'unresolvedDiscussions').and.returnValue([{}, {}]);
+
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.hasMultipleUnresolvedDiscussions).toBe(true);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('jumpToNextDiscussion', () => {
+      it('expands next unresolved discussion', () => {
+        spyOn(vm, 'expandDiscussion').and.stub();
+        const discussions = [
+          discussionMock,
+          {
+            ...discussionMock,
+            id: discussionMock.id + 1,
+            notes: [{ ...discussionMock.notes[0], resolved: true }],
+          },
+          {
+            ...discussionMock,
+            id: discussionMock.id + 2,
+            notes: [{ ...discussionMock.notes[0], resolved: false }],
+          },
+        ];
+        const nextDiscussionId = discussionMock.id + 2;
+        store.replaceState({
+          ...store.state,
+          discussions,
+        });
+        setFixtures(`
+          <div data-discussion-id="${nextDiscussionId}"></div>
+        `);
+
+        vm.jumpToNextDiscussion();
+
+        expect(vm.expandDiscussion).toHaveBeenCalledWith({ discussionId: nextDiscussionId });
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/notes/components/noteable_note_spec.js b/spec/javascripts/notes/components/noteable_note_spec.js
index 2ffdec7314d..a31d17cacbb 100644
--- a/spec/javascripts/notes/components/noteable_note_spec.js
+++ b/spec/javascripts/notes/components/noteable_note_spec.js
@@ -1,16 +1,18 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Vue from 'vue';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import issueNote from '~/notes/components/noteable_note.vue';
 import { noteableDataMock, notesDataMock, note } from '../mock_data';
 
 describe('issue_note', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
     const Component = Vue.extend(issueNote);
 
+    store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
@@ -27,11 +29,14 @@ describe('issue_note', () => {
   });
 
   it('should render user information', () => {
-    expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(note.author.avatar_url);
+    expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(
+      note.author.avatar_url,
+    );
   });
 
   it('should render note header content', () => {
-    expect(vm.$el.querySelector('.note-header .note-header-author-name').textContent.trim()).toEqual(note.author.name);
+    const el = vm.$el.querySelector('.note-header .note-header-author-name');
+    expect(el.textContent.trim()).toEqual(note.author.name);
   });
 
   it('should render note actions', () => {
@@ -42,7 +47,7 @@ describe('issue_note', () => {
     expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html);
   });
 
-  it('prevents note preview xss', (done) => {
+  it('prevents note preview xss', done => {
     const imgSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
     const noteBody = `<img src="${imgSrc}" onload="alert(1)" />`;
     const alertSpy = spyOn(window, 'alert');
@@ -58,7 +63,7 @@ describe('issue_note', () => {
   });
 
   describe('cancel edit', () => {
-    it('restores content of updated note', (done) => {
+    it('restores content of updated note', done => {
       const noteBody = 'updated note text';
       vm.updateNote = () => Promise.resolve();
 
diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js
index fa7adc32193..547efa32694 100644
--- a/spec/javascripts/notes/mock_data.js
+++ b/spec/javascripts/notes/mock_data.js
@@ -51,6 +51,7 @@ export const noteableDataMock = {
   time_estimate: 0,
   title: '14',
   total_time_spent: 0,
+  noteable_note_url: '/group/project/merge_requests/1#note_1',
   updated_at: '2017-08-04T09:53:01.226Z',
   updated_by_id: 1,
   web_url: '/gitlab-org/gitlab-ce/issues/26',
@@ -99,6 +100,8 @@ export const individualNote = {
         { name: 'art', user: { id: 1, name: 'Root', username: 'root' } },
       ],
       toggle_award_path: '/gitlab-org/gitlab-ce/notes/1390/toggle_award_emoji',
+      noteable_note_url: '/group/project/merge_requests/1#note_1',
+      note_url: '/group/project/merge_requests/1#note_1',
       report_abuse_path:
         '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1390&user_id=1',
       path: '/gitlab-org/gitlab-ce/notes/1390',
@@ -157,6 +160,8 @@ export const note = {
     },
   ],
   toggle_award_path: '/gitlab-org/gitlab-ce/notes/546/toggle_award_emoji',
+  note_url: '/group/project/merge_requests/1#note_1',
+  noteable_note_url: '/group/project/merge_requests/1#note_1',
   report_abuse_path:
     '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_546&user_id=1',
   path: '/gitlab-org/gitlab-ce/notes/546',
@@ -198,6 +203,7 @@ export const discussionMock = {
       discussion_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
       emoji_awardable: true,
       award_emoji: [],
+      noteable_note_url: '/group/project/merge_requests/1#note_1',
       toggle_award_path: '/gitlab-org/gitlab-ce/notes/1395/toggle_award_emoji',
       report_abuse_path:
         '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1395&user_id=1',
@@ -244,6 +250,7 @@ export const discussionMock = {
       emoji_awardable: true,
       award_emoji: [],
       toggle_award_path: '/gitlab-org/gitlab-ce/notes/1396/toggle_award_emoji',
+      noteable_note_url: '/group/project/merge_requests/1#note_1',
       report_abuse_path:
         '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1396&user_id=1',
       path: '/gitlab-org/gitlab-ce/notes/1396',
@@ -288,6 +295,7 @@ export const discussionMock = {
       discussion_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
       emoji_awardable: true,
       award_emoji: [],
+      noteable_note_url: '/group/project/merge_requests/1#note_1',
       toggle_award_path: '/gitlab-org/gitlab-ce/notes/1437/toggle_award_emoji',
       report_abuse_path:
         '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1437&user_id=1',
@@ -335,6 +343,7 @@ export const loggedOutnoteableData = {
     can_create_note: false,
     can_update: false,
   },
+  noteable_note_url: '/group/project/merge_requests/1#note_1',
   create_note_path: '/gitlab-org/gitlab-ce/notes?target_id=98&target_type=issue',
   preview_note_path:
     '/gitlab-org/gitlab-ce/preview_markdown?quick_actions_target_id=98&quick_actions_target_type=Issue',
@@ -469,6 +478,7 @@ export const INDIVIDUAL_NOTE_RESPONSE_MAP = {
                 },
               },
             ],
+            noteable_note_url: '/group/project/merge_requests/1#note_1',
             toggle_award_path: '/gitlab-org/gitlab-ce/notes/1390/toggle_award_emoji',
             report_abuse_path:
               '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1390\u0026user_id=1',
@@ -513,6 +523,7 @@ export const INDIVIDUAL_NOTE_RESPONSE_MAP = {
             discussion_id: '70d5c92a4039a36c70100c6691c18c27e4b0a790',
             emoji_awardable: true,
             award_emoji: [],
+            noteable_note_url: '/group/project/merge_requests/1#note_1',
             toggle_award_path: '/gitlab-org/gitlab-ce/notes/1391/toggle_award_emoji',
             report_abuse_path:
               '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1391\u0026user_id=1',
@@ -567,6 +578,7 @@ export const INDIVIDUAL_NOTE_RESPONSE_MAP = {
       discussion_id: 'a3ed36e29b1957efb3b68c53e2d7a2b24b1df052',
       emoji_awardable: true,
       award_emoji: [],
+      noteable_note_url: '/group/project/merge_requests/1#note_1',
       toggle_award_path: '/gitlab-org/gitlab-ce/notes/1471/toggle_award_emoji',
       report_abuse_path:
         '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F29%23note_1471\u0026user_id=1',
@@ -618,6 +630,7 @@ export const DISCUSSION_NOTE_RESPONSE_MAP = {
             emoji_awardable: true,
             award_emoji: [],
             toggle_award_path: '/gitlab-org/gitlab-ce/notes/1471/toggle_award_emoji',
+            noteable_note_url: '/group/project/merge_requests/1#note_1',
             report_abuse_path:
               '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F29%23note_1471\u0026user_id=1',
             path: '/gitlab-org/gitlab-ce/notes/1471',
diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index 520a25cc5c6..985c2f81ef3 100644
--- a/spec/javascripts/notes/stores/actions_spec.js
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import _ from 'underscore';
 import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
 import * as actions from '~/notes/stores/actions';
-import store from '~/notes/stores';
+import createStore from '~/notes/stores';
 import testAction from '../../helpers/vuex_action_helper';
 import { resetStore } from '../helpers';
 import {
@@ -14,6 +14,12 @@ import {
 } from '../mock_data';
 
 describe('Actions Notes Store', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
   afterEach(() => {
     resetStore(store);
   });
@@ -76,7 +82,7 @@ describe('Actions Notes Store', () => {
         actions.setInitialNotes,
         [individualNote],
         { notes: [] },
-        [{ type: 'SET_INITIAL_NOTES', payload: [individualNote] }],
+        [{ type: 'SET_INITIAL_DISCUSSIONS', payload: [individualNote] }],
         [],
         done,
       );
@@ -109,6 +115,19 @@ describe('Actions Notes Store', () => {
     });
   });
 
+  describe('expandDiscussion', () => {
+    it('should expand discussion', done => {
+      testAction(
+        actions.expandDiscussion,
+        { discussionId: discussionMock.id },
+        { notes: [discussionMock] },
+        [{ type: 'EXPAND_DISCUSSION', payload: { discussionId: discussionMock.id } }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('async methods', () => {
     const interceptor = (request, next) => {
       next(
@@ -194,7 +213,14 @@ describe('Actions Notes Store', () => {
     });
 
     it('sets issue state as reopened', done => {
-      testAction(actions.toggleIssueLocalState, 'reopened', {}, [{ type: 'REOPEN_ISSUE' }], [], done);
+      testAction(
+        actions.toggleIssueLocalState,
+        'reopened',
+        {},
+        [{ type: 'REOPEN_ISSUE' }],
+        [],
+        done,
+      );
     });
   });
 
@@ -239,13 +265,7 @@ describe('Actions Notes Store', () => {
         .dispatch('poll')
         .then(() => new Promise(resolve => requestAnimationFrame(resolve)))
         .then(() => {
-          expect(Vue.http.get).toHaveBeenCalledWith(jasmine.anything(), {
-            url: jasmine.anything(),
-            method: 'get',
-            headers: {
-              'X-Last-Fetched-At': undefined,
-            },
-          });
+          expect(Vue.http.get).toHaveBeenCalled();
           expect(store.state.lastFetchedAt).toBe('123456');
 
           jasmine.clock().tick(1500);
diff --git a/spec/javascripts/notes/stores/getters_spec.js b/spec/javascripts/notes/stores/getters_spec.js
index e5550580bf8..5501e50e97b 100644
--- a/spec/javascripts/notes/stores/getters_spec.js
+++ b/spec/javascripts/notes/stores/getters_spec.js
@@ -1,12 +1,18 @@
 import * as getters from '~/notes/stores/getters';
-import { notesDataMock, userDataMock, noteableDataMock, individualNote, collapseNotesMock } from '../mock_data';
+import {
+  notesDataMock,
+  userDataMock,
+  noteableDataMock,
+  individualNote,
+  collapseNotesMock,
+} from '../mock_data';
 
 describe('Getters Notes Store', () => {
   let state;
 
   beforeEach(() => {
     state = {
-      notes: [individualNote],
+      discussions: [individualNote],
       targetNoteHash: 'hash',
       lastFetchedAt: 'timestamp',
 
@@ -15,15 +21,15 @@ describe('Getters Notes Store', () => {
       noteableData: noteableDataMock,
     };
   });
-  describe('notes', () => {
-    it('should return all notes in the store', () => {
-      expect(getters.notes(state)).toEqual([individualNote]);
+  describe('discussions', () => {
+    it('should return all discussions in the store', () => {
+      expect(getters.discussions(state)).toEqual([individualNote]);
     });
   });
 
   describe('Collapsed notes', () => {
     const stateCollapsedNotes = {
-      notes: collapseNotesMock,
+      discussions: collapseNotesMock,
       targetNoteHash: 'hash',
       lastFetchedAt: 'timestamp',
 
@@ -33,7 +39,7 @@ describe('Getters Notes Store', () => {
     };
 
     it('should return a single system note when a description was updated multiple times', () => {
-      expect(getters.notes(stateCollapsedNotes).length).toEqual(1);
+      expect(getters.discussions(stateCollapsedNotes).length).toEqual(1);
     });
   });
 
diff --git a/spec/javascripts/notes/stores/mutation_spec.js b/spec/javascripts/notes/stores/mutation_spec.js
index 98f101d6bc5..556a1c244c0 100644
--- a/spec/javascripts/notes/stores/mutation_spec.js
+++ b/spec/javascripts/notes/stores/mutation_spec.js
@@ -1,5 +1,12 @@
 import mutations from '~/notes/stores/mutations';
-import { note, discussionMock, notesDataMock, userDataMock, noteableDataMock, individualNote } from '../mock_data';
+import {
+  note,
+  discussionMock,
+  notesDataMock,
+  userDataMock,
+  noteableDataMock,
+  individualNote,
+} from '../mock_data';
 
 describe('Notes Store mutations', () => {
   describe('ADD_NEW_NOTE', () => {
@@ -7,7 +14,7 @@ describe('Notes Store mutations', () => {
     let noteData;
 
     beforeEach(() => {
-      state = { notes: [] };
+      state = { discussions: [] };
       noteData = {
         expanded: true,
         id: note.discussion_id,
@@ -20,46 +27,60 @@ describe('Notes Store mutations', () => {
 
     it('should add a new note to an array of notes', () => {
       expect(state).toEqual({
-        notes: [noteData],
+        discussions: [noteData],
       });
-      expect(state.notes.length).toBe(1);
+      expect(state.discussions.length).toBe(1);
     });
 
     it('should not add the same note to the notes array', () => {
       mutations.ADD_NEW_NOTE(state, note);
-      expect(state.notes.length).toBe(1);
+      expect(state.discussions.length).toBe(1);
     });
   });
 
   describe('ADD_NEW_REPLY_TO_DISCUSSION', () => {
     it('should add a reply to a specific discussion', () => {
-      const state = { notes: [discussionMock] };
+      const state = { discussions: [discussionMock] };
       const newReply = Object.assign({}, note, { discussion_id: discussionMock.id });
       mutations.ADD_NEW_REPLY_TO_DISCUSSION(state, newReply);
 
-      expect(state.notes[0].notes.length).toEqual(4);
+      expect(state.discussions[0].notes.length).toEqual(4);
     });
   });
 
   describe('DELETE_NOTE', () => {
     it('should delete a note ', () => {
-      const state = { notes: [discussionMock] };
+      const state = { discussions: [discussionMock] };
       const toDelete = discussionMock.notes[0];
       const lengthBefore = discussionMock.notes.length;
 
       mutations.DELETE_NOTE(state, toDelete);
 
-      expect(state.notes[0].notes.length).toEqual(lengthBefore - 1);
+      expect(state.discussions[0].notes.length).toEqual(lengthBefore - 1);
+    });
+  });
+
+  describe('EXPAND_DISCUSSION', () => {
+    it('should expand a collapsed discussion', () => {
+      const discussion = Object.assign({}, discussionMock, { expanded: false });
+
+      const state = {
+        discussions: [discussion],
+      };
+
+      mutations.EXPAND_DISCUSSION(state, { discussionId: discussion.id });
+
+      expect(state.discussions[0].expanded).toEqual(true);
     });
   });
 
   describe('REMOVE_PLACEHOLDER_NOTES', () => {
     it('should remove all placeholder notes in indivudal notes and discussion', () => {
       const placeholderNote = Object.assign({}, individualNote, { isPlaceholderNote: true });
-      const state = { notes: [placeholderNote] };
+      const state = { discussions: [placeholderNote] };
       mutations.REMOVE_PLACEHOLDER_NOTES(state);
 
-      expect(state.notes).toEqual([]);
+      expect(state.discussions).toEqual([]);
     });
   });
 
@@ -96,26 +117,29 @@ describe('Notes Store mutations', () => {
     });
   });
 
-  describe('SET_INITIAL_NOTES', () => {
+  describe('SET_INITIAL_DISCUSSIONS', () => {
     it('should set the initial notes received', () => {
       const state = {
-        notes: [],
+        discussions: [],
       };
       const legacyNote = {
         id: 2,
         individual_note: true,
-        notes: [{
-          note: '1',
-        }, {
-          note: '2',
-        }],
+        notes: [
+          {
+            note: '1',
+          },
+          {
+            note: '2',
+          },
+        ],
       };
 
-      mutations.SET_INITIAL_NOTES(state, [note, legacyNote]);
-      expect(state.notes[0].id).toEqual(note.id);
-      expect(state.notes[1].notes[0].note).toBe(legacyNote.notes[0].note);
-      expect(state.notes[2].notes[0].note).toBe(legacyNote.notes[1].note);
-      expect(state.notes.length).toEqual(3);
+      mutations.SET_INITIAL_DISCUSSIONS(state, [note, legacyNote]);
+      expect(state.discussions[0].id).toEqual(note.id);
+      expect(state.discussions[1].notes[0].note).toBe(legacyNote.notes[0].note);
+      expect(state.discussions[2].notes[0].note).toBe(legacyNote.notes[1].note);
+      expect(state.discussions.length).toEqual(3);
     });
   });
 
@@ -144,17 +168,17 @@ describe('Notes Store mutations', () => {
   describe('SHOW_PLACEHOLDER_NOTE', () => {
     it('should set a placeholder note', () => {
       const state = {
-        notes: [],
+        discussions: [],
       };
       mutations.SHOW_PLACEHOLDER_NOTE(state, note);
-      expect(state.notes[0].isPlaceholderNote).toEqual(true);
+      expect(state.discussions[0].isPlaceholderNote).toEqual(true);
     });
   });
 
   describe('TOGGLE_AWARD', () => {
     it('should add award if user has not reacted yet', () => {
       const state = {
-        notes: [note],
+        discussions: [note],
         userData: userDataMock,
       };
 
@@ -164,9 +188,9 @@ describe('Notes Store mutations', () => {
       };
 
       mutations.TOGGLE_AWARD(state, data);
-      const lastIndex = state.notes[0].award_emoji.length - 1;
+      const lastIndex = state.discussions[0].award_emoji.length - 1;
 
-      expect(state.notes[0].award_emoji[lastIndex]).toEqual({
+      expect(state.discussions[0].award_emoji[lastIndex]).toEqual({
         name: 'cartwheel',
         user: { id: userDataMock.id, name: userDataMock.name, username: userDataMock.username },
       });
@@ -174,7 +198,7 @@ describe('Notes Store mutations', () => {
 
     it('should remove award if user already reacted', () => {
       const state = {
-        notes: [note],
+        discussions: [note],
         userData: {
           id: 1,
           name: 'Administrator',
@@ -187,7 +211,7 @@ describe('Notes Store mutations', () => {
         awardName: 'bath_tone3',
       };
       mutations.TOGGLE_AWARD(state, data);
-      expect(state.notes[0].award_emoji.length).toEqual(2);
+      expect(state.discussions[0].award_emoji.length).toEqual(2);
     });
   });
 
@@ -196,43 +220,43 @@ describe('Notes Store mutations', () => {
       const discussion = Object.assign({}, discussionMock, { expanded: false });
 
       const state = {
-        notes: [discussion],
+        discussions: [discussion],
       };
 
       mutations.TOGGLE_DISCUSSION(state, { discussionId: discussion.id });
 
-      expect(state.notes[0].expanded).toEqual(true);
+      expect(state.discussions[0].expanded).toEqual(true);
     });
 
     it('should close a opened discussion', () => {
       const state = {
-        notes: [discussionMock],
+        discussions: [discussionMock],
       };
 
       mutations.TOGGLE_DISCUSSION(state, { discussionId: discussionMock.id });
 
-      expect(state.notes[0].expanded).toEqual(false);
+      expect(state.discussions[0].expanded).toEqual(false);
     });
   });
 
   describe('UPDATE_NOTE', () => {
     it('should update a note', () => {
       const state = {
-        notes: [individualNote],
+        discussions: [individualNote],
       };
 
       const updated = Object.assign({}, individualNote.notes[0], { note: 'Foo' });
 
       mutations.UPDATE_NOTE(state, updated);
 
-      expect(state.notes[0].notes[0].note).toEqual('Foo');
+      expect(state.discussions[0].notes[0].note).toEqual('Foo');
     });
   });
 
   describe('CLOSE_ISSUE', () => {
     it('should set issue as closed', () => {
       const state = {
-        notes: [],
+        discussions: [],
         targetNoteHash: null,
         lastFetchedAt: null,
         isToggleStateButtonLoading: false,
@@ -249,7 +273,7 @@ describe('Notes Store mutations', () => {
   describe('REOPEN_ISSUE', () => {
     it('should set issue as closed', () => {
       const state = {
-        notes: [],
+        discussions: [],
         targetNoteHash: null,
         lastFetchedAt: null,
         isToggleStateButtonLoading: false,
@@ -266,7 +290,7 @@ describe('Notes Store mutations', () => {
   describe('TOGGLE_STATE_BUTTON_LOADING', () => {
     it('should set isToggleStateButtonLoading as true', () => {
       const state = {
-        notes: [],
+        discussions: [],
         targetNoteHash: null,
         lastFetchedAt: null,
         isToggleStateButtonLoading: false,
@@ -281,7 +305,7 @@ describe('Notes Store mutations', () => {
 
     it('should set isToggleStateButtonLoading as false', () => {
       const state = {
-        notes: [],
+        discussions: [],
         targetNoteHash: null,
         lastFetchedAt: null,
         isToggleStateButtonLoading: true,