V3/update list items slot (sagalbot#799)

sagalbot · web-flow · commit e4d4b275405b · 2019-03-23T15:58:50.000-07:00
* add tests for slots, add normalized function for passing options to slots

* update active class

* update active class
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -9,12 +9,12 @@
       <div class="vs__selected-options" ref="selectedOptions">
         <slot v-for="option in selectedValue"
               name="selected-option-container"
-              :option="(typeof option === 'object')?option:{[label]: option}"
+              :option="normalizeOptionForSlot(option)"
               :deselect="deselect"
               :multiple="multiple"
               :disabled="disabled">
           <span class="vs__selected" v-bind:key="option.index">
-            <slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
+            <slot name="selected-option" v-bind="normalizeOptionForSlot(option)">
               {{ getOptionLabel(option) }}
             </slot>
             <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="vs__deselect" aria-label="Deselect option">
@@ -55,11 +55,11 @@
           v-for="(option, index) in filteredOptions"
           :key="index"
           class="vs__dropdown-option"
-          :class="{ active: isOptionSelected(option), 'vs__dropdown-option--highlight': index === typeAheadPointer }"
+          :class="{ 'vs__dropdown-option--selected': isOptionSelected(option), 'vs__dropdown-option--highlight': index === typeAheadPointer }"
           @mouseover="typeAheadPointer = index"
           @mousedown.prevent.stop="select(option)"
         >
-          <slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
+          <slot name="option" v-bind="normalizeOptionForSlot(option)">
             {{ getOptionLabel(option) }}
           </slot>
         </li>
@@ -700,6 +700,16 @@
         })
       },
 
+      /**
+       * Ensures that options are always
+       * passed as objects to scoped slots.
+       * @param option
+       * @return {*}
+       */
+      normalizeOptionForSlot (option) {
+        return (typeof option === 'object') ? option : {[this.label]: option};
+      },
+
       /**
        * If push-tags is true, push the
        * given option to `this.pushedTags`.
diff --git a/tests/helpers.js b/tests/helpers.js
@@ -28,15 +28,20 @@ export const selectWithProps = (propsData = {}) => {
 
 /**
  * Returns a Wrapper with a v-select component.
+ * @param props
  * @param options
  * @return {Wrapper<Vue>}
  */
-export const mountDefault = (options = {}) =>
-  shallowMount(VueSelect, {
-    propsData: { options: ["one", "two", "three"],
-      ...options
-    }
+export const mountDefault = (props = {}, options = {}) => {
+  return shallowMount(VueSelect, {
+    propsData: {
+      options: ['one', 'two', 'three'],
+      ...props,
+    },
+    ...options,
   });
+};
+
 
 /**
  * Returns a v-select component directly.
diff --git a/tests/unit/Slots.spec.js b/tests/unit/Slots.spec.js
@@ -0,0 +1,41 @@
+import { mountDefault } from '../helpers';
+
+describe('Scoped Slots', () => {
+  it('receives an option object to the selected-option-container slot', () => {
+    const Select = mountDefault(
+      {value: 'one'},
+      {
+        scopedSlots: {
+          'selected-option-container': `<span slot="selected-option-container" slot-scope="{option}">{{ option.label }}</span>`,
+        },
+      });
+
+    expect(Select.find({ ref: 'selectedOptions' }).text()).toEqual('one')
+  });
+
+  it('receives an option object to the selected-option slot', () => {
+    const Select = mountDefault(
+      {value: 'one'},
+      {
+        scopedSlots: {
+          'selected-option': `<span slot="selected-option" slot-scope="option">{{ option.label }}</span>`,
+        },
+      });
+
+    expect(Select.find('.vs__selected').text()).toEqual('one')
+  });
+
+  it('receives an option object to the option slot in the dropdown menu', () => {
+    const Select = mountDefault(
+      {value: 'one'},
+      {
+        scopedSlots: {
+          'option': `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
+        },
+      });
+
+    Select.vm.open = true;
+
+    expect(Select.find({ref: 'dropdownMenu'}).text()).toEqual('onetwothree')
+  });
+});
