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

feat: Vue 3 Support (#1344)

Browse Source 
BREAKING CHANGE: drop vue 2 support
This commit is contained in:
Jeff Sagal
2021-10-19 18:53:22 -07:00
committed by GitHub
parent e8d7abbf33
commit 06177a4d24
29 changed files with 774 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/release.yml
+2
View File
@@ -3,6 +3,8 @@ on:
push:
branches:
- master
- next
- beta
jobs:
release:
runs-on: ubuntu-18.04
build/webpack.base.conf.js
+3 -1
View File
@@ -25,7 +25,7 @@ module.exports = {
assets: path.resolve(__dirname, '../docs/assets'),
mixins: path.resolve(__dirname, '../src/mixins'),
components: path.resolve(__dirname, '../src/components'),
vue$: 'vue/dist/vue.esm.js',
vue$: 'vue/dist/vue.runtime.esm-bundler.js',
},
},
module: {
@@ -54,6 +54,8 @@ module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': env,
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
}),
new MiniCssExtractPlugin({
filename: 'vue-select.css',
build/webpack.prod.conf.js
+3
View File
@@ -10,6 +10,9 @@ module.exports = merge(baseWebpackConfig, {
libraryTarget: 'umd',
globalObject: "typeof self !== 'undefined' ? self : this",
},
externals: {
vue: 'vue',
},
optimization: {
minimizer: [
new TerserPlugin({
dev/dev.js
+4 -6
View File
@@ -1,8 +1,6 @@
import Vue from 'vue'
import { createApp, h } from 'vue'
import Dev from './Dev.vue'
Vue.config.productionTip = false
new Vue({
render: (h) => h(Dev),
}).$mount('#app')
createApp({
render: () => h(Dev),
}).mount('#app')
docs/.vuepress/components/Paginated.vue
+5 -1
View File
@@ -1,5 +1,9 @@
<template>
<v-select :options="paginated" :filterable="false" @search="onSearch">
<v-select
:options="paginated"
:filterable="false"
@search="(query) => (search = query)"
>
<li slot="list-footer" class="pagination">
<button :disabled="!hasPrevPage" @click="offset -= limit">Prev</button>
<button :disabled="!hasNextPage" @click="offset += limit">Next</button>
docs/.vuepress/components/Sandbox.vue
+4 -4
View File
@@ -188,11 +188,11 @@
v-bind="configuration"
placeholder="country objects, using option scoped slots"
>
<template slot="selected-option" slot-scope="option">
{{ option.label }} -- {{ option.value }}
<template slot="selected-option" slot-scope="{ label, value }">
{{ label }} -- {{ value }}
</template>
<template slot="option" slot-scope="option">
{{ option.label }} ({{ option.value }})
<template slot="option" slot-scope="{ label, value }">
{{ label }} ({{ value }})
</template>
</v-select>
</div>
package.json
+7 -7
View File
@@ -29,7 +29,7 @@
"url": "https://github.com/sagalbot/vue-select.git"
},
"peerDependencies": {
"vue": "2.x"
"vue": "3.x"
},
"resolutions": {
"ajv": "6.8.1"
@@ -42,7 +42,8 @@
"@babel/runtime": "^7.4.2",
"@semantic-release/git": "^9.0.0",
"@semantic-release/github": "^7.0.4",
"@vue/test-utils": "^1.2.2",
"@vue/compiler-sfc": "^3.2.20",
"@vue/test-utils": "^2.0.0-rc.16",
"autoprefixer": "^9.4.7",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
@@ -74,13 +75,12 @@
"semantic-release": "^17.0.4",
"terser-webpack-plugin": "^1.2.3",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue": "^3.2.20",
"vue-html-loader": "^1.2.4",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.0",
"vue-jest": "5.0.0-alpha.8",
"vue-loader": "^16.8.1",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
@@ -129,7 +129,7 @@
{
"path": "./dist/vue-select.js",
"compression": "none",
"maxSize": "21 KB"
"maxSize": "23 KB"
},
{
"path": "./dist/vue-select.css",
release.config.js
+1 -3
View File
@@ -1,7 +1,5 @@
module.exports = {
release: {
branch: 'master',
},
branches: ['master', 'next', { name: 'beta', prerelease: true }],
plugins: [
'@semantic-release/npm',
'@semantic-release/commit-analyzer',
src/components/Select.vue
+35 -16
View File
@@ -154,15 +154,33 @@ export default {
mixins: [pointerScroll, typeAheadPointer, ajax],
emits: [
'open',
'close',
'update:modelValue',
'search',
'search:compositionstart',
'search:compositionend',
'search:keydown',
'search:blur',
'search:focus',
'search:input',
'option:created',
'option:selecting',
'option:selected',
'option:deselecting',
'option:deselected',
],
props: {
/**
* Contains the currently selected value. Very similar to a
* `value` attribute on an <input>. You can listen for changes
* with the 'input' event.
* @type {Object||String||null}
* @type {Object|String|Array|null}
*/
// eslint-disable-next-line vue/require-default-prop,vue/require-prop-types
value: {},
modelValue: {},
/**
* An object with any custom components that you'd like to overwrite
@@ -679,16 +697,17 @@ export default {
},
computed: {
isReducingValues() {
return this.$props.reduce !== this.$options.props.reduce.default
},
/**
* Determine if the component needs to
* track the state of values internally.
* @return {boolean}
*/
isTrackingValues() {
return (
typeof this.value === 'undefined' ||
this.$options.propsData.hasOwnProperty('reduce')
)
return typeof this.modelValue === 'undefined' || this.isReducingValues
},
/**
@@ -696,7 +715,7 @@ export default {
* @return {Array}
*/
selectedValue() {
let value = this.value
let value = this.modelValue
if (this.isTrackingValues) {
// Vue select has to manage value internally
value = this.$data._value
@@ -725,7 +744,7 @@ export default {
* @returns {HTMLInputElement}
*/
searchEl() {
return !!this.$scopedSlots['search']
return !!this.$slots['search']
? this.$refs.selectedOptions.querySelector(
this.searchInputQuerySelector
)
@@ -733,7 +752,7 @@ export default {
},
/**
* The object to be bound to the $slots.search scoped slot.
* The object to be bound to the $slots.search slot.
* @returns {Object}
*/
scope() {
@@ -923,8 +942,8 @@ export default {
this.clearSelection()
}
if (this.value && this.isTrackingValues) {
this.setInternalValueFromOptions(this.value)
if (this.modelValue && this.isTrackingValues) {
this.setInternalValueFromOptions(this.modelValue)
}
},
@@ -932,7 +951,7 @@ export default {
* Make sure to update internal
* value if prop changes outside
*/
value: {
modelValue: {
immediate: true,
handler(val) {
if (this.isTrackingValues) {
@@ -957,8 +976,6 @@ export default {
created() {
this.mutableLoading = this.loading
this.$on('option:created', this.pushTag)
},
methods: {
@@ -988,7 +1005,9 @@ export default {
this.$emit('option:selecting', option)
if (!this.isOptionSelected(option)) {
if (this.taggable && !this.optionExists(option)) {
/* @TODO: could we use v-model instead of push-tags? */
this.$emit('option:created', option)
this.pushTag(option)
}
if (this.multiple) {
option = this.selectedValue.concat(option)
@@ -1052,7 +1071,7 @@ export default {
* @param value
*/
updateValue(value) {
if (typeof this.value === 'undefined') {
if (typeof this.modelValue === 'undefined') {
// Vue select has to manage value
this.$data._value = value
}
@@ -1065,7 +1084,7 @@ export default {
}
}
this.$emit('input', value)
this.$emit('update:modelValue', value)
},
/**
src/directives/appendToBody.js
+6 -8
View File
@@ -1,17 +1,15 @@
export default {
inserted(el, bindings, { context }) {
if (context.appendToBody) {
mounted(el, { instance }) {
if (instance.appendToBody) {
const {
height,
top,
left,
width,
} = context.$refs.toggle.getBoundingClientRect()
} = instance.$refs.toggle.getBoundingClientRect()
let scrollX = window.scrollX || window.pageXOffset
let scrollY = window.scrollY || window.pageYOffset
el.unbindPosition = context.calculatePosition(el, context, {
el.unbindPosition = instance.calculatePosition(el, instance, {
width: width + 'px',
left: scrollX + left + 'px',
top: scrollY + top + height + 'px',
@@ -21,8 +19,8 @@ export default {
}
},
unbind(el, bindings, { context }) {
if (context.appendToBody) {
unmounted(el, { instance }) {
if (instance.appendToBody) {
if (el.unbindPosition && typeof el.unbindPosition === 'function') {
el.unbindPosition()
}
tests/helpers.js
+9 -10
View File
@@ -13,7 +13,7 @@ export const searchSubmit = (Wrapper, searchText = false) => {
if (searchText) {
Wrapper.vm.search = searchText
}
Wrapper.findComponent({ ref: 'search' }).trigger('keydown.enter')
Wrapper.get('input').trigger('keydown.enter')
}
/**
@@ -29,18 +29,17 @@ export const selectTag = async (Wrapper, searchText) => {
Wrapper.vm.search = searchText
await Wrapper.vm.$nextTick()
Wrapper.findComponent({ ref: 'search' }).trigger('keydown.enter')
await Wrapper.vm.$nextTick()
await Wrapper.get('input').trigger('keydown.enter')
}
/**
* Create a new VueSelect instance with
* a provided set of props.
* @param propsData
* @param props
* @returns {Wrapper<Vue>}
*/
export const selectWithProps = (propsData = {}) => {
return shallowMount(VueSelect, { propsData })
export const selectWithProps = (props = {}) => {
return shallowMount(VueSelect, { props })
}
/**
@@ -51,7 +50,7 @@ export const selectWithProps = (propsData = {}) => {
*/
export const mountDefault = (props = {}, options = {}) => {
return shallowMount(VueSelect, {
propsData: {
props: {
options: ['one', 'two', 'three'],
...props,
},
@@ -66,13 +65,13 @@ export const mountDefault = (props = {}, options = {}) => {
* @return {Vue | Element | Vue[] | Element[]}
*/
export const mountWithoutTestUtils = (props = {}, options = {}) => {
return new Vue({
components: { VueSelect },
return createApp({
render: (createEl) =>
createEl('vue-select', {
ref: 'select',
props: { options: ['one', 'two', 'three'], ...props },
...options,
}),
}).$mount().$refs.select
components: { VueSelect },
}).mount().$refs.select
}
tests/unit/Ajax.spec.js
+2 -2
View File
@@ -41,8 +41,8 @@ describe('Asynchronous Loading', () => {
it('can set loading to false from the @search event callback', async () => {
const Select = shallowMount(vSelect, {
listeners: {
search: (search, loading) => {
props: {
onSearch: (search, loading) => {
loading(false)
},
},
tests/unit/Autoscroll.spec.js
+12 -8
View File
@@ -1,15 +1,20 @@
import pointerScroll from '../../src/mixins/pointerScroll'
import { mountDefault } from '../helpers'
describe('Automatic Scrolling', () => {
let spy
afterEach(() => {
if (spy) spy.mockClear()
})
it('should check if the scroll position needs to be adjusted on up arrow keyUp', async () => {
// Given
spy = jest.spyOn(pointerScroll.methods, 'maybeAdjustScroll')
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
Select.findComponent({ ref: 'search' }).trigger('keydown.up')
await Select.vm.$nextTick()
await Select.get('input').trigger('keydown.up')
// Then
expect(spy).toHaveBeenCalled()
@@ -17,13 +22,12 @@ describe('Automatic Scrolling', () => {
it('should check if the scroll position needs to be adjusted on down arrow keyUp', async () => {
// Given
spy = jest.spyOn(pointerScroll.methods, 'maybeAdjustScroll')
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
Select.findComponent({ ref: 'search' }).trigger('keydown.down')
await Select.vm.$nextTick()
await Select.get('input').trigger('keydown.down')
// Then
expect(spy).toHaveBeenCalled()
@@ -31,8 +35,8 @@ describe('Automatic Scrolling', () => {
it('should check if the scroll position needs to be adjusted when filtered options changes', async () => {
// Given
spy = jest.spyOn(pointerScroll.methods, 'maybeAdjustScroll')
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
@@ -45,10 +49,10 @@ describe('Automatic Scrolling', () => {
it('should not adjust scroll position when autoscroll is false', async () => {
// Given
spy = jest.spyOn(pointerScroll.methods, 'maybeAdjustScroll')
const Select = mountDefault({
autoscroll: false,
})
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
tests/unit/Components.spec.js
+5 -5
View File
@@ -1,9 +1,9 @@
import Vue from 'vue'
import { defineComponent } from 'vue'
import { selectWithProps } from '../helpers'
describe('Components API', () => {
it('swap the Deselect component', () => {
const Deselect = Vue.component('Deselect', {
const Deselect = defineComponent('Deselect', {
render(createElement) {
return createElement('button', 'remove')
},
@@ -11,11 +11,11 @@ describe('Components API', () => {
const Select = selectWithProps({ components: { Deselect } })
expect(Select.findComponent(Deselect)).toBeTruthy()
expect(Select.find(Deselect)).toBeTruthy()
})
it('swap the OpenIndicator component', () => {
const OpenIndicator = Vue.component('OpenIndicator', {
const OpenIndicator = defineComponent('OpenIndicator', {
render(createElement) {
return createElement('i', '^')
},
@@ -23,6 +23,6 @@ describe('Components API', () => {
const Select = selectWithProps({ components: { OpenIndicator } })
expect(Select.findComponent(OpenIndicator)).toBeTruthy()
expect(Select.find(OpenIndicator)).toBeTruthy()
})
})
tests/unit/CreateOption.spec.js
+1 -1
View File
@@ -25,6 +25,6 @@ describe('CreateOption When Tagging Is Enabled', () => {
await selectTag(Select, 'two')
expect(Select.emitted('input')[0]).toEqual([{ name: 'two' }])
expect(Select.emitted('update:modelValue')[0]).toEqual([{ name: 'two' }])
})
})
tests/unit/Deselecting.spec.js
+19 -20
View File
@@ -7,13 +7,13 @@ describe('Removing values', () => {
await Select.vm.$nextTick()
Select.find('.vs__deselect').trigger('click')
expect(Select.emitted().input).toEqual([[[]]])
expect(Select.emitted()['update:modelValue']).toEqual([[[]]])
expect(Select.vm.selectedValue).toEqual([])
})
it('should not remove tag when close icon is clicked and component is disabled', () => {
const Select = selectWithProps({
value: ['one'],
modelValue: ['one'],
options: ['one', 'two', 'three'],
multiple: true,
disabled: true,
@@ -33,7 +33,7 @@ describe('Removing values', () => {
Select.find('.vs__search').trigger('keydown.backspace')
expect(Select.emitted().input).toEqual([[['one']]])
expect(Select.emitted()['update:modelValue']).toEqual([[['one']]])
expect(Select.vm.selectedValue).toEqual(['one'])
})
@@ -48,21 +48,20 @@ describe('Removing values', () => {
expect(Select.vm.selectedValue).toEqual([])
})
it('will not emit input event if value has not changed with backspace', () => {
it('will not emit update:modelValue event if value has not changed with backspace', () => {
const Select = mountDefault()
Select.vm.$data._value = 'one'
Select.get('input').trigger('keydown.backspace')
expect(Select.emitted()['update:modelValue'].length).toBe(1)
Select.findComponent({ ref: 'search' }).trigger('keydown.backspace')
expect(Select.emitted().input.length).toBe(1)
Select.findComponent({ ref: 'search' }).trigger('keydown.backspace')
Select.findComponent({ ref: 'search' }).trigger('keydown.backspace')
expect(Select.emitted().input.length).toBe(1)
Select.get('input').trigger('keydown.backspace')
Select.get('input').trigger('keydown.backspace')
expect(Select.emitted()['update:modelValue'].length).toBe(1)
})
it('should deselect a selected option when clicked and deselectFromDropdown is true', async () => {
const Select = selectWithProps({
value: 'one',
modelValue: 'one',
options: ['one', 'two', 'three'],
deselectFromDropdown: true,
})
@@ -79,7 +78,7 @@ describe('Removing values', () => {
it('should not deselect a selected option when clicked if clearable is false', async () => {
const Select = selectWithProps({
value: 'one',
modelValue: 'one',
options: ['one', 'two', 'three'],
clearable: false,
deselectFromDropdown: true,
@@ -97,7 +96,7 @@ describe('Removing values', () => {
it('should not deselect a selected option when clicked if deselectFromDropdown is false', async () => {
const Select = selectWithProps({
value: 'one',
modelValue: 'one',
options: ['one', 'two', 'three'],
deselectFromDropdown: false,
})
@@ -116,7 +115,7 @@ describe('Removing values', () => {
it('should be displayed on single select when value is selected', () => {
const Select = selectWithProps({
options: ['foo', 'bar'],
value: 'foo',
modelValue: 'foo',
})
expect(Select.vm.showClearButton).toEqual(true)
@@ -125,7 +124,7 @@ describe('Removing values', () => {
it('should not be displayed on multiple select', () => {
const Select = selectWithProps({
options: ['foo', 'bar'],
value: 'foo',
modelValue: 'foo',
multiple: true,
})
@@ -141,20 +140,20 @@ describe('Removing values', () => {
expect(Select.vm.selectedValue).toEqual(['foo'])
Select.find('button.vs__clear').trigger('click')
expect(Select.emitted().input).toEqual([[null]])
expect(Select.emitted()['update:modelValue']).toEqual([[null]])
expect(Select.vm.selectedValue).toEqual([])
})
it('should be disabled when component is disabled', () => {
const Select = selectWithProps({
options: ['foo', 'bar'],
value: 'foo',
modelValue: 'foo',
disabled: true,
})
expect(Select.find('button.vs__clear').attributes().disabled).toEqual(
'disabled'
)
expect(
Select.find('button.vs__clear').attributes().disabled
).toBeDefined()
})
})
})
tests/unit/Dropdown.spec.js
+18 -12
View File
@@ -1,5 +1,6 @@
import { selectWithProps } from '../helpers'
import OpenIndicator from '../../src/components/OpenIndicator'
import VueSelect from '../../src/components/Select'
const preventDefault = jest.fn()
@@ -8,6 +9,11 @@ function clickEvent(currentTarget) {
}
describe('Toggling Dropdown', () => {
let spy
afterEach(() => {
if (spy) spy.mockClear()
})
it('should not open the dropdown when the el is clicked but the component is disabled', () => {
const Select = selectWithProps({ disabled: true })
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search))
@@ -16,7 +22,7 @@ describe('Toggling Dropdown', () => {
it('should open the dropdown when the el is clicked', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
})
@@ -26,7 +32,7 @@ describe('Toggling Dropdown', () => {
it('should not close the dropdown when the el is clicked and enableMouseInputSearch is set to true', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
enableMouseSearchInput: true,
})
@@ -39,7 +45,7 @@ describe('Toggling Dropdown', () => {
it('should open the dropdown when the selected tag is clicked', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
})
@@ -61,7 +67,7 @@ describe('Toggling Dropdown', () => {
it('closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true', () => {
const Select = selectWithProps({
value: [],
modelValue: [],
options: ['one', 'two', 'three'],
multiple: true,
})
@@ -74,7 +80,7 @@ describe('Toggling Dropdown', () => {
it('does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false', () => {
const Select = selectWithProps({
value: [],
modelValue: [],
options: ['one', 'two', 'three'],
multiple: true,
closeOnSelect: false,
@@ -86,36 +92,36 @@ describe('Toggling Dropdown', () => {
expect(Select.vm.open).toEqual(true)
})
it('should close the dropdown on search blur', () => {
it('should close the dropdown on search blur', async () => {
const Select = selectWithProps({
options: [{ label: 'one' }],
})
Select.vm.open = true
Select.findComponent({ ref: 'search' }).trigger('blur')
await Select.get('input').trigger('blur')
expect(Select.vm.open).toEqual(false)
})
it('will close the dropdown and emit the search:blur event from onSearchBlur', () => {
spy = jest.spyOn(VueSelect.methods, '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')
expect(spy).toHaveBeenCalled()
})
it('will open the dropdown and emit the search:focus event from onSearchFocus', () => {
spy = jest.spyOn(VueSelect.methods, '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')
expect(spy).toHaveBeenCalled()
})
it('will close the dropdown on escape, if search is empty', () => {
@@ -130,7 +136,7 @@ describe('Toggling Dropdown', () => {
it('should remove existing search text on escape keydown', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
})
tests/unit/Filtering.spec.js
+8 -8
View File
@@ -4,7 +4,7 @@ import VueSelect from '../../src/components/Select'
describe('Filtering Options', () => {
it("should update the search value when the input element receives the 'input' event", () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ['foo', 'bar', 'baz'] },
props: { options: ['foo', 'bar', 'baz'] },
})
const input = Select.find('.vs__search')
@@ -15,7 +15,7 @@ describe('Filtering Options', () => {
it('should filter an array of strings', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ['foo', 'bar', 'baz'] },
props: { options: ['foo', 'bar', 'baz'] },
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual(['bar', 'baz'])
@@ -23,7 +23,7 @@ describe('Filtering Options', () => {
it('should not filter the array of strings if filterable is false', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ['foo', 'bar', 'baz'], filterable: false },
props: { options: ['foo', 'bar', 'baz'], filterable: false },
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual(['foo', 'bar', 'baz'])
@@ -31,7 +31,7 @@ describe('Filtering Options', () => {
it('should filter without case-sensitivity', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ['Foo', 'Bar', 'Baz'] },
props: { options: ['Foo', 'Bar', 'Baz'] },
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual(['Bar', 'Baz'])
@@ -39,7 +39,7 @@ describe('Filtering Options', () => {
it('can filter an array of objects based on the objects label key', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: [{ label: 'Foo' }, { label: 'Bar' }, { label: 'Baz' }],
},
})
@@ -52,7 +52,7 @@ describe('Filtering Options', () => {
it('can determine if a given option should match the current search text', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: [{ label: 'Aoo' }, { label: 'Bar' }, { label: 'Baz' }],
filterBy: (option, label, search) =>
label.match(new RegExp('^' + search, 'i')),
@@ -65,7 +65,7 @@ describe('Filtering Options', () => {
it('can use a custom filtering method', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: ['foo', 'bar', 'baz'],
filterBy: (option, label) => label.includes('o'),
},
@@ -76,7 +76,7 @@ describe('Filtering Options', () => {
it('can filter arrays of numbers', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: [1, 5, 10],
},
})
tests/unit/Keydown.spec.js
+30 -21
View File
@@ -1,69 +1,78 @@
import { DOMWrapper } from '@vue/test-utils'
import typeAheadPointer from '../../src/mixins/typeAheadPointer'
import { mountDefault } from '../helpers'
describe('Custom Keydown Handlers', () => {
it('can use the map-keydown prop to trigger custom behaviour', () => {
let spy
afterEach(() => {
if (spy) spy.mockClear()
})
it('can use the map-keydown prop to trigger custom behaviour', async () => {
const onKeyDown = jest.fn()
const Select = mountDefault({
mapKeydown: (defaults, vm) => ({ ...defaults, 32: onKeyDown }),
})
Select.findComponent({ ref: 'search' }).trigger('keydown.space')
await Select.get('input').trigger('keydown.space')
expect(onKeyDown.mock.calls.length).toBe(1)
})
it('selectOnKeyCodes should trigger a selection for custom keycodes', () => {
spy = jest.spyOn(typeAheadPointer.methods, 'typeAheadSelect')
const Select = mountDefault({
selectOnKeyCodes: [32],
})
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.findComponent({ ref: 'search' }).trigger('keydown.space')
Select.get('input').trigger('keydown.space')
expect(spy).toHaveBeenCalledTimes(1)
})
it('even works when combining selectOnKeyCodes with map-keydown', () => {
spy = jest.spyOn(typeAheadPointer.methods, 'typeAheadSelect')
const onKeyDown = jest.fn()
const Select = mountDefault({
mapKeydown: (defaults, vm) => ({ ...defaults, 32: onKeyDown }),
selectOnKeyCodes: [9],
})
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.findComponent({ ref: 'search' }).trigger('keydown.space')
Select.get('input').trigger('keydown.space')
expect(onKeyDown.mock.calls.length).toBe(1)
Select.findComponent({ ref: 'search' }).trigger('keydown.tab')
Select.get('input').trigger('keydown.tab')
expect(spy).toHaveBeenCalledTimes(1)
})
describe('CompositionEvent support', () => {
it('will not select a value with enter if the user is composing', () => {
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
spy = jest.spyOn(typeAheadPointer.methods, 'typeAheadSelect')
Select.findComponent({ ref: 'search' }).trigger('compositionstart')
Select.findComponent({ ref: 'search' }).trigger('keydown.enter')
const Select = mountDefault()
Select.get('input').trigger('compositionstart')
Select.get('input').trigger('keydown.enter')
expect(spy).toHaveBeenCalledTimes(0)
Select.findComponent({ ref: 'search' }).trigger('compositionend')
Select.findComponent({ ref: 'search' }).trigger('keydown.enter')
Select.get('input').trigger('compositionend')
Select.get('input').trigger('keydown.enter')
expect(spy).toHaveBeenCalledTimes(1)
})
it('will not select a value with tab if the user is composing', () => {
const Select = mountDefault({ selectOnTab: true })
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
spy = jest.spyOn(typeAheadPointer.methods, 'typeAheadSelect')
Select.findComponent({ ref: 'search' }).trigger('compositionstart')
Select.findComponent({ ref: 'search' }).trigger('keydown.tab')
const Select = mountDefault({ selectOnTab: true })
Select.get('input').trigger('compositionstart')
Select.get('input').trigger('keydown.tab')
expect(spy).toHaveBeenCalledTimes(0)
Select.findComponent({ ref: 'search' }).trigger('compositionend')
Select.findComponent({ ref: 'search' }).trigger('keydown.tab')
Select.get('input').trigger('compositionend')
Select.get('input').trigger('keydown.tab')
expect(spy).toHaveBeenCalledTimes(1)
})
})
tests/unit/Labels.spec.js
+3 -3
View File
@@ -7,7 +7,7 @@ describe('Labels', () => {
const Select = selectWithProps({
options: [{ name: 'Foo' }],
label: 'name',
value: { name: 'Foo' },
modelValue: { name: 'Foo' },
})
expect(Select.find('.vs__selected').text()).toBe('Foo')
})
@@ -29,7 +29,7 @@ describe('Labels', () => {
it('should display a placeholder if the value is empty', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: ['one'],
},
attrs: {
@@ -66,7 +66,7 @@ describe('Labels', () => {
xit('will not call getOptionLabel if both scoped option slots are used and a filter is provided', () => {
const spy = spyOn(VueSelect.props.getOptionLabel, 'default')
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: [{ name: 'one' }],
filter: () => {},
},
tests/unit/Layout.spec.js
+1 -1
View File
@@ -15,7 +15,7 @@ describe('Single value options', () => {
it('should not reset the search input on focus lost when clearSearchOnSelect is false', () => {
const Select = shallowMount(VueSelect, {
propsData: { value: 'foo', clearSearchOnSelect: false },
props: { value: 'foo', clearSearchOnSelect: false },
})
expect(Select.vm.clearSearchOnSelect).toEqual(false)
tests/unit/ReactiveOptions.spec.js
+34 -35
View File
@@ -3,20 +3,25 @@ import VueSelect from '../../src/components/Select'
import { mountDefault } from '../helpers'
describe('Reset on options change', () => {
it('should not reset the selected value by default when the options property changes', () => {
it('should not reset the selected value by default when the options property changes', async () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ['one'] },
props: { options: ['one'] },
})
Select.vm.$data._value = 'one'
Select.setProps({ options: ['four', 'five', 'six'] })
await Select.setProps({ options: ['four', 'five', 'six'] })
expect(Select.vm.selectedValue).toEqual(['one'])
})
describe('resetOnOptionsChange as a function', () => {
let spy
afterEach(() => {
if (spy) spy.mockClear()
})
it('will yell at you if resetOnOptionsChange is not a function or boolean', () => {
const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
mountDefault({ resetOnOptionsChange: 1 })
expect(spy.mock.calls[0][0]).toContain(
@@ -44,11 +49,10 @@ describe('Reset on options change', () => {
const Select = mountDefault({
resetOnOptionsChange,
options: ['bear'],
value: 'selected',
modelValue: 'selected',
})
Select.setProps({ options: ['lake', 'kite'] })
await Select.vm.$nextTick()
await Select.setProps({ options: ['lake', 'kite'] })
expect(resetOnOptionsChange).toHaveBeenCalledTimes(1)
expect(resetOnOptionsChange).toHaveBeenCalledWith(
@@ -60,23 +64,22 @@ describe('Reset on options change', () => {
it('should allow resetOnOptionsChange to be a function that returns true', async () => {
let resetOnOptionsChange = () => true
spy = jest.spyOn(VueSelect.methods, 'clearSelection')
const Select = shallowMount(VueSelect, {
propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
props: { resetOnOptionsChange, options: ['one'], modelValue: 'one' },
})
const spy = jest.spyOn(Select.vm, 'clearSelection')
Select.setProps({ options: ['one', 'two'] })
await Select.vm.$nextTick()
await Select.setProps({ options: ['one', 'two'] })
expect(spy).toHaveBeenCalledTimes(1)
})
it('should allow resetOnOptionsChange to be a function that returns false', () => {
let resetOnOptionsChange = () => false
spy = jest.spyOn(VueSelect.methods, 'clearSelection')
const Select = shallowMount(VueSelect, {
propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
props: { resetOnOptionsChange, options: ['one'], modelValue: 'one' },
})
const spy = jest.spyOn(Select.vm, 'clearSelection')
Select.setProps({ options: ['one', 'two'] })
expect(spy).not.toHaveBeenCalled()
@@ -85,18 +88,16 @@ describe('Reset on options change', () => {
it('should reset the options if the selectedValue does not exist in the new options', async () => {
let resetOnOptionsChange = (options, old, val) =>
val.some((val) => options.includes(val))
spy = jest.spyOn(VueSelect.methods, 'clearSelection')
const Select = shallowMount(VueSelect, {
propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
props: { resetOnOptionsChange, options: ['one'], modelValue: 'one' },
})
const spy = jest.spyOn(Select.vm, 'clearSelection')
Select.setProps({ options: ['one', 'two'] })
await Select.vm.$nextTick()
await Select.setProps({ options: ['one', 'two'] })
expect(Select.vm.selectedValue).toEqual(['one'])
Select.setProps({ options: ['two'] })
await Select.vm.$nextTick()
await Select.setProps({ options: ['two'] })
expect(spy).toHaveBeenCalledTimes(1)
})
@@ -104,21 +105,20 @@ describe('Reset on options change', () => {
it('should reset the selected value when the options property changes', async () => {
const Select = shallowMount(VueSelect, {
propsData: { resetOnOptionsChange: true, options: ['one'] },
props: { resetOnOptionsChange: true, options: ['one'] },
})
Select.vm.$data._value = 'one'
Select.setProps({ options: ['four', 'five', 'six'] })
await Select.vm.$nextTick()
await Select.setProps({ options: ['four', 'five', 'six'] })
expect(Select.vm.selectedValue).toEqual([])
})
it('should return correct selected value when the options property changes and a new option matches', async () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: 'one',
props: {
modelValue: 'one',
options: [],
reduce(option) {
return option.value
@@ -126,20 +126,19 @@ describe('Reset on options change', () => {
},
})
Select.setProps({ options: [{ label: 'oneLabel', value: 'one' }] })
await Select.vm.$nextTick()
await Select.setProps({ options: [{ label: 'oneLabel', value: 'one' }] })
expect(Select.vm.selectedValue).toEqual([
{ label: 'oneLabel', value: 'one' },
])
})
it('clearSearchOnBlur returns false when multiple is true', () => {
it('clearSearchOnBlur returns false when multiple is true', async () => {
const Select = mountDefault({})
let clearSearchOnBlur = jest.spyOn(Select.vm, 'clearSearchOnBlur')
Select.findComponent({ ref: 'search' }).trigger('click')
Select.setData({ search: 'one' })
Select.findComponent({ ref: 'search' }).trigger('blur')
let clearSearchOnBlur = jest.spyOn(Select.vm.$.props, 'clearSearchOnBlur')
await Select.get('input').trigger('click')
Select.vm.search = 'one'
await Select.get('input').trigger('blur')
expect(clearSearchOnBlur).toHaveBeenCalledTimes(1)
expect(clearSearchOnBlur).toHaveBeenCalledWith({
@@ -149,13 +148,13 @@ describe('Reset on options change', () => {
expect(Select.vm.search).toBe('')
})
it('clearSearchOnBlur accepts a function', () => {
it('clearSearchOnBlur accepts a function', async () => {
let clearSearchOnBlur = jest.fn(() => false)
const Select = mountDefault({ clearSearchOnBlur })
Select.findComponent({ ref: 'search' }).trigger('click')
Select.setData({ search: 'one' })
Select.findComponent({ ref: 'search' }).trigger('blur')
await Select.get('input').trigger('click')
Select.vm.search = 'one'
await Select.get('input').trigger('blur')
expect(clearSearchOnBlur).toHaveBeenCalledTimes(1)
expect(Select.vm.search).toBe('one')
tests/unit/Reduce.spec.js
+50 -40
View File
@@ -1,12 +1,21 @@
import { mount, shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
import { mountDefault } from '../helpers.js'
describe('When reduce prop is defined', () => {
it('determines when a reducer has been supplied', async () => {
let Select = mountDefault()
expect(Select.vm.isReducingValues).toBeFalsy()
await Select.setProps({ reduce: () => {} })
expect(Select.vm.isReducingValues).toBeTruthy()
})
it('can accept an array of objects and pre-selected value (single)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.value,
value: 'foo',
modelValue: 'foo',
options: [{ label: 'This is Foo', value: 'foo' }],
},
})
@@ -17,9 +26,9 @@ describe('When reduce prop is defined', () => {
it('can determine if an object is pre-selected', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.id,
value: 'foo',
modelValue: 'foo',
options: [
{
id: 'foo',
@@ -39,7 +48,7 @@ describe('When reduce prop is defined', () => {
it('can determine if an object is selected after its been chosen', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.id,
options: [{ id: 'foo', label: 'FooBar' }],
},
@@ -57,10 +66,10 @@ describe('When reduce prop is defined', () => {
it('can accept an array of objects and pre-selected values (multiple)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
reduce: (option) => option.value,
value: ['foo'],
modelValue: ['foo'],
options: [
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
@@ -75,7 +84,7 @@ describe('When reduce prop is defined', () => {
it('can deselect a pre-selected object', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
reduce: (option) => option.value,
options: [
@@ -93,7 +102,7 @@ describe('When reduce prop is defined', () => {
it('can deselect an option when multiple is false', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.value,
options: [
{ label: 'This is Foo', value: 'foo' },
@@ -137,24 +146,24 @@ describe('When reduce prop is defined', () => {
/>
`,
})
const Select = Parent.vm.$children[0]
const Select = Parent.getComponent({ name: 'v-select' })
expect(Select.value).toEqual('foo')
expect(Select.selectedValue).toEqual([
expect(Select.vm.modelValue).toEqual('foo')
expect(Select.vm.selectedValue).toEqual([
{ label: 'This is Foo', value: 'foo' },
])
Select.select({ label: 'This is Bar', value: 'bar' })
await Select.$nextTick()
Select.vm.select({ label: 'This is Bar', value: 'bar' })
await Select.vm.$nextTick()
expect(Parent.vm.value).toEqual('bar')
expect(Select.selectedValue).toEqual([
expect(Select.vm.selectedValue).toEqual([
{ label: 'This is Bar', value: 'bar' },
])
// Parent denies to set baz
Select.select({ label: 'This is Baz', value: 'baz' })
await Select.$nextTick()
expect(Select.selectedValue).toEqual([
Select.vm.select({ label: 'This is Baz', value: 'baz' })
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual([
{ label: 'This is Bar', value: 'bar' },
])
expect(Parent.vm.value).toEqual('bar')
@@ -162,10 +171,10 @@ describe('When reduce prop is defined', () => {
it('can generate labels using a custom label key', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
reduce: (option) => option.value,
value: ['CA'],
modelValue: ['CA'],
label: 'name',
options: [
{ value: 'CA', name: 'Canada' },
@@ -180,7 +189,7 @@ describe('When reduce prop is defined', () => {
it('can find the original option within this.options', () => {
const optionToFind = { id: 1, label: 'Foo' }
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.id,
options: [optionToFind, { id: 2, label: 'Bar' }],
},
@@ -195,10 +204,10 @@ describe('When reduce prop is defined', () => {
it('can work with falsey values', () => {
const option = { value: 0, label: 'No' }
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.value,
options: [option, { value: 1, label: 'Yes' }],
value: 0,
modelValue: 0,
},
})
@@ -209,10 +218,10 @@ describe('When reduce prop is defined', () => {
it('works with null values', () => {
const option = { value: null, label: 'No' }
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.value,
options: [option, { value: 1, label: 'Yes' }],
value: null,
modelValue: null,
},
})
@@ -224,9 +233,9 @@ describe('When reduce prop is defined', () => {
it('can determine if an object is pre-selected', () => {
const nestedOption = { value: { nested: true }, label: 'foo' }
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.value,
value: {
modelValue: {
nested: true,
},
options: [nestedOption],
@@ -239,7 +248,7 @@ describe('When reduce prop is defined', () => {
it('can determine if an object is selected after it is chosen', () => {
const nestedOption = { value: { nested: true }, label: 'foo' }
const Select = shallowMount(VueSelect, {
propsData: {
props: {
reduce: (option) => option.value,
options: [nestedOption],
},
@@ -253,14 +262,14 @@ describe('When reduce prop is defined', () => {
it('reacts correctly when value property changes', async () => {
const optionToChangeTo = { id: 1, label: 'Foo' }
const Select = shallowMount(VueSelect, {
propsData: {
value: 2,
props: {
modelValue: 2,
reduce: (option) => option.id,
options: [optionToChangeTo, { id: 2, label: 'Bar' }],
},
})
Select.setProps({ value: optionToChangeTo.id })
Select.setProps({ modelValue: optionToChangeTo.id })
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual([optionToChangeTo])
@@ -281,21 +290,22 @@ describe('When reduce prop is defined', () => {
`,
components: { 'v-select': VueSelect },
})
const Select = Parent.vm.$children[0]
const Select = Parent.getComponent({ name: 'v-select' })
// When
Select.$refs.search.focus()
await Select.$nextTick()
await Select.get('input').trigger('focus')
Select.search = 'hello'
await Select.$nextTick()
Select.vm.search = 'hello'
await Select.vm.$nextTick()
Select.typeAheadSelect()
await Select.$nextTick()
Select.vm.typeAheadSelect()
await Select.vm.$nextTick()
// Then
expect(Select.selectedValue).toEqual([{ label: 'hello', value: -1 }])
expect(Select.$refs.selectedOptions.textContent.trim()).toEqual('hello')
expect(Select.vm.selectedValue).toEqual([{ label: 'hello', value: -1 }])
expect(Select.vm.$refs.selectedOptions.textContent.trim()).toEqual(
'hello'
)
expect(Parent.vm.selected).toEqual(-1)
})
})
tests/unit/Selectable.spec.js
+8 -10
View File
@@ -7,12 +7,11 @@ describe('Selectable prop', () => {
selectable: (option) => option === 'one',
})
Select.vm.$data.open = true
Select.vm.open = true
await Select.vm.$nextTick()
Select.find('.vs__dropdown-menu li:first-child').trigger('click')
await Select.find('.vs__dropdown-menu li:first-child').trigger('click')
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual(['one'])
})
@@ -22,16 +21,15 @@ describe('Selectable prop', () => {
selectable: (option) => option === 'one',
})
Select.vm.$data.open = true
Select.vm.open = true
await Select.vm.$nextTick()
Select.find('.vs__dropdown-menu li:last-child').trigger('click')
await Select.vm.$nextTick()
await Select.find('.vs__dropdown-menu li:last-child').trigger('click')
expect(Select.vm.selectedValue).toEqual([])
})
it('should skip non-selectable option on down arrow keyDown', () => {
it('should skip non-selectable option on down arrow keyDown', async () => {
const Select = selectWithProps({
options: ['one', 'two', 'three'],
selectable: (option) => option !== 'two',
@@ -39,12 +37,12 @@ describe('Selectable prop', () => {
Select.vm.typeAheadPointer = 1
Select.findComponent({ ref: 'search' }).trigger('keydown.down')
await Select.get('input').trigger('keydown.down')
expect(Select.vm.typeAheadPointer).toEqual(2)
})
it('should skip non-selectable option on up arrow keyDown', () => {
it('should skip non-selectable option on up arrow keyDown', async () => {
const Select = selectWithProps({
options: ['one', 'two', 'three'],
selectable: (option) => option !== 'two',
@@ -52,7 +50,7 @@ describe('Selectable prop', () => {
Select.vm.typeAheadPointer = 2
Select.findComponent({ ref: 'search' }).trigger('keydown.up')
await Select.get('input').trigger('keydown.up')
expect(Select.vm.typeAheadPointer).toEqual(0)
})
tests/unit/Selecting.spec.js
+35 -30
View File
@@ -1,41 +1,47 @@
import { mount, shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select.vue'
import typeAheadPointer from '../../src/mixins/typeAheadPointer'
import { mountDefault } from '../helpers'
describe('VS - Selecting Values', () => {
let defaultProps
let spy
beforeEach(() => {
defaultProps = {
value: 'one',
modelValue: 'one',
options: ['one', 'two', 'three'],
}
})
afterEach(() => {
if (spy) spy.mockClear()
})
it('can accept an array with pre-selected values', () => {
const Select = shallowMount(VueSelect, {
propsData: defaultProps,
props: defaultProps,
})
expect(Select.selectedValue).toEqual(Select.value)
expect(Select.vm.selectedValue[0]).toEqual(Select.vm.modelValue)
})
it('can accept an array of objects and pre-selected value (single)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: { label: 'This is Foo', value: 'foo' },
props: {
modelValue: { label: 'This is Foo', value: 'foo' },
options: [
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
})
expect(Select.selectedValue).toEqual(Select.value)
expect(Select.vm.selectedValue[0]).toEqual(Select.vm.modelValue)
})
it('can accept an array of objects and pre-selected values (multiple)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: [
props: {
modelValue: [
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
@@ -47,26 +53,25 @@ describe('VS - Selecting Values', () => {
multiple: true,
})
expect(Select.selectedValue).toEqual(Select.value)
expect(Select.vm.selectedValue).toEqual(Select.vm.modelValue)
})
it('can select an option on tab', () => {
spy = jest.spyOn(typeAheadPointer.methods, 'typeAheadSelect')
const Select = shallowMount(VueSelect, {
propsData: {
props: {
selectOnTab: true,
},
})
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.findComponent({ ref: 'search' }).trigger('keydown.tab')
Select.get('input').trigger('keydown.tab')
expect(spy).toHaveBeenCalledWith()
})
it('can deselect a pre-selected object', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
options: [
{ label: 'This is Foo', value: 'foo' },
@@ -88,7 +93,7 @@ describe('VS - Selecting Values', () => {
it('can deselect a pre-selected string', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
options: ['foo', 'bar'],
},
@@ -111,7 +116,7 @@ describe('VS - Selecting Values', () => {
it('can determine if the value prop is empty', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
options: ['one', 'two', 'three'],
},
})
@@ -137,7 +142,7 @@ describe('VS - Selecting Values', () => {
it('should reset the selected values when the multiple property changes', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
options: ['one', 'two', 'three'],
},
@@ -152,8 +157,8 @@ describe('VS - Selecting Values', () => {
it('can retain values present in a new array of options', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: ['one'],
props: {
modelValue: ['one'],
options: ['one', 'two', 'three'],
},
})
@@ -164,8 +169,8 @@ describe('VS - Selecting Values', () => {
it('can determine if an object is already selected', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: [{ label: 'one' }],
props: {
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
},
})
@@ -179,20 +184,20 @@ describe('VS - Selecting Values', () => {
template: `<div><v-select :options="options" v-model="value" /></div>`,
components: { 'v-select': VueSelect },
})
const Select = Parent.vm.$children[0]
const Select = Parent.getComponent({ name: 'v-select' })
expect(Select.value).toEqual('foo')
expect(Select.selectedValue).toEqual(['foo'])
expect(Select.vm.modelValue).toEqual('foo')
expect(Select.vm.selectedValue).toEqual(['foo'])
Select.select('bar')
Select.vm.select('bar')
expect(Parent.vm.value).toEqual('bar')
})
it('can check if a string value is selected when the value is an object and multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: {
props: {
multiple: true,
value: [{ label: 'foo', value: 'bar' }],
modelValue: [{ label: 'foo', value: 'bar' }],
},
})
expect(Select.vm.isOptionSelected({ label: 'foo', value: 'bar' })).toEqual(
@@ -217,15 +222,15 @@ describe('VS - Selecting Values', () => {
it('will trigger the input event when the selection changes', () => {
const Select = shallowMount(VueSelect)
Select.vm.select('bar')
expect(Select.emitted('input')[0]).toEqual(['bar'])
expect(Select.emitted('update:modelValue')[0]).toEqual(['bar'])
})
it('will trigger the input event when the selection changes and multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ['foo'], options: ['foo', 'bar'] },
props: { multiple: true, modelValue: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.select('bar')
expect(Select.emitted('input')[0]).toEqual([['foo', 'bar']])
expect(Select.emitted('update:modelValue')[0]).toEqual([['foo', 'bar']])
})
it('will not trigger the input event when multiple is true and selection is repeated', () => {
tests/unit/Slots.spec.js
+29 -25
View File
@@ -1,56 +1,62 @@
import { h } from 'vue'
import { mountDefault } from '../helpers'
describe('Scoped Slots', () => {
it('receives an option object to the selected-option-container slot', () => {
const Select = mountDefault(
{ value: 'one' },
{ modelValue: 'one' },
{
scopedSlots: {
'selected-option-container': `<span slot="selected-option-container" slot-scope="{option}">{{ option.label }}</span>`,
slots: {
'selected-option-container': (slotProps) =>
h(
'span',
{ slot: 'selected-option-container' },
slotProps.option.label
),
},
}
)
expect(Select.findComponent({ ref: 'selectedOptions' }).text()).toEqual(
'one'
)
expect(Select.get('.vs__selected-options').text()).toEqual('one')
})
describe('Slot: selected-option', () => {
it('receives an option object to the selected-option slot', () => {
const Select = mountDefault(
{ value: 'one' },
{ modelValue: 'one' },
{
scopedSlots: {
'selected-option': `<span slot="selected-option" slot-scope="option">{{ option.label }}</span>`,
slots: {
'selected-option': (slotProps) =>
h('span', { slot: 'selected-option' }, slotProps.label),
},
}
)
expect(Select.find('.vs__selected').text()).toEqual('one')
expect(Select.get('.vs__selected').text()).toEqual('one')
})
it('opens the dropdown when clicking an option in selected-option slot', () => {
const Select = mountDefault(
{ value: 'one' },
{ modelValue: 'one' },
{
scopedSlots: {
'selected-option': `<span class="my-option" slot-scope="option">{{ option.label }}</span>`,
slots: {
'selected-option': (slotProps) =>
h('span', { class: 'my-option' }, slotProps.label),
},
}
)
Select.find('.my-option').trigger('mousedown')
Select.get('.my-option').trigger('mousedown')
expect(Select.vm.open).toEqual(true)
})
})
it('receives an option object to the option slot in the dropdown menu', async () => {
const Select = mountDefault(
{ value: 'one' },
{ modelValue: 'one' },
{
scopedSlots: {
option: `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
slots: {
option: (slotProps) => h('span', { slot: 'option' }, slotProps.label),
},
}
)
@@ -58,9 +64,7 @@ describe('Scoped Slots', () => {
Select.vm.open = true
await Select.vm.$nextTick()
expect(Select.findComponent({ ref: 'dropdownMenu' }).text()).toEqual(
'onetwothree'
)
expect(Select.get('.vs__dropdown-menu').text()).toEqual('onetwothree')
})
it('noOptions slot receives the current search text', async () => {
@@ -68,7 +72,7 @@ describe('Scoped Slots', () => {
const Select = mountDefault(
{},
{
scopedSlots: { 'no-options': noOptions },
slots: { 'no-options': noOptions },
}
)
@@ -88,7 +92,7 @@ describe('Scoped Slots', () => {
const Select = mountDefault(
{},
{
scopedSlots: { header: header },
slots: { header: header },
}
)
await Select.vm.$nextTick()
@@ -106,7 +110,7 @@ describe('Scoped Slots', () => {
const Select = mountDefault(
{},
{
scopedSlots: { footer: footer },
slots: { footer: footer },
}
)
await Select.vm.$nextTick()
@@ -124,7 +128,7 @@ describe('Scoped Slots', () => {
const Select = mountDefault(
{},
{
scopedSlots: { 'list-header': header },
slots: { 'list-header': header },
}
)
Select.vm.open = true
@@ -142,7 +146,7 @@ describe('Scoped Slots', () => {
const Select = mountDefault(
{},
{
scopedSlots: { 'list-footer': footer },
slots: { 'list-footer': footer },
}
)
Select.vm.open = true
tests/unit/Tagging.spec.js
+10 -11
View File
@@ -4,7 +4,7 @@ import {
selectTag,
selectWithProps,
} from '../helpers'
import Select from '../../src/components/Select'
import VueSelect from '../../src/components/Select'
describe('When Tagging Is Enabled', () => {
it('can determine if a given option string already exists', () => {
@@ -40,7 +40,7 @@ describe('When Tagging Is Enabled', () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: ['one'],
modelValue: ['one'],
options: ['one', 'two'],
})
@@ -78,7 +78,7 @@ describe('When Tagging Is Enabled', () => {
pushTags: true,
taggable: true,
multiple: true,
value: ['one'],
modelValue: ['one'],
options: ['one', 'two'],
})
@@ -107,7 +107,7 @@ describe('When Tagging Is Enabled', () => {
pushTags: true,
taggable: true,
multiple: true,
value: ['one'],
modelValue: ['one'],
options: ['one', 'two'],
})
@@ -122,7 +122,7 @@ describe('When Tagging Is Enabled', () => {
pushTags: false,
taggable: true,
multiple: true,
value: ['one'],
modelValue: ['one'],
options: ['one', 'two'],
})
@@ -136,7 +136,7 @@ describe('When Tagging Is Enabled', () => {
pushTags: false,
taggable: true,
multiple: true,
value: ['one'],
modelValue: ['one'],
options: ['one', 'two'],
})
@@ -191,7 +191,7 @@ describe('When Tagging Is Enabled', () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: [{ label: 'one' }],
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
})
@@ -204,7 +204,7 @@ describe('When Tagging Is Enabled', () => {
taggable: true,
multiple: true,
filterable: false,
value: [{ label: 'one' }],
modelValue: [{ label: 'one' }],
options: [{ label: 'one' }],
})
@@ -228,12 +228,12 @@ describe('When Tagging Is Enabled', () => {
})
it('should not allow duplicate tags when using object options', async () => {
const spy = jest.spyOn(VueSelect.methods, 'select')
const Select = selectWithProps({
taggable: true,
multiple: true,
options: [{ label: 'two' }],
})
const spy = jest.spyOn(Select.vm, 'select')
await selectTag(Select, 'one')
expect(Select.vm.selectedValue).toEqual([{ label: 'one' }])
@@ -252,9 +252,8 @@ describe('When Tagging Is Enabled', () => {
})
Select.vm.typeAheadPointer = 0
Select.findComponent({ ref: 'search' }).trigger('keydown.tab')
await Select.get('input').trigger('keydown.tab')
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual(['one'])
})
})
tests/unit/TypeAhead.spec.js
+3 -3
View File
@@ -7,7 +7,7 @@ import Vue from 'vue'
describe('Moving the Typeahead Pointer', () => {
it('should set the pointer to zero when the filteredOptions watcher is called', async () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ['one', 'two', 'three'] },
props: { options: ['one', 'two', 'three'] },
sync: false,
})
@@ -22,7 +22,7 @@ describe('Moving the Typeahead Pointer', () => {
Select.vm.typeAheadPointer = 1
Select.findComponent({ ref: 'search' }).trigger('keydown.up')
Select.get('input').trigger('keydown.up')
expect(Select.vm.typeAheadPointer).toEqual(0)
})
@@ -32,7 +32,7 @@ describe('Moving the Typeahead Pointer', () => {
Select.vm.typeAheadPointer = 1
Select.findComponent({ ref: 'search' }).trigger('keydown.down')
Select.get('input').trigger('keydown.down')
expect(Select.vm.typeAheadPointer).toEqual(2)
})
yarn.lock
+427 -270
View File
File diff suppressed because it is too large Load Diff