fix emoji input tests

This commit is contained in:
Henry Jameson 2022-03-22 18:14:56 +02:00
parent c2cf13fc00
commit 9d7a7e2019
2 changed files with 48 additions and 37 deletions

View File

@ -189,8 +189,11 @@ const EmojiInput = {
img: imageUrl || '' img: imageUrl || ''
})) }))
}, },
suggestions (newValue) { suggestions: {
handler (newValue) {
this.$nextTick(this.resize) this.$nextTick(this.resize)
},
deep: true
} }
}, },
methods: { methods: {

View File

@ -1,15 +1,12 @@
import { shallowMount, createLocalVue } from '@vue/test-utils' import { h } from 'vue'
import { shallowMount } from '@vue/test-utils'
import EmojiInput from 'src/components/emoji_input/emoji_input.vue' import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
import vClickOutside from 'click-outside-vue3'
const generateInput = (value, padEmoji = true) => { const generateInput = (value, padEmoji = true) => {
const localVue = createLocalVue()
localVue.directive('click-outside', () => {})
const wrapper = shallowMount(EmojiInput, { const wrapper = shallowMount(EmojiInput, {
propsData: { global: {
suggest: () => [], renderStubDefaultSlot: true,
enableEmojiPicker: true,
value
},
mocks: { mocks: {
$store: { $store: {
getters: { getters: {
@ -19,90 +16,101 @@ const generateInput = (value, padEmoji = true) => {
} }
} }
}, },
slots: { stubs: {
default: '<input />' FAIcon: true
}, },
localVue directives: {
'click-outside': vClickOutside
}
},
props: {
suggest: () => [],
enableEmojiPicker: true,
modelValue: value
},
slots: {
'default': () => h('input', '')
}
}) })
return [wrapper, localVue] return wrapper
} }
describe('EmojiInput', () => { describe('EmojiInput', () => {
describe('insertion mechanism', () => { describe('insertion mechanism', () => {
it('inserts string at the end with trailing space', () => { it('inserts string at the end with trailing space', () => {
const initialString = 'Testing' const initialString = 'Testing'
const [wrapper] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '(test)', keepOpen: false }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
const inputEvents = wrapper.emitted().input const inputEvents = wrapper.emitted()['update:modelValue']
expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ') expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ')
}) })
it('inserts string at the end with trailing space (source has a trailing space)', () => { it('inserts string at the end with trailing space (source has a trailing space)', () => {
const initialString = 'Testing ' const initialString = 'Testing '
const [wrapper] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '(test)', keepOpen: false }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
const inputEvents = wrapper.emitted().input const inputEvents = wrapper.emitted()['update:modelValue']
expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ') expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ')
}) })
it('inserts string at the begginning without leading space', () => { it('inserts string at the begginning without leading space', () => {
const initialString = 'Testing' const initialString = 'Testing'
const [wrapper] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 0 }) wrapper.setData({ caret: 0 })
wrapper.vm.insert({ insertion: '(test)', keepOpen: false }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
const inputEvents = wrapper.emitted().input const inputEvents = wrapper.emitted()['update:modelValue']
expect(inputEvents[inputEvents.length - 1][0]).to.eql('(test) Testing') expect(inputEvents[inputEvents.length - 1][0]).to.eql('(test) Testing')
}) })
it('inserts string between words without creating extra spaces', () => { it('inserts string between words without creating extra spaces', () => {
const initialString = 'Spurdo Sparde' const initialString = 'Spurdo Sparde'
const [wrapper] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 6 }) wrapper.setData({ caret: 6 })
wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false }) wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
const inputEvents = wrapper.emitted().input const inputEvents = wrapper.emitted()['update:modelValue']
expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde') expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
}) })
it('inserts string between words without creating extra spaces (other caret)', () => { it('inserts string between words without creating extra spaces (other caret)', () => {
const initialString = 'Spurdo Sparde' const initialString = 'Spurdo Sparde'
const [wrapper] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 7 }) wrapper.setData({ caret: 7 })
wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false }) wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
const inputEvents = wrapper.emitted().input const inputEvents = wrapper.emitted()['update:modelValue']
expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde') expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
}) })
it('inserts string without any padding if padEmoji setting is set to false', () => { it('inserts string without any padding if padEmoji setting is set to false', () => {
const initialString = 'Eat some spam!' const initialString = 'Eat some spam!'
const [wrapper] = generateInput(initialString, false) const wrapper = generateInput(initialString, false)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length, keepOpen: false }) wrapper.setData({ caret: initialString.length, keepOpen: false })
wrapper.vm.insert({ insertion: ':spam:' }) wrapper.vm.insert({ insertion: ':spam:' })
const inputEvents = wrapper.emitted().input const inputEvents = wrapper.emitted()['update:modelValue']
expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:') expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:')
}) })
it('correctly sets caret after insertion at beginning', (done) => { it('correctly sets caret after insertion at beginning', (done) => {
const initialString = '1234' const initialString = '1234'
const [wrapper, vue] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 0 }) wrapper.setData({ caret: 0 })
wrapper.vm.insert({ insertion: '1234', keepOpen: false }) wrapper.vm.insert({ insertion: '1234', keepOpen: false })
vue.nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.vm.caret).to.eql(5) expect(wrapper.vm.caret).to.eql(5)
done() done()
}) })
@ -110,12 +118,12 @@ describe('EmojiInput', () => {
it('correctly sets caret after insertion at end', (done) => { it('correctly sets caret after insertion at end', (done) => {
const initialString = '1234' const initialString = '1234'
const [wrapper, vue] = generateInput(initialString) const wrapper = generateInput(initialString)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '1234', keepOpen: false }) wrapper.vm.insert({ insertion: '1234', keepOpen: false })
vue.nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.vm.caret).to.eql(10) expect(wrapper.vm.caret).to.eql(10)
done() done()
}) })
@ -123,12 +131,12 @@ describe('EmojiInput', () => {
it('correctly sets caret after insertion if padEmoji setting is set to false', (done) => { it('correctly sets caret after insertion if padEmoji setting is set to false', (done) => {
const initialString = '1234' const initialString = '1234'
const [wrapper, vue] = generateInput(initialString, false) const wrapper = generateInput(initialString, false)
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '1234', keepOpen: false }) wrapper.vm.insert({ insertion: '1234', keepOpen: false })
vue.nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.vm.caret).to.eql(8) expect(wrapper.vm.caret).to.eql(8)
done() done()
}) })