feat: Vue 3 Support (#1344)

BREAKING CHANGE: drop vue 2 support

tests/unit/Selecting.spec.js

@@ -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', () => {