Merge pull request #15 from Chantouch/feature/accept-query-string-as-object

feat(query): 🚀 accept object as query string

Author: chantouchsek

.eslintrc

@@ -14,7 +14,7 @@
     "sourceType": "module"
     // "project": "./tsconfig.json"
   },
-  "plugins": ["@typescript-eslint", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier", "promise", "import"],
   "rules": {
     "prettier/prettier": ["error"],
     "@typescript-eslint/no-explicit-any": 0,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-api-queries",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Elegant and simple way to build requests for REST API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,12 +58,13 @@
     "@types/jest": "^26.0.14",
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^14.11.10",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.4.1",
     "axios-mock-adapter": "^1.18.2",
     "bootstrap-vue": "^2.17.3",
-    "eslint": "^7.11.0",
+    "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.13.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.3.0",
     "jest": "^26.5.3",
@@ -85,6 +86,7 @@
     "camelcase-keys": "^6.2.2",
     "escape-string-regexp": "^4.0.0",
     "lodash.merge": "^4.6.2",
+    "qs": "^6.9.6",
     "snakecase-keys": "^3.2.0"
   }
 }

package.json

@@ -19,6 +19,7 @@ describe('BaseProxy', () => {
     BaseProxy.$http = axios
     proxy = new PostProxy()
     mockAdapter = new MockAdapter(axios)
+    mockAdapter.reset()
   })
 
   it('check if http was installed', async () => {
@@ -72,6 +73,15 @@ describe('BaseProxy', () => {
     expect(data).toEqual(items)
   })
 
+  it('Check network server return 500', async () => {
+    mockAdapter.onGet('/posts').networkError()
+    try {
+      await proxy.all()
+    } catch (e) {
+      expect(e.message).toBe('Network Error')
+    }
+  })
+
   it('will fetch all records with query params', async () => {
     const items = [
       { first_name: 'Dara', last_name: 'Hok', id: 1 },
@@ -120,6 +130,26 @@ describe('BaseProxy', () => {
       .all()
     expect(data).toEqual(items)
   })
+  it('it should accept query params as object', async () => {
+    const items = [
+      { first_name: 'Dara', last_name: 'Hok', id: 1 },
+      { first_name: 'Chantouch', last_name: 'Sek', id: 2 },
+    ]
+    mockAdapter
+      .onGet('/posts?search[id]=1&first_name=Dara')
+      .reply(200, { data: items })
+    const params = {
+      search: { id: 1 },
+      first_name: 'Dara',
+      last_name: 'Hok',
+    }
+    const { data } = await proxy
+      .setParameters(params)
+      .removeParameters(['last_name'])
+      .all()
+    expect(data).toEqual(items)
+    expect(proxy.parameters).toEqual({ search: { id: 1 }, first_name: 'Dara' })
+  })
 
   it('it should find an item by id', async () => {
     const item = { first_name: 'Chantouch', last_name: 'Sek', id: 1 }
@@ -145,13 +175,14 @@ describe('BaseProxy', () => {
 
   it('transforms the data to a FormData object if there is a File', async () => {
     const file = new File(['hello world!'], 'myfile')
-    const form = { field1: {}, field2: {} }
+    const form = { field1: {}, field2: {}, files: [] }
     form.field1 = {
       foo: 'testFoo',
       bar: ['testBar1', 'testBar2'],
       baz: new Date(Date.UTC(2012, 3, 13, 2, 12)),
     }
     form.field2 = file
+    form.files = [{ file }]
 
     mockAdapter.onPost('/posts').reply((request) => {
       expect(request.data).toBeInstanceOf(FormData)
@@ -160,13 +191,15 @@ describe('BaseProxy', () => {
       expect(request.data.get('field1[bar][1]')).toBe('testBar2')
       expect(request.data.get('field1[baz]')).toBe('2012-04-13T02:12:00.000Z')
       expect(request.data.get('field2')).toEqual(file)
+      expect(request.data.get('files[0][file]')).toEqual(file)
 
       expect(getFormDataKeys(request.data)).toEqual([
         'field1[foo]',
         'field1[bar][0]',
         'field1[bar][1]',
         'field1[baz]',
         'field2',
+        'files[0][file]',
       ])
       return [200, {}]
     })

src/__tests__/base-proxy.test.ts

@@ -44,6 +44,13 @@ describe('Validator', () => {
     expect(validator.missed('name')).toBeTruthy()
     expect(validator.nullState('name')).toBeNull()
   })
+  test('Check nullState function', () => {
+    validator.add('email', 'The email field is required.')
+    expect(validator.nullState('email')).toBeFalsy()
+  })
+  test('Get an none exist error messages by param name', () => {
+    expect(validator.get('email')).toHaveLength(0)
+  })
   test('Get all errors by key', () => {
     validator.add('email', 'The email field is required.')
     expect(validator.get('email').length).toBeGreaterThan(0)
@@ -68,6 +75,13 @@ describe('Validator', () => {
     expect(validator.first('email')).toBe('The email field is required.')
     expect(Object.keys(validator.all()).length).toEqual(2)
   })
+  it('should not allow protopath overwrite', () => {
+    const errors = {
+      __proto__: ['Set __proto__ to overwrite.'],
+    }
+    validator.fill(errors)
+    expect(Object.keys(validator.all()).length).toEqual(0)
+  })
   test('Clear all errors by flush', () => {
     const errors = {
       name: ['The name field is required.'],

src/__tests__/validator.test.ts

@@ -1,8 +1,9 @@
 import type { AxiosError, AxiosInstance, AxiosResponse, Method } from 'axios'
-import { isFile, isArray } from '../util/objects'
-import type { Errors } from '../'
+import { isArray, isFile } from '../util/objects'
+import type { Errors } from '..'
 import Validator from './Validator'
 import { objectToFormData } from '../util/formData'
+import qs from 'qs'
 
 const validator = Validator
 const UNPROCESSABLE_ENTITY = 422
@@ -12,9 +13,13 @@ export interface ParametersType {
 
 class BaseProxy {
   public errors: Errors
+
   public parameters: any | any[]
+
   public readonly endpoint: string
+
   public static $http: AxiosInstance
+
   public static $errorsKeyName = 'errors'
 
   constructor(endpoint: string, parameters?: any | any[]) {
@@ -52,7 +57,7 @@ class BaseProxy {
   }
 
   putWithFile(id: string | number, payload: any): Promise<any> {
-    payload['_method'] = 'put'
+    payload._method = 'put'
     return this.submit('post', `/${this.endpoint}/${id}`, payload)
   }
 
@@ -89,18 +94,15 @@ class BaseProxy {
             }
             reject(error)
           } else {
-            reject()
+            reject(error)
           }
         })
     })
   }
 
   __getParameterString(url: string): string {
-    const keys = Object.keys(this.parameters)
-    const parameters = keys
-      .filter((key: string) => !!this.parameters[key])
-      .map((key: string) => `${key}=${this.parameters[key]}`)
-    return parameters.length === 0 ? url : `${url}?${parameters.join('&')}`
+    const query = qs.stringify(this.parameters, { encode: false })
+    return query ? `${url}?${query}` : url
   }
 
   __getQueryString(parameter: string): any | any[] {

src/core/BaseProxy.ts

@@ -7,9 +7,10 @@ export function objectToFormData(
     return formData.append(parent, object)
   }
   for (const property in object) {
-    if (object.hasOwnProperty(property)) {
-      appendToFormData(formData, getKey(parent, property), object[property])
+    if (!object.hasOwnProperty(property)) {
+      continue
     }
+    appendToFormData(formData, getKey(parent, property), object[property])
   }
   return formData
 }

src/util/formData.ts

@@ -11,7 +11,8 @@
     "types": [
       "@types/node",
       "@nuxt/types",
-      "@types/jest"
+      "@types/jest",
+      "axios"
     ]
   },
   "include": ["src"],