Add badge store mutation tests

9 files changed, 498 insertions, 77 deletions

diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index ee4e703990a..ae942b2c1a7 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -5,6 +5,7 @@ import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
 
 const badgePreviewDelayInMilliseconds = 1500;
@@ -63,18 +64,19 @@ export default {
       );
     },
     renderedImageUrl() {
-      return this.renderedBadge.renderedImageUrl;
+      return this.renderedBadge ? this.renderedBadge.renderedImageUrl : '';
     },
     renderedLinkUrl() {
-      return this.renderedBadge.renderedLinkUrl;
+      return this.renderedBadge ? this.renderedBadge.renderedLinkUrl : '';
     },
     imageUrl: {
       get() {
         return this.badge ? this.badge.imageUrl : '';
       },
       set(imageUrl) {
+        const badge = this.badge || createEmptyBadge();
         this.updateBadgeInForm({
-          ...this.badge,
+          ...badge,
           imageUrl,
         });
       },
@@ -84,8 +86,9 @@ export default {
         return this.badge ? this.badge.linkUrl : '';
       },
       set(linkUrl) {
+        const badge = this.badge || createEmptyBadge();
         this.updateBadgeInForm({
-          ...this.badge,
+          ...badge,
           linkUrl,
         });
       },
@@ -182,7 +185,7 @@ export default {
       <label for="badge-preview">{{ s__('Badges|Badge image preview') }}</label>
       <badge
         id="badge-preview"
-        v-show="renderedImageUrl && !isRendering"
+        v-show="renderedBadge && !isRendering"
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
@@ -192,7 +195,7 @@ export default {
         />
       </p>
       <p
-        v-show="!renderedImageUrl && !isRendering"
+        v-show="!renderedBadge && !isRendering"
         class="disabled-content"
       >{{ s__('Badges|No image to preview') }}</p>
     </div>
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index c83a07934e6..83f78394238 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -49,8 +49,8 @@ export default {
       @submit="onSubmitModal">
       <div class="well">
         <badge
-          :image-url="badgeInModal.renderedImageUrl"
-          :link-url="badgeInModal.renderedLinkUrl"
+          :image-url="badgeInModal ? badgeInModal.renderedImageUrl : ''"
+          :link-url="badgeInModal ? badgeInModal.renderedLinkUrl : ''"
         />
       </div>
       <p v-html="deleteModalText"></p>
diff --git a/app/assets/javascripts/badges/store/actions.js b/app/assets/javascripts/badges/store/actions.js
index dbbe8c2c5e0..d5ec9dc7fe2 100644
--- a/app/assets/javascripts/badges/store/actions.js
+++ b/app/assets/javascripts/badges/store/actions.js
@@ -77,10 +77,10 @@ export const loadBadges = ({ dispatch, state }, data) => {
     });
 };
 
-export const requestRenderBadge = ({ commit }) => commit(types.REQUEST_RENDER_BADGE);
+export const requestRenderBadge = ({ commit }) => commit(types.REQUEST_RENDERED_BADGE);
 export const receiveRenderBadge = ({ commit }, renderedBadge) =>
-  commit(types.RECEIVE_RENDER_BADGE, renderedBadge);
-export const receiveRenderBadgeError = ({ commit }) => commit(types.RECEIVE_RENDER_BADGE_ERROR);
+  commit(types.RECEIVE_RENDERED_BADGE, renderedBadge);
+export const receiveRenderBadgeError = ({ commit }) => commit(types.RECEIVE_RENDERED_BADGE_ERROR);
 
 export const renderBadge = ({ dispatch, state }) => {
   const badge = state.isEditing ? state.badgeInEditForm : state.badgeInAddForm;
@@ -107,10 +107,10 @@ export const renderBadge = ({ dispatch, state }) => {
     });
 };
 
-export const requestUpdateBadge = ({ commit }) => commit(types.REQUEST_UPDATE_BADGE);
+export const requestUpdateBadge = ({ commit }) => commit(types.REQUEST_UPDATED_BADGE);
 export const receiveUpdateBadge = ({ commit }, updatedBadge) =>
-  commit(types.RECEIVE_UPDATE_BADGE, updatedBadge);
-export const receiveUpdateBadgeError = ({ commit }) => commit(types.RECEIVE_UPDATE_BADGE_ERROR);
+  commit(types.RECEIVE_UPDATED_BADGE, updatedBadge);
+export const receiveUpdateBadgeError = ({ commit }) => commit(types.RECEIVE_UPDATED_BADGE_ERROR);
 
 export const saveBadge = ({ dispatch, state }) => {
   const badge = state.badgeInEditForm;
@@ -135,7 +135,7 @@ export const stopEditing = ({ commit }) => {
 };
 
 export const updateModal = ({ commit }, badge) => {
-  commit(types.UPDATE_MODAL, badge);
+  commit(types.UPDATE_BADGE_IN_MODAL, badge);
 };
 
 export const updateBadgeInForm = ({ commit }, badge) => {
diff --git a/app/assets/javascripts/badges/store/mutation_types.js b/app/assets/javascripts/badges/store/mutation_types.js
index 35060035dc1..814fcb044ee 100644
--- a/app/assets/javascripts/badges/store/mutation_types.js
+++ b/app/assets/javascripts/badges/store/mutation_types.js
@@ -4,16 +4,16 @@ export const RECEIVE_LOAD_BADGES = 'RECEIVE_LOAD_BADGES';
 export const RECEIVE_LOAD_BADGES_ERROR = 'RECEIVE_LOAD_BADGES_ERROR';
 export const RECEIVE_NEW_BADGE = 'RECEIVE_NEW_BADGE';
 export const RECEIVE_NEW_BADGE_ERROR = 'RECEIVE_NEW_BADGE_ERROR';
-export const RECEIVE_RENDER_BADGE = 'RECEIVE_RENDER_BADGE';
-export const RECEIVE_RENDER_BADGE_ERROR = 'RECEIVE_RENDER_BADGE_ERROR';
-export const RECEIVE_UPDATE_BADGE = 'RECEIVE_UPDATE_BADGE';
-export const RECEIVE_UPDATE_BADGE_ERROR = 'RECEIVE_UPDATE_BADGE_ERROR';
+export const RECEIVE_RENDERED_BADGE = 'RECEIVE_RENDERED_BADGE';
+export const RECEIVE_RENDERED_BADGE_ERROR = 'RECEIVE_RENDERED_BADGE_ERROR';
+export const RECEIVE_UPDATED_BADGE = 'RECEIVE_UPDATED_BADGE';
+export const RECEIVE_UPDATED_BADGE_ERROR = 'RECEIVE_UPDATED_BADGE_ERROR';
 export const REQUEST_DELETE_BADGE = 'REQUEST_DELETE_BADGE';
 export const REQUEST_LOAD_BADGES = 'REQUEST_LOAD_BADGES';
 export const REQUEST_NEW_BADGE = 'REQUEST_NEW_BADGE';
-export const REQUEST_RENDER_BADGE = 'REQUEST_RENDER_BADGE';
-export const REQUEST_UPDATE_BADGE = 'REQUEST_UPDATE_BADGE';
+export const REQUEST_RENDERED_BADGE = 'REQUEST_RENDERED_BADGE';
+export const REQUEST_UPDATED_BADGE = 'REQUEST_UPDATED_BADGE';
 export const START_EDITING = 'START_EDITING';
 export const STOP_EDITING = 'STOP_EDITING';
 export const UPDATE_BADGE_IN_FORM = 'UPDATE_BADGE_IN_FORM';
-export const UPDATE_MODAL = 'UPDATE_MODAL';
+export const UPDATE_BADGE_IN_MODAL = 'UPDATE_BADGE_IN_MODAL';
diff --git a/app/assets/javascripts/badges/store/mutations.js b/app/assets/javascripts/badges/store/mutations.js
index 21c39336ba8..fc9af41384c 100644
--- a/app/assets/javascripts/badges/store/mutations.js
+++ b/app/assets/javascripts/badges/store/mutations.js
@@ -1,22 +1,22 @@
 import * as types from './mutation_types';
 import { PROJECT_BADGE } from '../constants';
-import createEmptyBadge from '../empty_badge';
 
-const reorderBadges = badges => badges.sort((a, b) => {
-  if (a.kind !== b.kind) {
-    return a.kind === PROJECT_BADGE ? 1 : -1;
-  }
+const reorderBadges = badges =>
+  badges.sort((a, b) => {
+    if (a.kind !== b.kind) {
+      return a.kind === PROJECT_BADGE ? 1 : -1;
+    }
 
-  return a.id - b.id;
-});
+    return a.id - b.id;
+  });
 
 export default {
   [types.RECEIVE_NEW_BADGE](state, newBadge) {
     Object.assign(state, {
-      badgeInAddForm: createEmptyBadge(),
+      badgeInAddForm: null,
       badges: reorderBadges(state.badges.concat(newBadge)),
       isSaving: false,
-      renderedBadge: createEmptyBadge(),
+      renderedBadge: null,
     });
   },
   [types.RECEIVE_NEW_BADGE_ERROR](state) {
@@ -30,41 +30,32 @@ export default {
     });
   },
 
-  [types.RECEIVE_UPDATE_BADGE](state, updatedBadge) {
+  [types.RECEIVE_UPDATED_BADGE](state, updatedBadge) {
     const badges = state.badges.map(badge => {
       if (badge.id === updatedBadge.id) {
         return updatedBadge;
       }
       return badge;
     });
-    reorderBadges(badges);
     Object.assign(state, {
-      badgeInEditForm: createEmptyBadge(),
+      badgeInEditForm: null,
       badges,
       isEditing: false,
       isSaving: false,
-      renderedBadge: createEmptyBadge(),
+      renderedBadge: null,
     });
   },
-  [types.RECEIVE_UPDATE_BADGE_ERROR](state) {
+  [types.RECEIVE_UPDATED_BADGE_ERROR](state) {
     Object.assign(state, {
       isSaving: false,
     });
   },
-  [types.REQUEST_UPDATE_BADGE](state) {
+  [types.REQUEST_UPDATED_BADGE](state) {
     Object.assign(state, {
       isSaving: true,
     });
   },
 
-  [types.REQUEST_LOAD_BADGES](state, data) {
-    Object.assign(state, {
-      kind: data.kind, // project or group
-      apiEndpointUrl: data.apiEndpointUrl,
-      docsUrl: data.docsUrl,
-      isLoading: true,
-    });
-  },
   [types.RECEIVE_LOAD_BADGES](state, badges) {
     Object.assign(state, {
       badges,
@@ -76,13 +67,27 @@ export default {
       isLoading: false,
     });
   },
+  [types.REQUEST_LOAD_BADGES](state, data) {
+    Object.assign(state, {
+      kind: data.kind, // project or group
+      apiEndpointUrl: data.apiEndpointUrl,
+      docsUrl: data.docsUrl,
+      isLoading: true,
+    });
+  },
 
-  [types.REQUEST_DELETE_BADGE](state, badgeId) {
+  [types.RECEIVE_DELETE_BADGE](state, badgeId) {
+    const badges = state.badges.filter(badge => badge.id !== badgeId);
+    Object.assign(state, {
+      badges,
+    });
+  },
+  [types.RECEIVE_DELETE_BADGE_ERROR](state, badgeId) {
     const badges = state.badges.map(badge => {
       if (badge.id === badgeId) {
         return {
           ...badge,
-          isDeleting: true,
+          isDeleting: false,
         };
       }
 
@@ -92,18 +97,12 @@ export default {
       badges,
     });
   },
-  [types.RECEIVE_DELETE_BADGE](state, badgeId) {
-    const badges = state.badges.filter(badge => badge.id !== badgeId);
-    Object.assign(state, {
-      badges,
-    });
-  },
-  [types.RECEIVE_DELETE_BADGE_ERROR](state, badgeId) {
+  [types.REQUEST_DELETE_BADGE](state, badgeId) {
     const badges = state.badges.map(badge => {
       if (badge.id === badgeId) {
         return {
           ...badge,
-          isDeleting: false,
+          isDeleting: true,
         };
       }
 
@@ -114,15 +113,15 @@ export default {
     });
   },
 
-  [types.REQUEST_RENDER_BADGE](state) {
-    Object.assign(state, { isRendering: true });
-  },
-  [types.RECEIVE_RENDER_BADGE](state, renderedBadge) {
+  [types.RECEIVE_RENDERED_BADGE](state, renderedBadge) {
     Object.assign(state, { isRendering: false, renderedBadge });
   },
-  [types.RECEIVE_RENDER_BADGE_ERROR](state) {
+  [types.RECEIVE_RENDERED_BADGE_ERROR](state) {
     Object.assign(state, { isRendering: false });
   },
+  [types.REQUEST_RENDERED_BADGE](state) {
+    Object.assign(state, { isRendering: true });
+  },
 
   [types.START_EDITING](state, badge) {
     Object.assign(state, {
@@ -133,11 +132,12 @@ export default {
   },
   [types.STOP_EDITING](state) {
     Object.assign(state, {
-      badgeInEditForm: createEmptyBadge(),
+      badgeInEditForm: null,
       isEditing: false,
-      renderedBadge: createEmptyBadge(),
+      renderedBadge: null,
     });
   },
+
   [types.UPDATE_BADGE_IN_FORM](state, badge) {
     if (state.isEditing) {
       Object.assign(state, {
@@ -149,7 +149,8 @@ export default {
       });
     }
   },
-  [types.UPDATE_MODAL](state, badge) {
+
+  [types.UPDATE_BADGE_IN_MODAL](state, badge) {
     Object.assign(state, {
       badgeInModal: badge,
     });
diff --git a/app/assets/javascripts/badges/store/state.js b/app/assets/javascripts/badges/store/state.js
index 720b3522971..43413aeb5bb 100644
--- a/app/assets/javascripts/badges/store/state.js
+++ b/app/assets/javascripts/badges/store/state.js
@@ -1,13 +1,11 @@
-import createEmptyBadge from '../empty_badge';
-
 export default () => ({
   apiEndpointUrl: null,
   badgeInAddForm: null,
   badgeInEditForm: null,
-  badgeInModal: createEmptyBadge(),
+  badgeInModal: null,
   badges: [],
   docsUrl: null,
-  renderedBadge: createEmptyBadge(),
+  renderedBadge: null,
   isEditing: false,
   isLoading: false,
   isRendering: false,
diff --git a/spec/javascripts/badges/dummy_badge.js b/spec/javascripts/badges/dummy_badge.js
index 9165de3e2c2..6aaff21c503 100644
--- a/spec/javascripts/badges/dummy_badge.js
+++ b/spec/javascripts/badges/dummy_badge.js
@@ -1,14 +1,18 @@
 import { PROJECT_BADGE } from '~/badges/constants';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 
-export const createDummyBadge = () => ({
-  imageUrl: `${TEST_HOST}/badge/image/url`,
-  isDeleting: false,
-  linkUrl: `${TEST_HOST}/badge/link/url`,
-  kind: PROJECT_BADGE,
-  renderedImageUrl: DUMMY_IMAGE_URL,
-  renderedLinkUrl: `${TEST_HOST}/rendered/badge/link/url`,
-});
+export const createDummyBadge = () => {
+  const id = Math.floor(1000 * Math.random());
+  return {
+    id,
+    imageUrl: `${TEST_HOST}/badges/${id}/image/url`,
+    isDeleting: false,
+    linkUrl: `${TEST_HOST}/badges/${id}/link/url`,
+    kind: PROJECT_BADGE,
+    renderedImageUrl: `${DUMMY_IMAGE_URL}?id=${id}`,
+    renderedLinkUrl: `${TEST_HOST}/badges/${id}/rendered/link/url`,
+  };
+};
 
 export const createDummyBadgeResponse = () => ({
   image_url: `${TEST_HOST}/badge/image/url`,
diff --git a/spec/javascripts/badges/store/actions_spec.js b/spec/javascripts/badges/store/actions_spec.js
index c7e92bf3b1a..923a5f6c2b7 100644
--- a/spec/javascripts/badges/store/actions_spec.js
+++ b/spec/javascripts/badges/store/actions_spec.js
@@ -5,7 +5,7 @@ import createState from '~/badges/store/state';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 import { createDummyBadge, createDummyBadgeResponse } from '../dummy_badge';
 
-describe('Badges store actions', () => {
+fdescribe('Badges store actions', () => {
   const dummyEndpointUrl = `${TEST_HOST}/badges/endpoint`;
   const dummyBadges = [{ ...createDummyBadge(), id: 5 }, { ...createDummyBadge(), id: 6 }];
 
@@ -14,6 +14,7 @@ describe('Badges store actions', () => {
   let badgeId;
 
   beforeEach(() => {
+    spyOn(store, 'commit');
     axiosMock = new MockAdapter(axios);
     store.replaceState({
       ...createState(),
@@ -29,7 +30,7 @@ describe('Badges store actions', () => {
   });
 
   describe('addBadge', () => {
-    it('sets isSaving and adds badge to list for successful response', done => {
+    it('commits REQUEST_NEW_BADGE and RECEIVE_NEW_BADGE', done => {
       const newId = 3;
       expect(store.state.badges.length).toBe(dummyBadges.length);
 
diff --git a/spec/javascripts/badges/store/mutations_spec.js b/spec/javascripts/badges/store/mutations_spec.js
new file mode 100644
index 00000000000..932bfa84bea
--- /dev/null
+++ b/spec/javascripts/badges/store/mutations_spec.js
@@ -0,0 +1,414 @@
+import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
+import store from '~/badges/store';
+import * as types from '~/badges/store/mutation_types';
+import { createDummyBadge } from '../dummy_badge';
+
+describe('Badges store mutations', () => {
+  let dummyBadge;
+
+  beforeEach(() => {
+    dummyBadge = createDummyBadge();
+  });
+
+  describe('RECEIVE_DELETE_BADGE', () => {
+    beforeEach(() => {
+      const badges = [
+        { ...dummyBadge, id: dummyBadge.id - 1 },
+        dummyBadge,
+        { ...dummyBadge, id: dummyBadge.id + 1 },
+      ];
+
+      store.replaceState({
+        ...store.state,
+        badges,
+      });
+    });
+
+    it('removes deleted badge', () => {
+      const badgeCount = store.state.badges.length;
+
+      store.commit(types.RECEIVE_DELETE_BADGE, dummyBadge.id);
+
+      expect(store.state.badges.length).toBe(badgeCount - 1);
+      expect(store.state.badges.indexOf(dummyBadge)).toBe(-1);
+    });
+  });
+
+  describe('RECEIVE_DELETE_BADGE_ERROR', () => {
+    beforeEach(() => {
+      const badges = [
+        { ...dummyBadge, id: dummyBadge.id - 1, isDeleting: false },
+        { ...dummyBadge, isDeleting: true },
+        { ...dummyBadge, id: dummyBadge.id + 1, isDeleting: true },
+      ];
+
+      store.replaceState({
+        ...store.state,
+        badges,
+      });
+    });
+
+    it('sets isDeleting to false', () => {
+      const badgeCount = store.state.badges.length;
+
+      store.commit(types.RECEIVE_DELETE_BADGE_ERROR, dummyBadge.id);
+
+      expect(store.state.badges.length).toBe(badgeCount);
+      expect(store.state.badges[0].isDeleting).toBe(false);
+      expect(store.state.badges[1].isDeleting).toBe(false);
+      expect(store.state.badges[2].isDeleting).toBe(true);
+    });
+  });
+
+  describe('RECEIVE_LOAD_BADGES', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isLoading: 'not false',
+      });
+    });
+
+    it('sets isLoading to false', () => {
+      store.commit(types.RECEIVE_LOAD_BADGES);
+
+      expect(store.state.isLoading).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_LOAD_BADGES_ERROR', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isLoading: 'not false',
+      });
+    });
+
+    it('sets isLoading to false', () => {
+      store.commit(types.RECEIVE_LOAD_BADGES_ERROR);
+
+      expect(store.state.isLoading).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_NEW_BADGE', () => {
+    beforeEach(() => {
+      const badges = [
+        { ...dummyBadge, id: dummyBadge.id - 1, kind: GROUP_BADGE },
+        { ...dummyBadge, id: dummyBadge.id + 1, kind: GROUP_BADGE },
+        { ...dummyBadge, id: dummyBadge.id - 1, kind: PROJECT_BADGE },
+        { ...dummyBadge, id: dummyBadge.id + 1, kind: PROJECT_BADGE },
+      ];
+      store.replaceState({
+        ...store.state,
+        badgeInAddForm: createDummyBadge(),
+        badges,
+        isSaving: 'dummy value',
+        renderedBadge: createDummyBadge(),
+      });
+    });
+
+    it('resets the add form', () => {
+      store.commit(types.RECEIVE_NEW_BADGE, dummyBadge);
+
+      expect(store.state.badgeInAddForm).toBe(null);
+      expect(store.state.isSaving).toBe(false);
+      expect(store.state.renderedBadge).toBe(null);
+    });
+
+    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);
+
+      expect(store.state.badges.length).toBe(badgeCount + 1);
+      expect(store.state.badges.indexOf(dummyBadge)).toBe(1);
+    });
+
+    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);
+
+      expect(store.state.badges.length).toBe(badgeCount + 1);
+      expect(store.state.badges.indexOf(dummyBadge)).toBe(3);
+    });
+  });
+
+  describe('RECEIVE_NEW_BADGE_ERROR', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isSaving: 'dummy value',
+      });
+    });
+
+    it('sets isSaving to false', () => {
+      store.commit(types.RECEIVE_NEW_BADGE_ERROR);
+
+      expect(store.state.isSaving).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_RENDERED_BADGE', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isRendering: 'dummy value',
+        renderedBadge: 'dummy value',
+      });
+    });
+
+    it('sets renderedBadge', () => {
+      store.commit(types.RECEIVE_RENDERED_BADGE, dummyBadge);
+
+      expect(store.state.isRendering).toBe(false);
+      expect(store.state.renderedBadge).toBe(dummyBadge);
+    });
+  });
+
+  describe('RECEIVE_RENDERED_BADGE_ERROR', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isRendering: 'dummy value',
+      });
+    });
+
+    it('sets isRendering to false', () => {
+      store.commit(types.RECEIVE_RENDERED_BADGE_ERROR);
+
+      expect(store.state.isRendering).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_UPDATED_BADGE', () => {
+    beforeEach(() => {
+      const badges = [
+        { ...dummyBadge, id: dummyBadge.id - 1 },
+        dummyBadge,
+        { ...dummyBadge, id: dummyBadge.id + 1 },
+      ];
+      store.replaceState({
+        ...store.state,
+        badgeInEditForm: createDummyBadge(),
+        badges,
+        isEditing: 'dummy value',
+        isSaving: 'dummy value',
+        renderedBadge: createDummyBadge(),
+      });
+    });
+
+    it('resets the edit form', () => {
+      store.commit(types.RECEIVE_UPDATED_BADGE, dummyBadge);
+
+      expect(store.state.badgeInAddForm).toBe(null);
+      expect(store.state.isSaving).toBe(false);
+      expect(store.state.renderedBadge).toBe(null);
+    });
+
+    it('replaces the updated badge', () => {
+      const badgeCount = store.state.badges.length;
+      const badgeIndex = store.state.badges.indexOf(dummyBadge);
+      const newBadge = { id: dummyBadge.id, dummy: 'value' };
+
+      store.commit(types.RECEIVE_UPDATED_BADGE, newBadge);
+
+      expect(store.state.badges.length).toBe(badgeCount);
+      expect(store.state.badges[badgeIndex]).toBe(newBadge);
+    });
+  });
+
+  describe('RECEIVE_UPDATED_BADGE_ERROR', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isSaving: 'dummy value',
+      });
+    });
+
+    it('sets isSaving to false', () => {
+      store.commit(types.RECEIVE_NEW_BADGE_ERROR);
+
+      expect(store.state.isSaving).toBe(false);
+    });
+  });
+
+  describe('REQUEST_DELETE_BADGE', () => {
+    beforeEach(() => {
+      const badges = [
+        { ...dummyBadge, id: dummyBadge.id - 1, isDeleting: false },
+        { ...dummyBadge, isDeleting: false },
+        { ...dummyBadge, id: dummyBadge.id + 1, isDeleting: true },
+      ];
+
+      store.replaceState({
+        ...store.state,
+        badges,
+      });
+    });
+
+    it('sets isDeleting to true', () => {
+      const badgeCount = store.state.badges.length;
+
+      store.commit(types.REQUEST_DELETE_BADGE, dummyBadge.id);
+
+      expect(store.state.badges.length).toBe(badgeCount);
+      expect(store.state.badges[0].isDeleting).toBe(false);
+      expect(store.state.badges[1].isDeleting).toBe(true);
+      expect(store.state.badges[2].isDeleting).toBe(true);
+    });
+  });
+
+  describe('REQUEST_LOAD_BADGES', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        apiEndpointUrl: 'some endpoint',
+        docsUrl: 'some url',
+        isLoading: 'dummy value',
+        kind: 'some kind',
+      });
+    });
+
+    it('sets isLoading to true and initializes the store', () => {
+      const dummyData = {
+        apiEndpointUrl: 'dummy endpoint',
+        docsUrl: 'dummy url',
+        kind: 'dummy kind',
+      };
+
+      store.commit(types.REQUEST_LOAD_BADGES, dummyData);
+
+      expect(store.state.isLoading).toBe(true);
+      expect(store.state.apiEndpointUrl).toBe(dummyData.apiEndpointUrl);
+      expect(store.state.docsUrl).toBe(dummyData.docsUrl);
+      expect(store.state.kind).toBe(dummyData.kind);
+    });
+  });
+
+  describe('REQUEST_NEW_BADGE', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isSaving: 'dummy value',
+      });
+    });
+
+    it('sets isSaving to true', () => {
+      store.commit(types.REQUEST_NEW_BADGE);
+
+      expect(store.state.isSaving).toBe(true);
+    });
+  });
+
+  describe('REQUEST_RENDERED_BADGE', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isRendering: 'dummy value',
+      });
+    });
+
+    it('sets isRendering to true', () => {
+      store.commit(types.REQUEST_RENDERED_BADGE);
+
+      expect(store.state.isRendering).toBe(true);
+    });
+  });
+
+  describe('REQUEST_UPDATED_BADGE', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        isSaving: 'dummy value',
+      });
+    });
+
+    it('sets isSaving to true', () => {
+      store.commit(types.REQUEST_NEW_BADGE);
+
+      expect(store.state.isSaving).toBe(true);
+    });
+  });
+
+  describe('START_EDITING', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        badgeInEditForm: 'dummy value',
+        isEditing: 'dummy value',
+        renderedBadge: 'dummy value',
+      });
+    });
+
+    it('initializes the edit form', () => {
+      store.commit(types.START_EDITING, dummyBadge);
+
+      expect(store.state.isEditing).toBe(true);
+      expect(store.state.badgeInEditForm).toEqual(dummyBadge);
+      expect(store.state.renderedBadge).toEqual(dummyBadge);
+    });
+  });
+
+  describe('STOP_EDITING', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        badgeInEditForm: 'dummy value',
+        isEditing: 'dummy value',
+        renderedBadge: 'dummy value',
+      });
+    });
+
+    it('resets the edit form', () => {
+      store.commit(types.STOP_EDITING);
+
+      expect(store.state.isEditing).toBe(false);
+      expect(store.state.badgeInEditForm).toBe(null);
+      expect(store.state.renderedBadge).toBe(null);
+    });
+  });
+
+  describe('UPDATE_BADGE_IN_FORM', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        badgeInAddForm: 'dummy value',
+        badgeInEditForm: 'dummy value',
+      });
+    });
+
+    it('sets badgeInEditForm if isEditing is true', () => {
+      store.state.isEditing = true;
+
+      store.commit(types.UPDATE_BADGE_IN_FORM, dummyBadge);
+
+      expect(store.state.badgeInEditForm).toBe(dummyBadge);
+    });
+
+    it('sets badgeInAddForm if isEditing is false', () => {
+      store.state.isEditing = false;
+
+      store.commit(types.UPDATE_BADGE_IN_FORM, dummyBadge);
+
+      expect(store.state.badgeInAddForm).toBe(dummyBadge);
+    });
+  });
+
+  describe('UPDATE_BADGE_IN_MODAL', () => {
+    beforeEach(() => {
+      store.replaceState({
+        ...store.state,
+        badgeInModal: 'dummy value',
+      });
+    });
+
+    it('sets badgeInModal', () => {
+      store.commit(types.UPDATE_BADGE_IN_MODAL, dummyBadge);
+
+      expect(store.state.badgeInModal).toBe(dummyBadge);
+    });
+  });
+});