Use Async Action Creator helper for badges storewinh-vuex-action-pattern

intentionally left blank

4 files changed, 43 insertions, 87 deletions

diff --git a/app/assets/javascripts/badges/store/actions.js b/app/assets/javascripts/badges/store/actions.js
index 5542278b3e0..6e2f81625b7 100644
--- a/app/assets/javascripts/badges/store/actions.js
+++ b/app/assets/javascripts/badges/store/actions.js
@@ -1,4 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
+import { createAsyncAction } from '~/lib/utils/vuex/async_action';
 import types from './mutation_types';
 
 export const transformBackendBadge = badge => ({
@@ -12,32 +13,22 @@ export const transformBackendBadge = badge => ({
 });
 
 export default {
-  requestNewBadge({ commit }) {
-    commit(types.REQUEST_NEW_BADGE);
-  },
-  receiveNewBadge({ commit }, newBadge) {
-    commit(types.RECEIVE_NEW_BADGE, newBadge);
-  },
-  receiveNewBadgeError({ commit }) {
-    commit(types.RECEIVE_NEW_BADGE_ERROR);
-  },
-  addBadge({ dispatch, state }) {
-    const newBadge = state.badgeInAddForm;
-    const endpoint = state.apiEndpointUrl;
-    dispatch('requestNewBadge');
-    return axios
-      .post(endpoint, {
-        image_url: newBadge.imageUrl,
-        link_url: newBadge.linkUrl,
-      })
-      .catch(error => {
-        dispatch('receiveNewBadgeError');
-        throw error;
-      })
-      .then(res => {
-        dispatch('receiveNewBadge', transformBackendBadge(res.data));
-      });
-  },
+  addBadge: createAsyncAction({
+    asyncRequest({ state }) {
+      const newBadge = state.badgeInAddForm;
+      const endpoint = state.apiEndpointUrl;
+      return axios
+        .post(endpoint, {
+          image_url: newBadge.imageUrl,
+          link_url: newBadge.linkUrl,
+        })
+        .then(res => transformBackendBadge(res.data));
+    },
+
+    requestMutation: types.REQUEST_NEW_BADGE,
+    receiveMutation: types.RECEIVE_NEW_BADGE,
+    receiveErrorMutation: types.RECEIVE_NEW_BADGE_ERROR,
+  }),
   requestDeleteBadge({ commit }, badgeId) {
     commit(types.REQUEST_DELETE_BADGE, badgeId);
   },
diff --git a/app/assets/javascripts/badges/store/mutations.js b/app/assets/javascripts/badges/store/mutations.js
index bd84e68c00f..31ee9dd1107 100644
--- a/app/assets/javascripts/badges/store/mutations.js
+++ b/app/assets/javascripts/badges/store/mutations.js
@@ -11,7 +11,7 @@ const reorderBadges = badges =>
   });
 
 export default {
-  [types.RECEIVE_NEW_BADGE](state, newBadge) {
+  [types.RECEIVE_NEW_BADGE](state, { result: newBadge }) {
     Object.assign(state, {
       badgeInAddForm: null,
       badges: reorderBadges(state.badges.concat(newBadge)),
diff --git a/spec/javascripts/badges/store/actions_spec.js b/spec/javascripts/badges/store/actions_spec.js
index e8d5f8c3aac..770738ba86c 100644
--- a/spec/javascripts/badges/store/actions_spec.js
+++ b/spec/javascripts/badges/store/actions_spec.js
@@ -29,54 +29,14 @@ describe('Badges store actions', () => {
     axiosMock.restore();
   });
 
-  describe('requestNewBadge', () => {
-    it('commits REQUEST_NEW_BADGE', done => {
-      testAction(
-        actions.requestNewBadge,
-        null,
-        state,
-        [{ type: mutationTypes.REQUEST_NEW_BADGE }],
-        [],
-        done,
-      );
-    });
-  });
-
-  describe('receiveNewBadge', () => {
-    it('commits RECEIVE_NEW_BADGE', done => {
-      const newBadge = createDummyBadge();
-      testAction(
-        actions.receiveNewBadge,
-        newBadge,
-        state,
-        [{ type: mutationTypes.RECEIVE_NEW_BADGE, payload: newBadge }],
-        [],
-        done,
-      );
-    });
-  });
-
-  describe('receiveNewBadgeError', () => {
-    it('commits RECEIVE_NEW_BADGE_ERROR', done => {
-      testAction(
-        actions.receiveNewBadgeError,
-        null,
-        state,
-        [{ type: mutationTypes.RECEIVE_NEW_BADGE_ERROR }],
-        [],
-        done,
-      );
-    });
-  });
-
   describe('addBadge', () => {
     let badgeInAddForm;
-    let dispatch;
+    let commit;
     let endpointMock;
 
     beforeEach(() => {
       endpointMock = axiosMock.onPost(dummyEndpointUrl);
-      dispatch = jasmine.createSpy('dispatch');
+      commit = jasmine.createSpy('commit');
       badgeInAddForm = createDummyBadge();
       state = {
         ...state,
@@ -84,7 +44,7 @@ describe('Badges store actions', () => {
       };
     });
 
-    it('dispatches requestNewBadge and receiveNewBadge for successful response', done => {
+    it('commits REQUEST_NEW_BADGE and RECEIVE_NEW_BADGE for successful response', done => {
       const dummyResponse = createDummyBadgeResponse();
 
       endpointMock.replyOnce(req => {
@@ -95,22 +55,25 @@ describe('Badges store actions', () => {
           }),
         );
 
-        expect(dispatch.calls.allArgs()).toEqual([['requestNewBadge']]);
-        dispatch.calls.reset();
+        expect(commit).toHaveBeenCalledTimes(1);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.REQUEST_NEW_BADGE);
+        commit.calls.reset();
+
         return [200, dummyResponse];
       });
 
-      const dummyBadge = transformBackendBadge(dummyResponse);
       actions
-        .addBadge({ state, dispatch })
-        .then(() => {
-          expect(dispatch.calls.allArgs()).toEqual([['receiveNewBadge', dummyBadge]]);
+        .addBadge({ state, commit })
+        .then(result => {
+          expect(result).toEqual(transformBackendBadge(dummyResponse));
+          expect(commit).toHaveBeenCalledTimes(1);
+          expect(commit).toHaveBeenCalledWith(mutationTypes.RECEIVE_NEW_BADGE, { result });
         })
         .then(done)
         .catch(done.fail);
     });
 
-    it('dispatches requestNewBadge and receiveNewBadgeError for error response', done => {
+    it('commits REQUEST_NEW_BADGE and RECEIVE_NEW_BADGE_ERROR for error response', done => {
       endpointMock.replyOnce(req => {
         expect(req.data).toBe(
           JSON.stringify({
@@ -119,16 +82,20 @@ describe('Badges store actions', () => {
           }),
         );
 
-        expect(dispatch.calls.allArgs()).toEqual([['requestNewBadge']]);
-        dispatch.calls.reset();
+        expect(commit).toHaveBeenCalledTimes(1);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.REQUEST_NEW_BADGE);
+        commit.calls.reset();
+
         return [500, ''];
       });
 
       actions
-        .addBadge({ state, dispatch })
+        .addBadge({ state, commit })
         .then(() => done.fail('Expected Ajax call to fail!'))
-        .catch(() => {
-          expect(dispatch.calls.allArgs()).toEqual([['receiveNewBadgeError']]);
+        .catch(error => {
+          expect(error.message).toBe('Request failed with status code 500');
+          expect(commit).toHaveBeenCalledTimes(1);
+          expect(commit).toHaveBeenCalledWith(mutationTypes.RECEIVE_NEW_BADGE_ERROR, { error });
         })
         .then(done)
         .catch(done.fail);
diff --git a/spec/javascripts/badges/store/mutations_spec.js b/spec/javascripts/badges/store/mutations_spec.js
index 8d26f83339d..97a9c70c911 100644
--- a/spec/javascripts/badges/store/mutations_spec.js
+++ b/spec/javascripts/badges/store/mutations_spec.js
@@ -112,7 +112,7 @@ describe('Badges store mutations', () => {
     });
 
     it('resets the add form', () => {
-      store.commit(types.RECEIVE_NEW_BADGE, dummyBadge);
+      store.commit(types.RECEIVE_NEW_BADGE, { result: dummyBadge });
 
       expect(store.state.badgeInAddForm).toBe(null);
       expect(store.state.isSaving).toBe(false);
@@ -122,8 +122,7 @@ describe('Badges store mutations', () => {
     it('inserts group badge at correct position', () => {
       const badgeCount = store.state.badges.length;
       dummyBadge = { ...dummyBadge, kind: GROUP_BADGE };
-
-      store.commit(types.RECEIVE_NEW_BADGE, dummyBadge);
+      store.commit(types.RECEIVE_NEW_BADGE, { result: dummyBadge });
 
       expect(store.state.badges.length).toBe(badgeCount + 1);
       expect(store.state.badges.indexOf(dummyBadge)).toBe(1);
@@ -132,8 +131,7 @@ describe('Badges store mutations', () => {
     it('inserts project badge at correct position', () => {
       const badgeCount = store.state.badges.length;
       dummyBadge = { ...dummyBadge, kind: PROJECT_BADGE };
-
-      store.commit(types.RECEIVE_NEW_BADGE, dummyBadge);
+      store.commit(types.RECEIVE_NEW_BADGE, { result: dummyBadge });
 
       expect(store.state.badges.length).toBe(badgeCount + 1);
       expect(store.state.badges.indexOf(dummyBadge)).toBe(3);