8 files changed, 135 insertions, 29 deletions

diff --git a/spec/javascripts/helpers/class_spec_helper_spec.js b/spec/javascripts/helpers/class_spec_helper_spec.js
index 1415ffb7eb3..fa104ae5bcd 100644
--- a/spec/javascripts/helpers/class_spec_helper_spec.js
+++ b/spec/javascripts/helpers/class_spec_helper_spec.js
@@ -2,7 +2,7 @@
 
 import './class_spec_helper';
 
-describe('ClassSpecHelper', () => {
+describe('ClassSpecHelper', function () {
   describe('itShouldBeAStaticMethod', () => {
     beforeEach(() => {
       class TestClass {
diff --git a/spec/javascripts/helpers/index.js b/spec/javascripts/helpers/index.js
new file mode 100644
index 00000000000..d2c5caf0bdb
--- /dev/null
+++ b/spec/javascripts/helpers/index.js
@@ -0,0 +1,3 @@
+import mountComponent, { mountComponentWithStore } from './vue_mount_component_helper';
+
+export { mountComponent, mountComponentWithStore };
diff --git a/spec/javascripts/helpers/init_vue_mr_page_helper.js b/spec/javascripts/helpers/init_vue_mr_page_helper.js
new file mode 100644
index 00000000000..05c6d587e9c
--- /dev/null
+++ b/spec/javascripts/helpers/init_vue_mr_page_helper.js
@@ -0,0 +1,42 @@
+import initMRPage from '~/mr_notes/index';
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
+import { userDataMock, notesDataMock, noteableDataMock } from '../notes/mock_data';
+import diffFileMockData from '../diffs/mock_data/diff_file';
+
+export default function initVueMRPage() {
+  const diffsAppEndpoint = '/diffs/app/endpoint';
+  const diffsAppProjectPath = 'testproject';
+  const mrEl = document.createElement('div');
+  mrEl.className = 'merge-request fixture-mr';
+  mrEl.setAttribute('data-mr-action', 'diffs');
+  document.body.appendChild(mrEl);
+
+  const mrDiscussionsEl = document.createElement('div');
+  mrDiscussionsEl.id = 'js-vue-mr-discussions';
+  mrDiscussionsEl.setAttribute('data-current-user-data', JSON.stringify(userDataMock));
+  mrDiscussionsEl.setAttribute('data-noteable-data', JSON.stringify(noteableDataMock));
+  mrDiscussionsEl.setAttribute('data-notes-data', JSON.stringify(notesDataMock));
+  mrDiscussionsEl.setAttribute('data-noteable-type', 'merge-request');
+  document.body.appendChild(mrDiscussionsEl);
+
+  const discussionCounterEl = document.createElement('div');
+  discussionCounterEl.id = 'js-vue-discussion-counter';
+  document.body.appendChild(discussionCounterEl);
+
+  const diffsAppEl = document.createElement('div');
+  diffsAppEl.id = 'js-diffs-app';
+  diffsAppEl.setAttribute('data-endpoint', diffsAppEndpoint);
+  diffsAppEl.setAttribute('data-project-path', diffsAppProjectPath);
+  diffsAppEl.setAttribute('data-current-user-data', JSON.stringify(userDataMock));
+  document.body.appendChild(diffsAppEl);
+
+  const mock = new MockAdapter(axios);
+  mock.onGet(diffsAppEndpoint).reply(200, {
+    branch_name: 'foo',
+    diff_files: [diffFileMockData],
+  });
+
+  initMRPage();
+  return mock;
+}
diff --git a/spec/javascripts/helpers/user_mock_data_helper.js b/spec/javascripts/helpers/user_mock_data_helper.js
index 323fee3767e..f6c3ce5aecc 100644
--- a/spec/javascripts/helpers/user_mock_data_helper.js
+++ b/spec/javascripts/helpers/user_mock_data_helper.js
@@ -1,7 +1,7 @@
 export default {
   createNumberRandomUsers(numberUsers) {
     const users = [];
-    for (let i = 0; i < numberUsers; i = i += 1) {
+    for (let i = 0; i < numberUsers; i += 1) {
       users.push(
         {
           avatar: 'https://gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
diff --git a/spec/javascripts/helpers/vue_component_helper.js b/spec/javascripts/helpers/vue_component_helper.js
new file mode 100644
index 00000000000..e0fe18e5560
--- /dev/null
+++ b/spec/javascripts/helpers/vue_component_helper.js
@@ -0,0 +1,18 @@
+/**
+ * Replaces line break with an empty space
+ * @param {*} data
+ */
+export const removeBreakLine = data => data.replace(/\r?\n|\r/g, ' ');
+
+/**
+ * Removes line breaks, spaces and trims the given text
+ * @param {String} str
+ * @returns {String}
+ */
+export const trimText = str =>
+  str
+    .replace(/\r?\n|\r/g, '')
+    .replace(/\s\s+/g, ' ')
+    .trim();
+
+export const removeWhitespace = str => str.replace(/\s\s+/g, ' ');
diff --git a/spec/javascripts/helpers/vue_mount_component_helper.js b/spec/javascripts/helpers/vue_mount_component_helper.js
index 34acdfbfba9..5ba17ecf5b5 100644
--- a/spec/javascripts/helpers/vue_mount_component_helper.js
+++ b/spec/javascripts/helpers/vue_mount_component_helper.js
@@ -1,8 +1,18 @@
-export const createComponentWithStore = (Component, store, propsData = {}) => new Component({
-  store,
-  propsData,
-});
+const mountComponent = (Component, props = {}, el = null) =>
+  new Component({
+    propsData: props,
+  }).$mount(el);
 
-export default (Component, props = {}, el = null) => new Component({
-  propsData: props,
-}).$mount(el);
+export const createComponentWithStore = (Component, store, propsData = {}) =>
+  new Component({
+    store,
+    propsData,
+  });
+
+export const mountComponentWithStore = (Component, { el, props, store }) =>
+  new Component({
+    store,
+    propsData: props || {},
+  }).$mount(el);
+
+export default mountComponent;
diff --git a/spec/javascripts/helpers/vue_resource_helper.js b/spec/javascripts/helpers/vue_resource_helper.js
index 0d1bf5e2e80..70b7ec4e574 100644
--- a/spec/javascripts/helpers/vue_resource_helper.js
+++ b/spec/javascripts/helpers/vue_resource_helper.js
@@ -5,7 +5,6 @@ export const headersInterceptor = (request, next) => {
     response.headers.forEach((value, key) => {
       headers[key] = value;
     });
-    // eslint-disable-next-line no-param-reassign
     response.headers = headers;
   });
 };
diff --git a/spec/javascripts/helpers/vuex_action_helper.js b/spec/javascripts/helpers/vuex_action_helper.js
index 2d386fe1da5..d6ab0aeeed7 100644
--- a/spec/javascripts/helpers/vuex_action_helper.js
+++ b/spec/javascripts/helpers/vuex_action_helper.js
@@ -1,37 +1,71 @@
-/* eslint-disable */
-
 /**
- * helper for testing action with expected mutations
+ * helper for testing action with expected mutations inspired in
  * https://vuex.vuejs.org/en/testing.html
+ *
+ * @example
+ * testAction(
+ *   actions.actionName, // action
+ *   { }, // mocked response
+ *   state, // state
+ *   [
+ *    { type: types.MUTATION}
+ *    { type: types.MUTATION_1, payload: {}}
+ *   ], // mutations
+ *   [
+ *    { type: 'actionName', payload: {}},
+ *    { type: 'actionName1', payload: {}}
+ *   ] //actions
+ *   done,
+ * );
  */
-export default (action, payload, state, expectedMutations, done) => {
-  let count = 0;
+export default (action, payload, state, expectedMutations, expectedActions, done) => {
+  let mutationsCount = 0;
+  let actionsCount = 0;
 
   // mock commit
-  const commit = (type, payload) => {
-    const mutation = expectedMutations[count];
-
-    try {
-      expect(mutation.type).to.equal(type);
-      if (payload) {
-        expect(mutation.payload).to.deep.equal(payload);
-      }
-    } catch (error) {
-      done(error);
+  const commit = (type, mutationPayload) => {
+    const mutation = expectedMutations[mutationsCount];
+
+    expect(mutation.type).toEqual(type);
+
+    if (mutation.payload) {
+      expect(mutation.payload).toEqual(mutationPayload);
     }
 
-    count++;
-    if (count >= expectedMutations.length) {
+    mutationsCount += 1;
+    if (mutationsCount >= expectedMutations.length) {
+      done();
+    }
+  };
+
+  // mock dispatch
+  const dispatch = (type, actionPayload) => {
+    const actionExpected = expectedActions[actionsCount];
+
+    expect(actionExpected.type).toEqual(type);
+
+    if (actionExpected.payload) {
+      expect(actionExpected.payload).toEqual(actionPayload);
+    }
+
+    actionsCount += 1;
+    if (actionsCount >= expectedActions.length) {
       done();
     }
   };
 
   // call the action with mocked store and arguments
-  action({ commit, state }, payload);
+  action({ commit, state, dispatch, rootState: state }, payload);
 
   // check if no mutations should have been dispatched
   if (expectedMutations.length === 0) {
-    expect(count).to.equal(0);
+    expect(mutationsCount).toEqual(0);
+    done();
+  }
+
+  // check if no mutations should have been dispatched
+  if (expectedActions.length === 0) {
+    expect(actionsCount).toEqual(0);
     done();
   }
 };