fix tests

tests/components/CsvImport/DelimiterSelector.spec.js

@@ -1,23 +1,24 @@
 import { expect } from 'chai'
 import { mount, shallowMount } from '@vue/test-utils'
 import DelimiterSelector from '@/components/CsvJsonImport/DelimiterSelector'
+import { nextTick } from 'vue'
 
 describe('DelimiterSelector', async () => {
   it('shows the name of value', async () => {
     let wrapper = shallowMount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { modelValue: ',' }
     })
     expect(wrapper.find('input').element.value).to.equal(',')
     expect(wrapper.find('.name').text()).to.equal('comma')
 
     wrapper = shallowMount(DelimiterSelector, {
-      props: { value: '\t' }
+      props: { modelValue: '\t' }
     })
     expect(wrapper.find('input').element.value).to.equal('\t')
     expect(wrapper.find('.name').text()).to.equal('horizontal tab')
 
     wrapper = shallowMount(DelimiterSelector, {
-      props: { value: '' }
+      props: { modelValue: '' }
     })
     expect(wrapper.find('input').element.value).to.equal('')
     expect(wrapper.find('.name').text()).to.equal('')
@@ -25,7 +26,7 @@ describe('DelimiterSelector', async () => {
 
   it('clears the field', async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { modelValue: ',' }
     })
 
     await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
@@ -36,34 +37,43 @@ describe('DelimiterSelector', async () => {
 
   it('changes value by typing', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { 
+        modelValue: ',',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
     })
 
     await wrapper.find('input').setValue(';')
-    expect(wrapper.emitted().input).to.have.lengthOf(1)
-    expect(wrapper.emitted().input[0]).to.eql([';'])
+    expect(wrapper.props('modelValue')).to.eql(';')
   })
 
   it('changes value by selection from the list', async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: '|' }
+      props: {
+        modelValue: '|',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      },
+      attachTo: document.body
     })
 
     await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(true)
     await wrapper.find('.option').trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
-    expect(wrapper.emitted().input).to.have.lengthOf(1)
-    expect(wrapper.emitted().input[0]).to.eql([','])
+    expect(wrapper.props('modelValue')).to.eql(',')
+    wrapper.unmount()
   })
 
   it("doesn't change value when becomes empty", async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: '|' }
+      props: { 
+        modelValue: '|',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
     })
 
     await wrapper.find('input').setValue('')
-    expect(wrapper.emitted().input).to.equal(undefined)
+    expect(wrapper.props('modelValue')).to.eql('|')
   })
 
   it('set focus in input when click on character name', async () => {
@@ -72,7 +82,7 @@ describe('DelimiterSelector', async () => {
 
     const wrapper = mount(DelimiterSelector, {
       attachTo: place,
-      props: { value: '|' }
+      props: { modelValue: '|' }
     })
 
     await wrapper.find('.name').trigger('click')
@@ -83,23 +93,28 @@ describe('DelimiterSelector', async () => {
 
   it('disabled', async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: '|', disabled: true }
+      props: {
+        modelValue: '|',
+        disabled: true,
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      },
+      attachTo: document.body
     })
 
     await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
 
     expect(wrapper.find('input').element.value).to.equal('|')
-    expect(wrapper.emitted().input).to.equal(undefined)
 
     await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('has filled class when input is not empty', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { modelValue: ',' }
     })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('input').classes()).to.include('filled')
     await wrapper.find('input').setValue('')
     expect(wrapper.find('input').classes()).to.not.include('filled')