Vuex test helper improvements

2 files changed, 214 insertions, 41 deletions

diff --git a/spec/javascripts/helpers/vuex_action_helper.js b/spec/javascripts/helpers/vuex_action_helper.js
index d6ab0aeeed7..4ca7015184e 100644
--- a/spec/javascripts/helpers/vuex_action_helper.js
+++ b/spec/javascripts/helpers/vuex_action_helper.js
@@ -1,71 +1,103 @@
+const noop = () => {};
+
 /**
- * helper for testing action with expected mutations inspired in
+ * Helper for testing action with expected mutations inspired in
  * https://vuex.vuejs.org/en/testing.html
  *
+ * @param {Function} action to be tested
+ * @param {Object} payload will be provided to the action
+ * @param {Object} state will be provided to the action
+ * @param {Array} [expectedMutations=[]] mutations expected to be committed
+ * @param {Array} [expectedActions=[]] actions expected to be dispatched
+ * @param {Function} [done=noop] to be executed after the tests
+ * @return {Promise}
+ *
  * @example
  * testAction(
  *   actions.actionName, // action
- *   { }, // mocked response
- *   state, // state
+ *   { }, // mocked payload
+ *   state, //state
+ *   // expected mutations
  *   [
  *    { type: types.MUTATION}
- *    { type: types.MUTATION_1, payload: {}}
- *   ], // mutations
+ *    { type: types.MUTATION_1, payload: jasmine.any(Number)}
+ *   ],
+ *   // expected actions
  *   [
- *    { type: 'actionName', payload: {}},
- *    { type: 'actionName1', payload: {}}
- *   ] //actions
+ *    { type: 'actionName', payload: {param: 'foobar'}},
+ *    { type: 'actionName1'}
+ *   ]
  *   done,
  * );
+ *
+ * @example
+ * testAction(
+ *   actions.actionName, // action
+ *   { }, // mocked payload
+ *   state, //state
+ *   [ { type: types.MUTATION} ], // expected mutations
+ *   [], // expected actions
+ * ).then(done)
+ * .catch(done.fail);
  */
-export default (action, payload, state, expectedMutations, expectedActions, done) => {
-  let mutationsCount = 0;
-  let actionsCount = 0;
+export default (
+  action,
+  payload,
+  state,
+  expectedMutations = [],
+  expectedActions = [],
+  done = noop,
+) => {
+  const mutations = [];
+  const actions = [];
 
   // mock commit
   const commit = (type, mutationPayload) => {
-    const mutation = expectedMutations[mutationsCount];
-
-    expect(mutation.type).toEqual(type);
+    const mutation = { type };
 
-    if (mutation.payload) {
-      expect(mutation.payload).toEqual(mutationPayload);
+    if (typeof mutationPayload !== 'undefined') {
+      mutation.payload = mutationPayload;
     }
 
-    mutationsCount += 1;
-    if (mutationsCount >= expectedMutations.length) {
-      done();
-    }
+    mutations.push(mutation);
   };
 
   // mock dispatch
   const dispatch = (type, actionPayload) => {
-    const actionExpected = expectedActions[actionsCount];
-
-    expect(actionExpected.type).toEqual(type);
+    const dispatchedAction = { type };
 
-    if (actionExpected.payload) {
-      expect(actionExpected.payload).toEqual(actionPayload);
+    if (typeof actionPayload !== 'undefined') {
+      dispatchedAction.payload = actionPayload;
     }
 
-    actionsCount += 1;
-    if (actionsCount >= expectedActions.length) {
-      done();
-    }
+    actions.push(dispatchedAction);
   };
 
-  // call the action with mocked store and arguments
-  action({ commit, state, dispatch, rootState: state }, payload);
-
-  // check if no mutations should have been dispatched
-  if (expectedMutations.length === 0) {
-    expect(mutationsCount).toEqual(0);
+  const validateResults = () => {
+    expect({
+      mutations,
+      actions,
+    }).toEqual({
+      mutations: expectedMutations,
+      actions: expectedActions,
+    });
     done();
-  }
+  };
 
-  // check if no mutations should have been dispatched
-  if (expectedActions.length === 0) {
-    expect(actionsCount).toEqual(0);
-    done();
-  }
+  return new Promise((resolve, reject) => {
+    try {
+      const result = action({ commit, state, dispatch, rootState: state }, payload);
+      resolve(result);
+    } catch (e) {
+      reject(e);
+    }
+  })
+    .catch(error => {
+      validateResults();
+      throw error;
+    })
+    .then(data => {
+      validateResults();
+      return data;
+    });
 };
diff --git a/spec/javascripts/helpers/vuex_action_helper_spec.js b/spec/javascripts/helpers/vuex_action_helper_spec.js
new file mode 100644
index 00000000000..8d6ad6750c0
--- /dev/null
+++ b/spec/javascripts/helpers/vuex_action_helper_spec.js
@@ -0,0 +1,141 @@
+import MockAdapter from 'axios-mock-adapter';
+import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
+import testAction from './vuex_action_helper';
+
+describe('VueX test helper (testAction)', () => {
+  let originalExpect;
+  let assertion;
+  let mock;
+  const noop = () => {};
+
+  beforeAll(() => {
+    mock = new MockAdapter(axios);
+    /*
+    In order to test the helper properly, we need to overwrite the jasmine `expect` helper.
+    We test that the testAction helper properly passes the dispatched actions/committed mutations
+    to the jasmine helper.
+     */
+    originalExpect = expect;
+    assertion = null;
+    global.expect = actual => ({
+      toEqual: () => {
+        originalExpect(actual).toEqual(assertion);
+      },
+    });
+  });
+
+  afterAll(() => {
+    mock.restore();
+    global.expect = originalExpect;
+  });
+
+  it('should properly pass on state and payload', () => {
+    const exampleState = { FOO: 12, BAR: 3 };
+    const examplePayload = { BAZ: 73, BIZ: 55 };
+
+    const action = ({ state }, payload) => {
+      originalExpect(state).toEqual(exampleState);
+      originalExpect(payload).toEqual(examplePayload);
+    };
+
+    assertion = { mutations: [], actions: [] };
+
+    testAction(action, examplePayload, exampleState);
+  });
+
+  describe('should work with synchronous actions', () => {
+    it('committing mutation', () => {
+      const action = ({ commit }) => {
+        commit('MUTATION');
+      };
+
+      assertion = { mutations: [{ type: 'MUTATION' }], actions: [] };
+
+      testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+    });
+
+    it('dispatching action', () => {
+      const action = ({ dispatch }) => {
+        dispatch('ACTION');
+      };
+
+      assertion = { actions: [{ type: 'ACTION' }], mutations: [] };
+
+      testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+    });
+
+    it('work with jasmine done once finished', done => {
+      assertion = { mutations: [], actions: [] };
+
+      testAction(noop, null, {}, assertion.mutations, assertion.actions, done);
+    });
+
+    it('provide promise interface', done => {
+      assertion = { mutations: [], actions: [] };
+
+      testAction(noop, null, {}, assertion.mutations, assertion.actions)
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('should work with promise based actions (fetch action)', () => {
+    let lastError;
+    const data = { FOO: 'BAR' };
+
+    const promiseAction = ({ commit, dispatch }) => {
+      dispatch('ACTION');
+
+      return axios
+        .get(TEST_HOST)
+        .catch(error => {
+          commit('ERROR');
+          lastError = error;
+          throw error;
+        })
+        .then(() => {
+          commit('SUCCESS');
+          return data;
+        });
+    };
+
+    beforeEach(() => {
+      lastError = null;
+    });
+
+    it('work with jasmine done once finished', done => {
+      mock.onGet(TEST_HOST).replyOnce(200, 42);
+
+      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+
+      testAction(promiseAction, null, {}, assertion.mutations, assertion.actions, done);
+    });
+
+    it('return original data of successful promise while checking actions/mutations', done => {
+      mock.onGet(TEST_HOST).replyOnce(200, 42);
+
+      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+
+      testAction(promiseAction, null, {}, assertion.mutations, assertion.actions)
+        .then(res => {
+          originalExpect(res).toEqual(data);
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('return original error of rejected promise while checking actions/mutations', done => {
+      mock.onGet(TEST_HOST).replyOnce(500, '');
+
+      assertion = { mutations: [{ type: 'ERROR' }], actions: [{ type: 'ACTION' }] };
+
+      testAction(promiseAction, null, {}, assertion.mutations, assertion.actions)
+        .then(done.fail)
+        .catch(error => {
+          originalExpect(error).toBe(lastError);
+          done();
+        });
+    });
+  });
+});