test(slots): add test coverage for slots, getOptionLabel vuejs/vue#10229

sagalbot · Nov 30, 2019 · f80ee1c · f80ee1c
1 parent 0b0acc3
commit f80ee1c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -386,7 +386,7 @@
        * @return {Boolean}
        */
       filter: {
-        "type": Function,
+        type: Function,
         default(options, search) {
           return options.filter((option) => {
             let label = this.getOptionLabel(option)
@@ -1077,7 +1077,7 @@
        */
       showClearButton() {
         return !this.multiple && this.clearable && !this.open && !this.isValueEmpty
-      }
+      },
     },
 
   }

diff --git a/tests/unit/Labels.spec.js b/tests/unit/Labels.spec.js
@@ -39,4 +39,41 @@ describe("Labels", () => {
     Select.vm.$data._value = "one";
     expect(Select.vm.searchPlaceholder).not.toBeDefined();
   });
+
+  describe('getOptionLabel', () => {
+    it('will return undefined if the option lacks the label key', () => {
+      const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({ label: 'label' });
+      expect(getOptionLabel({name: 'vue'})).toEqual(undefined);
+    });
+
+    it('will return a string value for a valid key', () => {
+      const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({ label: 'label' });
+      expect(getOptionLabel({label: 'vue'})).toEqual('vue');
+    });
+
+    /**
+     * this test fails because of a bug where Vue executes the default contents
+     * of a slot, even if it is implemented by the consumer.
+     * @see https://github.com/vuejs/vue/issues/10224
+     * @see https://github.com/vuejs/vue/pull/10229
+     */
+    xit('will not call getOptionLabel if both scoped option slots are used and a filter is provided', () => {
+      const spy = spyOn(VueSelect.props.getOptionLabel, 'default');
+      const Select = shallowMount(VueSelect, {
+        propsData: {
+          options: [{name: 'one'}],
+          filter: () => {},
+        },
+        scopedSlots: {
+          'option': '<span class="option">{{ props.name }}</span>',
+          'selected-option': '<span class="selected">{{ props.name }}</span>',
+        },
+      });
+
+      Select.vm.select({name: 'one'});
+
+      expect(spy).toHaveBeenCalledTimes(0);
+      expect(Select.find('.selected').exists()).toBeTruthy();
+    });
+  });
 });
diff --git a/tests/unit/Selecting.spec.js b/tests/unit/Selecting.spec.js
@@ -1,5 +1,6 @@
 import { mount, shallowMount } from "@vue/test-utils";
 import VueSelect from "../../src/components/Select.vue";
+import { mountDefault } from '../helpers';
 
 describe("VS - Selecting Values", () => {
   let defaultProps;
@@ -192,10 +193,20 @@ describe("VS - Selecting Values", () => {
         value: [{ label: "foo", value: "bar" }]
       }
     });
-    expect(Select.vm.isOptionSelected("foo")).toEqual(true);
+    expect(Select.vm.isOptionSelected({ label: "foo", value: "bar" })).toEqual(true);
   });
 
-  describe("change Event", () => {
+  it('can select two options with the same label', () => {
+    const options = [{label: 'one', id: 1}, {label: 'one', id: 2}];
+    const Select = mountDefault({options, multiple: true});
+
+    Select.vm.select({label: 'one', id: 1});
+    Select.vm.select({label: 'one', id: 2});
+
+    expect(Select.vm.selectedValue).toEqual(options);
+  });
+
+  describe("input Event", () => {
     it("will trigger the input event when the selection changes", () => {
       const Select = shallowMount(VueSelect);
       Select.vm.select("bar");