WIP: V3 - Remove index prop, add reduce prop (#800)

* remove `index` in favour of `reduce`, tests passing

* refactor findOptionFromReducedValue

* - always use getOptionLabel in comparisons

* - refactor deselect method
- add missing jsdoc blocks
- organize methods

* bump documentation

tests/unit/Reduce.spec.js

@@ -1,22 +1,22 @@
 import { mount, shallowMount } from "@vue/test-utils";
 import VueSelect from "../../src/components/Select";
 
-describe("When index prop is defined", () => {
+describe("When reduce prop is defined", () => {
   it("can accept an array of objects and pre-selected value (single)", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
-        index: "value",
+        reduce: option => option.value,
         value: "foo",
         options: [{ label: "This is Foo", value: "foo" }]
       }
     });
-    expect(Select.vm.selectedValue).toEqual(["foo"]);
+    expect(Select.vm.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
   });
 
   it("can determine if an object is pre-selected", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
-        index: "id",
+        reduce: option => option.id,
         value: "foo",
         options: [
           {
@@ -35,30 +35,28 @@ describe("When index prop is defined", () => {
     ).toEqual(true);
   });
 
-  it("can determine if an object is selected after it has been chosen", () => {
-    const Select = shallowMount(VueSelect, {
-      propsData: {
-        index: "id",
-        options: [{ id: "foo", label: "FooBar" }]
-      }
+  it('can determine if an object is selected after its been chosen', () => {
+      const Select = shallowMount(VueSelect, {
+        propsData: {
+          reduce: option => option.id,
+          options: [{id: 'foo', label: 'FooBar'}],
+        },
+      });
+
+      Select.vm.select({id: 'foo', label: 'FooBar'});
+
+      expect(Select.vm.isOptionSelected({
+        id: 'foo',
+        label: 'This is FooBar',
+      })).toEqual(true);
     });
 
-    Select.vm.select({ id: "foo", label: "FooBar" });
-
-    expect(
-      Select.vm.isOptionSelected({
-        id: "foo",
-        label: "This is Foo"
-      })
-    ).toEqual(true);
-  });
-
   it("can accept an array of objects and pre-selected values (multiple)", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         multiple: true,
-        index: "value",
-        value: ["foo", "bar"],
+        reduce: option => option.value,
+        value: ["foo"],
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" }
@@ -66,14 +64,14 @@ describe("When index prop is defined", () => {
       }
     });
 
-    expect(Select.vm.selectedValue).toEqual(["foo", "bar"]);
+    expect(Select.vm.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
   });
 
   it("can deselect a pre-selected object", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         multiple: true,
-        index: "value",
+        reduce: option => option.value,
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" }
@@ -90,7 +88,7 @@ describe("When index prop is defined", () => {
   it("can deselect an option when multiple is false", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
-        index: "value",
+        reduce: option => option.value,
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" }
@@ -105,7 +103,7 @@ describe("When index prop is defined", () => {
   it("can use v-model syntax for a two way binding to a parent component", () => {
     const Parent = mount({
       data: () => ({
-        index: "value",
+        reduce: option => option.value,
         value: "foo",
         options: [
           { label: "This is Foo", value: "foo" },
@@ -113,13 +111,13 @@ describe("When index prop is defined", () => {
           { label: "This is Baz", value: "baz" }
         ]
       }),
-      template: `<div><v-select :index="index" :options="options" v-model="value"></v-select></div>`,
+      template: `<div><v-select :reduce="option => option.value" :options="options" v-model="value"></v-select></div>`,
       components: { "v-select": VueSelect }
     });
     const Select = Parent.vm.$children[0];
 
     expect(Select.value).toEqual("foo");
-    expect(Select.selectedValue).toEqual(["foo"]);
+    expect(Select.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
 
     Select.select({ label: "This is Bar", value: "bar" });
     expect(Parent.vm.value).toEqual("bar");
@@ -129,52 +127,37 @@ describe("When index prop is defined", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         multiple: true,
-        index: "value",
-        value: ["baz"],
+        reduce: option => option.value,
+        value: ["CA"],
         label: "name",
-        options: [{ value: "foo", name: "Foo" }, { value: "baz", name: "Baz" }]
+        options: [{ value: "CA", name: "Canada" }, { value: "US", name: "United States" }]
       }
     });
 
-    expect(Select.find(".vs__selected").text()).toContain("Baz");
-  });
-
-  it("will console.warn when attempting to select an option with an undefined index", () => {
-    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
-    const Select = shallowMount(VueSelect, {
-      propsData: {
-        index: "value",
-        options: [{ label: "Foo" }]
-      }
-    });
-
-    Select.vm.select({ label: "Foo" });
-    expect(spy).toHaveBeenCalledWith(
-      `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
-    );
+    expect(Select.find(".vs__selected").text()).toContain("Canada");
   });
 
   it("can find the original option within this.options", () => {
     const optionToFind = { id: 1, label: "Foo" };
     const Select = shallowMount(VueSelect, {
       propsData: {
-        index: "id",
+        reduce: option => option.id,
         options: [optionToFind, { id: 2, label: "Bar" }]
       }
     });
 
-    expect(Select.vm.findOptionByIndexValue(1)).toEqual(optionToFind);
-    expect(Select.vm.findOptionByIndexValue(optionToFind)).toEqual(
+    expect(Select.vm.findOptionFromReducedValue(1)).toEqual(optionToFind);
+    expect(Select.vm.findOptionFromReducedValue(optionToFind)).toEqual(
       optionToFind
     );
   });
 
-  describe("And when option[index] is a nested object", () => {
+  describe("And when a reduced option is a nested object", () => {
     it("can determine if an object is pre-selected", () => {
       const nestedOption = { value: { nested: true }, label: "foo" };
       const Select = shallowMount(VueSelect, {
         propsData: {
-          index: "value",
+          reduce: option => option.value,
           value: {
             nested: true
           },
@@ -182,14 +165,14 @@ describe("When index prop is defined", () => {
         }
       });
 
-      expect(Select.vm.isOptionSelected({ nested: true })).toEqual(true);
+      expect(Select.vm.selectedValue).toEqual([nestedOption]);
     });
 
     it("can determine if an object is selected after it is chosen", () => {
       const nestedOption = { value: { nested: true }, label: "foo" };
       const Select = shallowMount(VueSelect, {
         propsData: {
-          index: "value",
+          reduce: option => option.value,
           options: [nestedOption]
         }
       });
@@ -198,17 +181,5 @@ describe("When index prop is defined", () => {
       expect(Select.vm.isOptionSelected(nestedOption)).toEqual(true);
     });
 
-    it("can determine a selected values label", () => {
-      const nestedOption = { value: { nested: true }, label: "foo" };
-      const Select = shallowMount(VueSelect, {
-        propsData: {
-          index: "value",
-          value: { nested: true },
-          options: [nestedOption]
-        }
-      });
-
-      expect(Select.vm.getOptionLabel({ nested: true })).toEqual("foo");
-    });
   });
 });