mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +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 { selectWithProps } from "../helpers";
import VueSelect from "../../src/components/Select";
describe("Toggling Dropdown", () => { describe("Toggling Dropdown", () => {
it("should not open the dropdown when the el is clicked but the component is disabled", () => { it("should not open the dropdown when the el is clicked but the component is disabled", () => {
const Select = shallowMount(VueSelect, { const Select = selectWithProps({ disabled: true });
propsData: { disabled: true }
});
Select.vm.toggleDropdown({ target: Select.vm.$refs.search }); Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
expect(Select.vm.open).toEqual(false); expect(Select.vm.open).toEqual(false);
}); });
//
// it("should open the dropdown when the el is clicked", done => { it("should open the dropdown when the el is clicked", () => {
// const vm = new Vue({ const Select = selectWithProps({
// template: value: [{ label: "one" }],
// '<div><v-select :options="options" :value="value"></v-select></div>', options: [{ label: "one" }]
// components: { vSelect }, });
// data: {
// value: [{ label: "one" }], Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
// options: [{ label: "one" }] expect(Select.vm.open).toEqual(true);
// } });
// }).$mount();
// it("should open the dropdown when the selected tag is clicked", () => {
// vm.$children[0].toggleDropdown({ target: vm.$children[0].$refs.search }); const Select = selectWithProps({
// Vue.nextTick(() => { value: [{ label: "one" }],
// Vue.nextTick(() => { options: [{ label: "one" }]
// expect(vm.$children[0].open).toEqual(true); });
// done();
// }); const selectedTag = Select.find(".selected-tag").element;
// });
// }); Select.vm.toggleDropdown({ target: selectedTag });
// expect(Select.vm.open).toEqual(true);
// it("should open the dropdown when the selected tag is clicked", done => { });
// const vm = new Vue({
// template: it("can close the dropdown when the el is clicked", () => {
// '<div><v-select :options="options" :value="value"></v-select></div>', const Select = selectWithProps();
// components: { vSelect }, const spy = jest.spyOn(Select.vm.$refs.search, "blur");
// data: {
// value: [{ label: "one" }], Select.vm.open = true;
// options: [{ label: "one" }] Select.vm.toggleDropdown({ target: Select.vm.$el });
// }
// }).$mount(); expect(spy).toHaveBeenCalled();
// });
// const selectedTag = vm.$children[0].$el.getElementsByClassName(
// "selected-tag" it("closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true", () => {
// )[0]; const Select = selectWithProps({
// vm.$children[0].toggleDropdown({ target: selectedTag }); value: [],
// Vue.nextTick(() => { options: ["one", "two", "three"],
// Vue.nextTick(() => { multiple: true
// expect(vm.$children[0].open).toEqual(true); });
// done();
// }); Select.vm.open = true;
// }); Select.vm.select("one");
// });
// expect(Select.vm.open).toEqual(false);
// it("can close the dropdown when the el is clicked", done => { });
// const vm = new Vue({
// template: "<div><v-select></v-select></div>", it("does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false", () => {
// components: { vSelect } const Select = selectWithProps({
// }).$mount(); value: [],
// options: ["one", "two", "three"],
// spyOn(vm.$children[0].$refs.search, "blur"); multiple: true,
// closeOnSelect: false
// vm.$children[0].open = true; });
// vm.$children[0].toggleDropdown({ target: vm.$children[0].$el }); // const vm = new Vue({
// // template:
// Vue.nextTick(() => { // '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :value="value"></v-select></div>',
// expect(vm.$children[0].$refs.search.blur).toHaveBeenCalled(); // components: { vSelect },
// done(); // }).$mount();
// });
// }); Select.vm.open = true;
// Select.vm.select("one");
// it("closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true", done => {
// const vm = new Vue({ expect(Select.vm.open).toEqual(true);
// template: });
// '<div><v-select ref="select" :options="options" multiple :value="value"></v-select></div>',
// components: { vSelect }, it("should close the dropdown on search blur", () => {
// data: { const Select = selectWithProps({
// value: [], options: [{ label: "one" }]
// options: ["one", "two", "three"] });
// }
// }).$mount(); Select.vm.open = true;
// Select.find({ ref: "search" }).trigger("blur");
// vm.$children[0].open = true;
// vm.$refs.select.select("one"); expect(Select.vm.open).toEqual(false);
// });
// Vue.nextTick(() => {
// expect(vm.$children[0].open).toEqual(false); it("will close the dropdown and emit the search:blur event from onSearchBlur", () => {
// done(); const Select = selectWithProps();
// }); const spy = jest.spyOn(Select.vm, "$emit");
// });
// Select.vm.open = true;
// it("does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false", done => { Select.vm.onSearchBlur();
// const vm = new Vue({
// template: expect(Select.vm.open).toEqual(false);
// '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :value="value"></v-select></div>', expect(spy).toHaveBeenCalledWith("search:blur");
// components: { vSelect }, });
// data: {
// value: [], it("will open the dropdown and emit the search:focus event from onSearchFocus", () => {
// options: ["one", "two", "three"] const Select = selectWithProps();
// } const spy = jest.spyOn(Select.vm, "$emit");
// }).$mount();
// Select.vm.onSearchFocus();
// vm.$children[0].open = true;
// vm.$refs.select.select("one"); expect(Select.vm.open).toEqual(true);
// expect(spy).toHaveBeenCalledWith("search:focus");
// Vue.nextTick(() => { });
// expect(vm.$children[0].open).toEqual(true);
// done(); it("will close the dropdown on escape, if search is empty", () => {
// }); const Select = selectWithProps();
// }); const spy = jest.spyOn(Select.vm.$refs.search, "blur");
//
// it("should close the dropdown on search blur", () => { Select.vm.open = true;
// const vm = new Vue({ Select.vm.onEscape();
// template:
// '<div><v-select :options="options" multiple :value="value"></v-select></div>', expect(spy).toHaveBeenCalled();
// components: { vSelect }, });
// data: {
// value: [{ label: "one" }], it("should remove existing search text on escape keyup", () => {
// options: [{ label: "one" }] const Select = selectWithProps({
// } value: [{ label: "one" }],
// }).$mount(); options: [{ label: "one" }]
// });
// vm.$children[0].open = true;
// triggerFocusEvent(vm.$children[0].$refs.toggle, "blur"); Select.vm.search = "foo";
// expect(vm.$children[0].open).toEqual(true); Select.vm.onEscape();
// }); expect(Select.vm.search).toEqual("");
// });
// it("will close the dropdown and emit the search:blur event from onSearchBlur", () => {
// const vm = new Vue({ it("should have an open class when dropdown is active", () => {
// template: "<div><v-select></v-select></div>" const Select = selectWithProps();
// }).$mount();
// expect(Select.vm.dropdownClasses.open).toEqual(false);
// spyOn(vm.$children[0], "$emit");
// vm.$children[0].open = true; Select.vm.open = true;
// vm.$children[0].onSearchBlur(); expect(Select.vm.dropdownClasses.open).toEqual(true);
// });
// 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);
// });
}); });