Add more methods on blessing.fetch

resources/assets/src/scripts/net.ts

@@ -77,9 +77,9 @@ export function get(url: string, params = empty): Promise<any> {
   return walkFetch(new Request(`${blessing.base_url}${url}${qs && `?${qs}`}`, init))
 }
 
-export function post(url: string, data = empty): Promise<any> {
+function nonGet(method: string, url: string, data: any): Promise<any> {
   emit('beforeFetch', {
-    method: 'POST',
+    method: method.toUpperCase(),
     url,
     data,
   })
@@ -88,7 +88,7 @@ export function post(url: string, data = empty): Promise<any> {
 
   const request = new Request(`${blessing.base_url}${url}`, {
     body: isFormData ? data : JSON.stringify(data),
-    method: 'POST',
+    method: method.toUpperCase(),
     ...init,
   })
   !isFormData && request.headers.set('Content-Type', 'application/json')
@@ -96,10 +96,26 @@ export function post(url: string, data = empty): Promise<any> {
   return walkFetch(request)
 }
 
+export function post(url: string, data = empty): Promise<any> {
+  return nonGet('POST', url, data)
+}
+
+export function put(url: string, data = empty): Promise<any> {
+  return nonGet('PUT', url, data)
+}
+
+export function del(url: string, data = empty): Promise<any> {
+  return nonGet('DELETE', url, data)
+}
+
 Vue.use(_Vue => {
   Object.defineProperty(_Vue.prototype, '$http', {
-    get: () => ({ get, post }),
+    get: () => ({
+      get, post, put, del,
+    }),
   })
 })
 
-blessing.fetch = { get, post }
+blessing.fetch = {
+  get, post, put, del,
+}

resources/assets/src/shims.d.ts

@@ -22,6 +22,8 @@ declare global {
     fetch: {
       get(url: string, params?: object): Promise<object>
       post(url: string, data?: object): Promise<object>
+      put(url: string, data?: object): Promise<object>
+      del(url: string, data?: object): Promise<object>
     }
 
     event: {
@@ -46,8 +48,9 @@ declare module 'vue/types/vue' {
 
     $http: {
       get(url: string, params?: object)
-
       post(url: string, data?: object): { code?: number, message?: string }
+      put(url: string, data?: object): { code?: number, message?: string }
+      del(url: string, data?: object): { code?: number, message?: string }
     }
 
     $route: RegExpExecArray | null

resources/assets/tests/scripts/net.test.ts

@@ -73,6 +73,46 @@ test('the POST method', async () => {
   expect(window.fetch.mock.calls[2][0].body).toBe('{}')
 })
 
+test('the PUT method', () => {
+  const fetch = jest.fn()
+  window.fetch = fetch
+
+  const stub = jest.fn()
+  on('beforeFetch', stub)
+
+  net.put('/abc')
+  expect(fetch).toBeCalled()
+  // eslint-disable-next-line prefer-destructuring
+  const request = fetch.mock.calls[0][0]
+  expect(request.method).toBe('PUT')
+
+  expect(stub).toBeCalledWith({
+    method: 'PUT',
+    url: '/abc',
+    data: {},
+  })
+})
+
+test('the DELETE method', () => {
+  const fetch = jest.fn()
+  window.fetch = fetch
+
+  const stub = jest.fn()
+  on('beforeFetch', stub)
+
+  net.del('/abc')
+  expect(fetch).toBeCalled()
+  // eslint-disable-next-line prefer-destructuring
+  const request = fetch.mock.calls[0][0]
+  expect(request.method).toBe('DELETE')
+
+  expect(stub).toBeCalledWith({
+    method: 'DELETE',
+    url: '/abc',
+    data: {},
+  })
+})
+
 test('low level fetch', async () => {
   const json = jest.fn().mockResolvedValue({})
   window.fetch = jest.fn()

resources/assets/tests/shims.d.ts

@@ -8,6 +8,8 @@ declare module 'vue/types/vue' {
       $http: {
         get: jest.Mock<any>
         post: jest.Mock<any>
+        put: jest.Mock<any>
+        del: jest.Mock<any>
       },
       $message: {
         info: jest.Mock<ReturnType<typeof Message>, Parameters<typeof Message>>

resources/assets/tests/ts-shims/net.ts

@@ -17,3 +17,13 @@ export const post = {} as jest.Mock<
   ReturnType<typeof net.post>,
   Parameters<typeof net.post>
 >
+
+export const put = {} as jest.Mock<
+  ReturnType<typeof net.post>,
+  Parameters<typeof net.post>
+>
+
+export const del = {} as jest.Mock<
+  ReturnType<typeof net.post>,
+  Parameters<typeof net.post>
+>