fix: Compare Options with getOptionKey instead of label + reduce (#1012)

tests/unit/Labels.spec.js

@@ -41,4 +41,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();
+    });
+  });
 });

tests/unit/OptionComparator.spec.js

@@ -0,0 +1,31 @@
+import Select from '../../src/components/Select';
+
+describe('Comparing Options', () => {
+
+  const comparator = Select.methods.optionComparator.bind({
+    getOptionKey: Select.props.getOptionKey.default,
+  });
+
+  it('can compare numbers', () => {
+    expect(comparator(1, 2)).toBeFalsy();
+    expect(comparator(1, 1)).toBeTruthy();
+  });
+
+  it('can compare strings', () => {
+    expect(comparator('one', 'one')).toBeTruthy();
+    expect(comparator('one', 'two')).toBeFalsy();
+  });
+
+  it('can compare objects', () => {
+    //  compare ID keys
+    expect(comparator({label: 'halo', id: 1}, {label: 'halo', id: 2}))
+      .toBeFalsy();
+    //  compare objects
+    expect(comparator({label: 'halo', value: 1}, {label: 'halo', value: 1}))
+      .toBeTruthy();
+    //  compare objects with different orders
+    expect(comparator({value: 1, label: 'halo'}, {label: 'halo', value: 1}))
+      .toBeTruthy();
+  });
+
+});

tests/unit/OptionKey.spec.js

@@ -5,11 +5,11 @@ describe('Serializing Option Keys', () => {
   const getOptionKey = Select.props.getOptionKey.default;
 
   it('can serialize strings to a key', () => {
-    expect(getOptionKey('vue')).toBe('"vue"');
+    expect(getOptionKey('vue')).toBe('vue');
   });
 
   it('can serialize integers to a key', () => {
-    expect(getOptionKey(1)).toBe('1');
+    expect(getOptionKey(1)).toBe(1);
   });
 
   it('can serialize objects to a key', () => {

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");

tests/unit/Tagging.spec.js

@@ -1,6 +1,8 @@
 import { searchSubmit, selectWithProps } from "../helpers";
+import Select from '../../src/components/Select';
 
 describe("When Tagging Is Enabled", () => {
+
   it("can determine if a given option string already exists", () => {
     const Select = selectWithProps({ taggable: true, options: ["one", "two"] });
     expect(Select.vm.optionExists("one")).toEqual(true);
@@ -13,8 +15,8 @@ describe("When Tagging Is Enabled", () => {
       options: [{ label: "one" }, { label: "two" }]
     });
 
-    expect(Select.vm.optionExists("one")).toEqual(true);
-    expect(Select.vm.optionExists("three")).toEqual(false);
+    expect(Select.vm.optionExists({label: "one"})).toEqual(true);
+    expect(Select.vm.optionExists({label: "three"})).toEqual(false);
   });
 
   it("can determine if a given option object already exists when using custom labels", () => {
@@ -24,8 +26,10 @@ describe("When Tagging Is Enabled", () => {
       label: "foo"
     });
 
-    expect(Select.vm.optionExists("one")).toEqual(true);
-    expect(Select.vm.optionExists("three")).toEqual(false);
+    const createOption = (text) => Select.vm.createOption(text);
+
+    expect(Select.vm.optionExists(createOption("one"))).toEqual(true);
+    expect(Select.vm.optionExists(createOption("three"))).toEqual(false);
   });
 
   it("can add the current search text as the first item in the options list", () => {
@@ -228,9 +232,11 @@ describe("When Tagging Is Enabled", () => {
       multiple: true,
       options: [{ label: "two" }]
     });
+    const spy = jest.spyOn(Select.vm, 'select');
 
     searchSubmit(Select, "one");
     expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
+    expect(spy).lastCalledWith({label: 'one'});
     expect(Select.vm.search).toEqual("");
 
     searchSubmit(Select, "one");

tests/unit/utility/sortAndStringify.spec.js

@@ -0,0 +1,14 @@
+import sortAndStringify from '../../../src/utility/sortAndStringify';
+
+test('it will stringify an object', () => {
+  expect(sortAndStringify({hello: 'world'})).toEqual('{"hello":"world"}');
+});
+
+test('it will sort attributes alphabetically', () => {
+  expect(sortAndStringify({b: 'b', a: 'a'})).toEqual('{"a":"a","b":"b"}');
+});
+
+test('comparing two objects with unsorted keys', () => {
+  expect(sortAndStringify({b: 'b', a: 'a'}))
+    .toEqual(sortAndStringify({a: 'a', b: 'b'}))
+});