feat: Vue 3 Support (#1344)

BREAKING CHANGE: drop vue 2 support

tests/unit/ReactiveOptions.spec.js

@@ -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')