mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
- migrate tagging spec
- add helpers
This commit is contained in:
Jeff
@@ -0,0 +1,28 @@
|
|||||||
|
import { shallowMount } from "@vue/test-utils";
|
||||||
|
import VueSelect from "../src/components/Select";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trigger a submit event on the search
|
||||||
|
* input with a provided search text.
|
||||||
|
*
|
||||||
|
* @param Wrapper {Wrapper<Vue>}
|
||||||
|
* @param searchText
|
||||||
|
*/
|
||||||
|
export const searchSubmit = (Wrapper, searchText = false) => {
|
||||||
|
if (searchText) {
|
||||||
|
Wrapper.vm.search = searchText;
|
||||||
|
}
|
||||||
|
Wrapper.find({ ref: "search" }).trigger("keydown", {
|
||||||
|
keyCode: 13
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new VueSelect instance with
|
||||||
|
* a provided set of props.
|
||||||
|
* @param propsData
|
||||||
|
* @returns {Wrapper<Vue>}
|
||||||
|
*/
|
||||||
|
export const selectWithProps = (propsData = {}) => {
|
||||||
|
return shallowMount(VueSelect, { propsData });
|
||||||
|
};
|
||||||
+216
-286
@@ -1,294 +1,224 @@
|
|||||||
import { shallowMount } from "@vue/test-utils";
|
import { searchSubmit, selectWithProps } from "../helpers";
|
||||||
import VueSelect from "../../src/components/Select";
|
|
||||||
|
|
||||||
describe("When Tagging Is Enabled", () => {
|
describe("When Tagging Is Enabled", () => {
|
||||||
it("can determine if a given option string already exists", () => {
|
it("can determine if a given option string already exists", () => {
|
||||||
const Select = shallowMount(VueSelect, {
|
const Select = selectWithProps({ taggable: true, options: ["one", "two"] });
|
||||||
propsData: { taggable: true, options: ["one", "two"] }
|
|
||||||
});
|
|
||||||
expect(Select.vm.optionExists("one")).toEqual(true);
|
expect(Select.vm.optionExists("one")).toEqual(true);
|
||||||
expect(Select.vm.optionExists("three")).toEqual(false);
|
expect(Select.vm.optionExists("three")).toEqual(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
// it("can determine if a given option object already exists", () => {
|
it("can determine if a given option object already exists", () => {
|
||||||
// const vm = new Vue({
|
const Select = selectWithProps({
|
||||||
// template:
|
taggable: true,
|
||||||
// '<div><v-select ref="select" :options="options" taggable></v-select></div>',
|
options: [{ label: "one" }, { label: "two" }]
|
||||||
// components: { vSelect },
|
});
|
||||||
// data: {
|
|
||||||
// options: [{ label: "one" }, { label: "two" }]
|
expect(Select.vm.optionExists("one")).toEqual(true);
|
||||||
// }
|
expect(Select.vm.optionExists("three")).toEqual(false);
|
||||||
// }).$mount();
|
});
|
||||||
//
|
|
||||||
// expect(vm.$refs.select.optionExists("one")).toEqual(true);
|
it("can determine if a given option object already exists when using custom labels", () => {
|
||||||
// expect(vm.$refs.select.optionExists("three")).toEqual(false);
|
const Select = selectWithProps({
|
||||||
// });
|
taggable: true,
|
||||||
//
|
options: [{ foo: "one" }, { foo: "two" }],
|
||||||
// it("can determine if a given option object already exists when using custom labels", () => {
|
label: "foo"
|
||||||
// const vm = new Vue({
|
});
|
||||||
// template:
|
|
||||||
// '<div><v-select ref="select" :options="options" label="foo" taggable></v-select></div>',
|
expect(Select.vm.optionExists("one")).toEqual(true);
|
||||||
// components: { vSelect },
|
expect(Select.vm.optionExists("three")).toEqual(false);
|
||||||
// data: {
|
});
|
||||||
// options: [{ foo: "one" }, { foo: "two" }]
|
|
||||||
// }
|
it("can add the current search text as the first item in the options list", () => {
|
||||||
// }).$mount();
|
const Select = selectWithProps({
|
||||||
//
|
taggable: true,
|
||||||
// expect(vm.$refs.select.optionExists("one")).toEqual(true);
|
multiple: true,
|
||||||
// expect(vm.$refs.select.optionExists("three")).toEqual(false);
|
value: ["one"],
|
||||||
// });
|
options: ["one", "two"]
|
||||||
//
|
});
|
||||||
// it("can add the current search text as the first item in the options list", () => {
|
|
||||||
// const vm = new Vue({
|
Select.vm.search = "three";
|
||||||
// template:
|
expect(Select.vm.filteredOptions).toEqual(["three"]);
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
});
|
||||||
// components: { vSelect },
|
|
||||||
// data: {
|
it("can select the current search text as a string", () => {
|
||||||
// value: ["one"],
|
const Select = selectWithProps({
|
||||||
// options: ["one", "two"]
|
taggable: true,
|
||||||
// }
|
multiple: true,
|
||||||
// }).$mount();
|
value: ["one"],
|
||||||
//
|
options: ["one", "two"]
|
||||||
// vm.$children[0].search = "three";
|
});
|
||||||
// expect(vm.$children[0].filteredOptions).toEqual(["three"]);
|
|
||||||
// });
|
searchSubmit(Select, "three");
|
||||||
//
|
expect(Select.vm.mutableValue).toEqual(["one", "three"]);
|
||||||
// it("can select the current search text as a string", done => {
|
});
|
||||||
// const vm = new Vue({
|
|
||||||
// template:
|
it("can select the current search text as an object", () => {
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
const Select = selectWithProps({
|
||||||
// components: { vSelect },
|
taggable: true,
|
||||||
// data: {
|
multiple: true,
|
||||||
// value: ["one"],
|
value: [{ label: "one" }],
|
||||||
// options: ["one", "two"]
|
options: [{ label: "one" }]
|
||||||
// }
|
});
|
||||||
// }).$mount();
|
|
||||||
//
|
searchSubmit(Select, "two");
|
||||||
// searchSubmit(vm, "three");
|
expect(Select.vm.mutableValue).toEqual([
|
||||||
// Vue.nextTick(() => {
|
{ label: "one" },
|
||||||
// expect(vm.$children[0].mutableValue).toEqual(["one", "three"]);
|
{ label: "two" }
|
||||||
// done();
|
]);
|
||||||
// });
|
});
|
||||||
// });
|
|
||||||
//
|
it("should add a freshly created option/tag to the options list when pushTags is true", () => {
|
||||||
// it("can select the current search text as an object", done => {
|
const Select = selectWithProps({
|
||||||
// const vm = new Vue({
|
pushTags: true,
|
||||||
// template:
|
taggable: true,
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
multiple: true,
|
||||||
// components: { vSelect },
|
value: ["one"],
|
||||||
// data: {
|
options: ["one", "two"]
|
||||||
// value: [{ label: "one" }],
|
});
|
||||||
// options: [{ label: "one" }]
|
|
||||||
// }
|
searchSubmit(Select, "three");
|
||||||
// }).$mount();
|
expect(Select.vm.mutableOptions).toEqual(["one", "two", "three"]);
|
||||||
//
|
});
|
||||||
// searchSubmit(vm, "two");
|
|
||||||
// Vue.nextTick(() => {
|
it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", () => {
|
||||||
// expect(vm.$children[0].mutableValue).toEqual([
|
const Select = selectWithProps({
|
||||||
// { label: "one" },
|
filterable: false,
|
||||||
// { label: "two" }
|
pushTags: true,
|
||||||
// ]);
|
taggable: true,
|
||||||
// done();
|
multiple: true,
|
||||||
// });
|
value: ["one"],
|
||||||
// });
|
options: ["one", "two"]
|
||||||
//
|
});
|
||||||
// it("should add a freshly created option/tag to the options list when pushTags is true", () => {
|
|
||||||
// const vm = new Vue({
|
searchSubmit(Select, "three");
|
||||||
// template:
|
expect(Select.vm.mutableOptions).toEqual(["one", "two", "three"]);
|
||||||
// '<div><v-select :options="options" push-tags :value="value" :multiple="true" taggable></v-select></div>',
|
expect(Select.vm.filteredOptions).toEqual(["one", "two", "three"]);
|
||||||
// components: { vSelect },
|
});
|
||||||
// data: {
|
|
||||||
// value: ["one"],
|
it("wont add a freshly created option/tag to the options list when pushTags is false", () => {
|
||||||
// options: ["one", "two"]
|
const Select = selectWithProps({
|
||||||
// }
|
pushTags: false,
|
||||||
// }).$mount();
|
taggable: true,
|
||||||
//
|
multiple: true,
|
||||||
// searchSubmit(vm, "three");
|
value: ["one"],
|
||||||
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two", "three"]);
|
options: ["one", "two"]
|
||||||
// });
|
});
|
||||||
//
|
|
||||||
// it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", () => {
|
searchSubmit(Select, "three");
|
||||||
// const vm = new Vue({
|
expect(Select.vm.mutableOptions).toEqual(["one", "two"]);
|
||||||
// template:
|
});
|
||||||
// '<div><v-select :options="options" push-tags :value="value" :filterable="false" :multiple="true" :taggable="true"></v-select></div>',
|
|
||||||
// components: { vSelect },
|
it("wont add a freshly created option/tag to the options list when pushTags is false and filterable is false", () => {
|
||||||
// data: {
|
const Select = selectWithProps({
|
||||||
// value: ["one"],
|
filterable: false,
|
||||||
// options: ["one", "two"]
|
pushTags: false,
|
||||||
// }
|
taggable: true,
|
||||||
// }).$mount();
|
multiple: true,
|
||||||
//
|
value: ["one"],
|
||||||
// searchSubmit(vm, "three");
|
options: ["one", "two"]
|
||||||
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two", "three"]);
|
});
|
||||||
// expect(vm.$children[0].filteredOptions).toEqual(["one", "two", "three"]);
|
|
||||||
// });
|
searchSubmit(Select, "three");
|
||||||
//
|
expect(Select.vm.mutableOptions).toEqual(["one", "two"]);
|
||||||
// it("wont add a freshly created option/tag to the options list when pushTags is false", () => {
|
expect(Select.vm.filteredOptions).toEqual(["one", "two"]);
|
||||||
// const vm = new Vue({
|
});
|
||||||
// template:
|
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" :taggable="true"></v-select></div>',
|
it("should select an existing option if the search string matches a string from options", () => {
|
||||||
// components: { vSelect },
|
let two = "two";
|
||||||
// data: {
|
const Select = selectWithProps({
|
||||||
// value: ["one"],
|
taggable: true,
|
||||||
// options: ["one", "two"]
|
multiple: true,
|
||||||
// }
|
value: null,
|
||||||
// }).$mount();
|
options: ["one", two]
|
||||||
//
|
});
|
||||||
// searchSubmit(vm, "three");
|
|
||||||
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two"]);
|
Select.vm.search = "two";
|
||||||
// });
|
|
||||||
//
|
searchSubmit(Select);
|
||||||
// it("wont add a freshly created option/tag to the options list when pushTags is false and filterable is false", () => {
|
|
||||||
// const vm = new Vue({
|
expect(Select.vm.mutableValue[0]).toBe(two);
|
||||||
// template:
|
});
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" :taggable="true"></v-select></div>',
|
|
||||||
// components: { vSelect },
|
it("should select an existing option if the search string matches an objects label from options", () => {
|
||||||
// data: {
|
let two = { label: "two" };
|
||||||
// value: ["one"],
|
const Select = selectWithProps({
|
||||||
// options: ["one", "two"]
|
taggable: true,
|
||||||
// }
|
options: [{ label: "one" }, two]
|
||||||
// }).$mount();
|
});
|
||||||
//
|
|
||||||
// searchSubmit(vm, "three");
|
Select.vm.search = "two";
|
||||||
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two"]);
|
|
||||||
// expect(vm.$children[0].filteredOptions).toEqual(["one", "two"]);
|
searchSubmit(Select);
|
||||||
// });
|
expect(Select.vm.mutableValue.label).toBe(two.label);
|
||||||
//
|
});
|
||||||
// it("should select an existing option if the search string matches a string from options", done => {
|
|
||||||
// let two = "two";
|
it("should select an existing option if the search string matches an objects label from options when filter-options is false", () => {
|
||||||
// const vm = new Vue({
|
let two = { label: "two" };
|
||||||
// template:
|
const Select = selectWithProps({
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
taggable: true,
|
||||||
// data: {
|
filterable: false,
|
||||||
// value: null,
|
options: [{ label: "one" }, two]
|
||||||
// options: ["one", two]
|
});
|
||||||
// }
|
|
||||||
// }).$mount();
|
Select.vm.search = "two";
|
||||||
// vm.$children[0].search = "two";
|
|
||||||
//
|
searchSubmit(Select);
|
||||||
// searchSubmit(vm);
|
expect(Select.vm.mutableValue.label).toBe(two.label);
|
||||||
//
|
});
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$children[0].mutableValue[0]).toBe(two);
|
it("should not reset the selected value when the options property changes", () => {
|
||||||
// done();
|
const Select = selectWithProps({
|
||||||
// });
|
taggable: true,
|
||||||
// });
|
multiple: true,
|
||||||
//
|
value: [{ label: "one" }],
|
||||||
// it("should select an existing option if the search string matches an objects label from options", done => {
|
options: [{ label: "one" }]
|
||||||
// let two = { label: "two" };
|
});
|
||||||
// const vm = new Vue({
|
|
||||||
// template:
|
Select.vm.mutableOptions = [{ label: "two" }];
|
||||||
// '<div><v-select :options="options" taggable></v-select></div>',
|
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
|
||||||
// data: {
|
});
|
||||||
// options: [{ label: "one" }, two]
|
|
||||||
// }
|
it("should not reset the selected value when the options property changes when filterable is false", () => {
|
||||||
// }).$mount();
|
const Select = selectWithProps({
|
||||||
//
|
taggable: true,
|
||||||
// vm.$children[0].search = "two";
|
multiple: true,
|
||||||
//
|
filterable: false,
|
||||||
// Vue.nextTick(() => {
|
value: [{ label: "one" }],
|
||||||
// searchSubmit(vm);
|
options: [{ label: "one" }]
|
||||||
// // This needs to be wrapped in nextTick() twice so that filteredOptions can
|
});
|
||||||
// // calculate after setting the search text, and move the typeAheadPointer index to 0.
|
|
||||||
// Vue.nextTick(() => {
|
Select.vm.mutableOptions = [{ label: "two" }];
|
||||||
// expect(vm.$children[0].mutableValue.label).toBe(two.label);
|
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
|
||||||
// done();
|
});
|
||||||
// });
|
|
||||||
// });
|
it("should not allow duplicate tags when using string options", () => {
|
||||||
// });
|
const Select = selectWithProps({
|
||||||
//
|
taggable: true,
|
||||||
// it("should select an existing option if the search string matches an objects label from options when filter-options is false", done => {
|
multiple: true
|
||||||
// let two = { label: "two" };
|
});
|
||||||
// const vm = new Vue({
|
|
||||||
// template:
|
searchSubmit(Select, "one");
|
||||||
// '<div><v-select :options="options" taggable :filterable="false"></v-select></div>',
|
expect(Select.vm.mutableValue).toEqual(["one"]);
|
||||||
// data: {
|
expect(Select.vm.search).toEqual("");
|
||||||
// options: [{ label: "one" }, two]
|
|
||||||
// }
|
searchSubmit(Select, "one");
|
||||||
// }).$mount();
|
expect(Select.vm.mutableValue).toEqual(["one"]);
|
||||||
//
|
expect(Select.vm.search).toEqual("");
|
||||||
// vm.$children[0].search = "two";
|
});
|
||||||
//
|
|
||||||
// Vue.nextTick(() => {
|
it("should not allow duplicate tags when using object options", () => {
|
||||||
// searchSubmit(vm);
|
const Select = selectWithProps({
|
||||||
// // This needs to be wrapped in nextTick() twice so that filteredOptions can
|
taggable: true,
|
||||||
// // calculate after setting the search text, and move the typeAheadPointer index to 0.
|
multiple: true,
|
||||||
// Vue.nextTick(() => {
|
options: [{ label: "two" }]
|
||||||
// expect(vm.$children[0].mutableValue.label).toBe(two.label);
|
});
|
||||||
// done();
|
|
||||||
// });
|
searchSubmit(Select, "one");
|
||||||
// });
|
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
|
||||||
// });
|
expect(Select.vm.search).toEqual("");
|
||||||
//
|
|
||||||
// it("should not reset the selected value when the options property changes", done => {
|
searchSubmit(Select, "one");
|
||||||
// const vm = new Vue({
|
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
|
||||||
// template:
|
expect(Select.vm.search).toEqual("");
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
});
|
||||||
// components: { vSelect },
|
|
||||||
// data: {
|
|
||||||
// value: [{ label: "one" }],
|
|
||||||
// options: [{ label: "one" }]
|
|
||||||
// }
|
|
||||||
// }).$mount();
|
|
||||||
// vm.$children[0].mutableOptions = [{ label: "two" }];
|
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$children[0].mutableValue).toEqual([{ label: "one" }]);
|
|
||||||
// done();
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// it("should not reset the selected value when the options property changes when filterable is false", done => {
|
|
||||||
// const vm = new Vue({
|
|
||||||
// template:
|
|
||||||
// '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" taggable></v-select></div>',
|
|
||||||
// components: { vSelect },
|
|
||||||
// data: {
|
|
||||||
// value: [{ label: "one" }],
|
|
||||||
// options: [{ label: "one" }]
|
|
||||||
// }
|
|
||||||
// }).$mount();
|
|
||||||
// vm.$children[0].mutableOptions = [{ label: "two" }];
|
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$children[0].mutableValue).toEqual([{ label: "one" }]);
|
|
||||||
// done();
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// it("should not allow duplicate tags when using string options", done => {
|
|
||||||
// const vm = new Vue({
|
|
||||||
// template: `<div><v-select ref="select" taggable multiple></v-select></div>`
|
|
||||||
// }).$mount();
|
|
||||||
// vm.$refs.select.search = "one";
|
|
||||||
// searchSubmit(vm);
|
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$refs.select.mutableValue).toEqual(["one"]);
|
|
||||||
// expect(vm.$refs.select.search).toEqual("");
|
|
||||||
// vm.$refs.select.search = "one";
|
|
||||||
// searchSubmit(vm);
|
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$refs.select.mutableValue).toEqual(["one"]);
|
|
||||||
// expect(vm.$refs.select.search).toEqual("");
|
|
||||||
// done();
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// it("should not allow duplicate tags when using object options", done => {
|
|
||||||
// const vm = new Vue({
|
|
||||||
// template: `<div><v-select ref="select" taggable multiple></v-select></div>`
|
|
||||||
// }).$mount();
|
|
||||||
// vm.$refs.select.search = "one";
|
|
||||||
// searchSubmit(vm);
|
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$refs.select.mutableValue).toEqual(["one"]);
|
|
||||||
// expect(vm.$refs.select.search).toEqual("");
|
|
||||||
// vm.$refs.select.search = "one";
|
|
||||||
// searchSubmit(vm);
|
|
||||||
// Vue.nextTick(() => {
|
|
||||||
// expect(vm.$refs.select.mutableValue).toEqual(["one"]);
|
|
||||||
// expect(vm.$refs.select.search).toEqual("");
|
|
||||||
// done();
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user