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

Complete dropdown spec

Browse Source
This commit is contained in:
Jeff
2018-08-12 13:25:13 -07:00
parent 4b5601b572
commit 0946165e9c
1 changed files with 128 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/Dropdown.spec.js
+128 -189
View File
@@ -1,196 +1,135 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { selectWithProps } from "../helpers";
describe("Toggling Dropdown", () => {
it("should not open the dropdown when the el is clicked but the component is disabled", () => {
const Select = shallowMount(VueSelect, {
propsData: { disabled: true }
});
const Select = selectWithProps({ disabled: true });
Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
expect(Select.vm.open).toEqual(false);
});
//
// it("should open the dropdown when the el is clicked", done => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: [{ label: "one" }],
// options: [{ label: "one" }]
// }
// }).$mount();
//
// vm.$children[0].toggleDropdown({ target: vm.$children[0].$refs.search });
// Vue.nextTick(() => {
// Vue.nextTick(() => {
// expect(vm.$children[0].open).toEqual(true);
// done();
// });
// });
// });
//
// it("should open the dropdown when the selected tag is clicked", done => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" :value="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: [{ label: "one" }],
// options: [{ label: "one" }]
// }
// }).$mount();
//
// const selectedTag = vm.$children[0].$el.getElementsByClassName(
// "selected-tag"
// )[0];
// vm.$children[0].toggleDropdown({ target: selectedTag });
// Vue.nextTick(() => {
// Vue.nextTick(() => {
// expect(vm.$children[0].open).toEqual(true);
// done();
// });
// });
// });
//
// it("can close the dropdown when the el is clicked", done => {
// const vm = new Vue({
// template: "<div><v-select></v-select></div>",
// components: { vSelect }
// }).$mount();
//
// spyOn(vm.$children[0].$refs.search, "blur");
//
// vm.$children[0].open = true;
// vm.$children[0].toggleDropdown({ target: vm.$children[0].$el });
//
// Vue.nextTick(() => {
// expect(vm.$children[0].$refs.search.blur).toHaveBeenCalled();
// done();
// });
// });
//
// it("closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true", done => {
// const vm = new Vue({
// template:
// '<div><v-select ref="select" :options="options" multiple :value="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: [],
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// vm.$children[0].open = true;
// vm.$refs.select.select("one");
//
// Vue.nextTick(() => {
// expect(vm.$children[0].open).toEqual(false);
// done();
// });
// });
//
// it("does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false", done => {
// const vm = new Vue({
// template:
// '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :value="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: [],
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// vm.$children[0].open = true;
// vm.$refs.select.select("one");
//
// Vue.nextTick(() => {
// expect(vm.$children[0].open).toEqual(true);
// done();
// });
// });
//
// it("should close the dropdown on search blur", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" multiple :value="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: [{ label: "one" }],
// options: [{ label: "one" }]
// }
// }).$mount();
//
// vm.$children[0].open = true;
// triggerFocusEvent(vm.$children[0].$refs.toggle, "blur");
// expect(vm.$children[0].open).toEqual(true);
// });
//
// it("will close the dropdown and emit the search:blur event from onSearchBlur", () => {
// const vm = new Vue({
// template: "<div><v-select></v-select></div>"
// }).$mount();
//
// spyOn(vm.$children[0], "$emit");
// vm.$children[0].open = true;
// vm.$children[0].onSearchBlur();
//
// expect(vm.$children[0].open).toEqual(false);
// expect(vm.$children[0].$emit).toHaveBeenCalledWith("search:blur");
// });
//
// it("will open the dropdown and emit the search:focus event from onSearchFocus", () => {
// const vm = new Vue({
// template: "<div><v-select></v-select></div>"
// }).$mount();
//
// spyOn(vm.$children[0], "$emit");
// vm.$children[0].onSearchFocus();
//
// expect(vm.$children[0].open).toEqual(true);
// expect(vm.$children[0].$emit).toHaveBeenCalledWith("search:focus");
// });
//
// it("will close the dropdown on escape, if search is empty", done => {
// const vm = new Vue({
// template: "<div><v-select></v-select></div>",
// components: { vSelect }
// }).$mount();
//
// spyOn(vm.$children[0].$refs.search, "blur");
//
// vm.$children[0].open = true;
// vm.$children[0].onEscape();
//
// Vue.nextTick(() => {
// expect(vm.$children[0].$refs.search.blur).toHaveBeenCalled();
// done();
// });
// });
//
// it("should remove existing search text on escape keyup", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" multiple :value="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: [{ label: "one" }],
// options: [{ label: "one" }]
// }
// }).$mount();
//
// vm.$children[0].search = "foo";
// vm.$children[0].onEscape();
// expect(vm.$children[0].search).toEqual("");
// });
//
// it("should have an open class when dropdown is active", () => {
// const vm = new Vue({
// template: "<div><v-select></v-select></div>",
// components: { vSelect }
// }).$mount();
//
// expect(vm.$children[0].dropdownClasses.open).toEqual(false);
// });
it("should open the dropdown when the el is clicked", () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }]
});
Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
expect(Select.vm.open).toEqual(true);
});
it("should open the dropdown when the selected tag is clicked", () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }]
});
const selectedTag = Select.find(".selected-tag").element;
Select.vm.toggleDropdown({ target: selectedTag });
expect(Select.vm.open).toEqual(true);
});
it("can close the dropdown when the el is clicked", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm.$refs.search, "blur");
Select.vm.open = true;
Select.vm.toggleDropdown({ target: Select.vm.$el });
expect(spy).toHaveBeenCalled();
});
it("closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true", () => {
const Select = selectWithProps({
value: [],
options: ["one", "two", "three"],
multiple: true
});
Select.vm.open = true;
Select.vm.select("one");
expect(Select.vm.open).toEqual(false);
});
it("does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false", () => {
const Select = selectWithProps({
value: [],
options: ["one", "two", "three"],
multiple: true,
closeOnSelect: false
});
// const vm = new Vue({
// template:
// '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :value="value"></v-select></div>',
// components: { vSelect },
// }).$mount();
Select.vm.open = true;
Select.vm.select("one");
expect(Select.vm.open).toEqual(true);
});
it("should close the dropdown on search blur", () => {
const Select = selectWithProps({
options: [{ label: "one" }]
});
Select.vm.open = true;
Select.find({ ref: "search" }).trigger("blur");
expect(Select.vm.open).toEqual(false);
});
it("will close the dropdown and emit the search:blur event from onSearchBlur", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm, "$emit");
Select.vm.open = true;
Select.vm.onSearchBlur();
expect(Select.vm.open).toEqual(false);
expect(spy).toHaveBeenCalledWith("search:blur");
});
it("will open the dropdown and emit the search:focus event from onSearchFocus", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm, "$emit");
Select.vm.onSearchFocus();
expect(Select.vm.open).toEqual(true);
expect(spy).toHaveBeenCalledWith("search:focus");
});
it("will close the dropdown on escape, if search is empty", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm.$refs.search, "blur");
Select.vm.open = true;
Select.vm.onEscape();
expect(spy).toHaveBeenCalled();
});
it("should remove existing search text on escape keyup", () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }]
});
Select.vm.search = "foo";
Select.vm.onEscape();
expect(Select.vm.search).toEqual("");
});
it("should have an open class when dropdown is active", () => {
const Select = selectWithProps();
expect(Select.vm.dropdownClasses.open).toEqual(false);
Select.vm.open = true;
expect(Select.vm.dropdownClasses.open).toEqual(true);
});
});