From eed25d7a5a67d1263aba11c9771dd8e440abcdb4 Mon Sep 17 00:00:00 2001 From: Jeff Date: Sun, 12 Aug 2018 12:33:13 -0700 Subject: [PATCH] - migrate tagging spec - add helpers --- tests/helpers.js | 28 +++ tests/unit/Tagging.spec.js | 502 ++++++++++++++++--------------------- 2 files changed, 244 insertions(+), 286 deletions(-) create mode 100644 tests/helpers.js diff --git a/tests/helpers.js b/tests/helpers.js new file mode 100644 index 0000000..c625289 --- /dev/null +++ b/tests/helpers.js @@ -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} + * @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} + */ +export const selectWithProps = (propsData = {}) => { + return shallowMount(VueSelect, { propsData }); +}; diff --git a/tests/unit/Tagging.spec.js b/tests/unit/Tagging.spec.js index 0f83147..e8b2d88 100644 --- a/tests/unit/Tagging.spec.js +++ b/tests/unit/Tagging.spec.js @@ -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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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: `
` - // }).$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: `
` - // }).$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(""); + }); });