From 6c6c01fb16a981bddbe5f8ab25167ed296d2119d Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Mon, 6 Aug 2018 13:16:10 +0800
Subject: [PATCH] Use fetch and remove axios

---
 package.json                                  |   4 +-
 .../assets/src/components/user/Closet.vue     |  87 +++++++-------
 .../assets/src/components/user/ClosetItem.vue |   7 +-
 .../assets/src/components/user/Profile.vue    |   9 +-
 resources/assets/src/js/net.js                |   9 --
 resources/assets/src/js/polyfill.js           |   1 +
 .../tests/components/user/Closet.test.js      | 113 ++++++++----------
 .../tests/components/user/ClosetItem.test.js  |  37 +++---
 .../tests/components/user/Profile.test.js     |  55 +++++----
 yarn.lock                                     |  17 +--
 10 files changed, 154 insertions(+), 185 deletions(-)

diff --git a/package.json b/package.json
index 8a8c78cd..8ff08132 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.55",
     "admin-lte": "^2.4.2",
-    "axios": "^0.18.0",
     "bootstrap": "^3.3.7",
     "bootstrap-fileinput": "^4.4.7",
     "chart.js": "^2.7.1",
@@ -37,7 +36,8 @@
     "toastr": "^2.1.4",
     "vue": "^2.5.16",
     "vue-good-table": "^2.12.2",
-    "vuejs-paginate": "^2.0.1"
+    "vuejs-paginate": "^2.0.1",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.54",
diff --git a/resources/assets/src/components/user/Closet.vue b/resources/assets/src/components/user/Closet.vue
index fa8e9e93..a5a5fc03 100644
--- a/resources/assets/src/components/user/Closet.vue
+++ b/resources/assets/src/components/user/Closet.vue
@@ -8,20 +8,20 @@
                     <!-- Tabs within a box -->
                     <ul class="nav nav-tabs">
                         <li :class="{ active: category === 'skin' }">
-                            <a 
-                                href="#" 
-                                @click="switchCategory" 
-                                v-t="'general.skin'" 
-                                class="category-switch" 
+                            <a
+                                href="#"
+                                @click="switchCategory"
+                                v-t="'general.skin'"
+                                class="category-switch"
                                 data-toggle="tab"
                             />
                         </li>
                         <li :class="{ active: category === 'cape' }">
-                            <a 
-                                href="#" 
-                                @click="switchCategory" 
-                                v-t="'general.cape'" 
-                                class="category-switch" 
+                            <a
+                                href="#"
+                                @click="switchCategory"
+                                v-t="'general.cape'"
+                                class="category-switch"
                                 data-toggle="tab"
                             />
                         </li>
@@ -29,11 +29,11 @@
                         <li class="pull-right" style="padding: 7px;">
                             <div class="has-feedback pull-right">
                                 <div class="user-search-form">
-                                    <input 
-                                        type="text" 
-                                        v-model="query" 
-                                        @input="search" 
-                                        class="form-control input-sm" 
+                                    <input
+                                        type="text"
+                                        v-model="query"
+                                        @input="search"
+                                        class="form-control input-sm"
                                         :placeholder="$t('user.typeToSearch')"
                                     >
                                     <span class="glyphicon glyphicon-search form-control-feedback"></span>
@@ -42,10 +42,10 @@
                         </li>
                     </ul>
                     <div class="tab-content no-padding">
-                        <div 
-                            v-if="category === 'skin'" 
-                            class="tab-pane box-body" 
-                            :class="{ active: category === 'skin' }" 
+                        <div
+                            v-if="category === 'skin'"
+                            class="tab-pane box-body"
+                            :class="{ active: category === 'skin' }"
                             id="skin-category"
                         >
                             <div v-if="skinItems.length === 0" class="empty-msg">
@@ -65,10 +65,10 @@
                                 ></closet-item>
                             </div>
                         </div>
-                        <div 
-                            v-else 
-                            class="tab-pane box-body" 
-                            :class="{ active: category === 'cape' }" 
+                        <div
+                            v-else
+                            class="tab-pane box-body"
+                            :class="{ active: category === 'cape' }"
                             id="cape-category"
                         >
                             <div v-if="capeItems.length === 0" class="empty-msg">
@@ -142,19 +142,19 @@
             </div>
         </div>
 
-        <div 
-            id="modal-use-as" 
-            class="modal fade" 
-            tabindex="-1" 
+        <div
+            id="modal-use-as"
+            class="modal fade"
+            tabindex="-1"
             role="dialog"
         >
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button 
-                            type="button" 
-                            class="close" 
-                            data-dismiss="modal" 
+                        <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
                             aria-label="Close"
                         >
                             <span aria-hidden="true">&times;</span>
@@ -165,10 +165,10 @@
                         <template v-if="players.length !== 0">
                             <div v-for="player in players" :key="player.pid" class="player-item">
                                 <label class="model-label" :for="player.pid">
-                                    <input 
-                                        type="radio" 
-                                        name="player" 
-                                        :value="player.pid" 
+                                    <input
+                                        type="radio"
+                                        name="player"
+                                        :value="player.pid"
                                         v-model="selectedPlayer"
                                     />
                                     <img :src="avatarUrl(player)" width="35" height="35" />
@@ -189,7 +189,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import toastr from 'toastr';
 import Paginate from 'vuejs-paginate';
 import ClosetItem from './ClosetItem';
@@ -232,15 +231,14 @@ export default {
     methods: {
         search() {},
         async loadCloset(page = 1) {
-            const { data: { items, category, total_pages } } = await axios({
-                method: 'GET',
-                url: '/user/closet-data',
-                params: {
+            const { items, category, total_pages } = await this.$http.get(
+                '/user/closet-data',
+                {
                     category: this.category,
                     q: this.query,
                     page,
                 }
-            });
+            );
             this[`${category}TotalPages`] = total_pages;
             this[`${category}Items`] = items;
         },
@@ -262,7 +260,7 @@ export default {
             return `${blessing.base_url}/avatar/35/${tid}`;
         },
         async selectTexture(tid) {
-            const { data: { type, hash } } = await axios.post(`/skinlib/info/${tid}`);
+            const { type, hash } = await this.$http.post(`/skinlib/info/${tid}`);
             if (type === 'cape') {
                 this.capeUrl = `/textures/${hash}`;
                 this.selectedCape = tid;
@@ -272,8 +270,7 @@ export default {
             }
         },
         async applyTexture() {
-            const { data: players } = await axios.get('/user/player/list');
-            this.players = players;
+            this.players = await this.$http.get('/user/player/list');
             setTimeout(() => {
                 $(this.$el).iCheck({
                     radioClass: 'iradio_square-blue',
@@ -292,7 +289,7 @@ export default {
                 return toastr.info(this.$t('user.emptySelectedTexture'));
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/player/set',
                 {
                     pid: this.selectedPlayer,
diff --git a/resources/assets/src/components/user/ClosetItem.vue b/resources/assets/src/components/user/ClosetItem.vue
index 6827cf44..2f7bf2cb 100644
--- a/resources/assets/src/components/user/ClosetItem.vue
+++ b/resources/assets/src/components/user/ClosetItem.vue
@@ -35,7 +35,6 @@
 <script>
 import { swal } from '../../js/notify';
 import toastr from 'toastr';
-import axios from 'axios';
 
 export default {
     name: 'ClosetItem',
@@ -80,7 +79,7 @@ export default {
                 return;
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/closet/rename',
                 { tid: this.tid, new_name: newTextureName }
             );
@@ -102,7 +101,7 @@ export default {
                 return;
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/closet/remove',
                 { tid: this.tid }
             );
@@ -125,7 +124,7 @@ export default {
                 return;
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/profile/avatar',
                 { tid: this.tid }
             );
diff --git a/resources/assets/src/components/user/Profile.vue b/resources/assets/src/components/user/Profile.vue
index e2a86d96..b0f17aa1 100644
--- a/resources/assets/src/components/user/Profile.vue
+++ b/resources/assets/src/components/user/Profile.vue
@@ -192,7 +192,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import toastr from 'toastr';
 import { swal } from '../../js/notify';
 
@@ -242,7 +241,7 @@ export default {
                 return;
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/profile?action=password',
                 { current_password: oldPassword, new_password: newPassword }
             );
@@ -269,7 +268,7 @@ export default {
                 return;
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/profile?action=nickname',
                 { new_nickname: nickname }
             );
@@ -302,7 +301,7 @@ export default {
                 return;
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/profile?action=email',
                 { new_email: email, password: this.currentPassword }
             );
@@ -320,7 +319,7 @@ export default {
                 return swal({ type: 'warning', html: this.$t('user.emptyDeletePassword') });
             }
 
-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                 '/user/profile?action=delete',
                 { password }
             );
diff --git a/resources/assets/src/js/net.js b/resources/assets/src/js/net.js
index a60948b9..35218ebf 100644
--- a/resources/assets/src/js/net.js
+++ b/resources/assets/src/js/net.js
@@ -1,15 +1,6 @@
 import Vue from 'vue';
-import axios from 'axios';
 import { showAjaxError } from './notify';
 
-axios.defaults.baseURL = blessing.base_url;
-axios.defaults.validateStatus = status => (status >= 200 && status < 300) || status === 422;
-
-axios.interceptors.response.use(
-    response => response,
-    showAjaxError
-);
-
 const empty = Object.create(null);
 const init = {
     credentials: 'same-origin',
diff --git a/resources/assets/src/js/polyfill.js b/resources/assets/src/js/polyfill.js
index ed4d3fd0..0084ec90 100644
--- a/resources/assets/src/js/polyfill.js
+++ b/resources/assets/src/js/polyfill.js
@@ -1,5 +1,6 @@
 import 'core-js/fn/array/includes';
 import 'core-js/fn/array/find';
 import 'es6-promise/auto';
+import 'whatwg-fetch';
 
 Number.parseInt = parseInt;
diff --git a/resources/assets/tests/components/user/Closet.test.js b/resources/assets/tests/components/user/Closet.test.js
index c5842bcb..46aa7be7 100644
--- a/resources/assets/tests/components/user/Closet.test.js
+++ b/resources/assets/tests/components/user/Closet.test.js
@@ -1,42 +1,36 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import Closet from '@/components/user/Closet';
 import ClosetItem from '@/components/user/ClosetItem';
 import Previewer from '@/components/common/Previewer';
-import axios from 'axios';
 import toastr from 'toastr';
 import { swal } from '@/js/notify';
 
-jest.mock('axios');
 jest.mock('@/js/notify');
 
 test('fetch closet data before mount', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     mount(Closet);
     jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
             category: 'skin',
             q: '',
             page: 1,
         }
-    });
+    );
 });
 
 test('switch tabs', () => {
-    axios.mockResolvedValue({
-        data: {
-            items: [],
-            category: 'skin',
-            total_pages: 1
-        }
+    Vue.prototype.$http.get.mockResolvedValue({
+        items: [],
+        category: 'skin',
+        total_pages: 1
     }).mockResolvedValueOnce({
-        data: {
-            items: [],
-            category: 'cape',
-            total_pages: 1
-        }
+        items: [],
+        category: 'cape',
+        total_pages: 1
     });
 
     const wrapper = mount(Closet);
@@ -44,32 +38,30 @@ test('switch tabs', () => {
     const tabSkin = wrapper.findAll('.nav-tabs > li').at(0);
     tabSkin.find('a').trigger('click');
     jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
             category: 'skin',
             q: '',
             page: 1,
         }
-    });
+    );
 
     const tabCape = wrapper.findAll('.nav-tabs > li').at(1);
     tabCape.find('a').trigger('click');
     jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
             category: 'cape',
             q: '',
             page: 1,
         }
-    });
+    );
 });
 
 test('different categories', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
 
     const wrapper = mount(Closet);
     expect(wrapper.findAll('.nav-tabs > li').at(0).classes()).toContain('active');
@@ -82,7 +74,7 @@ test('different categories', () => {
 
 test('search textures', () => {
     jest.useFakeTimers();
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
 
     const wrapper = mount(Closet);
     const input = wrapper.find('input');
@@ -90,21 +82,20 @@ test('search textures', () => {
     input.trigger('input');
     jest.runAllTimers();
     jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
             category: 'skin',
             q: 'q',
             page: 1,
         }
-    });
+    );
 
     jest.useRealTimers();
 });
 
 test('empty closet', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     expect(wrapper.find('#skin-category').text()).toContain('user.emptyClosetMsg');
     wrapper.setData({ category: 'cape' });
@@ -112,7 +103,7 @@ test('empty closet', () => {
 });
 
 test('no matched search result', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     wrapper.setData({ query: 'q' });
     expect(wrapper.find('#skin-category').text()).toContain('general.noResult');
@@ -121,29 +112,29 @@ test('no matched search result', () => {
 });
 
 test('render items', async () => {
-    axios.mockResolvedValue({ data: {
+    Vue.prototype.$http.get.mockResolvedValue({
         items: [
             { tid: 1 },
             { tid: 2 }
         ],
         category: 'skin',
         total_pages: 1
-    } });
+    });
     const wrapper = mount(Closet);
     await wrapper.vm.$nextTick();
     expect(wrapper.findAll(ClosetItem)).toHaveLength(2);
 });
 
 test('reload closet when page changed', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     wrapper.vm.pageChanged();
     jest.runAllTicks();
-    expect(axios).toHaveBeenCalledTimes(2);
+    expect(Vue.prototype.$http.get).toHaveBeenCalledTimes(2);
 });
 
 test('remove skin item', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     wrapper.setData({ skinItems: [{ tid: 1 }, { tid: 2 }] });
     wrapper.vm.removeSkinItem(1);
@@ -151,7 +142,7 @@ test('remove skin item', () => {
 });
 
 test('remove cape item', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     wrapper.setData({ capeItems: [{ tid: 1 }, { tid: 2 }], category: 'cape' });
     wrapper.vm.removeCapeItem(1);
@@ -159,7 +150,7 @@ test('remove cape item', () => {
 });
 
 test('compute avatar URL', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     const { avatarUrl } = wrapper.vm;
     expect(avatarUrl({ preference: 'default', tid_steve: 1 })).toBe('/avatar/35/1');
@@ -167,21 +158,22 @@ test('compute avatar URL', () => {
 });
 
 test('select texture', async () => {
-    axios.mockResolvedValue({ data: {} });
-    axios.post.mockResolvedValueOnce({ data: { type: 'steve', hash: 'a' } })
-        .mockResolvedValueOnce({ data: { type: 'cape', hash: 'b' } });
+    Vue.prototype.$http.get.mockResolvedValue({});
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ type: 'steve', hash: 'a' })
+        .mockResolvedValueOnce({ type: 'cape', hash: 'b' });
 
     const wrapper = mount(Closet);
     wrapper.setData({ skinItems: [{ tid: 1 }] });
     wrapper.find(ClosetItem).vm.$emit('select');
     await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith('/skinlib/info/1');
+    expect(Vue.prototype.$http.post).toBeCalledWith('/skinlib/info/1');
     expect(wrapper.vm.skinUrl).toBe('/textures/a');
 
     wrapper.setData({ skinItems: [], capeItems: [{ tid: 2 }], category: 'cape' });
     wrapper.find(ClosetItem).vm.$emit('select');
     await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith('/skinlib/info/2');
+    expect(Vue.prototype.$http.post).toBeCalledWith('/skinlib/info/2');
     expect(wrapper.vm.capeUrl).toBe('/textures/b');
 });
 
@@ -197,11 +189,12 @@ test('apply texture', async () => {
             dispatchEvent: () => {}
         }
     }));
-    axios.mockResolvedValue({ data: {} });
-    axios.get.mockResolvedValueOnce({ data: [] })
-        .mockResolvedValueOnce({ data: [
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce({})
+        .mockResolvedValueOnce([])
+        .mockResolvedValueOnce([
             { pid: 1, player_name: 'name', preference: 'default', tid_steve: 10 }
-        ] });
+        ]);
 
     const wrapper = mount(Closet);
     const button = wrapper.find(Previewer).findAll('button').at(0);
@@ -223,9 +216,9 @@ test('apply texture', async () => {
 test('submit applying texture', async () => {
     window.$ = jest.fn(() => ({ modal() {} }));
     jest.spyOn(toastr, 'info');
-    axios.mockResolvedValue({ data: {} });
-    axios.post.mockResolvedValueOnce({ data: { errno: 1 } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'ok' } });
+    Vue.prototype.$http.get.mockResolvedValue({});
+    Vue.prototype.$http.post.mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0, msg: 'ok' });
     const wrapper = mount(Closet);
     const button = wrapper.find('.modal-footer > a:nth-child(2)');
 
@@ -238,7 +231,7 @@ test('submit applying texture', async () => {
 
     wrapper.setData({ selectedSkin: 1 });
     button.trigger('click');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/player/set',
         {
             pid: 1,
@@ -251,7 +244,7 @@ test('submit applying texture', async () => {
 
     wrapper.setData({ selectedSkin: 0, selectedCape: 1 });
     button.trigger('click');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/player/set',
         {
             pid: 1,
@@ -266,7 +259,7 @@ test('submit applying texture', async () => {
 });
 
 test('reset selected texture', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
     const wrapper = mount(Closet);
     wrapper.setData({
         selectedSkin: 1,
diff --git a/resources/assets/tests/components/user/ClosetItem.test.js b/resources/assets/tests/components/user/ClosetItem.test.js
index 3866383c..98300d43 100644
--- a/resources/assets/tests/components/user/ClosetItem.test.js
+++ b/resources/assets/tests/components/user/ClosetItem.test.js
@@ -1,10 +1,9 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import { flushPromises } from '../../utils';
 import ClosetItem from '@/components/user/ClosetItem';
-import axios from 'axios';
 import { swal } from '@/js/notify';
 
-jest.mock('axios');
 jest.mock('@/js/notify');
 
 function factory(opt = {}) {
@@ -38,9 +37,9 @@ test('click item body', () => {
 });
 
 test('rename texture', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 0 } })
-        .mockResolvedValueOnce({ data: { errno: 1 } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 0 })
+        .mockResolvedValueOnce({ errno: 1 });
     swal.mockImplementationOnce(() => ({ dismiss: 'cancel' }))
         .mockImplementation(options => {
             options.inputValidator('name');
@@ -53,25 +52,24 @@ test('rename texture', async () => {
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
 
     button.trigger('click');
-    await wrapper.vm.$nextTick();
-
+    await flushPromises();
     expect(wrapper.find('.texture-name > span').text()).toBe('new-name (steve)');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/closet/rename',
         { tid: 1, new_name: 'new-name' }
     );
 });
 
 test('remove texture', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 0 } })
-        .mockResolvedValueOnce({ data: { errno: 1 } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 0 })
+        .mockResolvedValueOnce({ errno: 1 });
     swal
         .mockResolvedValueOnce({ dismiss: 'cancel' })
         .mockResolvedValue({});
@@ -81,7 +79,7 @@ test('remove texture', async () => {
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
@@ -89,13 +87,13 @@ test('remove texture', async () => {
     button.trigger('click');
     await flushPromises();
     expect(wrapper.emitted()['item-removed'][0][0]).toBe(1);
-    expect(axios.post).toBeCalledWith('/user/closet/remove', { tid: 1 });
+    expect(Vue.prototype.$http.post).toBeCalledWith('/user/closet/remove', { tid: 1 });
 });
 
 test('set as avatar', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 0 } })
-        .mockResolvedValueOnce({ data: { errno: 1 } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 0 })
+        .mockResolvedValueOnce({ errno: 1 });
     swal
         .mockResolvedValueOnce({ dismiss: 'cancel' })
         .mockResolvedValue({});
@@ -110,13 +108,14 @@ test('set as avatar', async () => {
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
 
     button.trigger('click');
     await flushPromises();
-    expect(axios.post).toBeCalledWith('/user/profile/avatar', { tid: 1 });
+    await wrapper.vm.$nextTick();
+    expect(Vue.prototype.$http.post).toBeCalledWith('/user/profile/avatar', { tid: 1 });
     expect(window.$).toBeCalledWith('[alt="User Image"]');
 });
diff --git a/resources/assets/tests/components/user/Profile.test.js b/resources/assets/tests/components/user/Profile.test.js
index dc901a4e..b9d96da5 100644
--- a/resources/assets/tests/components/user/Profile.test.js
+++ b/resources/assets/tests/components/user/Profile.test.js
@@ -1,11 +1,10 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import { flushPromises } from '../../utils';
 import Profile from '@/components/user/Profile';
-import axios from 'axios';
 import toastr from 'toastr';
 import { swal } from '@/js/notify';
 
-jest.mock('axios');
 jest.mock('@/js/notify');
 
 test('computed values', () => {
@@ -24,36 +23,36 @@ test('convert linebreak', () => {
 
 test('change password', async () => {
     jest.spyOn(toastr, 'info');
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValueOnce({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValueOnce({ errno: 0, msg: 'o' });
     swal.mockResolvedValue();
     const wrapper = mount(Profile);
     const button = wrapper.find('[data-test=changePassword]');
 
     button.trigger('click');
     expect(toastr.info).toBeCalledWith('user.emptyPassword');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ oldPassword: '1' });
     button.trigger('click');
     expect(toastr.info).toBeCalledWith('user.emptyNewPassword');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ newPassword: '1' });
     button.trigger('click');
     expect(toastr.info).toBeCalledWith('auth.emptyConfirmPwd');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ confirmPassword: '2' });
     button.trigger('click');
     expect(toastr.info).toBeCalledWith('auth.invalidConfirmPwd');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ confirmPassword: '1' });
     button.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/profile?action=password',
         { current_password: '1', new_password: '1' }
     );
@@ -65,9 +64,9 @@ test('change password', async () => {
 });
 
 test('change nickname', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValue({ errno: 0, msg: 'o' });
     swal.mockResolvedValueOnce({})
         .mockResolvedValueOnce({ dismiss: 1 })
         .mockResolvedValue({});
@@ -81,12 +80,12 @@ test('change nickname', async () => {
     const button = wrapper.find('[data-test=changeNickName]');
 
     button.trigger('click');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
     expect(swal).toBeCalledWith({ type: 'error', html: 'user.emptyNewNickName' });
 
     wrapper.setData({ nickname: 'nickname' });
     button.trigger('click');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
     expect(swal).toBeCalledWith({
         text: 'user.changeNickName',
         type: 'question',
@@ -95,7 +94,7 @@ test('change nickname', async () => {
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/profile?action=nickname',
         { new_nickname: 'nickname' }
     );
@@ -108,9 +107,9 @@ test('change nickname', async () => {
 });
 
 test('change email', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValue({ errno: 0, msg: 'o' });
     swal.mockResolvedValueOnce({})
         .mockResolvedValueOnce({})
         .mockResolvedValueOnce({ dismiss: 1 })
@@ -120,12 +119,12 @@ test('change email', async () => {
 
     button.trigger('click');
     expect(swal).toBeCalledWith({ type: 'error', html: 'user.emptyNewEmail' });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ email: 'e' });
     button.trigger('click');
     expect(swal).toBeCalledWith({ type: 'warning', html: 'auth.invalidEmail' });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ email: 'a@b.c', currentPassword: 'abc' });
     button.trigger('click');
@@ -134,11 +133,11 @@ test('change email', async () => {
         type: 'question',
         showCancelButton: true
     });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     button.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/profile?action=email',
         { new_email: 'a@b.c', password: 'abc' }
     );
@@ -153,19 +152,19 @@ test('change email', async () => {
 test('delete account', async () => {
     window.__bs_data__ = { admin: true };
     swal.mockResolvedValue();
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValue({ errno: 0, msg: 'o' });
     const wrapper = mount(Profile);
     const button = wrapper.find('[data-test=deleteAccount]');
 
     button.trigger('click');
     expect(swal).toBeCalledWith({ type: 'warning', html: 'user.emptyDeletePassword' });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
 
     wrapper.setData({ deleteConfirm: 'abc' });
     button.trigger('click');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
         '/user/profile?action=delete',
         { password: 'abc' }
     );
diff --git a/yarn.lock b/yarn.lock
index 5a3d3fa3..8b32c5fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1167,13 +1167,6 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
-axios@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
-  dependencies:
-    follow-redirects "^1.3.0"
-    is-buffer "^1.1.5"
-
 babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -3390,12 +3383,6 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-follow-redirects@^1.3.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
-  dependencies:
-    debug "^3.1.0"
-
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
@@ -8017,6 +8004,10 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.19"
 
+whatwg-fetch@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
+
 whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"