mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
110 lines
3.6 KiB
JavaScript
110 lines
3.6 KiB
JavaScript
import { expect } from 'chai'
|
|
import { mount, shallowMount } from '@vue/test-utils'
|
|
import DelimiterSelector from '@/components/CsvJsonImport/DelimiterSelector'
|
|
|
|
describe('DelimiterSelector', async () => {
|
|
it('shows the name of value', async () => {
|
|
let wrapper = shallowMount(DelimiterSelector, {
|
|
props: { value: ',' }
|
|
})
|
|
expect(wrapper.find('input').element.value).to.equal(',')
|
|
expect(wrapper.find('.name').text()).to.equal('comma')
|
|
|
|
wrapper = shallowMount(DelimiterSelector, {
|
|
props: { value: '\t' }
|
|
})
|
|
expect(wrapper.find('input').element.value).to.equal('\t')
|
|
expect(wrapper.find('.name').text()).to.equal('horizontal tab')
|
|
|
|
wrapper = shallowMount(DelimiterSelector, {
|
|
props: { 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, {
|
|
props: { 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, {
|
|
props: { 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, {
|
|
props: { 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, {
|
|
props: { 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,
|
|
props: { value: '|' }
|
|
})
|
|
|
|
await wrapper.find('.name').trigger('click')
|
|
expect(wrapper.find('input').element).to.equal(document.activeElement)
|
|
place.remove()
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('disabled', async () => {
|
|
const wrapper = mount(DelimiterSelector, {
|
|
props: { 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)
|
|
})
|
|
|
|
it('has filled class when input is not empty', async () => {
|
|
const wrapper = shallowMount(DelimiterSelector, {
|
|
props: { value: ',' }
|
|
})
|
|
await wrapper.vm.$nextTick()
|
|
expect(wrapper.find('input').classes()).to.include('filled')
|
|
await wrapper.find('input').setValue('')
|
|
expect(wrapper.find('input').classes()).to.not.include('filled')
|
|
await wrapper.find('input').setValue(';')
|
|
expect(wrapper.find('input').classes()).to.include('filled')
|
|
})
|
|
})
|