Refactor deleting badges

15 files changed, 155 insertions, 119 deletions

diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index e08455e2fef..4008b4552e6 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -85,41 +85,43 @@ export default {
       :inline="true"
     />
 
-    <template v-show="hasError">
-      <div class="btn-group">
-        <button
-          class="btn btn-default btn-xs"
-          type="button"
-          disabled
-        >
-          <icon
-            class="prepend-left-8 append-right-8"
-            name="doc_image"
-            :size="16"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          class="btn btn-default btn-xs"
-          type="button"
-          disabled
-        >
-          <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
-        </button>
-      </div>
-
+    <div
+      v-show="hasError"
+      class="btn-group"
+    >
       <button
-        class="btn btn-transparent btn-xs text-primary"
+        class="btn btn-default btn-xs"
         type="button"
-        v-tooltip
-        :title="s__('Badges|Reload badge image')"
-        @click="reloadImage"
+        disabled
       >
         <icon
-          name="retry"
+          class="prepend-left-8 append-right-8"
+          name="doc_image"
           :size="16"
+          aria-hidden="true"
         />
       </button>
-    </template>
+      <button
+        class="btn btn-default btn-xs"
+        type="button"
+        disabled
+      >
+        <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
+      </button>
+    </div>
+
+    <button
+      v-show="hasError"
+      class="btn btn-transparent btn-xs text-primary"
+      type="button"
+      v-tooltip
+      :title="s__('Badges|Reload badge image')"
+      @click="reloadImage"
+    >
+      <icon
+        name="retry"
+        :size="16"
+      />
+    </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 2061dfd9421..9bd6286e37d 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -39,7 +39,7 @@ export default {
       return this.badgeInAddForm;
     },
     canSubmit() {
-      return this.badge.image_url && this.badge.link_url && !this.isSaving;
+      return this.badge.imageUrl && this.badge.linkUrl && !this.isSaving;
     },
     helpText() {
       const placeholders = ['project_path', 'project_id', 'default_branch', 'commit_sha']
@@ -56,33 +56,38 @@ export default {
       );
     },
     renderedImageUrl() {
-      return this.renderedBadge.rendered_image_url;
+      return this.renderedBadge.renderedImageUrl;
     },
     renderedLinkUrl() {
-      return this.renderedBadge.rendered_link_url;
+      return this.renderedBadge.renderedLinkUrl;
     },
     imageUrl: {
       get() {
-        return this.badge.image_url;
+        return this.badge.imageUrl;
       },
-      set(value) {
-        this.updateBadgeInForm(value);
+      set(imageUrl) {
+        this.updateBadgeInForm({
+          ...this.badge,
+          imageUrl,
+        });
       },
     },
     linkUrl: {
       get() {
-        return this.badge.link_url;
+        return this.badge.linkUrl;
       },
-      set(value) {
-        this.updateBadgeInForm(value);
+      set(linkUrl) {
+        this.updateBadgeInForm({
+          ...this.badge,
+          linkUrl,
+        });
       },
     },
     submitButtonLabel() {
       if (this.isEditing) {
         return s__('Badges|Save changes');
-      } else {
-        return s__('Badges|Add badge');
       }
+      return s__('Badges|Add badge');
     },
   },
   methods: {
@@ -132,7 +137,8 @@ export default {
 <template>
   <form
     class="prepend-top-default append-bottom-default"
-    @submit.prevent.stop="onSubmit">
+    @submit.prevent.stop="onSubmit"
+  >
     <div class="form-group">
       <label for="badge-link-url">{{ s__('Badges|Link') }}</label>
       <input
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index 9ac543decd3..daba96978e3 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -20,7 +20,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['badgeIdsBeingDeleted', 'kind']),
+    ...mapState(['kind']),
     badgeKindText() {
       if (this.badge.kind === PROJECT_BADGE) {
         return s__('Badges|Project Badge');
@@ -31,9 +31,6 @@ export default {
     canEditBadge() {
       return this.badge.kind === this.kind;
     },
-    isDeleting() {
-      return this.badgeIdsBeingDeleted.includes(this.badge.id);
-    },
   },
   methods: {
     ...mapActions(['editBadge', 'updateModal']),
@@ -45,10 +42,10 @@ export default {
   <div class="gl-responsive-table-row-layout gl-responsive-table-row">
     <badge
       class="table-section section-30"
-      :image-url="badge.rendered_image_url"
-      :link-url="badge.rendered_link_url"
+      :image-url="badge.renderedImageUrl"
+      :link-url="badge.renderedLinkUrl"
     />
-    <span class="table-section section-50 str-truncated">{{ badge.link_url }}</span>
+    <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span>
     <div class="table-section section-10">
       <span class="badge">{{ badgeKindText }}</span>
     </div>
@@ -59,7 +56,7 @@ export default {
         <button
           class="btn btn-default append-right-8"
           type="button"
-          :disabled="isDeleting"
+          :disabled="badge.isDeleting"
           @click="editBadge(badge)"
         >
           <icon
@@ -73,7 +70,7 @@ export default {
           type="button"
           data-toggle="modal"
           data-target="#delete-badge-modal"
-          :disabled="isDeleting"
+          :disabled="badge.isDeleting"
           @click="updateModal(badge)"
         >
           <icon
@@ -83,7 +80,7 @@ export default {
           />
         </button>
         <loading-icon
-          v-show="isDeleting"
+          v-show="badge.isDeleting"
           :inline="true"
         />
       </div>
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 269928f6636..c83a07934e6 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.rendered_image_url"
-          :link-url="badgeInModal.rendered_link_url"
+          :image-url="badgeInModal.renderedImageUrl"
+          :link-url="badgeInModal.renderedLinkUrl"
         />
       </div>
       <p v-html="deleteModalText"></p>
diff --git a/app/assets/javascripts/badges/empty_badge.js b/app/assets/javascripts/badges/empty_badge.js
index 6741675d744..49a9b5e1be8 100644
--- a/app/assets/javascripts/badges/empty_badge.js
+++ b/app/assets/javascripts/badges/empty_badge.js
@@ -1,6 +1,7 @@
 export default () => ({
-  image_url: '',
-  link_url: '',
-  rendered_image_url: '',
-  rendered_link_url: '',
+  imageUrl: '',
+  isDeleting: false,
+  linkUrl: '',
+  renderedImageUrl: '',
+  renderedLinkUrl: '',
 });
diff --git a/app/assets/javascripts/badges/store/actions.js b/app/assets/javascripts/badges/store/actions.js
index 99079a7d51e..252e34989b8 100644
--- a/app/assets/javascripts/badges/store/actions.js
+++ b/app/assets/javascripts/badges/store/actions.js
@@ -5,21 +5,31 @@ export const requestNewBadge = ({ commit }) => commit(types.REQUEST_NEW_BADGE);
 export const receiveNewBadge = ({ commit }, newBadge) => commit(types.RECEIVE_NEW_BADGE, newBadge);
 export const receiveNewBadgeError = ({ commit }) => commit(types.RECEIVE_NEW_BADGE_ERROR);
 
+const transformBackendBadge = badge => ({
+  id: badge.id,
+  imageUrl: badge.image_url,
+  kind: badge.kind,
+  linkUrl: badge.link_url,
+  renderedImageUrl: badge.rendered_image_url,
+  renderedLinkUrl: badge.rendered_link_url,
+  isDeleting: false,
+});
+
 export const addBadge = ({ dispatch, state }) => {
   const newBadge = state.badgeInAddForm;
   const endpoint = state.apiEndpointUrl;
   dispatch('requestNewBadge');
   return axios
     .post(endpoint, {
-      image_url: newBadge.image_url,
-      link_url: newBadge.link_url,
+      image_url: newBadge.imageUrl,
+      link_url: newBadge.linkUrl,
     })
     .catch(error => {
       dispatch('receiveNewBadgeError');
       throw error;
     })
     .then(res => {
-      dispatch('receiveNewBadge', res.data);
+      dispatch('receiveNewBadge', transformBackendBadge(res.data));
     });
 };
 
@@ -63,7 +73,7 @@ export const loadBadges = ({ dispatch, state }, data) => {
       throw error;
     })
     .then(res => {
-      dispatch('receiveLoadBadges', res.data);
+      dispatch('receiveLoadBadges', res.data.map(transformBackendBadge));
     });
 };
 
@@ -74,8 +84,8 @@ export const receiveRenderBadgeError = ({ commit }) => commit(types.RECEIVE_REND
 
 export const renderBadge = ({ dispatch, state }) => {
   const badge = state.isEditing ? state.badgeInEditForm : state.badgeInAddForm;
-  const linkUrl = encodeURIComponent(badge.link_url);
-  const imageUrl = encodeURIComponent(badge.image_url);
+  const linkUrl = encodeURIComponent(badge.linkUrl);
+  const imageUrl = encodeURIComponent(badge.imageUrl);
   if (linkUrl === '' || imageUrl === '') {
     return Promise.resolve(badge);
   }
@@ -89,7 +99,7 @@ export const renderBadge = ({ dispatch, state }) => {
       throw error;
     })
     .then(res => {
-      dispatch('receiveRenderBadge', res.data);
+      dispatch('receiveRenderBadge', transformBackendBadge(res.data));
     });
 };
 
@@ -104,15 +114,15 @@ export const saveBadge = ({ dispatch, state }) => {
   dispatch('requestUpdateBadge');
   return axios
     .put(endpoint, {
-      image_url: badge.image_url,
-      link_url: badge.link_url,
+      image_url: badge.imageUrl,
+      link_url: badge.linkUrl,
     })
     .catch(error => {
       dispatch('receiveUpdateBadgeError');
       throw error;
     })
     .then(res => {
-      dispatch('receiveUpdateBadge', res.data);
+      dispatch('receiveUpdateBadge', transformBackendBadge(res.data));
     });
 };
 
diff --git a/app/assets/javascripts/badges/store/mutations.js b/app/assets/javascripts/badges/store/mutations.js
index 202088c60dc..21c39336ba8 100644
--- a/app/assets/javascripts/badges/store/mutations.js
+++ b/app/assets/javascripts/badges/store/mutations.js
@@ -2,15 +2,13 @@ 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) {
@@ -80,20 +78,39 @@ export default {
   },
 
   [types.REQUEST_DELETE_BADGE](state, badgeId) {
+    const badges = state.badges.map(badge => {
+      if (badge.id === badgeId) {
+        return {
+          ...badge,
+          isDeleting: true,
+        };
+      }
+
+      return badge;
+    });
     Object.assign(state, {
-      badgeIdsBeingDeleted: state.badgeIdsBeingDeleted.concat(badgeId),
+      badges,
     });
   },
   [types.RECEIVE_DELETE_BADGE](state, badgeId) {
-    const badges = state.badges.filter(b => b.id !== badgeId);
+    const badges = state.badges.filter(badge => badge.id !== badgeId);
     Object.assign(state, {
       badges,
-      badgeIdsBeingDeleted: state.badgeIdsBeingDeleted.filter(id => id !== badgeId),
     });
   },
   [types.RECEIVE_DELETE_BADGE_ERROR](state, badgeId) {
+    const badges = state.badges.map(badge => {
+      if (badge.id === badgeId) {
+        return {
+          ...badge,
+          isDeleting: false,
+        };
+      }
+
+      return badge;
+    });
     Object.assign(state, {
-      badgeIdsBeingDeleted: state.badgeIdsBeingDeleted.filter(id => id !== badgeId),
+      badges,
     });
   },
 
diff --git a/app/assets/javascripts/badges/store/state.js b/app/assets/javascripts/badges/store/state.js
index be95fe46159..b92b2a1ac24 100644
--- a/app/assets/javascripts/badges/store/state.js
+++ b/app/assets/javascripts/badges/store/state.js
@@ -2,7 +2,6 @@ import createEmptyBadge from '../empty_badge';
 
 export default () => ({
   apiEndpointUrl: null,
-  badgeIdsBeingDeleted: [],
   badgeInAddForm: createEmptyBadge(),
   badgeInEditForm: createEmptyBadge(),
   badgeInModal: createEmptyBadge(),
diff --git a/spec/javascripts/badges/components/badge_form_spec.js b/spec/javascripts/badges/components/badge_form_spec.js
index f998359b6cc..d7d12a56116 100644
--- a/spec/javascripts/badges/components/badge_form_spec.js
+++ b/spec/javascripts/badges/components/badge_form_spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import BadgeForm from '~/badges/components/badge_form.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import createDummyBadge from '../dummy_badge';
+import { createDummyBadge } from '../dummy_badge';
 
 Vue.use(Vuex);
 
diff --git a/spec/javascripts/badges/components/badge_list_row_spec.js b/spec/javascripts/badges/components/badge_list_row_spec.js
index 10fa380ed57..e51125c13b8 100644
--- a/spec/javascripts/badges/components/badge_list_row_spec.js
+++ b/spec/javascripts/badges/components/badge_list_row_spec.js
@@ -4,7 +4,7 @@ import Vuex from 'vuex';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
 import BadgeListRow from '~/badges/components/badge_list_row.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import createDummyBadge from '../dummy_badge';
+import { createDummyBadge } from '../dummy_badge';
 
 Vue.use(Vuex);
 
@@ -20,7 +20,6 @@ describe('BadgeListRow component', () => {
     `);
     const store = new Vuex.Store({
       state: {
-        badgeIdsBeingDeleted: [],
         kind: PROJECT_BADGE,
       },
     });
@@ -39,11 +38,11 @@ describe('BadgeListRow component', () => {
   it('renders the badge', () => {
     const badgeElement = vm.$el.querySelector('.project-badge');
     expect(badgeElement).not.toBeNull();
-    expect(badgeElement.getAttribute('src')).toBe(badge.rendered_image_url);
+    expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl);
   });
 
   it('renders the badge link', () => {
-    expect(vm.$el).toContainText(badge.link_url);
+    expect(vm.$el).toContainText(badge.linkUrl);
   });
 
   it('renders the badge kind', () => {
diff --git a/spec/javascripts/badges/components/badge_list_spec.js b/spec/javascripts/badges/components/badge_list_spec.js
index 50e91453d99..a98852fe9a5 100644
--- a/spec/javascripts/badges/components/badge_list_spec.js
+++ b/spec/javascripts/badges/components/badge_list_spec.js
@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
 import BadgeList from '~/badges/components/badge_list.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import createDummyBadge from '../dummy_badge';
+import { createDummyBadge } from '../dummy_badge';
 
 describe('BadgeList component', () => {
   const Component = Vue.extend(BadgeList);
@@ -19,7 +19,6 @@ describe('BadgeList component', () => {
     }
     store = new Vuex.Store({
       state: {
-        badgeIdsBeingDeleted: [],
         badges,
         isLoading: false,
         kind: PROJECT_BADGE,
diff --git a/spec/javascripts/badges/components/badge_settings_spec.js b/spec/javascripts/badges/components/badge_settings_spec.js
index d5d808854f3..186a5771e97 100644
--- a/spec/javascripts/badges/components/badge_settings_spec.js
+++ b/spec/javascripts/badges/components/badge_settings_spec.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import BadgeSettings from '~/badges/components/badge_settings.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import createDummyBadge from '../dummy_badge';
+import { createDummyBadge } from '../dummy_badge';
 
 describe('BadgeSettings component', () => {
   const Component = Vue.extend(BadgeSettings);
@@ -49,7 +49,7 @@ describe('BadgeSettings component', () => {
       const badgeElement = modal.querySelector('img.project-badge');
       expect(badgeElement).not.toBe(null);
       const badge = store.state.badgeInModal;
-      expect(badgeElement.getAttribute('src')).toBe(badge.rendered_image_url);
+      expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl);
 
       done();
     });
diff --git a/spec/javascripts/badges/components/badge_spec.js b/spec/javascripts/badges/components/badge_spec.js
index 12466f7bb1c..fd1ecc9cdd8 100644
--- a/spec/javascripts/badges/components/badge_spec.js
+++ b/spec/javascripts/badges/components/badge_spec.js
@@ -23,9 +23,9 @@ describe('Badge component', () => {
   const createComponent = (props, el = null) => {
     vm = mountComponent(Component, props, el);
     const { badgeImage } = findElements();
-    return new Promise(resolve =>
-      badgeImage.addEventListener('load', resolve),
-    ).then(() => Vue.nextTick());
+    return new Promise(resolve => badgeImage.addEventListener('load', resolve)).then(() =>
+      Vue.nextTick(),
+    );
   };
 
   afterEach(() => {
diff --git a/spec/javascripts/badges/dummy_badge.js b/spec/javascripts/badges/dummy_badge.js
index a4b17ccf69b..9165de3e2c2 100644
--- a/spec/javascripts/badges/dummy_badge.js
+++ b/spec/javascripts/badges/dummy_badge.js
@@ -1,7 +1,16 @@
 import { PROJECT_BADGE } from '~/badges/constants';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 
-export default () => ({
+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 createDummyBadgeResponse = () => ({
   image_url: `${TEST_HOST}/badge/image/url`,
   link_url: `${TEST_HOST}/badge/link/url`,
   kind: PROJECT_BADGE,
diff --git a/spec/javascripts/badges/store/actions_spec.js b/spec/javascripts/badges/store/actions_spec.js
index 07aafd66bcf..c7e92bf3b1a 100644
--- a/spec/javascripts/badges/store/actions_spec.js
+++ b/spec/javascripts/badges/store/actions_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import store from '~/badges/store';
 import createState from '~/badges/store/state';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
-import createDummyBadge from '../dummy_badge';
+import { createDummyBadge, createDummyBadgeResponse } from '../dummy_badge';
 
 describe('Badges store actions', () => {
   const dummyEndpointUrl = `${TEST_HOST}/badges/endpoint`;
@@ -37,7 +37,7 @@ describe('Badges store actions', () => {
 
       axiosMock.onPost(dummyEndpointUrl).replyOnce(() => {
         expect(store.state.isSaving).toBe(true);
-        return [200, { ...createDummyBadge(), id: newId }];
+        return [200, { ...createDummyBadgeResponse(), id: newId }];
       });
 
       store
@@ -74,16 +74,15 @@ describe('Badges store actions', () => {
   describe('deleteBadge', () => {
     let deleteRequestMock;
 
-    const isDeleting = () => store.state.badgeIdsBeingDeleted.includes(badgeId);
-
+    const findBadge = () => store.state.badges.find(b => b.id === badgeId);
     beforeEach(() => {
       deleteRequestMock = axiosMock.onDelete(`${dummyEndpointUrl}/${badgeId}`);
     });
 
     it('removes badge on successful response', done => {
-      expect(isDeleting()).toBe(false);
+      expect(findBadge().isDeleting).toBe(false);
       deleteRequestMock.replyOnce(() => {
-        expect(isDeleting()).toBe(true);
+        expect(findBadge().isDeleting).toBe(true);
         return [204, ''];
       });
 
@@ -93,17 +92,17 @@ describe('Badges store actions', () => {
           const badges = store.state.badges;
           expect(badges.length).toBe(badgeCount - 1);
           expect(badges[0].id).not.toBe(badgeId);
-          expect(isDeleting()).toBe(false);
+          expect(findBadge()).toBe(undefined);
         })
         .then(done)
         .catch(done.fail);
     });
 
     it('does not remove badge on error response', done => {
-      expect(isDeleting()).toBe(false);
+      expect(findBadge().isDeleting).toBe(false);
 
       deleteRequestMock.replyOnce(() => {
-        expect(isDeleting()).toBe(true);
+        expect(findBadge().isDeleting).toBe(true);
         return [500, ''];
       });
 
@@ -114,7 +113,7 @@ describe('Badges store actions', () => {
           const badges = store.state.badges;
           expect(badges.length).toBe(badgeCount);
           expect(badges[0].id).toBe(badgeId);
-          expect(isDeleting()).toBe(false);
+          expect(findBadge().isDeleting).toBe(false);
         })
         .then(done)
         .catch(done.fail);
@@ -150,7 +149,7 @@ describe('Badges store actions', () => {
 
     it('returns immediately if link_url is empty', done => {
       spyOn(axios, 'get');
-      store.state.badgeInAddForm.link_url = '';
+      store.state.badgeInAddForm.linkUrl = '';
 
       store
         .dispatch('renderBadge')
@@ -163,7 +162,7 @@ describe('Badges store actions', () => {
 
     it('returns immediately if image_url is empty', done => {
       spyOn(axios, 'get');
-      store.state.badgeInAddForm.image_url = '';
+      store.state.badgeInAddForm.imageUrl = '';
 
       store
         .dispatch('renderBadge')
@@ -176,13 +175,14 @@ describe('Badges store actions', () => {
 
     it('makes a request with escaped user values', done => {
       const dummyReponse = {
+        ...createDummyBadgeResponse(),
         rendered_link_url: 'new badger',
         rendered_image_url: 'new image',
       };
       const badge = store.state.badgeInAddForm;
       const renderUrl = `${dummyEndpointUrl}/render?link_url=${encodeURIComponent(
-        badge.link_url,
-      )}&image_url=${encodeURIComponent(badge.image_url)}`;
+        badge.linkUrl,
+      )}&image_url=${encodeURIComponent(badge.imageUrl)}`;
       axiosMock.onGet(renderUrl).replyOnce(() => {
         expect(store.state.isRendering).toBe(true);
         return [200, dummyReponse];
@@ -191,7 +191,9 @@ describe('Badges store actions', () => {
       store
         .dispatch('renderBadge')
         .then(() => {
-          expect(store.state.renderedBadge).toEqual(dummyReponse);
+          const renderedBadge = store.state.renderedBadge;
+          expect(renderedBadge.renderedLinkUrl).toEqual(dummyReponse.rendered_link_url);
+          expect(renderedBadge.renderedImageUrl).toEqual(dummyReponse.rendered_image_url);
           expect(store.state.isRendering).toBe(false);
         })
         .then(done)
@@ -214,19 +216,14 @@ describe('Badges store actions', () => {
 
       store.state.badgeInEditForm = {
         ...store.state.badges[0],
-        image_url: newImageUrl,
+        imageUrl: newImageUrl,
       };
 
       axiosMock.onPut(`${dummyEndpointUrl}/${badgeId}`).replyOnce(req => {
         expect(store.state.isSaving).toBe(true);
-
-        const oldBadge = store.state.badges[0];
-        expect(oldBadge.image_url).toBe(oldImageUrl);
-
         const requestData = JSON.parse(req.data);
         expect(requestData.image_url).toBe(newImageUrl);
-
-        return [200, { ...oldBadge, ...requestData }];
+        return [200, { ...createDummyBadgeResponse(), ...requestData, id: badgeId }];
       });
 
       store
@@ -236,7 +233,7 @@ describe('Badges store actions', () => {
 
           expect(store.state.badges.length).toBe(dummyBadges.length);
           expect(store.state.badges[0].id).toBe(badgeId);
-          expect(store.state.badges[0].image_url).toBe(newImageUrl);
+          expect(store.state.badges[0].imageUrl).toBe(newImageUrl);
         })
         .then(done)
         .catch(done.fail);
@@ -279,9 +276,9 @@ describe('Badges store actions', () => {
       expect(store.state.isLoading).toBe(false);
       expect(store.state.apiEndpointUrl).toBe(dummyEndpointUrl);
       const newBadges = [
-        { ...createDummyBadge(), id: 42 },
-        { ...createDummyBadge(), id: 43 },
-        { ...createDummyBadge(), id: 44 },
+        { ...createDummyBadgeResponse(), id: 42 },
+        { ...createDummyBadgeResponse(), id: 43 },
+        { ...createDummyBadgeResponse(), id: 44 },
       ];
       axiosMock.onGet(newEndpointUrl).replyOnce(200, newBadges);