mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-29 05:14:04 +03:00
Complete 'index' prop tests
This commit is contained in:
Jeff
+201
-264
@@ -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:
|
||||
// '<div><v-select :options="options" v-model="value" index="id"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" index="id"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
// 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: `<div><v-select :index="index" :options="options" :value="value"></v-select></div>`,
|
||||
// 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:
|
||||
// '<div><v-select :index="index" :options="options" v-model="value"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="[1,2,3,4,5]" v-model="value"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :index="index" label="name" :options="options" v-model="value" :multiple="true"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select index="value" :options="options"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select index="id" :options="options"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select index="value" :options="options"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
|
||||
// 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: `<div><v-select :index="index" :options="options" v-model="value"></v-select></div>`,
|
||||
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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user