mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-16 09:10: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";
describe("Moving the Typeahead Pointer", () => {
it("should set the pointer to zero when the filteredOptions change", () => {
const Select = shallowMount(VueSelect, {
const mountDefault = () =>
shallowMount(VueSelect, {
propsData: { options: ["one", "two", "three"] }
});
it("should set the pointer to zero when the filteredOptions change", () => {
const Select = mountDefault();
Select.vm.search = "two";
expect(Select.vm.typeAheadPointer).toEqual(0);
});
// it("should move the pointer visually up the list on up arrow keyDown", () => {
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect },
// data: {
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// vm.$children[0].typeAheadPointer = 1;
//
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 38));
// expect(vm.$children[0].typeAheadPointer).toEqual(0);
// });
//
// it("should move the pointer visually down the list on down arrow keyDown", () => {
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect },
// data: {
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// vm.$children[0].typeAheadPointer = 1;
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 40));
// expect(vm.$children[0].typeAheadPointer).toEqual(2);
// });
//
// it("should not move the pointer past the end of the list", () => {
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect },
// data: {
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// vm.$children[0].typeAheadPointer = 2;
// vm.$children[0].typeAheadDown();
// expect(vm.$children[0].typeAheadPointer).toEqual(2);
// });
//
// describe("Automatic Scrolling", () => {
// it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect },
// data: {
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// vm.$children[0].typeAheadPointer = 1;
// spyOn(vm.$children[0], "maybeAdjustScroll");
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 38));
// expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled();
// });
//
// it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => {
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect },
// data: {
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// spyOn(vm.$children[0], "maybeAdjustScroll");
// trigger(vm.$children[0].$refs.search, "keydown", e => (e.keyCode = 40));
// expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled();
// });
//
// it("should check if the scroll position needs to be adjusted when filtered options changes", done => {
// const vm = new Vue({
// template: '<div><v-select :options="options"></v-select></div>',
// components: { vSelect },
// data: {
// options: ["one", "two", "three"]
// }
// }).$mount();
//
// spyOn(vm.$children[0], "maybeAdjustScroll");
// vm.$children[0].search = "two";
//
// Vue.nextTick(() => {
// expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled();
// done();
// });
// });
//
// it("should scroll up if the pointer is above the current viewport bounds", () => {
// let methods = Object.assign(pointerScroll.methods, {
// pixelsToPointerTop() {
// return 1;
// },
// viewport() {
// return { top: 2, bottom: 0 };
// }
// });
// 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(1);
// });
//
// /**
// * @link https://github.com/vuejs/vue-loader/issues/434
// * @todo vue-loader/inject-loader fails when used twice in the same file,
// * so the mock here is abastracted to a separate file.
// */
// xit("should scroll down if the pointer is below the current viewport bounds", () => {
// let methods = Object.assign(pointerScroll.methods, {
// pixelsToPointerBottom() {
// return 2;
// },
// viewport() {
// return { top: 0, bottom: 1 };
// }
// });
// 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
// );
// });
// });
// });
it("should move the pointer visually up the list on up arrow keyDown", () => {
const Select = mountDefault();
Select.vm.typeAheadPointer = 1;
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 38 });
expect(Select.vm.typeAheadPointer).toEqual(0);
});
it("should move the pointer visually down the list on down arrow keyDown", () => {
const Select = mountDefault();
Select.vm.typeAheadPointer = 1;
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 40 });
expect(Select.vm.typeAheadPointer).toEqual(2);
});
it("should not move the pointer past the end of the list", () => {
const Select = mountDefault();
Select.vm.typeAheadPointer = 2;
Select.vm.typeAheadDown();
expect(Select.vm.typeAheadPointer).toEqual(2);
});
describe("Automatic Scrolling", () => {
it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.typeAheadPointer = 1;
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 38 });
expect(spy).toHaveBeenCalled();
});
it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => {
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.typeAheadPointer = 1;
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 40 });
expect(spy).toHaveBeenCalled();
});
it("should check if the scroll position needs to be adjusted when filtered options changes", () => {
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.search = "two";
expect(spy).toHaveBeenCalled();
});
it("should scroll up if the pointer is above the current viewport bounds", () => {
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "scrollTo");
Select.setMethods({
pixelsToPointerTop() {
return 1;
},
viewport() {
return { top: 2, bottom: 0 };
}
});
Select.vm.maybeAdjustScroll();
expect(spy).toHaveBeenCalledWith(1);
});
it("should scroll down if the pointer is below the current viewport bounds", () => {
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "scrollTo");
Select.setMethods({
pixelsToPointerBottom() {
return 2;
},
viewport() {
return { top: 0, bottom: 1 };
}
});
Select.vm.maybeAdjustScroll();
expect(spy).toHaveBeenCalledWith(
Select.vm.viewport().top + Select.vm.pointerHeight()
);
});
});
describe("Measuring pixel distances", () => {
it("should calculate pointerHeight as the offsetHeight of the pointer element if it exists", () => {
const Select = mountDefault();
// Drop down must be open for $refs to exist
Select.vm.open = true;
/**
* Since JSDom doesn't render layouts, set the offsetHeight explicitly
* to 25px for each list item.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
*/
let i = 0;
for (let option of Select.vm.$refs.dropdownMenu.children) {
Object.defineProperty(option, "offsetHeight", {
value: 1 + i
});
i++;
}
// Fresh instances start with the pointer at -1
Select.vm.typeAheadPointer = -1;
expect(Select.vm.pointerHeight()).toEqual(0);
Select.vm.typeAheadPointer = 0;
expect(Select.vm.pointerHeight()).toEqual(1);
Select.vm.typeAheadPointer = 1;
expect(Select.vm.pointerHeight()).toEqual(2);
Select.vm.typeAheadPointer = 2;
expect(Select.vm.pointerHeight()).toEqual(3);
});
});
});