add tests for DelimiterSelector #27

src/components/DelimiterSelector.vue

@@ -10,9 +10,9 @@
         <input
           ref="delimiterInput"
           type="text"
+          maxlength="1"
           :value="value"
           @click.stop
-          @keypress="onKeyPress"
           @input.prevent="onInput($event)"
           :disabled="disabled"
         />
@@ -46,7 +46,7 @@ import ClearIcon from '@/components/svg/clear'
 
 export default {
   name: 'DelimiterSelector',
-  props: ['label', 'value', 'width', 'disabled'],
+  props: ['value', 'width', 'disabled'],
   components: { DropDownChevron, ClearIcon },
   data () {
     return {
@@ -61,19 +61,11 @@ export default {
       }
       return ascii[str.charCodeAt(0).toString()].name
     },
-    onKeyPress (event) {
-      if (event.target.value.length >= 1) {
-        event.preventDefault()
-      }
-    },
     onInput (event) {
       const value = event.target.value
-      if (value.length > 1) {
-        event.target.value = value[0]
-      }
 
       if (value) {
-        this.$emit('input', event.target.value)
+        this.$emit('input', value)
       }
     },
     chooseOption (option) {

tests/unit/components/DelimiterSelector.spec.js

@@ -0,0 +1,93 @@
+import { expect } from 'chai'
+import { mount, shallowMount } from '@vue/test-utils'
+import DelimiterSelector from '@/components/DelimiterSelector'
+
+describe('DelimiterSelector', async () => {
+  it('shows the name of value', async () => {
+    const wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+    expect(wrapper.find('input').element.value).to.equal(',')
+    expect(wrapper.find('.name').text()).to.equal('comma')
+
+    await wrapper.setProps({ value: '\t' })
+    expect(wrapper.find('input').element.value).to.equal('\t')
+    expect(wrapper.find('.name').text()).to.equal('horizontal tab')
+
+    await wrapper.setProps({ value: '' })
+    expect(wrapper.find('input').element.value).to.equal('')
+    expect(wrapper.find('.name').text()).to.equal('')
+  })
+
+  it('clears the field', async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+
+    await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
+
+    expect(wrapper.find('input').element.value).to.equal('')
+    expect(wrapper.emitted().input).to.equal(undefined)
+  })
+
+  it('changes value by typing', async () => {
+    const wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+
+    await wrapper.find('input').setValue(';')
+    expect(wrapper.emitted().input).to.have.lengthOf(1)
+    expect(wrapper.emitted().input[0]).to.eql([';'])
+  })
+
+  it('changes value by selection from the list', async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: '|' }
+    })
+
+    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([','])
+  })
+
+  it("doesn't change value when becomes empty", async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: '|' }
+    })
+
+    await wrapper.find('input').setValue('')
+    expect(wrapper.emitted().input).to.equal(undefined)
+  })
+
+  it('set focus in input when click on character name', async () => {
+    const place = document.createElement('div')
+    document.body.appendChild(place)
+
+    const wrapper = mount(DelimiterSelector, {
+      attachTo: place,
+      propsData: { value: '|' }
+    })
+
+    await wrapper.find('.name').trigger('click')
+    expect(wrapper.find('input').element).to.equal(document.activeElement)
+    place.remove()
+    wrapper.destroy()
+  })
+
+  it('disabled', async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: '|', disabled: true }
+    })
+
+    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)
+  })
+})