Merge pull request #7 from odranoelBR/develop

Develop

README.md

@@ -4,15 +4,23 @@
 
 <hr />
 
+[![codecov](https://codecov.io/gh/odranoelBR/vue-quasar-select-api/branch/main/graph/badge.svg?token=8QP6T5DBBJ)](https://codecov.io/gh/odranoelBR/vue-quasar-select-api)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/odranoelbr/vue-quasar-select-api?color=9CB922)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/195b52a4-2361-4344-97ff-f4395074b638/deploy-status)](https://app.netlify.com/sites/vue-quasar-select-api/deploys)
+
 ## Links
 * [Vuejs Page](https://vuejs.org/)
 * [Quasar Framework Page](http://quasar-framework.org/)
 
 ## Install 
-...
+```
+quasar ext add select-api
+```
 
 ## Uninstall
-...
+```
+quasar ext remove select-api
+```
 
 ## Demo 
 ...

test/jest/__tests__/SelectApi.spec.js

@@ -1,7 +1,6 @@
 import { mountQuasar } from '../index'
 import axios from 'axios'
 import SelectApi from '@components/SelectApi.vue'
-import response from './response.json'
 
 jest.mock('axios');
 
@@ -19,8 +18,8 @@ beforeEach(() => {
 const defaultPropsData = () => ({ http: axios, api: '' })
 
 let returnData = [
-  { id: 1, first_name: 'Brominator', email: '[email protected]' },
-  { id: 2, first_name: 'Foo f', email: '[email protected]' }
+  { id: 1, first_name: 'Brominator' },
+  { id: 2, first_name: 'Foo f' }
 ]
 
 test('mount component with request', async () => {
@@ -118,3 +117,54 @@ test('get $emit errorOnGet event', async () => {
 
   expect(wrapper.emitted().errorOnGet).toBeTruthy()
 })
+
+test('nested api response', async () => {
+
+  axios.get.mockResolvedValueOnce({
+    data: {
+      people: [],
+      cars: {
+        data: returnData
+      }
+    }
+  });
+
+  const props = defaultPropsData()
+  props.optionFormater = (list) => {
+    return list.cars.data
+  }
+
+  const wrapper = await mountQuasar(SelectApi, {
+    propsData: props
+  })
+
+  expect(wrapper.vm.clearOptions).toHaveLength(2)
+  expect(wrapper.vm.options).toHaveLength(2)
+  expect(wrapper.vm.clearOptions[0]['first_name']).toBe('Brominator')
+})
+
+test('filtering the list', async () => {
+
+  axios.get.mockResolvedValueOnce({ data: returnData })
+
+  const props = defaultPropsData()
+  props.filter = true
+  props.useInput = true
+  props.optionValue = 'id'
+  props.optionLabel = 'first_name'
+
+  const wrapper = await mountQuasar(SelectApi, {
+    propsData: props
+  })
+
+  expect(wrapper.vm.clearOptions).toHaveLength(2)
+  expect(wrapper.vm.options).toHaveLength(2)
+  expect(wrapper.vm.qListeners.filter).toBeTruthy()
+  expect(wrapper.emitted().filter).toBeFalsy()
+
+  wrapper.vm.filterHandler('Bro', (fn) => fn())
+
+
+  expect(wrapper.vm.clearOptions).toHaveLength(2)
+  expect(wrapper.vm.options).toHaveLength(1)
+})

test/jest/index.js

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils'
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils'
 import * as All from 'quasar'
 import Vue from 'vue'
 const { Cookies, Quasar } = All

ui/src/components/SelectApi.vue

@@ -32,11 +32,10 @@ export default {
   },
   data: () => ({
     loading: false,
-    model: '',
     options: [],
     clearOptions: []
   }),
-  mounted () {
+  created () {
     if (this.getOnStart) {
       this.get()
     }
@@ -65,6 +64,7 @@ export default {
           */
           this.$emit('successOnGet', response)
 
+
           if (this.optionFormater) {
             this.clearOptions = this.optionFormater(response.data)
             this.options = this.optionFormater(response.data)
@@ -85,13 +85,14 @@ export default {
     addFilter () {
       if (this.filter) {
         this.qListeners.filter = true
-        this.$on('filter', (val, update, abort) => {
-          update(() => {
-            const needle = val.toLowerCase()
-            this.options = this.clearOptions.filter(v => v[this.optionLabel].toLowerCase().indexOf(needle) > -1)
-          })
-        })
+        this.$on('filter', this.filterHandler)
       }
+    },
+    filterHandler (val, update) {
+      update(() => {
+        const needle = val.toLowerCase()
+        this.options = this.clearOptions.filter(v => v[this.optionLabel].toLowerCase().indexOf(needle) > -1)
+      })
     }
   }
 }