Merge branch...

Merge branch '21775-helpers-vuex_action_helper-function-is-a-little-bit-confusing-to-use' into 'master'

Allow passing named parameters to testAction function

See merge request gitlab-org/gitlab!48435

spec/frontend/helpers/vuex_action_helper.js

@@ -4,7 +4,7 @@ const noop = () => {};
  * Helper for testing action with expected mutations inspired in
  * https://vuex.vuejs.org/en/testing.html
  *
- * @param {Function} action to be tested
+ * @param {(Function|Object)} action to be tested, or object of named parameters
  * @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
@@ -39,15 +39,42 @@ const noop = () => {};
  *   [], // expected actions
  * ).then(done)
  * .catch(done.fail);
+ *
+ * @example
+ * await testAction({
+ *   action: actions.actionName,
+ *   payload: { deleteListId: 1 },
+ *   state: { lists: [1, 2, 3] },
+ *   expectedMutations: [ { type: types.MUTATION} ],
+ *   expectedActions: [],
+ * })
  */
 export default (
-  action,
-  payload,
-  state,
-  expectedMutations = [],
-  expectedActions = [],
-  done = noop,
+  actionArg,
+  payloadArg,
+  stateArg,
+  expectedMutationsArg = [],
+  expectedActionsArg = [],
+  doneArg = noop,
 ) => {
+  let action = actionArg;
+  let payload = payloadArg;
+  let state = stateArg;
+  let expectedMutations = expectedMutationsArg;
+  let expectedActions = expectedActionsArg;
+  let done = doneArg;
+
+  if (typeof actionArg !== 'function') {
+    ({
+      action,
+      payload,
+      state,
+      expectedMutations = [],
+      expectedActions = [],
+      done = noop,
+    } = actionArg);
+  }
+
   const mutations = [];
   const actions = [];
 

spec/frontend/helpers/vuex_action_helper_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/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 = () => {};
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-    /**
-     * In order to test the helper properly, we need to overwrite the Jest
-     * `expect` helper.  We test that the testAction helper properly passes the
-     * dispatched actions/committed mutations to the Jest helper.
-     */
-    originalExpect = expect;
-    assertion = null;
-    global.expect = actual => ({
-      toEqual: () => {
-        originalExpect(actual).toEqual(assertion);
-      },
-    });
-  });
+import testActionFn from './vuex_action_helper';
 
-  afterEach(() => {
-    mock.restore();
-    global.expect = originalExpect;
-  });
+const testActionFnWithOptionsArg = (...args) => {
+  const [action, payload, state, expectedMutations, expectedActions, done] = args;
+  return testActionFn({ action, payload, state, expectedMutations, expectedActions, done });
+};
 
-  it('properly passes state and payload to action', () => {
-    const exampleState = { FOO: 12, BAR: 3 };
-    const examplePayload = { BAZ: 73, BIZ: 55 };
+describe.each([testActionFn, testActionFnWithOptionsArg])(
+  'VueX test helper (testAction)',
+  testAction => {
+    let originalExpect;
+    let assertion;
+    let mock;
+    const noop = () => {};
 
-    const action = ({ state }, payload) => {
-      originalExpect(state).toEqual(exampleState);
-      originalExpect(payload).toEqual(examplePayload);
-    };
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      /**
+       * In order to test the helper properly, we need to overwrite the Jest
+       * `expect` helper.  We test that the testAction helper properly passes the
+       * dispatched actions/committed mutations to the Jest helper.
+       */
+      originalExpect = expect;
+      assertion = null;
+      global.expect = actual => ({
+        toEqual: () => {
+          originalExpect(actual).toEqual(assertion);
+        },
+      });
+    });
 
-    assertion = { mutations: [], actions: [] };
+    afterEach(() => {
+      mock.restore();
+      global.expect = originalExpect;
+    });
 
-    testAction(action, examplePayload, exampleState);
-  });
+    it('properly passes state and payload to action', () => {
+      const exampleState = { FOO: 12, BAR: 3 };
+      const examplePayload = { BAZ: 73, BIZ: 55 };
 
-  describe('given a sync action', () => {
-    it('mocks committing mutations', () => {
-      const action = ({ commit }) => {
-        commit('MUTATION');
+      const action = ({ state }, payload) => {
+        originalExpect(state).toEqual(exampleState);
+        originalExpect(payload).toEqual(examplePayload);
       };
 
-      assertion = { mutations: [{ type: 'MUTATION' }], actions: [] };
+      assertion = { mutations: [], actions: [] };
 
-      testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+      testAction(action, examplePayload, exampleState);
     });
 
-    it('mocks dispatching actions', () => {
-      const action = ({ dispatch }) => {
-        dispatch('ACTION');
-      };
+    describe('given a sync action', () => {
+      it('mocks committing mutations', () => {
+        const action = ({ commit }) => {
+          commit('MUTATION');
+        };
 
-      assertion = { actions: [{ type: 'ACTION' }], mutations: [] };
+        assertion = { mutations: [{ type: 'MUTATION' }], actions: [] };
 
-      testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
-    });
+        testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+      });
 
-    it('works with done callback once finished', done => {
-      assertion = { mutations: [], actions: [] };
+      it('mocks dispatching actions', () => {
+        const action = ({ dispatch }) => {
+          dispatch('ACTION');
+        };
 
-      testAction(noop, null, {}, assertion.mutations, assertion.actions, done);
-    });
+        assertion = { actions: [{ type: 'ACTION' }], mutations: [] };
 
-    it('returns a promise', done => {
-      assertion = { mutations: [], actions: [] };
+        testAction(action, null, {}, assertion.mutations, assertion.actions, noop);
+      });
 
-      testAction(noop, null, {}, assertion.mutations, assertion.actions)
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-
-  describe('given an async action (returning a promise)', () => {
-    let lastError;
-    const data = { FOO: 'BAR' };
-
-    const asyncAction = ({ commit, dispatch }) => {
-      dispatch('ACTION');
-
-      return axios
-        .get(TEST_HOST)
-        .catch(error => {
-          commit('ERROR');
-          lastError = error;
-          throw error;
-        })
-        .then(() => {
-          commit('SUCCESS');
-          return data;
-        });
-    };
+      it('works with done callback once finished', done => {
+        assertion = { mutations: [], actions: [] };
 
-    beforeEach(() => {
-      lastError = null;
+        testAction(noop, null, {}, assertion.mutations, assertion.actions, done);
+      });
+
+      it('returns a promise', done => {
+        assertion = { mutations: [], actions: [] };
+
+        testAction(noop, null, {}, assertion.mutations, assertion.actions)
+          .then(done)
+          .catch(done.fail);
+      });
     });
 
-    it('works with done callback once finished', done => {
-      mock.onGet(TEST_HOST).replyOnce(200, 42);
+    describe('given an async action (returning a promise)', () => {
+      let lastError;
+      const data = { FOO: 'BAR' };
 
-      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+      const asyncAction = ({ commit, dispatch }) => {
+        dispatch('ACTION');
 
-      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done);
-    });
+        return axios
+          .get(TEST_HOST)
+          .catch(error => {
+            commit('ERROR');
+            lastError = error;
+            throw error;
+          })
+          .then(() => {
+            commit('SUCCESS');
+            return data;
+          });
+      };
 
-    it('returns original data of successful promise while checking actions/mutations', done => {
-      mock.onGet(TEST_HOST).replyOnce(200, 42);
+      beforeEach(() => {
+        lastError = null;
+      });
 
-      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+      it('works with done callback once finished', done => {
+        mock.onGet(TEST_HOST).replyOnce(200, 42);
 
-      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions)
-        .then(res => {
-          originalExpect(res).toEqual(data);
-          done();
-        })
-        .catch(done.fail);
-    });
+        assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+
+        testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done);
+      });
+
+      it('returns original data of successful promise while checking actions/mutations', done => {
+        mock.onGet(TEST_HOST).replyOnce(200, 42);
 
-    it('returns original error of rejected promise while checking actions/mutations', done => {
-      mock.onGet(TEST_HOST).replyOnce(500, '');
+        assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
 
-      assertion = { mutations: [{ type: 'ERROR' }], actions: [{ type: 'ACTION' }] };
+        testAction(asyncAction, null, {}, assertion.mutations, assertion.actions)
+          .then(res => {
+            originalExpect(res).toEqual(data);
+            done();
+          })
+          .catch(done.fail);
+      });
 
-      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions)
-        .then(done.fail)
-        .catch(error => {
-          originalExpect(error).toBe(lastError);
-          done();
-        });
+      it('returns original error of rejected promise while checking actions/mutations', done => {
+        mock.onGet(TEST_HOST).replyOnce(500, '');
+
+        assertion = { mutations: [{ type: 'ERROR' }], actions: [{ type: 'ACTION' }] };
+
+        testAction(asyncAction, null, {}, assertion.mutations, assertion.actions)
+          .then(done.fail)
+          .catch(error => {
+            originalExpect(error).toBe(lastError);
+            done();
+          });
+      });
     });
-  });
 
-  it('works with async actions not returning promises', done => {
-    const data = { FOO: 'BAR' };
+    it('works with async actions not returning promises', done => {
+      const data = { FOO: 'BAR' };
 
-    const asyncAction = ({ commit, dispatch }) => {
-      dispatch('ACTION');
+      const asyncAction = ({ commit, dispatch }) => {
+        dispatch('ACTION');
 
-      axios
-        .get(TEST_HOST)
-        .then(() => {
-          commit('SUCCESS');
-          return data;
-        })
-        .catch(error => {
-          commit('ERROR');
-          throw error;
-        });
-    };
+        axios
+          .get(TEST_HOST)
+          .then(() => {
+            commit('SUCCESS');
+            return data;
+          })
+          .catch(error => {
+            commit('ERROR');
+            throw error;
+          });
+      };
 
-    mock.onGet(TEST_HOST).replyOnce(200, 42);
+      mock.onGet(TEST_HOST).replyOnce(200, 42);
 
-    assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
+      assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
 
-    testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done);
-  });
-});
+      testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done);
+    });
+  },
+);