Merge branch 'master' into docs-patch-71docs-patch-71

18 files changed, 237 insertions, 185 deletions

diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index 1aabf3c2132..fdf8bcee756 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -37,6 +37,8 @@ describe('diffs/components/app', () => {
         projectPath: 'namespace/project',
         currentUser: {},
         changesEmptyStateIllustration: '',
+        dismissEndpoint: '',
+        showSuggestPopover: true,
         ...props,
       },
       store,
diff --git a/spec/javascripts/diffs/components/compare_versions_spec.js b/spec/javascripts/diffs/components/compare_versions_spec.js
index 77f8352047c..ef4bb470734 100644
--- a/spec/javascripts/diffs/components/compare_versions_spec.js
+++ b/spec/javascripts/diffs/components/compare_versions_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
-import store from '~/mr_notes/stores';
+import { createStore } from '~/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffsMockData from '../mock_data/merge_request_diffs';
 import getDiffWithCommit from '../mock_data/diff_with_commit';
@@ -10,6 +10,8 @@ describe('CompareVersions', () => {
   const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
 
   beforeEach(() => {
+    const store = createStore();
+
     store.state.diffs.addedLines = 10;
     store.state.diffs.removedLines = 20;
     store.state.diffs.diffFiles.push('test');
diff --git a/spec/javascripts/diffs/components/diff_expansion_cell_spec.js b/spec/javascripts/diffs/components/diff_expansion_cell_spec.js
new file mode 100644
index 00000000000..63c50c09fce
--- /dev/null
+++ b/spec/javascripts/diffs/components/diff_expansion_cell_spec.js
@@ -0,0 +1,64 @@
+import Vue from 'vue';
+import { createStore } from '~/mr_notes/stores';
+import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffFileMockData from '../mock_data/diff_file';
+
+const EXPAND_UP_CLASS = '.js-unfold';
+const EXPAND_DOWN_CLASS = '.js-unfold-down';
+const EXPAND_ALL_CLASS = '.js-unfold-all';
+
+describe('DiffExpansionCell', () => {
+  const matchLine = diffFileMockData.highlighted_diff_lines[5];
+
+  const createComponent = (options = {}) => {
+    const cmp = Vue.extend(DiffExpansionCell);
+    const defaults = {
+      fileHash: diffFileMockData.file_hash,
+      contextLinesPath: 'contextLinesPath',
+      line: matchLine,
+      isTop: false,
+      isBottom: false,
+    };
+    const props = Object.assign({}, defaults, options);
+
+    return createComponentWithStore(cmp, createStore(), props).$mount();
+  };
+
+  describe('top row', () => {
+    it('should have "expand up" and "show all" option', () => {
+      const vm = createComponent({
+        isTop: true,
+      });
+      const el = vm.$el;
+
+      expect(el.querySelector(EXPAND_UP_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_DOWN_CLASS)).toBe(null);
+      expect(el.querySelector(EXPAND_ALL_CLASS)).not.toBe(null);
+    });
+  });
+
+  describe('middle row', () => {
+    it('should have "expand down", "show all", "expand up" option', () => {
+      const vm = createComponent();
+      const el = vm.$el;
+
+      expect(el.querySelector(EXPAND_UP_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_DOWN_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_ALL_CLASS)).not.toBe(null);
+    });
+  });
+
+  describe('bottom row', () => {
+    it('should have "expand down" and "show all" option', () => {
+      const vm = createComponent({
+        isBottom: true,
+      });
+      const el = vm.$el;
+
+      expect(el.querySelector(EXPAND_UP_CLASS)).toBe(null);
+      expect(el.querySelector(EXPAND_DOWN_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_ALL_CLASS)).not.toBe(null);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 596a1ba5ad2..d4280d3ec2c 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -521,7 +521,7 @@ describe('diff_file_header', () => {
       });
 
       describe('with discussions', () => {
-        it('dispatches toggleFileDiscussions when user clicks on toggle discussions button', () => {
+        it('dispatches toggleFileDiscussionWrappers when user clicks on toggle discussions button', () => {
           const propsCopy = Object.assign({}, props);
           propsCopy.diffFile.submodule = false;
           propsCopy.diffFile.blob = {
@@ -552,11 +552,11 @@ describe('diff_file_header', () => {
             }),
           });
 
-          spyOn(vm, 'toggleFileDiscussions');
+          spyOn(vm, 'toggleFileDiscussionWrappers');
 
           vm.$el.querySelector('.js-btn-vue-toggle-comments').click();
 
-          expect(vm.toggleFileDiscussions).toHaveBeenCalled();
+          expect(vm.toggleFileDiscussionWrappers).toHaveBeenCalled();
         });
       });
     });
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index ef4589ada48..3ca2d1dc934 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
-import store from 'ee_else_ce/mr_notes/stores';
+import { createStore } from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 
@@ -9,14 +9,18 @@ describe('DiffFile', () => {
   let vm;
 
   beforeEach(() => {
-    vm = createComponentWithStore(Vue.extend(DiffFileComponent), store, {
+    vm = createComponentWithStore(Vue.extend(DiffFileComponent), createStore(), {
       file: JSON.parse(JSON.stringify(diffFileMockData)),
       canCurrentUserFork: false,
     }).$mount();
   });
 
+  afterEach(() => {
+    vm.$destroy();
+  });
+
   describe('template', () => {
-    it('should render component with file header, file content components', () => {
+    it('should render component with file header, file content components', done => {
       const el = vm.$el;
       const { file_hash, file_path } = vm.file;
 
@@ -30,9 +34,13 @@ describe('DiffFile', () => {
 
       vm.file.renderIt = true;
 
-      vm.$nextTick(() => {
-        expect(el.querySelectorAll('.line_content').length).toBeGreaterThan(5);
-      });
+      vm.$nextTick()
+        .then(() => {
+          expect(el.querySelectorAll('.line_content').length).toBe(5);
+          expect(el.querySelectorAll('.js-line-expansion-content').length).toBe(1);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     describe('collapsed', () => {
diff --git a/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js b/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js
deleted file mode 100644
index cdd30919b09..00000000000
--- a/spec/javascripts/diffs/components/diff_gutter_avatars_spec.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import Vue from 'vue';
-import DiffGutterAvatarsComponent from '~/diffs/components/diff_gutter_avatars.vue';
-import { COUNT_OF_AVATARS_IN_GUTTER } from '~/diffs/constants';
-import store from '~/mr_notes/stores';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import discussionsMockData from '../mock_data/diff_discussions';
-
-describe('DiffGutterAvatars', () => {
-  let component;
-  const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)];
-
-  beforeEach(() => {
-    component = createComponentWithStore(Vue.extend(DiffGutterAvatarsComponent), store, {
-      discussions: getDiscussionsMockData(),
-    }).$mount();
-  });
-
-  describe('computed', () => {
-    describe('discussionsExpanded', () => {
-      it('should return true when all discussions are expanded', () => {
-        expect(component.discussionsExpanded).toEqual(true);
-      });
-
-      it('should return false when all discussions are not expanded', () => {
-        component.discussions[0].expanded = false;
-
-        expect(component.discussionsExpanded).toEqual(false);
-      });
-    });
-
-    describe('allDiscussions', () => {
-      it('should return an array of notes', () => {
-        expect(component.allDiscussions).toEqual([...component.discussions[0].notes]);
-      });
-    });
-
-    describe('notesInGutter', () => {
-      it('should return a subset of discussions to show in gutter', () => {
-        expect(component.notesInGutter.length).toEqual(COUNT_OF_AVATARS_IN_GUTTER);
-        expect(component.notesInGutter[0]).toEqual({
-          note: component.discussions[0].notes[0].note,
-          author: component.discussions[0].notes[0].author,
-        });
-      });
-    });
-
-    describe('moreCount', () => {
-      it('should return count of remaining discussions from gutter', () => {
-        expect(component.moreCount).toEqual(2);
-      });
-    });
-
-    describe('moreText', () => {
-      it('should return proper text if moreCount > 0', () => {
-        expect(component.moreText).toEqual('2 more comments');
-      });
-
-      it('should return empty string if there is no discussion', () => {
-        component.discussions = [];
-
-        expect(component.moreText).toEqual('');
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('getTooltipText', () => {
-      it('should return original comment if it is shorter than max length', () => {
-        const note = component.discussions[0].notes[0];
-
-        expect(component.getTooltipText(note)).toEqual('Administrator: comment 1');
-      });
-
-      it('should return truncated version of comment', () => {
-        const note = component.discussions[0].notes[1];
-
-        expect(component.getTooltipText(note)).toEqual('Fatih Acet: comment 2 is r...');
-      });
-    });
-
-    describe('toggleDiscussions', () => {
-      it('should toggle all discussions', () => {
-        expect(component.discussions[0].expanded).toEqual(true);
-
-        component.$store.dispatch('setInitialNotes', getDiscussionsMockData());
-        component.discussions = component.$store.state.notes.discussions;
-        component.toggleDiscussions();
-
-        expect(component.discussions[0].expanded).toEqual(false);
-        component.$store.dispatch('setInitialNotes', []);
-      });
-
-      it('forces expansion of all discussions', () => {
-        spyOn(component.$store, 'dispatch');
-
-        component.discussions[0].expanded = true;
-        component.discussions.push({
-          ...component.discussions[0],
-          id: '123test',
-          expanded: false,
-        });
-
-        component.toggleDiscussions();
-
-        expect(component.$store.dispatch.calls.argsFor(0)).toEqual([
-          'toggleDiscussion',
-          {
-            discussionId: component.discussions[0].id,
-            forceExpanded: true,
-          },
-        ]);
-
-        expect(component.$store.dispatch.calls.argsFor(1)).toEqual([
-          'toggleDiscussion',
-          {
-            discussionId: component.discussions[1].id,
-            forceExpanded: true,
-          },
-        ]);
-      });
-    });
-  });
-
-  describe('template', () => {
-    const buttonSelector = '.js-diff-comment-button';
-    const svgSelector = `${buttonSelector} svg`;
-    const avatarSelector = '.js-diff-comment-avatar';
-    const plusCountSelector = '.js-diff-comment-plus';
-
-    it('should have button to collapse discussions when the discussions expanded', () => {
-      expect(component.$el.querySelector(buttonSelector)).toBeDefined();
-      expect(component.$el.querySelector(svgSelector)).toBeDefined();
-    });
-
-    it('should have user avatars when discussions collapsed', () => {
-      component.discussions[0].expanded = false;
-
-      Vue.nextTick(() => {
-        expect(component.$el.querySelector(buttonSelector)).toBeNull();
-        expect(component.$el.querySelectorAll(avatarSelector).length).toEqual(4);
-        expect(component.$el.querySelector(plusCountSelector)).toBeDefined();
-        expect(component.$el.querySelector(plusCountSelector).textContent).toEqual('+2');
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
index 038db8eaa7c..6bb704658fb 100644
--- a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import DiffLineGutterContent from '~/diffs/components/diff_line_gutter_content.vue';
-import store from '~/mr_notes/stores';
+import { createStore } from '~/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import discussionsMockData from '../mock_data/diff_discussions';
 import diffFileMockData from '../mock_data/diff_file';
@@ -23,7 +23,7 @@ describe('DiffLineGutterContent', () => {
     props.fileHash = getDiffFileMock().file_hash;
     props.contextLinesPath = '/context/lines/path';
 
-    return createComponentWithStore(cmp, store, props).$mount();
+    return createComponentWithStore(cmp, createStore(), props).$mount();
   };
 
   describe('computed', () => {
@@ -61,7 +61,7 @@ describe('DiffLineGutterContent', () => {
           contextLinesPath: '/context/lines/path',
         };
         props.line.discussions = [Object.assign({}, discussionsMockData)];
-        const component = createComponentWithStore(cmp, store, props).$mount();
+        const component = createComponentWithStore(cmp, createStore(), props).$mount();
 
         expect(component.hasDiscussions).toEqual(true);
         expect(component.shouldShowAvatarsOnGutter).toEqual(true);
@@ -70,15 +70,6 @@ describe('DiffLineGutterContent', () => {
   });
 
   describe('template', () => {
-    it('should render three dots for context lines', () => {
-      const component = createComponent({
-        isMatchLine: true,
-      });
-
-      expect(component.$el.querySelector('span').classList.contains('context-cell')).toEqual(true);
-      expect(component.$el.innerText).toEqual('...');
-    });
-
     it('should render comment button', () => {
       const component = createComponent({
         showCommentButton: true,
diff --git a/spec/javascripts/diffs/components/diff_line_note_form_spec.js b/spec/javascripts/diffs/components/diff_line_note_form_spec.js
index b983dc35a57..237cfccfa29 100644
--- a/spec/javascripts/diffs/components/diff_line_note_form_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_note_form_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
-import store from '~/mr_notes/stores';
+import { createStore } from '~/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 import { noteableDataMock } from '../../notes/mock_data';
@@ -15,7 +15,7 @@ describe('DiffLineNoteForm', () => {
     diffFile = getDiffFileMock();
     diffLines = diffFile.highlighted_diff_lines;
 
-    component = createComponentWithStore(Vue.extend(DiffLineNoteForm), store, {
+    component = createComponentWithStore(Vue.extend(DiffLineNoteForm), createStore(), {
       diffFileHash: diffFile.file_hash,
       diffLines,
       line: diffLines[0],
diff --git a/spec/javascripts/diffs/components/diff_table_cell_spec.js b/spec/javascripts/diffs/components/diff_table_cell_spec.js
index 170e661beea..a5a042c577c 100644
--- a/spec/javascripts/diffs/components/diff_table_cell_spec.js
+++ b/spec/javascripts/diffs/components/diff_table_cell_spec.js
@@ -1,12 +1,12 @@
 import Vue from 'vue';
-import store from '~/mr_notes/stores';
+import { createStore } from '~/mr_notes/stores';
 import DiffTableCell from '~/diffs/components/diff_table_cell.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 
 describe('DiffTableCell', () => {
   const createComponent = options =>
-    createComponentWithStore(Vue.extend(DiffTableCell), store, {
+    createComponentWithStore(Vue.extend(DiffTableCell), createStore(), {
       line: diffFileMockData.highlighted_diff_lines[0],
       fileHash: diffFileMockData.file_hash,
       contextLinesPath: 'contextLinesPath',
diff --git a/spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js b/spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js
new file mode 100644
index 00000000000..290b3d7c803
--- /dev/null
+++ b/spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import { createStore } from '~/mr_notes/stores';
+import InlineDiffExpansionRow from '~/diffs/components/inline_diff_expansion_row.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffFileMockData from '../mock_data/diff_file';
+
+describe('InlineDiffExpansionRow', () => {
+  const matchLine = diffFileMockData.highlighted_diff_lines[5];
+
+  const createComponent = (options = {}) => {
+    const cmp = Vue.extend(InlineDiffExpansionRow);
+    const defaults = {
+      fileHash: diffFileMockData.file_hash,
+      contextLinesPath: 'contextLinesPath',
+      line: matchLine,
+      isTop: false,
+      isBottom: false,
+    };
+    const props = Object.assign({}, defaults, options);
+
+    return createComponentWithStore(cmp, createStore(), props).$mount();
+  };
+
+  describe('template', () => {
+    it('should render expansion row for match lines', () => {
+      const vm = createComponent();
+
+      expect(vm.$el.classList.contains('line_expansion')).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/inline_diff_table_row_spec.js b/spec/javascripts/diffs/components/inline_diff_table_row_spec.js
index 97926f6625e..0ddffe926d9 100644
--- a/spec/javascripts/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/javascripts/diffs/components/inline_diff_table_row_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import store from '~/mr_notes/stores';
+import { createStore } from '~/mr_notes/stores';
 import InlineDiffTableRow from '~/diffs/components/inline_diff_table_row.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
@@ -9,7 +9,7 @@ describe('InlineDiffTableRow', () => {
   const thisLine = diffFileMockData.highlighted_diff_lines[0];
 
   beforeEach(() => {
-    vm = createComponentWithStore(Vue.extend(InlineDiffTableRow), store, {
+    vm = createComponentWithStore(Vue.extend(InlineDiffTableRow), createStore(), {
       line: thisLine,
       fileHash: diffFileMockData.file_hash,
       contextLinesPath: 'contextLinesPath',
diff --git a/spec/javascripts/diffs/components/inline_diff_view_spec.js b/spec/javascripts/diffs/components/inline_diff_view_spec.js
index 4452106580a..486d9629e26 100644
--- a/spec/javascripts/diffs/components/inline_diff_view_spec.js
+++ b/spec/javascripts/diffs/components/inline_diff_view_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import '~/behaviors/markdown/render_gfm';
 import InlineDiffView from '~/diffs/components/inline_diff_view.vue';
-import store from 'ee_else_ce/mr_notes/stores';
+import { createStore } from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 import discussionsMockData from '../mock_data/diff_discussions';
@@ -10,10 +10,13 @@ describe('InlineDiffView', () => {
   let component;
   const getDiffFileMock = () => Object.assign({}, diffFileMockData);
   const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)];
+  const notesLength = getDiscussionsMockData()[0].notes.length;
 
   beforeEach(done => {
     const diffFile = getDiffFileMock();
 
+    const store = createStore();
+
     store.dispatch('diffs/setInlineDiffViewType');
     component = createComponentWithStore(Vue.extend(InlineDiffView), store, {
       diffFile,
@@ -27,19 +30,20 @@ describe('InlineDiffView', () => {
     it('should have rendered diff lines', () => {
       const el = component.$el;
 
-      expect(el.querySelectorAll('tr.line_holder').length).toEqual(6);
+      expect(el.querySelectorAll('tr.line_holder').length).toEqual(5);
       expect(el.querySelectorAll('tr.line_holder.new').length).toEqual(2);
-      expect(el.querySelectorAll('tr.line_holder.match').length).toEqual(1);
+      expect(el.querySelectorAll('tr.line_expansion.match').length).toEqual(1);
       expect(el.textContent.indexOf('Bad dates')).toBeGreaterThan(-1);
     });
 
     it('should render discussions', done => {
       const el = component.$el;
       component.diffLines[1].discussions = getDiscussionsMockData();
+      component.diffLines[1].discussionsExpanded = true;
 
       Vue.nextTick(() => {
         expect(el.querySelectorAll('.notes_holder').length).toEqual(1);
-        expect(el.querySelectorAll('.notes_holder .note-discussion li').length).toEqual(5);
+        expect(el.querySelectorAll('.notes_holder .note').length).toEqual(notesLength + 1);
         expect(el.innerText.indexOf('comment 5')).toBeGreaterThan(-1);
         component.$store.dispatch('setInitialNotes', []);
 
diff --git a/spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js b/spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js
new file mode 100644
index 00000000000..a766ebb5efb
--- /dev/null
+++ b/spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import { createStore } from '~/mr_notes/stores';
+import ParallelDiffExpansionRow from '~/diffs/components/parallel_diff_expansion_row.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffFileMockData from '../mock_data/diff_file';
+
+describe('ParallelDiffExpansionRow', () => {
+  const matchLine = diffFileMockData.highlighted_diff_lines[5];
+
+  const createComponent = (options = {}) => {
+    const cmp = Vue.extend(ParallelDiffExpansionRow);
+    const defaults = {
+      fileHash: diffFileMockData.file_hash,
+      contextLinesPath: 'contextLinesPath',
+      line: matchLine,
+      isTop: false,
+      isBottom: false,
+    };
+    const props = Object.assign({}, defaults, options);
+
+    return createComponentWithStore(cmp, createStore(), props).$mount();
+  };
+
+  describe('template', () => {
+    it('should render expansion row for match lines', () => {
+      const vm = createComponent();
+
+      expect(vm.$el.classList.contains('line_expansion')).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/parallel_diff_view_spec.js b/spec/javascripts/diffs/components/parallel_diff_view_spec.js
index 236bda96145..191313bf487 100644
--- a/spec/javascripts/diffs/components/parallel_diff_view_spec.js
+++ b/spec/javascripts/diffs/components/parallel_diff_view_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue';
-import store from 'ee_else_ce/mr_notes/stores';
+import { createStore } from 'ee_else_ce/mr_notes/stores';
 import * as constants from '~/diffs/constants';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
@@ -12,7 +12,7 @@ describe('ParallelDiffView', () => {
   beforeEach(() => {
     const diffFile = getDiffFileMock();
 
-    component = createComponentWithStore(Vue.extend(ParallelDiffView), store, {
+    component = createComponentWithStore(Vue.extend(ParallelDiffView), createStore(), {
       diffFile,
       diffLines: diffFile.parallel_diff_lines,
     }).$mount();
diff --git a/spec/javascripts/diffs/mock_data/diff_file.js b/spec/javascripts/diffs/mock_data/diff_file.js
index 27428197c1c..531686efff1 100644
--- a/spec/javascripts/diffs/mock_data/diff_file.js
+++ b/spec/javascripts/diffs/mock_data/diff_file.js
@@ -1,3 +1,5 @@
+// Copied to ee/spec/frontend/diffs/mock_data/diff_file.js
+
 export default {
   submodule: false,
   submodule_link: null,
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index f129fbb57a3..5806cb47034 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -37,6 +37,7 @@ import actions, {
   toggleFullDiff,
   setFileCollapsed,
   setExpandedDiffLines,
+  setSuggestPopoverDismissed,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -68,12 +69,19 @@ describe('DiffsStoreActions', () => {
     it('should set given endpoint and project path', done => {
       const endpoint = '/diffs/set/endpoint';
       const projectPath = '/root/project';
+      const dismissEndpoint = '/-/user_callouts';
+      const showSuggestPopover = false;
 
       testAction(
         setBaseConfig,
-        { endpoint, projectPath },
-        { endpoint: '', projectPath: '' },
-        [{ type: types.SET_BASE_CONFIG, payload: { endpoint, projectPath } }],
+        { endpoint, projectPath, dismissEndpoint, showSuggestPopover },
+        { endpoint: '', projectPath: '', dismissEndpoint: '', showSuggestPopover: true },
+        [
+          {
+            type: types.SET_BASE_CONFIG,
+            payload: { endpoint, projectPath, dismissEndpoint, showSuggestPopover },
+          },
+        ],
         [],
         done,
       );
@@ -198,6 +206,7 @@ describe('DiffsStoreActions', () => {
                   position_type: 'text',
                 },
               },
+              hash: 'diff-content-1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a',
             },
           },
         ],
@@ -371,7 +380,9 @@ describe('DiffsStoreActions', () => {
       const params = { since: 6, to: 26 };
       const lineNumbers = { oldLineNumber: 3, newLineNumber: 5 };
       const fileHash = 'ff9200';
-      const options = { endpoint, params, lineNumbers, fileHash };
+      const isExpandDown = false;
+      const nextLineNumbers = {};
+      const options = { endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers };
       const mock = new MockAdapter(axios);
       const contextLines = { contextLines: [{ lineCode: 6 }] };
       mock.onGet(endpoint).reply(200, contextLines);
@@ -383,7 +394,7 @@ describe('DiffsStoreActions', () => {
         [
           {
             type: types.ADD_CONTEXT_LINES,
-            payload: { lineNumbers, contextLines, params, fileHash },
+            payload: { lineNumbers, contextLines, params, fileHash, isExpandDown, nextLineNumbers },
           },
         ],
         [],
@@ -1080,4 +1091,30 @@ describe('DiffsStoreActions', () => {
       );
     });
   });
+
+  describe('setSuggestPopoverDismissed', () => {
+    it('commits SET_SHOW_SUGGEST_POPOVER', done => {
+      const state = { dismissEndpoint: `${gl.TEST_HOST}/-/user_callouts` };
+      const mock = new MockAdapter(axios);
+      mock.onPost(state.dismissEndpoint).reply(200, {});
+
+      spyOn(axios, 'post').and.callThrough();
+
+      testAction(
+        setSuggestPopoverDismissed,
+        null,
+        state,
+        [{ type: types.SET_SHOW_SUGGEST_POPOVER }],
+        [],
+        () => {
+          expect(axios.post).toHaveBeenCalledWith(state.dismissEndpoint, {
+            feature_name: 'suggest_popover_dismissed',
+          });
+
+          mock.restore();
+          done();
+        },
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index fa193e1d3b9..3e033b6c9dc 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -81,6 +81,8 @@ describe('DiffsStoreMutations', () => {
         params: {
           bottom: true,
         },
+        isExpandDown: false,
+        nextLineNumbers: {},
       };
       const diffFile = {
         file_hash: options.fileHash,
@@ -108,6 +110,8 @@ describe('DiffsStoreMutations', () => {
         options.contextLines,
         options.lineNumbers,
         options.params.bottom,
+        options.isExpandDown,
+        options.nextLineNumbers,
       );
 
       expect(addContextLinesSpy).toHaveBeenCalledWith({
@@ -116,6 +120,7 @@ describe('DiffsStoreMutations', () => {
         contextLines: options.contextLines,
         bottom: options.params.bottom,
         lineNumbers: options.lineNumbers,
+        isExpandDown: false,
       });
     });
   });
@@ -850,4 +855,14 @@ describe('DiffsStoreMutations', () => {
       expect(file.renderingLines).toBe(false);
     });
   });
+
+  describe('SET_SHOW_SUGGEST_POPOVER', () => {
+    it('sets showSuggestPopover to false', () => {
+      const state = { showSuggestPopover: true };
+
+      mutations[types.SET_SHOW_SUGGEST_POPOVER](state);
+
+      expect(state.showSuggestPopover).toBe(false);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 1f877910125..65eb4c9d2a3 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -260,6 +260,17 @@ describe('DiffsStoreUtils', () => {
       expect(linesWithReferences[1].meta_data.old_pos).toEqual(2);
       expect(linesWithReferences[1].meta_data.new_pos).toEqual(3);
     });
+
+    it('should add correct line references when isExpandDown is true', () => {
+      const lines = [{ type: null }, { type: MATCH_LINE_TYPE }];
+      const linesWithReferences = utils.addLineReferences(lines, lineNumbers, false, true, {
+        old_line: 10,
+        new_line: 11,
+      });
+
+      expect(linesWithReferences[1].meta_data.old_pos).toEqual(10);
+      expect(linesWithReferences[1].meta_data.new_pos).toEqual(11);
+    });
   });
 
   describe('trimFirstCharOfLineContent', () => {