diff --git a/tests/unit/ObjectIndex.spec.js b/tests/unit/ObjectIndex.spec.js
index c6ebb9d..a8d9d93 100644
--- a/tests/unit/ObjectIndex.spec.js
+++ b/tests/unit/ObjectIndex.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount, shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
describe("When index prop is defined", () => {
@@ -12,267 +12,204 @@ describe("When index prop is defined", () => {
});
expect(Select.vm.mutableValue).toEqual("foo");
});
- //
- // it("can determine if an object is pre-selected", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // value: "foo",
- // options: [
- // {
- // id: "foo",
- // label: "This is Foo"
- // }
- // ]
- // }
- // }).$mount();
- //
- // expect(
- // vm.$children[0].isOptionSelected({
- // id: "foo",
- // label: "This is Foo"
- // })
- // ).toEqual(true);
- // });
- //
- // it("can determine if an object is selected after it has been chosen", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // options: [{ id: "foo", label: "FooBar" }]
- // }
- // }).$mount();
- //
- // vm.$children[0].select({ id: "foo", label: "FooBar" });
- //
- // // Vue.nextTick(() => {
- // expect(
- // vm.$children[0].isOptionSelected({
- // id: "foo",
- // label: "This is Foo"
- // })
- // ).toEqual(true);
- // // done()
- // // })
- // });
- //
- // it("can accept an array of objects and pre-selected values (multiple)", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // index: "value",
- // value: ["foo", "bar"],
- // options: [
- // { label: "This is Foo", value: "foo" },
- // { label: "This is Bar", value: "bar" }
- // ]
- // }
- // }).$mount();
- // expect(vm.$children[0].mutableValue).toEqual(vm.value);
- // });
- //
- // it("can deselect a pre-selected object", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // data: {
- // index: "value",
- // value: ["foo", "bar"],
- // options: [
- // { label: "This is Foo", value: "foo" },
- // { label: "This is Bar", value: "bar" }
- // ]
- // }
- // }).$mount();
- // vm.$children[0].deselect("foo");
- // expect(vm.$children[0].mutableValue.length).toEqual(1);
- // expect(vm.$children[0].mutableValue).toEqual(["bar"]);
- // });
- //
- // it("can deselect an option when multiple is false", () => {
- // const vm = new Vue({
- // template: `
`,
- // data: {
- // index: "value",
- // value: "foo",
- // options: [
- // { label: "This is Foo", value: "foo" },
- // { label: "This is Bar", value: "bar" }
- // ]
- // }
- // }).$mount();
- // vm.$children[0].deselect("foo");
- // expect(vm.$children[0].mutableValue).toEqual(null);
- // });
- //
- // it("can use v-model syntax for a two way binding to a parent component", done => {
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // index: "value",
- // value: "foo",
- // options: [
- // { label: "This is Foo", value: "foo" },
- // { label: "This is Bar", value: "bar" },
- // { label: "This is Baz", value: "baz" }
- // ]
- // }
- // }).$mount();
- //
- // expect(vm.$children[0].value).toEqual("foo");
- // expect(vm.$children[0].mutableValue).toEqual("foo");
- //
- // vm.$children[0].mutableValue = "bar";
- //
- // Vue.nextTick(() => {
- // expect(vm.value).toEqual("bar");
- // done();
- // });
- // }),
- // it("can work with an array of integers", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // value: 5
- // }
- // }).$mount();
- //
- // expect(vm.$children[0].isOptionSelected(5)).toEqual(true);
- // expect(vm.$children[0].isValueEmpty).toEqual(false);
- // });
- //
- // it("can generate labels using a custom label key", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // index: "value",
- // value: ["baz"],
- // options: [
- // { value: "foo", name: "Foo" },
- // { value: "baz", name: "Baz" }
- // ]
- // }
- // }).$mount();
- // expect(
- // vm.$children[0].$refs.toggle.querySelector(".selected-tag").textContent
- // ).toContain("Baz");
- // });
- //
- // it("will console.warn when attempting to select an option with an undefined index", () => {
- // spyOn(console, "warn");
- //
- // const vm = new Vue({
- // template:
- // '
',
- // data: {
- // options: [{ label: "Foo" }]
- // }
- // }).$mount();
- // vm.$children[0].select({ label: "Foo" });
- // expect(console.warn).toHaveBeenCalledWith(
- // `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
- // );
- // });
- //
- // it("can find the original option within this.options", () => {
- // const vm = new Vue({
- // template:
- // '
',
- // data: {
- // options: [{ id: 1, label: "Foo" }, { id: 2, label: "Bar" }]
- // }
- // }).$mount();
- //
- // expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({
- // id: 1,
- // label: "Foo"
- // });
- // expect(
- // vm.$children[0].findOptionByIndexValue({ id: 1, label: "Foo" })
- // ).toEqual({ id: 1, label: "Foo" });
- // });
- //
- // describe("And when option[index] is a nested object", () => {
- // it("can determine if an object is pre-selected", () => {
- // const nestedOption = {
- // value: {
- // nested: true
- // },
- // label: "foo"
- // };
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // value: {
- // nested: true
- // },
- // options: [nestedOption]
- // }
- // }).$mount();
- // expect(
- // vm.$children[0].isOptionSelected({
- // nested: true
- // })
- // ).toEqual(true);
- // });
- //
- // it("can determine if an object is selected after it is chosen", () => {
- // const nestedOption = {
- // value: {
- // nested: true
- // },
- // label: "foo"
- // };
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // options: [nestedOption]
- // }
- // }).$mount();
- // vm.$children[0].select(nestedOption);
- // expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true);
- // });
- //
- // it("can determine a selected values label", () => {
- // const nestedOption = {
- // value: {
- // nested: true
- // },
- // label: "foo"
- // };
- // const vm = new Vue({
- // template:
- // '
',
- // components: { vSelect },
- // data: {
- // value: {
- // nested: true
- // },
- // options: [nestedOption]
- // }
- // }).$mount();
- //
- // expect(
- // vm.$children[0].getOptionLabel({
- // nested: true
- // })
- // ).toEqual("foo");
- // });
- // });
+
+ it("can determine if an object is pre-selected", () => {
+ const Select = shallowMount(VueSelect, {
+ propsData: {
+ index: "id",
+ value: "foo",
+ options: [
+ {
+ id: "foo",
+ label: "This is Foo"
+ }
+ ]
+ }
+ });
+
+ expect(
+ Select.vm.isOptionSelected({
+ id: "foo",
+ label: "This is Foo"
+ })
+ ).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" }]
+ }
+ });
+
+ 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"],
+ options: [
+ { label: "This is Foo", value: "foo" },
+ { label: "This is Bar", value: "bar" }
+ ]
+ }
+ });
+
+ expect(Select.vm.mutableValue).toEqual(["foo", "bar"]);
+ });
+
+ it("can deselect a pre-selected object", () => {
+ const Select = shallowMount(VueSelect, {
+ propsData: {
+ multiple: true,
+ index: "value",
+ value: ["foo", "bar"],
+ options: [
+ { label: "This is Foo", value: "foo" },
+ { label: "This is Bar", value: "bar" }
+ ]
+ }
+ });
+
+ Select.vm.deselect("foo");
+ expect(Select.vm.mutableValue.length).toEqual(1);
+ expect(Select.vm.mutableValue).toEqual(["bar"]);
+ });
+
+ it("can deselect an option when multiple is false", () => {
+ const Select = shallowMount(VueSelect, {
+ propsData: {
+ index: "value",
+ value: "foo",
+ options: [
+ { label: "This is Foo", value: "foo" },
+ { label: "This is Bar", value: "bar" }
+ ]
+ }
+ });
+
+ Select.vm.deselect("foo");
+ expect(Select.vm.mutableValue).toEqual(null);
+ });
+
+ it("can use v-model syntax for a two way binding to a parent component", () => {
+ const Parent = mount({
+ data: () => ({
+ index: "value",
+ value: "foo",
+ options: [
+ { label: "This is Foo", value: "foo" },
+ { label: "This is Bar", value: "bar" },
+ { label: "This is Baz", value: "baz" }
+ ]
+ }),
+ template: `
`,
+ components: { "v-select": VueSelect }
+ });
+ const Select = Parent.find(VueSelect);
+
+ expect(Select.vm.value).toEqual("foo");
+ expect(Select.vm.mutableValue).toEqual("foo");
+
+ Select.vm.mutableValue = "bar";
+ expect(Parent.vm.value).toEqual("bar");
+ });
+
+ it("can generate labels using a custom label key", () => {
+ const Select = shallowMount(VueSelect, {
+ propsData: {
+ multiple: true,
+ index: "value",
+ value: ["baz"],
+ label: "name",
+ options: [{ value: "foo", name: "Foo" }, { value: "baz", name: "Baz" }]
+ }
+ });
+
+ expect(Select.find(".selected-tag").text()).toContain("Baz");
+ });
+
+ it("will console.warn when attempting to select an option with an undefined index", () => {
+ const spy = jest.spyOn(console, "warn");
+ 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"}.`
+ );
+ });
+
+ it("can find the original option within this.options", () => {
+ const optionToFind = { id: 1, label: "Foo" };
+ const Select = shallowMount(VueSelect, {
+ propsData: {
+ index: "id",
+ options: [optionToFind, { id: 2, label: "Bar" }]
+ }
+ });
+
+ expect(Select.vm.findOptionByIndexValue(1)).toEqual(optionToFind);
+ expect(Select.vm.findOptionByIndexValue(optionToFind)).toEqual(
+ optionToFind
+ );
+ });
+
+ describe("And when option[index] 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",
+ value: {
+ nested: true
+ },
+ options: [nestedOption]
+ }
+ });
+
+ expect(Select.vm.isOptionSelected({ nested: true })).toEqual(true);
+ });
+
+ 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",
+ options: [nestedOption]
+ }
+ });
+
+ Select.vm.select(nestedOption);
+ 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");
+ });
+ });
});