mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-29 05:14:04 +03:00
Code Activity

- migrate tagging spec

Browse Source 
- add helpers
This commit is contained in:
Jeff
2018-08-12 12:33:13 -07:00
parent 3c2e8c1f03
commit eed25d7a5a
2 changed files with 244 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/helpers.js
+28
View File
@@ -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 });
};
tests/unit/Tagging.spec.js
+216 -286
View File
@@ -1,294 +1,224 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { searchSubmit, selectWithProps } from "../helpers";
describe("When Tagging Is Enabled", () => {
it("can determine if a given option string already exists", () => {
const Select = shallowMount(VueSelect, {
propsData: { taggable: true, options: ["one", "two"] }
});
const Select = selectWithProps({ taggable: true, options: ["one", "two"] });
expect(Select.vm.optionExists("one")).toEqual(true);
expect(Select.vm.optionExists("three")).toEqual(false);
});
// it("can determine if a given option object already exists", () => {
// const vm = new Vue({
// template:
// '<div><v-select ref="select" :options="options" taggable></v-select></div>',
// components: { vSelect },
// data: {
// options: [{ label: "one" }, { label: "two" }]
// }
// }).$mount();
//
// expect(vm.$refs.select.optionExists("one")).toEqual(true);
// expect(vm.$refs.select.optionExists("three")).toEqual(false);
// });
//
// it("can determine if a given option object already exists when using custom labels", () => {
// const vm = new Vue({
// template:
// '<div><v-select ref="select" :options="options" label="foo" taggable></v-select></div>',
// components: { vSelect },
// data: {
// options: [{ foo: "one" }, { foo: "two" }]
// }
// }).$mount();
//
// expect(vm.$refs.select.optionExists("one")).toEqual(true);
// expect(vm.$refs.select.optionExists("three")).toEqual(false);
// });
//
// it("can add the current search text as the first item in the options list", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two"]
// }
// }).$mount();
//
// vm.$children[0].search = "three";
// expect(vm.$children[0].filteredOptions).toEqual(["three"]);
// });
//
// it("can select the current search text as a string", done => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two"]
// }
// }).$mount();
//
// searchSubmit(vm, "three");
// Vue.nextTick(() => {
// expect(vm.$children[0].mutableValue).toEqual(["one", "three"]);
// done();
// });
// });
//
// it("can select the current search text as an object", done => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
// components: { vSelect },
// data: {
// value: [{ label: "one" }],
// options: [{ label: "one" }]
// }
// }).$mount();
//
// searchSubmit(vm, "two");
// Vue.nextTick(() => {
// expect(vm.$children[0].mutableValue).toEqual([
// { label: "one" },
// { label: "two" }
// ]);
// done();
// });
// });
//
// it("should add a freshly created option/tag to the options list when pushTags is true", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" push-tags :value="value" :multiple="true" taggable></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two"]
// }
// }).$mount();
//
// searchSubmit(vm, "three");
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two", "three"]);
// });
//
// it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" push-tags :value="value" :filterable="false" :multiple="true" :taggable="true"></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two"]
// }
// }).$mount();
//
// searchSubmit(vm, "three");
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two", "three"]);
// expect(vm.$children[0].filteredOptions).toEqual(["one", "two", "three"]);
// });
//
// it("wont add a freshly created option/tag to the options list when pushTags is false", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value" :multiple="true" :taggable="true"></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two"]
// }
// }).$mount();
//
// searchSubmit(vm, "three");
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two"]);
// });
//
// it("wont add a freshly created option/tag to the options list when pushTags is false and filterable is false", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" :taggable="true"></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two"]
// }
// }).$mount();
//
// searchSubmit(vm, "three");
// expect(vm.$children[0].mutableOptions).toEqual(["one", "two"]);
// expect(vm.$children[0].filteredOptions).toEqual(["one", "two"]);
// });
//
// it("should select an existing option if the search string matches a string from options", done => {
// let two = "two";
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
// data: {
// value: null,
// options: ["one", two]
// }
// }).$mount();
// vm.$children[0].search = "two";
//
// searchSubmit(vm);
//
// Vue.nextTick(() => {
// expect(vm.$children[0].mutableValue[0]).toBe(two);
// done();
// });
// });
//
// it("should select an existing option if the search string matches an objects label from options", done => {
// let two = { label: "two" };
// const vm = new Vue({
// template:
// '<div><v-select :options="options" taggable></v-select></div>',
// data: {
// options: [{ label: "one" }, two]
// }
// }).$mount();
//
// vm.$children[0].search = "two";
//
// Vue.nextTick(() => {
// searchSubmit(vm);
// // 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(() => {
// expect(vm.$children[0].mutableValue.label).toBe(two.label);
// done();
// });
// });
// });
//
// it("should select an existing option if the search string matches an objects label from options when filter-options is false", done => {
// let two = { label: "two" };
// const vm = new Vue({
// template:
// '<div><v-select :options="options" taggable :filterable="false"></v-select></div>',
// data: {
// options: [{ label: "one" }, two]
// }
// }).$mount();
//
// vm.$children[0].search = "two";
//
// Vue.nextTick(() => {
// searchSubmit(vm);
// // 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(() => {
// expect(vm.$children[0].mutableValue.label).toBe(two.label);
// done();
// });
// });
// });
//
// it("should not reset the selected value when the options property changes", done => {
// const vm = new Vue({
// template:
// '<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();
// });
// });
// });
it("can determine if a given option object already exists", () => {
const Select = selectWithProps({
taggable: true,
options: [{ label: "one" }, { label: "two" }]
});
expect(Select.vm.optionExists("one")).toEqual(true);
expect(Select.vm.optionExists("three")).toEqual(false);
});
it("can determine if a given option object already exists when using custom labels", () => {
const Select = selectWithProps({
taggable: true,
options: [{ foo: "one" }, { foo: "two" }],
label: "foo"
});
expect(Select.vm.optionExists("one")).toEqual(true);
expect(Select.vm.optionExists("three")).toEqual(false);
});
it("can add the current search text as the first item in the options list", () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
Select.vm.search = "three";
expect(Select.vm.filteredOptions).toEqual(["three"]);
});
it("can select the current search text as a string", () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
searchSubmit(Select, "three");
expect(Select.vm.mutableValue).toEqual(["one", "three"]);
});
it("can select the current search text as an object", () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: [{ label: "one" }],
options: [{ label: "one" }]
});
searchSubmit(Select, "two");
expect(Select.vm.mutableValue).toEqual([
{ label: "one" },
{ label: "two" }
]);
});
it("should add a freshly created option/tag to the options list when pushTags is true", () => {
const Select = selectWithProps({
pushTags: true,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
searchSubmit(Select, "three");
expect(Select.vm.mutableOptions).toEqual(["one", "two", "three"]);
});
it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", () => {
const Select = selectWithProps({
filterable: false,
pushTags: true,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
searchSubmit(Select, "three");
expect(Select.vm.mutableOptions).toEqual(["one", "two", "three"]);
expect(Select.vm.filteredOptions).toEqual(["one", "two", "three"]);
});
it("wont add a freshly created option/tag to the options list when pushTags is false", () => {
const Select = selectWithProps({
pushTags: false,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
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 and filterable is false", () => {
const Select = selectWithProps({
filterable: false,
pushTags: false,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
searchSubmit(Select, "three");
expect(Select.vm.mutableOptions).toEqual(["one", "two"]);
expect(Select.vm.filteredOptions).toEqual(["one", "two"]);
});
it("should select an existing option if the search string matches a string from options", () => {
let two = "two";
const Select = selectWithProps({
taggable: true,
multiple: true,
value: null,
options: ["one", two]
});
Select.vm.search = "two";
searchSubmit(Select);
expect(Select.vm.mutableValue[0]).toBe(two);
});
it("should select an existing option if the search string matches an objects label from options", () => {
let two = { label: "two" };
const Select = selectWithProps({
taggable: true,
options: [{ label: "one" }, two]
});
Select.vm.search = "two";
searchSubmit(Select);
expect(Select.vm.mutableValue.label).toBe(two.label);
});
it("should select an existing option if the search string matches an objects label from options when filter-options is false", () => {
let two = { label: "two" };
const Select = selectWithProps({
taggable: true,
filterable: false,
options: [{ label: "one" }, two]
});
Select.vm.search = "two";
searchSubmit(Select);
expect(Select.vm.mutableValue.label).toBe(two.label);
});
it("should not reset the selected value when the options property changes", () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: [{ label: "one" }],
options: [{ label: "one" }]
});
Select.vm.mutableOptions = [{ label: "two" }];
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
});
it("should not reset the selected value when the options property changes when filterable is false", () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
filterable: false,
value: [{ label: "one" }],
options: [{ label: "one" }]
});
Select.vm.mutableOptions = [{ label: "two" }];
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
});
it("should not allow duplicate tags when using string options", () => {
const Select = selectWithProps({
taggable: true,
multiple: true
});
searchSubmit(Select, "one");
expect(Select.vm.mutableValue).toEqual(["one"]);
expect(Select.vm.search).toEqual("");
searchSubmit(Select, "one");
expect(Select.vm.mutableValue).toEqual(["one"]);
expect(Select.vm.search).toEqual("");
});
it("should not allow duplicate tags when using object options", () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
options: [{ label: "two" }]
});
searchSubmit(Select, "one");
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
expect(Select.vm.search).toEqual("");
searchSubmit(Select, "one");
expect(Select.vm.mutableValue).toEqual([{ label: "one" }]);
expect(Select.vm.search).toEqual("");
});
});