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