mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00
Code Activity

Complete pointer specs

Browse Source
This commit is contained in:
Jeff
2018-08-12 11:23:59 -07:00
parent 1554080852
commit 294d16913f
1 changed files with 136 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/TypeAhead.spec.js
+136 -172
View File
@@ -2,182 +2,146 @@ import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select"; import VueSelect from "../../src/components/Select";
describe("Moving the Typeahead Pointer", () => { describe("Moving the Typeahead Pointer", () => {
it("should set the pointer to zero when the filteredOptions change", () => { const mountDefault = () =>
const Select = shallowMount(VueSelect, { shallowMount(VueSelect, {
propsData: { options: ["one", "two", "three"] } propsData: { options: ["one", "two", "three"] }
}); });
it("should set the pointer to zero when the filteredOptions change", () => {
const Select = mountDefault();
Select.vm.search = "two"; Select.vm.search = "two";
expect(Select.vm.typeAheadPointer).toEqual(0); expect(Select.vm.typeAheadPointer).toEqual(0);
}); });
// it("should move the pointer visually up the list on up arrow keyDown", () => { it("should move the pointer visually up the list on up arrow keyDown", () => {
// const vm = new Vue({ const Select = mountDefault();
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect }, Select.vm.typeAheadPointer = 1;
// data: {
// options: ["one", "two", "three"] Select.find({ ref: "search" }).trigger("keydown", { keyCode: 38 });
// }
// }).$mount(); expect(Select.vm.typeAheadPointer).toEqual(0);
// });
// vm.$children[0].typeAheadPointer = 1;
// it("should move the pointer visually down the list on down arrow keyDown", () => {
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 38)); const Select = mountDefault();
// expect(vm.$children[0].typeAheadPointer).toEqual(0);
// }); Select.vm.typeAheadPointer = 1;
//
// it("should move the pointer visually down the list on down arrow keyDown", () => { Select.find({ ref: "search" }).trigger("keydown", { keyCode: 40 });
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>', expect(Select.vm.typeAheadPointer).toEqual(2);
// components: { vSelect }, });
// data: {
// options: ["one", "two", "three"] it("should not move the pointer past the end of the list", () => {
// } const Select = mountDefault();
// }).$mount();
// Select.vm.typeAheadPointer = 2;
// vm.$children[0].typeAheadPointer = 1; Select.vm.typeAheadDown();
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 40)); expect(Select.vm.typeAheadPointer).toEqual(2);
// expect(vm.$children[0].typeAheadPointer).toEqual(2); });
// });
// describe("Automatic Scrolling", () => {
// it("should not move the pointer past the end of the list", () => { it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
// const vm = new Vue({ const Select = mountDefault();
// template: '<div><v-select :options="options"></v-select></div>', const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
// components: { vSelect },
// data: { Select.vm.typeAheadPointer = 1;
// options: ["one", "two", "three"]
// } Select.find({ ref: "search" }).trigger("keydown", { keyCode: 38 });
// }).$mount(); expect(spy).toHaveBeenCalled();
// });
// vm.$children[0].typeAheadPointer = 2;
// vm.$children[0].typeAheadDown(); it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => {
// expect(vm.$children[0].typeAheadPointer).toEqual(2); const Select = mountDefault();
// }); const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
//
// describe("Automatic Scrolling", () => { Select.vm.typeAheadPointer = 1;
// it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
// const vm = new Vue({ Select.find({ ref: "search" }).trigger("keydown", { keyCode: 40 });
// template: '<div><v-select :options="options"></v-select></div>', expect(spy).toHaveBeenCalled();
// components: { vSelect }, });
// data: {
// options: ["one", "two", "three"] it("should check if the scroll position needs to be adjusted when filtered options changes", () => {
// } const Select = mountDefault();
// }).$mount(); const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
//
// vm.$children[0].typeAheadPointer = 1; Select.vm.search = "two";
// spyOn(vm.$children[0], "maybeAdjustScroll");
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 38)); expect(spy).toHaveBeenCalled();
// expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled(); });
// });
// it("should scroll up if the pointer is above the current viewport bounds", () => {
// it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => { const Select = mountDefault();
// const vm = new Vue({ const spy = jest.spyOn(Select.vm, "scrollTo");
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect }, Select.setMethods({
// data: { pixelsToPointerTop() {
// options: ["one", "two", "three"] return 1;
// } },
// }).$mount(); viewport() {
// return { top: 2, bottom: 0 };
// spyOn(vm.$children[0], "maybeAdjustScroll"); }
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 40)); });
// expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled();
// }); Select.vm.maybeAdjustScroll();
//
// it("should check if the scroll position needs to be adjusted when filtered options changes", done => { expect(spy).toHaveBeenCalledWith(1);
// const vm = new Vue({ });
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect }, it("should scroll down if the pointer is below the current viewport bounds", () => {
// data: { const Select = mountDefault();
// options: ["one", "two", "three"] const spy = jest.spyOn(Select.vm, "scrollTo");
// }
// }).$mount(); Select.setMethods({
// pixelsToPointerBottom() {
// spyOn(vm.$children[0], "maybeAdjustScroll"); return 2;
// vm.$children[0].search = "two"; },
// viewport() {
// Vue.nextTick(() => { return { top: 0, bottom: 1 };
// expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled(); }
// done(); });
// });
// }); Select.vm.maybeAdjustScroll();
// expect(spy).toHaveBeenCalledWith(
// it("should scroll up if the pointer is above the current viewport bounds", () => { Select.vm.viewport().top + Select.vm.pointerHeight()
// let methods = Object.assign(pointerScroll.methods, { );
// pixelsToPointerTop() { });
// return 1; });
// },
// viewport() { describe("Measuring pixel distances", () => {
// return { top: 2, bottom: 0 }; it("should calculate pointerHeight as the offsetHeight of the pointer element if it exists", () => {
// } const Select = mountDefault();
// });
// const vm = new Vue({ // Drop down must be open for $refs to exist
// template: Select.vm.open = true;
// "<div><v-select :options=\"['one', 'two', 'three']\"></v-select></div>",
// components: { /**
// "v-select": Mock({ * Since JSDom doesn't render layouts, set the offsetHeight explicitly
// "../mixins/pointerScroll": { methods } * to 25px for each list item.
// }) *
// } * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
// }).$mount(); */
// let i = 0;
// spyOn(vm.$children[0], "scrollTo"); for (let option of Select.vm.$refs.dropdownMenu.children) {
// vm.$children[0].maybeAdjustScroll(); Object.defineProperty(option, "offsetHeight", {
// expect(vm.$children[0].scrollTo).toHaveBeenCalledWith(1); value: 1 + i
// }); });
// i++;
// /** }
// * @link https://github.com/vuejs/vue-loader/issues/434
// * @todo vue-loader/inject-loader fails when used twice in the same file, // Fresh instances start with the pointer at -1
// * so the mock here is abastracted to a separate file. Select.vm.typeAheadPointer = -1;
// */ expect(Select.vm.pointerHeight()).toEqual(0);
// xit("should scroll down if the pointer is below the current viewport bounds", () => {
// let methods = Object.assign(pointerScroll.methods, { Select.vm.typeAheadPointer = 0;
// pixelsToPointerBottom() { expect(Select.vm.pointerHeight()).toEqual(1);
// return 2;
// }, Select.vm.typeAheadPointer = 1;
// viewport() { expect(Select.vm.pointerHeight()).toEqual(2);
// return { top: 0, bottom: 1 };
// } Select.vm.typeAheadPointer = 2;
// }); expect(Select.vm.pointerHeight()).toEqual(3);
// const vm = new Vue({ });
// template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`, });
// components: {
// "v-select": Mock({
// "../mixins/pointerScroll": { methods }
// })
// }
// }).$mount();
//
// spyOn(vm.$children[0], "scrollTo");
// vm.$children[0].maybeAdjustScroll();
// expect(vm.$children[0].scrollTo).toHaveBeenCalledWith(
// vm.$children[0].viewport().top + vm.$children[0].pointerHeight()
// );
// });
// });
//
// describe("Measuring pixel distances", () => {
// it("should calculate pointerHeight as the offsetHeight of the pointer element if it exists", () => {
// const vm = new Vue({
// template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`
// }).$mount();
//
// // dropdown must be open for $refs to exist
// vm.$children[0].open = true;
//
// Vue.nextTick(() => {
// // Fresh instances start with the pointer at -1
// vm.$children[0].typeAheadPointer = -1;
// expect(vm.$children[0].pointerHeight()).toEqual(0);
//
// vm.$children[0].typeAheadPointer = 100;
// expect(vm.$children[0].pointerHeight()).toEqual(0);
//
// vm.$children[0].typeAheadPointer = 1;
// expect(vm.$children[0].pointerHeight()).toEqual(
// vm.$children[0].$refs.dropdownMenu.children[1].offsetHeight
// );
// });
// });
// });
}); });