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