more tests

src/App.vue

@@ -66,23 +66,16 @@
     <hr>
 
     <h3>Build Setup</h3>
-
-
-      <h5>install dependencies</h5>
-      <p><code>npm install</code></p>
-
-      <h5>serve with hot reload at localhost:8080</h5>
-      <p><code>npm run dev</code></p>
-
-      <h5>build for production with minification</h5>
-      <p><code>npm run build</code></p>
-
-      <h5>lint all *.js and *.vue files</h5>
-      <p><code>npm run lint</code></p>
-
-      <h5>run unit tests</h5>
-      <p><code>npm test</code></p>
-
+    <h5>install dependencies</h5>
+    <p><code>npm install</code></p>
+    <h5>serve with hot reload at localhost:8080</h5>
+    <p><code>npm run dev</code></p>
+    <h5>build for production with minification</h5>
+    <p><code>npm run build</code></p>
+    <h5>lint all *.js and *.vue files</h5>
+    <p><code>npm run lint</code></p>
+    <h5>run unit tests</h5>
+    <p><code>npm test</code></p>
 
   </div>
 </template>
@@ -99,9 +92,9 @@ export default {
   data() {
     return {
       // select: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
-      select: ['one'],
+      select: null,
       placeholder: 'Choose a Country',
-      multiple: true,
+      multiple: false,
       maxHeight: '400px',
       // options: require('./countries.js')
       options: ['one','two','three']

src/components/Select.vue

@@ -113,7 +113,7 @@
 <template>
   <div class="dropdown" :class="{open: open, }">
     <div v-el:toggle @click="toggleDropdown" class="btn dropdown-toggle clearfix" type="button">
-        <span class="form-control" v-if="! searchable && placeholder && ! value.length">
+        <span class="form-control" v-if="! searchable && placeholder && isValueEmpty">
           {{ placeholder }}
         </span>
 
@@ -137,13 +137,12 @@
           @blur="open = false"
           type="search"
           class="form-control"
-
           :placeholder="searchPlaceholder"
         >
     </div>
 
     <ul v-show="open" :transition="transition" :style="{ 'max-height': maxHeight }" class="dropdown-menu animated">
-      <li v-for="option in filteredOptions" :class="{ active: value.indexOf(option) !== -1, highlight: $index === typeAheadPointer }">
+      <li v-for="option in filteredOptions" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }">
         <a @mousedown.prevent="select(option)">
           {{ getOptionLabel(option) }}
         </a>
@@ -160,7 +159,7 @@
 
     props: {
       value: {
-        type: Array,
+        // type: Array,
         twoway: true,
         required: true
       },
@@ -213,6 +212,12 @@
       });
     },
 
+    watch: {
+      value (val, oldVal) {
+        // return this.$set('value', ['test'])
+      }
+    },
+
     methods: {
       select(v) {
           if (this.value.indexOf(v) === -1) {
@@ -238,6 +243,14 @@
         // }
       },
 
+      isOptionSelected( option ) {
+        if( this.multiple ) {
+          return this.value.indexOf(option) !== -1
+        }
+
+        return this.value === option;
+      },
+
       getOptionValue( option ) {
         if( typeof option === 'object' && option.value ) {
           return option.value;
@@ -285,30 +298,22 @@
     },
 
     computed: {
-      // selected() {
-      //   let foundItems = []
-      //   if (this.value && this.value.length) {
-      //     for (let item in this.value) {
-      //       if (typeof this.value[item] === "string") {
-      //         foundItems.push(this.value[item])
-      //       }
-      //
-      //       console.log(this.value[item])
-      //       // this.$log('value')
-      //     }
-      //   }
-      //
-      //   return foundItems
-      // },
-
       searchPlaceholder() {
-        if( ! this.value.length && this.placeholder ) {
+        if( this.isValueEmpty && this.placeholder ) {
           return this.placeholder;
         }
       },
 
       filteredOptions() {
         return this.$options.filters.filterBy(this.options, this.search)
+      },
+
+      isValueEmpty() {
+        if( this.value ) {
+          return ! this.value.length
+        }
+
+        return true;
       }
     }
 

test/unit/Select.spec.js

@@ -17,21 +17,44 @@ describe('Select.vue', () => {
     expect(vm.$children[0].value).toEqual(['one'])
   })
 
-/**
- * TODO: Right now this only works for arrays of strings.. But the same method
- * should apply to arrays of objects.
- */
-  it('can accept an array of objects and pre-selected values', () => {
+  /**
+   * TODO: Right now this only works for arrays of strings.. But the same method
+   * should apply to arrays of objects.
+   */
+  // it('can accept an array of objects and pre-selected values', () => {
+  //   const vm = new Vue({
+  //     template: '<div><v-select :value.sync="value"></v-select></div>',
+  //     components: { vSelect },
+  //     data: {
+  //       value: [{label: 'This is Foo', value: 'foo'}],
+  //       options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+  //     }
+  //   }).$mount()
+  //
+  //   expect(vm.$children[0].$get('value')).toEqual({label: 'This is Foo', value: 'foo'})
+  // })
+
+  it('can determine if the value prop is empty', () => {
     const vm = new Vue({
       template: '<div><v-select :value.sync="value"></v-select></div>',
       components: { vSelect },
       data: {
-        value: [{label: 'This is Foo', value: 'foo'}],
-        options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+        value: [],
+        options: ['one','two','three']
       }
     }).$mount()
 
-    expect(vm.$children[0].$get('value')).toEqual({label: 'This is Foo', value: 'foo'})
+    var select = vm.$children[0]
+    expect(select.isValueEmpty).toEqual(true)
+    select.$set('value', ['one'])
+    expect(select.isValueEmpty).toEqual(false)
+    select.$set('value', 'one')
+    select.$set('multiple', false)
+    expect(select.isValueEmpty).toEqual(false)
+    select.$set('value', '')
+    expect(select.isValueEmpty).toEqual(true)
+    select.$set('value', null)
+    expect(select.isValueEmpty).toEqual(true)
   })
 })