mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
Further progress on test suite migration, all tests moved out of old files
This commit is contained in:
Jeff
@@ -1,12 +0,0 @@
|
||||
// Polyfill fn.bind() for PhantomJS
|
||||
/* eslint-disable no-extend-native */
|
||||
Function.prototype.bind = require('function-bind')
|
||||
|
||||
// require all test files (files that ends with .spec.js)
|
||||
var testsContext = require.context('./specs', true, /\.spec$/)
|
||||
testsContext.keys().forEach(testsContext)
|
||||
|
||||
// require all src files except main.js for coverage.
|
||||
// you can also change this to match only the subset of files that
|
||||
// you want coverage for.
|
||||
var srcContext = require('../../src/components/Select.vue')
|
||||
@@ -1,78 +0,0 @@
|
||||
// This is a karma config file. For more details see
|
||||
// http://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
// we are also using it with karma-webpack
|
||||
// https://github.com/webpack/karma-webpack
|
||||
|
||||
var path = require('path')
|
||||
var merge = require('webpack-merge')
|
||||
var baseConfig = require('../../build/webpack.base.conf')
|
||||
var utils = require('../../build/utils')
|
||||
var webpack = require('webpack')
|
||||
var projectRoot = path.resolve(__dirname, '../../')
|
||||
|
||||
var webpackConfig = merge(baseConfig, {
|
||||
// use inline sourcemap for karma-sourcemap-loader
|
||||
module: {
|
||||
loaders: utils.styleLoaders()
|
||||
},
|
||||
devtool: '#inline-source-map',
|
||||
vue: {
|
||||
loaders: {
|
||||
js: 'isparta'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': require('../../config/test.env')
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
// no need for app entry during tests
|
||||
delete webpackConfig.entry
|
||||
|
||||
// make sure isparta loader is applied before eslint
|
||||
webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
|
||||
webpackConfig.module.preLoaders.unshift({
|
||||
test: /\.js$/,
|
||||
loader: 'isparta',
|
||||
include: path.resolve(projectRoot, 'src')
|
||||
})
|
||||
|
||||
// only apply babel for test files when using isparta
|
||||
webpackConfig.module.loaders.some(function (loader, i) {
|
||||
if (loader.loader === 'babel') {
|
||||
loader.include = path.resolve(projectRoot, 'test/unit')
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
// to run in additional browsers:
|
||||
// 1. install corresponding karma launcher
|
||||
// http://karma-runner.github.io/0.13/config/browsers.html
|
||||
// 2. add it to the `browsers` array below.
|
||||
browsers: ['PhantomJS'],
|
||||
frameworks: ['jasmine'],
|
||||
reporters: ['spec', 'coverage'],
|
||||
files: ['./index.js'],
|
||||
preprocessors: {
|
||||
'./index.js': ['webpack', 'sourcemap']
|
||||
},
|
||||
webpack: webpackConfig,
|
||||
webpackMiddleware: {
|
||||
noInfo: true
|
||||
},
|
||||
specReporter: {
|
||||
suppressSkipped: true
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: './coverage',
|
||||
reporters: [
|
||||
{ type: 'lcov', subdir: '.' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,154 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("Asynchronous Loading", () => {
|
||||
it("can toggle the loading class", () => {
|
||||
const Select = shallowMount(VueSelect);
|
||||
|
||||
Select.vm.toggleLoading();
|
||||
expect(Select.vm.mutableLoading).toEqual(true);
|
||||
|
||||
Select.vm.toggleLoading(true);
|
||||
expect(Select.vm.mutableLoading).toEqual(true);
|
||||
});
|
||||
//
|
||||
// it("should trigger the onSearch callback when the search text changes", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" :on-search="foo"></v-select></div>',
|
||||
// data: {
|
||||
// called: false
|
||||
// },
|
||||
// methods: {
|
||||
// foo(val) {
|
||||
// this.called = val;
|
||||
// }
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// vm.$refs.select.search = "foo";
|
||||
//
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.called).toEqual("foo");
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should not trigger the onSearch callback if the search text is empty", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" search="foo" :on-search="foo"></v-select></div>',
|
||||
// data: { called: false },
|
||||
// methods: {
|
||||
// foo(val) {
|
||||
// this.called = !this.called;
|
||||
// }
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// vm.$refs.select.search = "foo";
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.called).toBe(true);
|
||||
// vm.$refs.select.search = "";
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.called).toBe(true);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should trigger the search event when the search text changes", done => {
|
||||
// const vm = new Vue({
|
||||
// template: '<div><v-select ref="select" @search="foo"></v-select></div>',
|
||||
// data: {
|
||||
// called: false
|
||||
// },
|
||||
// methods: {
|
||||
// foo(val) {
|
||||
// this.called = val;
|
||||
// }
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// vm.$refs.select.search = "foo";
|
||||
//
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.called).toEqual("foo");
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should not trigger the search event if the search text is empty", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" search="foo" @search="foo"></v-select></div>',
|
||||
// data: { called: false },
|
||||
// methods: {
|
||||
// foo(val) {
|
||||
// this.called = !this.called;
|
||||
// }
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// vm.$refs.select.search = "foo";
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.called).toBe(true);
|
||||
// vm.$refs.select.search = "";
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.called).toBe(true);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("can set loading to false from the onSearch callback", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select loading ref="select" :on-search="foo"></v-select></div>',
|
||||
// methods: {
|
||||
// foo(search, loading) {
|
||||
// loading(false);
|
||||
// }
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// vm.$refs.select.search = "foo";
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$refs.select.mutableLoading).toEqual(false);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("can set loading to true from the onSearch callback", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select loading ref="select" :on-search="foo"></v-select></div>',
|
||||
// methods: {
|
||||
// foo(search, loading) {
|
||||
// loading(true);
|
||||
// }
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// let select = vm.$refs.select;
|
||||
// select.onSearch(select.search, select.toggleLoading);
|
||||
//
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$refs.select.mutableLoading).toEqual(true);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("will sync mutable loading with the loading prop", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" :loading="loading"></v-select></div>',
|
||||
// data: { loading: false }
|
||||
// }).$mount();
|
||||
// vm.loading = true;
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$refs.select.mutableLoading).toEqual(true);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("Removing values", () => {
|
||||
it("can remove the given tag when its close icon is clicked", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: { multiple: true, value: ["foo"] }
|
||||
});
|
||||
|
||||
Select.find(".close").trigger("click");
|
||||
expect(Select.vm.mutableValue).toEqual([]);
|
||||
});
|
||||
//
|
||||
// it("should not remove tag when close icon is clicked and component is disabled", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select disabled multiple :options="options" v-model="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: ["one"],
|
||||
// options: ["one", "two", "three"]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].$refs.toggle.querySelector(".close").click();
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$children[0].mutableValue).toEqual(["one"]);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should remove the last item in the value array on delete keypress when multiple is true", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :options="options" v-model="value" :multiple="true"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: ["one", "two"],
|
||||
// options: ["one", "two", "three"]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].maybeDeleteValue();
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$children[0].mutableValue).toEqual(["one"]);
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should set value to null on delete keypress when multiple is false", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :options="options" v-model="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: "one",
|
||||
// options: ["one", "two", "three"]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].maybeDeleteValue();
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$children[0].mutableValue).toEqual(null);
|
||||
// });
|
||||
// });
|
||||
|
||||
// describe("Clear button", () => {
|
||||
// it("should be displayed on single select when value is selected", () => {
|
||||
// const VueSelect = Vue.extend(vSelect);
|
||||
// const vm = new VueSelect({
|
||||
// propsData: {
|
||||
// options: ["foo", "bar"],
|
||||
// value: "foo"
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.showClearButton).toEqual(true);
|
||||
// });
|
||||
//
|
||||
// it("should not be displayed on multiple select", () => {
|
||||
// const VueSelect = Vue.extend(vSelect);
|
||||
// const vm = new VueSelect({
|
||||
// propsData: {
|
||||
// options: ["foo", "bar"],
|
||||
// value: "foo",
|
||||
// multiple: true
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.showClearButton).toEqual(false);
|
||||
// });
|
||||
//
|
||||
// it("should remove selected value when clicked", () => {
|
||||
// const VueSelect = Vue.extend(vSelect);
|
||||
// const vm = new VueSelect({
|
||||
// propsData: {
|
||||
// options: ["foo", "bar"],
|
||||
// value: "foo"
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.mutableValue).toEqual("foo");
|
||||
// vm.$el.querySelector("button.clear").click();
|
||||
// expect(vm.mutableValue).toEqual(null);
|
||||
// });
|
||||
//
|
||||
// it("should be disabled when component is disabled", () => {
|
||||
// const VueSelect = Vue.extend(vSelect);
|
||||
// const vm = new VueSelect({
|
||||
// propsData: {
|
||||
// options: ["foo", "bar"],
|
||||
// value: "foo",
|
||||
// disabled: true
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// const buttonEl = vm.$el.querySelector("button.clear");
|
||||
// expect(buttonEl.disabled).toEqual(true);
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,196 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
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 }
|
||||
});
|
||||
|
||||
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);
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("Filtering Options", () => {
|
||||
it("should filter an array of strings", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: { options: ["foo", "bar", "baz"] }
|
||||
});
|
||||
Select.vm.search = "ba";
|
||||
expect(Select.vm.filteredOptions).toEqual(["bar", "baz"]);
|
||||
});
|
||||
|
||||
it("should not filter the array of strings if filterable is false", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: { options: ["foo", "bar", "baz"], filterable: false }
|
||||
});
|
||||
Select.vm.search = "ba";
|
||||
expect(Select.vm.filteredOptions).toEqual(["foo", "bar", "baz"]);
|
||||
});
|
||||
|
||||
it("should filter without case-sensitivity", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: { options: ["Foo", "Bar", "Baz"] }
|
||||
});
|
||||
Select.vm.search = "ba";
|
||||
expect(Select.vm.filteredOptions).toEqual(["Bar", "Baz"]);
|
||||
});
|
||||
|
||||
it("can filter an array of objects based on the objects label key", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: {
|
||||
options: [{ label: "Foo" }, { label: "Bar" }, { label: "Baz" }]
|
||||
}
|
||||
});
|
||||
Select.vm.search = "ba";
|
||||
expect(Select.vm.filteredOptions).toEqual([
|
||||
{ label: "Bar" },
|
||||
{ label: "Baz" }
|
||||
]);
|
||||
});
|
||||
|
||||
it("can determine if a given option should match the current search text", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: {
|
||||
options: [{ label: "Aoo" }, { label: "Bar" }, { label: "Baz" }],
|
||||
filterBy: (option, label, search) =>
|
||||
label.match(new RegExp("^" + search, "i"))
|
||||
}
|
||||
});
|
||||
|
||||
Select.vm.search = "a";
|
||||
expect(Select.vm.filteredOptions).toEqual([{ label: "Aoo" }]);
|
||||
});
|
||||
|
||||
it("can use a custom filtering method", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: {
|
||||
options: ["foo", "bar", "baz"],
|
||||
filterBy: (option, label) => label.includes("o")
|
||||
}
|
||||
});
|
||||
Select.vm.search = "a";
|
||||
expect(Select.vm.filteredOptions).toEqual(["foo"]);
|
||||
});
|
||||
|
||||
it("can filter arrays of numbers", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: {
|
||||
options: [1, 5, 10]
|
||||
}
|
||||
});
|
||||
Select.vm.search = "1";
|
||||
expect(Select.vm.filteredOptions).toEqual([1, 10]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,48 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("Labels", () => {
|
||||
it("can generate labels using a custom label key", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: {
|
||||
options: [{ name: "Foo" }],
|
||||
label: "name",
|
||||
value: { name: "Foo" }
|
||||
}
|
||||
});
|
||||
expect(Select.find(".selected-tag").text()).toBe("Foo");
|
||||
});
|
||||
//
|
||||
// it("will console.warn when options contain objects without a valid label key", done => {
|
||||
// spyOn(console, "warn");
|
||||
// const vm = new Vue({
|
||||
// template: '<div><v-select :options="[{}]"></v-select></div>'
|
||||
// }).$mount();
|
||||
// vm.$children[0].open = true;
|
||||
// Vue.nextTick(() => {
|
||||
// expect(console.warn).toHaveBeenCalledWith(
|
||||
// '[vue-select warn]: Label key "option.label" does not exist in options object {}.' +
|
||||
// "\nhttp://sagalbot.github.io/vue-select/#ex-labels"
|
||||
// );
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should display a placeholder if the value is empty", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :options="options" placeholder="foo"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// options: [{ label: "one" }]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.$children[0].searchPlaceholder).toEqual("foo");
|
||||
// vm.$children[0].mutableValue = { label: "one" };
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$children[0].searchPlaceholder).not.toBeDefined();
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,70 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("Single value options", () => {
|
||||
it("should reset the search input on focus lost", () => {
|
||||
const Select = shallowMount(VueSelect);
|
||||
Select.vm.open = true;
|
||||
|
||||
Select.vm.search = "t";
|
||||
expect(Select.vm.search).toEqual("t");
|
||||
|
||||
Select.vm.onSearchBlur();
|
||||
expect(Select.vm.search).toEqual("");
|
||||
});
|
||||
|
||||
// it('should apply the "hidden" class to the search input when a value is present', () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
|
||||
// data: {
|
||||
// value: "one",
|
||||
// options: ["one", "two", "three"]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.$children[0].inputClasses.hidden).toEqual(true);
|
||||
// });
|
||||
//
|
||||
// it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
|
||||
// data: {
|
||||
// value: "one",
|
||||
// options: ["one", "two", "three"],
|
||||
// open: true
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].toggleDropdown({ target: vm.$children[0].$refs.search });
|
||||
// Vue.nextTick(() => {
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$children[0].open).toEqual(true);
|
||||
// expect(vm.$children[0].inputClasses.hidden).toEqual(false);
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// it("should not reset the search input on focus lost when clearSearchOnSelect is false", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',
|
||||
// data: {
|
||||
// value: "one",
|
||||
// options: ["one", "two", "three"]
|
||||
// }
|
||||
// }).$mount();
|
||||
// expect(vm.$refs.select.clearSearchOnSelect).toEqual(false);
|
||||
//
|
||||
// vm.$children[0].open = true;
|
||||
// vm.$refs.select.search = "t";
|
||||
// expect(vm.$refs.select.search).toEqual("t");
|
||||
//
|
||||
// vm.$children[0].onSearchBlur();
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.$refs.select.search).toEqual("t");
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,278 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("When index prop is defined", () => {
|
||||
it("can accept an array of objects and pre-selected value (single)", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: {
|
||||
index: "value",
|
||||
value: "foo",
|
||||
options: [{ label: "This is Foo", value: "foo" }]
|
||||
}
|
||||
});
|
||||
expect(Select.vm.mutableValue).toEqual("foo");
|
||||
});
|
||||
//
|
||||
// it("can determine if an object is pre-selected", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :options="options" v-model="value" index="id"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: "foo",
|
||||
// options: [
|
||||
// {
|
||||
// id: "foo",
|
||||
// label: "This is Foo"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(
|
||||
// vm.$children[0].isOptionSelected({
|
||||
// id: "foo",
|
||||
// label: "This is Foo"
|
||||
// })
|
||||
// ).toEqual(true);
|
||||
// });
|
||||
//
|
||||
// it("can determine if an object is selected after it has been chosen", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :options="options" index="id"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// options: [{ id: "foo", label: "FooBar" }]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// vm.$children[0].select({ id: "foo", label: "FooBar" });
|
||||
//
|
||||
// // Vue.nextTick(() => {
|
||||
// expect(
|
||||
// vm.$children[0].isOptionSelected({
|
||||
// id: "foo",
|
||||
// label: "This is Foo"
|
||||
// })
|
||||
// ).toEqual(true);
|
||||
// // done()
|
||||
// // })
|
||||
// });
|
||||
//
|
||||
// it("can accept an array of objects and pre-selected values (multiple)", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// index: "value",
|
||||
// value: ["foo", "bar"],
|
||||
// options: [
|
||||
// { label: "This is Foo", value: "foo" },
|
||||
// { label: "This is Bar", value: "bar" }
|
||||
// ]
|
||||
// }
|
||||
// }).$mount();
|
||||
// expect(vm.$children[0].mutableValue).toEqual(vm.value);
|
||||
// });
|
||||
//
|
||||
// it("can deselect a pre-selected object", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
// data: {
|
||||
// index: "value",
|
||||
// value: ["foo", "bar"],
|
||||
// options: [
|
||||
// { label: "This is Foo", value: "foo" },
|
||||
// { label: "This is Bar", value: "bar" }
|
||||
// ]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].deselect("foo");
|
||||
// expect(vm.$children[0].mutableValue.length).toEqual(1);
|
||||
// expect(vm.$children[0].mutableValue).toEqual(["bar"]);
|
||||
// });
|
||||
//
|
||||
// it("can deselect an option when multiple is false", () => {
|
||||
// const vm = new Vue({
|
||||
// template: `<div><v-select :index="index" :options="options" :value="value"></v-select></div>`,
|
||||
// data: {
|
||||
// index: "value",
|
||||
// value: "foo",
|
||||
// options: [
|
||||
// { label: "This is Foo", value: "foo" },
|
||||
// { label: "This is Bar", value: "bar" }
|
||||
// ]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].deselect("foo");
|
||||
// expect(vm.$children[0].mutableValue).toEqual(null);
|
||||
// });
|
||||
//
|
||||
// it("can use v-model syntax for a two way binding to a parent component", done => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :index="index" :options="options" v-model="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// index: "value",
|
||||
// value: "foo",
|
||||
// options: [
|
||||
// { label: "This is Foo", value: "foo" },
|
||||
// { label: "This is Bar", value: "bar" },
|
||||
// { label: "This is Baz", value: "baz" }
|
||||
// ]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.$children[0].value).toEqual("foo");
|
||||
// expect(vm.$children[0].mutableValue).toEqual("foo");
|
||||
//
|
||||
// vm.$children[0].mutableValue = "bar";
|
||||
//
|
||||
// Vue.nextTick(() => {
|
||||
// expect(vm.value).toEqual("bar");
|
||||
// done();
|
||||
// });
|
||||
// }),
|
||||
// it("can work with an array of integers", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :options="[1,2,3,4,5]" v-model="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: 5
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.$children[0].isOptionSelected(5)).toEqual(true);
|
||||
// expect(vm.$children[0].isValueEmpty).toEqual(false);
|
||||
// });
|
||||
//
|
||||
// it("can generate labels using a custom label key", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select :index="index" label="name" :options="options" v-model="value" :multiple="true"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// index: "value",
|
||||
// value: ["baz"],
|
||||
// options: [
|
||||
// { value: "foo", name: "Foo" },
|
||||
// { value: "baz", name: "Baz" }
|
||||
// ]
|
||||
// }
|
||||
// }).$mount();
|
||||
// expect(
|
||||
// vm.$children[0].$refs.toggle.querySelector(".selected-tag").textContent
|
||||
// ).toContain("Baz");
|
||||
// });
|
||||
//
|
||||
// it("will console.warn when attempting to select an option with an undefined index", () => {
|
||||
// spyOn(console, "warn");
|
||||
//
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select index="value" :options="options"></v-select></div>',
|
||||
// data: {
|
||||
// options: [{ label: "Foo" }]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].select({ label: "Foo" });
|
||||
// expect(console.warn).toHaveBeenCalledWith(
|
||||
// `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
|
||||
// );
|
||||
// });
|
||||
//
|
||||
// it("can find the original option within this.options", () => {
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select index="id" :options="options"></v-select></div>',
|
||||
// data: {
|
||||
// options: [{ id: 1, label: "Foo" }, { id: 2, label: "Bar" }]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({
|
||||
// id: 1,
|
||||
// label: "Foo"
|
||||
// });
|
||||
// expect(
|
||||
// vm.$children[0].findOptionByIndexValue({ id: 1, label: "Foo" })
|
||||
// ).toEqual({ id: 1, label: "Foo" });
|
||||
// });
|
||||
//
|
||||
// describe("And when option[index] is a nested object", () => {
|
||||
// it("can determine if an object is pre-selected", () => {
|
||||
// const nestedOption = {
|
||||
// value: {
|
||||
// nested: true
|
||||
// },
|
||||
// label: "foo"
|
||||
// };
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: {
|
||||
// nested: true
|
||||
// },
|
||||
// options: [nestedOption]
|
||||
// }
|
||||
// }).$mount();
|
||||
// expect(
|
||||
// vm.$children[0].isOptionSelected({
|
||||
// nested: true
|
||||
// })
|
||||
// ).toEqual(true);
|
||||
// });
|
||||
//
|
||||
// it("can determine if an object is selected after it is chosen", () => {
|
||||
// const nestedOption = {
|
||||
// value: {
|
||||
// nested: true
|
||||
// },
|
||||
// label: "foo"
|
||||
// };
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select index="value" :options="options"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// options: [nestedOption]
|
||||
// }
|
||||
// }).$mount();
|
||||
// vm.$children[0].select(nestedOption);
|
||||
// expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true);
|
||||
// });
|
||||
//
|
||||
// it("can determine a selected values label", () => {
|
||||
// const nestedOption = {
|
||||
// value: {
|
||||
// nested: true
|
||||
// },
|
||||
// label: "foo"
|
||||
// };
|
||||
// const vm = new Vue({
|
||||
// template:
|
||||
// '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: {
|
||||
// nested: true
|
||||
// },
|
||||
// options: [nestedOption]
|
||||
// }
|
||||
// }).$mount();
|
||||
//
|
||||
// expect(
|
||||
// vm.$children[0].getOptionLabel({
|
||||
// nested: true
|
||||
// })
|
||||
// ).toEqual("foo");
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
describe("Reset on options change", () => {
|
||||
it("should not reset the selected value by default when the options property changes", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: { value: "one", options: ["one"] }
|
||||
});
|
||||
Select.vm.mutableOptions = ["four", "five", "six"];
|
||||
expect(Select.vm.mutableValue).toEqual("one");
|
||||
});
|
||||
|
||||
it("should reset the selected value when the options property changes", () => {
|
||||
const Select = shallowMount(VueSelect, {
|
||||
propsData: { resetOnOptionsChange: true, value: "one", options: ["one"] }
|
||||
});
|
||||
Select.vm.mutableOptions = ["four", "five", "six"];
|
||||
expect(Select.vm.mutableValue).toEqual(null);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,294 @@
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import VueSelect from "../../src/components/Select";
|
||||
|
||||
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"] }
|
||||
});
|
||||
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:
|
||||
// '<div><v-select ref="select" :options="options" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select ref="select" :options="options" label="foo" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" push-tags :value="value" :multiple="true" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" push-tags :value="value" :filterable="false" :multiple="true" :taggable="true"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" :taggable="true"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" :taggable="true"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" taggable :filterable="false"></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
|
||||
// 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:
|
||||
// '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" taggable></v-select></div>',
|
||||
// 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: `<div><v-select ref="select" taggable multiple></v-select></div>`
|
||||
// }).$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: `<div><v-select ref="select" taggable multiple></v-select></div>`
|
||||
// }).$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();
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,183 @@
|
||||
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, {
|
||||
propsData: { options: ["one", "two", "three"] }
|
||||
});
|
||||
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
|
||||
// );
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
});
|
||||
Reference in New Issue
Block a user