1
0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 10:08:52 +08:00

fix tests

This commit is contained in:
lana-k
2025-03-09 21:57:36 +01:00
parent 828cad6439
commit b5504b91ce
48 changed files with 7871 additions and 29372 deletions

View File

@@ -5,26 +5,34 @@ import CheckBox from '@/components/CheckBox'
describe('CheckBox', () => {
it('unchecked by default', () => {
const wrapper = shallowMount(CheckBox, {
props: { init: false }
props: { init: false },
attachTo: document.body
})
expect(wrapper.find('img').isVisible()).to.equal(false)
wrapper.unmount()
})
it('gets init state according to passed props', () => {
const wrapperChecked = shallowMount(CheckBox, {
props: { init: true }
props: { init: true },
attachTo: document.body
})
expect(wrapperChecked.find('img').isVisible()).to.equal(true)
expect(wrapperChecked.find('img.checked').isVisible()).to.equal(true)
wrapperChecked.unmount()
const wrapperUnchecked = shallowMount(CheckBox, {
props: { init: false }
props: { init: false },
attachTo: document.body
})
expect(wrapperUnchecked.find('img').isVisible()).to.equal(false)
wrapperUnchecked.unmount()
})
it('checked on click', async () => {
const wrapper = shallowMount(CheckBox)
const wrapper = shallowMount(CheckBox, { attachTo: document.body })
await wrapper.trigger('click')
expect(wrapper.find('img').isVisible()).to.equal(true)
expect(wrapper.find('img.checked').isVisible()).to.equal(true)
wrapper.unmount()
})
it('emits event on click', async () => {

View File

@@ -1,15 +1,16 @@
import { expect } from 'chai'
import sinon from 'sinon'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import { mount } from '@vue/test-utils'
import CsvJsonImport from '@/components/CsvJsonImport'
import csv from '@/lib/csv'
import { nextTick } from 'vue'
describe('CsvJsonImport.vue', () => {
let state = {}
let actions = {}
let mutations = {}
let store = {}
let clock
let wrapper
const newTabId = 1
@@ -27,7 +28,7 @@ describe('CsvJsonImport.vue', () => {
actions = {
addTab: sinon.stub().resolves(newTabId)
}
store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const db = {
sanitizeTableName: sinon.stub().returns('my_data'),
@@ -41,17 +42,25 @@ describe('CsvJsonImport.vue', () => {
// mount the component
wrapper = mount(CsvJsonImport, {
store,
global: {
plugins: [store],
stubs: {
teleport: true,
transition: false
}
},
props: {
file,
dialogName: 'addCsvJson',
db
}
},
attachTo: document.body
})
})
afterEach(() => {
sinon.restore()
wrapper.unmount()
})
it('previews', async () => {
@@ -76,11 +85,12 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
await nextTick()
await nextTick()
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog-header').text()).to.equal('CSV import')
expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.value).to.equal('|')
expect(wrapper.findComponent({ name: 'delimiter-selector' }).props('modelValue')).to.equal('|')
expect(wrapper.find('#quote-char input').element.value).to.equal('"')
expect(wrapper.find('#escape-char input').element.value).to.equal('"')
expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(true)
@@ -115,7 +125,8 @@ describe('CsvJsonImport.vue', () => {
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
const rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(0)
expect(wrapper.findComponent({ name: 'logs' }).text())
@@ -123,7 +134,7 @@ describe('CsvJsonImport.vue', () => {
expect(wrapper.find('.no-data').isVisible()).to.equal(true)
expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
expect(wrapper.find('#import-start').isVisible()).to.equal(true)
expect(wrapper.find('#import-start').attributes().disabled).to.equal('disabled')
expect(wrapper.find('#import-start').attributes().disabled).to.equal('')
})
it('reparses when parameters changes', async () => {
@@ -143,7 +154,8 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await csv.parse.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
parse.onCall(1).resolves({
delimiter: ',',
@@ -266,7 +278,8 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
let resolveParsing
parse.onCall(1).returns(new Promise(resolve => {
@@ -286,7 +299,6 @@ describe('CsvJsonImport.vue', () => {
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await wrapper.vm.$nextTick()
// "Parsing CSV..." in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -349,7 +361,8 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
let resolveImport
wrapper.vm.db.addTableFromCsv.onCall(0).returns(new Promise(resolve => {
@@ -359,7 +372,6 @@ describe('CsvJsonImport.vue', () => {
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -420,12 +432,12 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
// Parsing success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -483,12 +495,12 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
// Parsing success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -544,12 +556,12 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
@@ -613,12 +625,12 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -670,12 +682,12 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -711,17 +723,18 @@ describe('CsvJsonImport.vue', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#import-start').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.find('#import-finish').trigger('click')
await clock.tick(100)
expect(actions.addTab.calledOnce).to.equal(true)
await actions.addTab.returnValues[0]
expect(mutations.setCurrentTabId.calledOnceWith(state, newTabId)).to.equal(true)
expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(false)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
expect(wrapper.emitted('finish')).to.have.lengthOf(1)
})
@@ -742,14 +755,15 @@ describe('CsvJsonImport.vue', () => {
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#import-start').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.find('#import-cancel').trigger('click')
expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
expect(wrapper.vm.db.execute.calledOnceWith('DROP TABLE "my_data"')).to.equal(true)
expect(wrapper.vm.db.refreshSchema.calledOnce).to.equal(true)
expect(wrapper.emitted('cancel')).to.have.lengthOf(1)
@@ -763,23 +777,24 @@ describe('CsvJsonImport.vue', () => {
})
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await clock.tick(400)
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('#csv-json-table-name .text-field-error').text()).to.equal('')
wrapper.vm.db.validateTableName = sinon.stub().rejects(new Error('this is a bad table name'))
await wrapper.find('#csv-json-table-name input').setValue('bar')
await clock.tick(400)
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('#csv-json-table-name .text-field-error').text())
.to.equal('this is a bad table name. Try another table name.')
await wrapper.find('#csv-json-table-name input').setValue('')
await clock.tick(400)
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('#csv-json-table-name .text-field-error').text()).to.equal('')
await wrapper.find('#import-start').trigger('click')
@@ -793,7 +808,6 @@ describe('CsvJsonImport.vue - json', () => {
let state = {}
let actions = {}
let mutations = {}
let store = {}
let clock
let wrapper
const newTabId = 1
@@ -817,7 +831,7 @@ describe('CsvJsonImport.vue - json', () => {
actions = {
addTab: sinon.stub().resolves(newTabId)
}
store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const db = {
sanitizeTableName: sinon.stub().returns('my_data'),
@@ -831,24 +845,33 @@ describe('CsvJsonImport.vue - json', () => {
// mount the component
wrapper = mount(CsvJsonImport, {
store,
global: {
plugins: [store],
stubs: {
teleport: true,
transition: false
}
},
props: {
file,
dialogName: 'addCsvJson',
db
}
},
attachTo: document.body
})
})
afterEach(() => {
sinon.restore()
wrapper.unmount()
})
it('previews', async () => {
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
await nextTick()
await nextTick()
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog-header').text()).to.equal('JSON import')
expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
expect(wrapper.findComponent({ name: 'delimiter-selector' }).exists()).to.equal(false)
@@ -906,11 +929,12 @@ describe('CsvJsonImport.vue - json', () => {
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
// "Parsing JSON..." in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -946,12 +970,13 @@ describe('CsvJsonImport.vue - json', () => {
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await getJsonParseResult.returnValues[1]
await wrapper.vm.$nextTick()
await nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
@@ -984,12 +1009,14 @@ describe('CsvJsonImport.vue - json', () => {
await wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await getJsonParseResult.returnValues[1]
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -1008,7 +1035,6 @@ describe('CsvJsonImport.vue - ndjson', () => {
let state = {}
let actions = {}
let mutations = {}
let store = {}
let clock
let wrapper
const newTabId = 1
@@ -1026,7 +1052,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
actions = {
addTab: sinon.stub().resolves(newTabId)
}
store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const db = {
sanitizeTableName: sinon.stub().returns('my_data'),
@@ -1040,17 +1066,25 @@ describe('CsvJsonImport.vue - ndjson', () => {
// mount the component
wrapper = mount(CsvJsonImport, {
store,
global: {
plugins: [store],
stubs: {
teleport: true,
transition: false
}
},
props: {
file,
dialogName: 'addCsvJson',
db
}
},
attachTo: document.body
})
})
afterEach(() => {
sinon.restore()
wrapper.unmount()
})
it('previews', async () => {
@@ -1068,8 +1102,9 @@ describe('CsvJsonImport.vue - ndjson', () => {
wrapper.vm.preview()
await wrapper.vm.open()
await wrapper.vm.$nextTick()
expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
await nextTick()
await nextTick()
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog-header').text()).to.equal('JSON import')
expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
expect(wrapper.findComponent({ name: 'delimiter-selector' }).exists()).to.equal(false)
@@ -1100,7 +1135,8 @@ describe('CsvJsonImport.vue - ndjson', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
let resolveParsing
parse.onCall(1).returns(new Promise(resolve => {
@@ -1119,7 +1155,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
// "Parsing JSON..." in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -1180,12 +1216,13 @@ describe('CsvJsonImport.vue - ndjson', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
await nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
@@ -1243,12 +1280,13 @@ describe('CsvJsonImport.vue - ndjson', () => {
wrapper.vm.preview()
wrapper.vm.open()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
await wrapper.find('#csv-json-table-name input').setValue('foo')
await wrapper.find('#import-start').trigger('click')
await csv.parse.returnValues[1]
await wrapper.vm.$nextTick()
await nextTick()
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')

View File

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

View File

@@ -1,10 +1,12 @@
import { expect } from 'chai'
import sinon from 'sinon'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import { shallowMount, mount } from '@vue/test-utils'
import DbUploader from '@/components/DbUploader'
import fu from '@/lib/utils/fileIo'
import database from '@/lib/database'
import { nextTick } from 'vue'
describe('DbUploader.vue', () => {
let state = {}
@@ -18,7 +20,7 @@ describe('DbUploader.vue', () => {
mutations = {
setDb: sinon.stub()
}
store = new Vuex.Store({ state, mutations })
store = createStore({ state, mutations })
place = document.createElement('div')
document.body.appendChild(place)
@@ -47,9 +49,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = shallowMount(DbUploader, {
attachTo: place,
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -60,7 +62,7 @@ describe('DbUploader.vue', () => {
expect(db.loadDb.calledOnceWith(file)).to.equal(true)
await db.loadDb.returnValues[0]
await wrapper.vm.animationPromise
await wrapper.vm.$nextTick()
await nextTick()
expect($router.push.calledOnceWith('/workspace')).to.equal(true)
wrapper.unmount()
})
@@ -79,9 +81,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = shallowMount(DbUploader, {
attachTo: place,
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -100,7 +102,7 @@ describe('DbUploader.vue', () => {
expect(db.loadDb.calledOnceWith(file)).to.equal(true)
await db.loadDb.returnValues[0]
await wrapper.vm.animationPromise
await wrapper.vm.$nextTick()
await nextTick()
expect($router.push.calledOnceWith('/workspace')).to.equal(true)
wrapper.unmount()
})
@@ -123,9 +125,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = shallowMount(DbUploader, {
attachTo: place,
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -135,7 +137,7 @@ describe('DbUploader.vue', () => {
await wrapper.find('.drop-area').trigger('click')
await db.loadDb.returnValues[0]
await wrapper.vm.animationPromise
await wrapper.vm.$nextTick()
await nextTick()
expect($router.push.called).to.equal(false)
wrapper.unmount()
})
@@ -152,9 +154,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = mount(DbUploader, {
attachTo: place,
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -167,11 +169,11 @@ describe('DbUploader.vue', () => {
sinon.stub(CsvImport, 'open')
await wrapper.find('.drop-area').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
expect(CsvImport.reset.calledOnce).to.equal(true)
await wrapper.vm.animationPromise
expect(CsvImport.preview.calledOnce).to.equal(true)
await wrapper.vm.$nextTick()
await nextTick()
expect(CsvImport.open.calledOnce).to.equal(true)
wrapper.unmount()
})
@@ -188,9 +190,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = mount(DbUploader, {
attachTo: place,
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -203,11 +205,11 @@ describe('DbUploader.vue', () => {
sinon.stub(JsonImport, 'open')
await wrapper.find('.drop-area').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
expect(JsonImport.reset.calledOnce).to.equal(true)
await wrapper.vm.animationPromise
expect(JsonImport.preview.calledOnce).to.equal(true)
await wrapper.vm.$nextTick()
await nextTick()
expect(JsonImport.open.calledOnce).to.equal(true)
wrapper.unmount()
})
@@ -224,9 +226,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = mount(DbUploader, {
attachTo: place,
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -239,11 +241,11 @@ describe('DbUploader.vue', () => {
sinon.stub(JsonImport, 'open')
await wrapper.find('.drop-area').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
expect(JsonImport.reset.calledOnce).to.equal(true)
await wrapper.vm.animationPromise
expect(JsonImport.preview.calledOnce).to.equal(true)
await wrapper.vm.$nextTick()
await nextTick()
expect(JsonImport.open.calledOnce).to.equal(true)
wrapper.unmount()
})
@@ -259,9 +261,9 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = mount(DbUploader, {
store,
global: {
mocks: { $router, $route }
mocks: { $router, $route },
plugins: [store]
},
props: {
type: 'illustrated'
@@ -274,7 +276,7 @@ describe('DbUploader.vue', () => {
sinon.stub(CsvImport, 'open')
await wrapper.find('.drop-area').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
await CsvImport.$emit('cancel')
expect(wrapper.vm.newDb).to.equal(null)
})

View File

@@ -1,6 +1,7 @@
import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import Logs from '@/components/Logs'
import { nextTick } from 'vue'
let place
describe('Logs.vue', () => {
@@ -28,8 +29,7 @@ describe('Logs.vue', () => {
attachTo: place,
props: { messages, style: `height: ${containerHeight}px` }
})
await wrapper.vm.$nextTick()
await nextTick()
const height = wrapper.find('.logs-container').element.scrollHeight
expect(wrapper.find('.logs-container').element.scrollTop)
.to.equal(height - viewHeight)
@@ -52,11 +52,11 @@ describe('Logs.vue', () => {
props: { messages, style: `height: ${containerHeight}px` }
})
await wrapper.vm.$nextTick()
await nextTick()
messages.push({ type: 'error', message: 'msg 5' })
await wrapper.vm.$nextTick()
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
const height = wrapper.find('.logs-container').element.scrollHeight
expect(wrapper.find('.logs-container').element.scrollTop)
.to.equal(height - viewHeight)

View File

@@ -1,14 +1,15 @@
import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import Splitpanes from '@/components/Splitpanes'
import { nextTick } from 'vue'
describe('Splitpanes.vue', () => {
it('renders correctly - vertical', () => {
// mount the component
const wrapper = shallowMount(Splitpanes, {
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 60, max: 100 },
@@ -44,8 +45,8 @@ describe('Splitpanes.vue', () => {
// mount the component
const wrapper = shallowMount(Splitpanes, {
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 60, max: 100 },
@@ -74,8 +75,8 @@ describe('Splitpanes.vue', () => {
// mount the component
let wrapper = shallowMount(Splitpanes, {
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 0, max: 100 },
@@ -130,24 +131,24 @@ describe('Splitpanes.vue', () => {
it('drag - vertical', async () => {
const root = document.createElement('div')
const place = document.createElement('div')
root.style.width = '600px'
root.style.height = '500px'
root.appendChild(place)
document.body.appendChild(root)
document.body.style.margin = 0
// mount the component
const wrapper = shallowMount(Splitpanes, {
attachTo: place,
attachTo: root,
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 60, max: 100 },
after: { size: 40, max: 100 }
}
})
const parent = root.querySelector('[data-v-app=""]')
parent.style.width = '600px'
parent.style.height = '500px'
await wrapper.find('.splitpanes-splitter').trigger('mousedown')
document.dispatchEvent(new MouseEvent('mousemove', {
@@ -155,7 +156,7 @@ describe('Splitpanes.vue', () => {
clientY: 80
}))
document.dispatchEvent(new MouseEvent('mouseup'))
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
wrapper.unmount()
root.remove()
@@ -163,18 +164,15 @@ describe('Splitpanes.vue', () => {
it('drag - horizontal', async () => {
const root = document.createElement('div')
const place = document.createElement('div')
root.style.width = '600px'
root.style.height = '500px'
root.appendChild(place)
document.body.appendChild(root)
document.body.style.margin = 0
// mount the component
const wrapper = shallowMount(Splitpanes, {
attachTo: place,
attachTo: root,
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 10, max: 100 },
@@ -183,13 +181,18 @@ describe('Splitpanes.vue', () => {
}
})
const parent = root.querySelector('[data-v-app=""]')
parent.style.width = '600px'
parent.style.height = '500px'
await wrapper.find('.splitpanes-splitter').trigger('mousedown')
document.dispatchEvent(new MouseEvent('mousemove', {
clientX: 10,
clientY: 250
}))
document.dispatchEvent(new MouseEvent('mouseup'))
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
wrapper.unmount()
root.remove()
@@ -197,18 +200,15 @@ describe('Splitpanes.vue', () => {
it('drag - horizontal - touch', async () => {
const root = document.createElement('div')
const place = document.createElement('div')
root.style.width = '600px'
root.style.height = '500px'
root.appendChild(place)
document.body.appendChild(root)
document.body.style.margin = 0
// mount the component
const wrapper = shallowMount(Splitpanes, {
attachTo: place,
attachTo: root,
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 10, max: 100 },
@@ -217,6 +217,10 @@ describe('Splitpanes.vue', () => {
}
})
const parent = root.querySelector('[data-v-app=""]')
parent.style.width = '600px'
parent.style.height = '500px'
window.ontouchstart = null
await wrapper.find('.splitpanes-splitter').trigger('touchstart')
const event = new TouchEvent('touchmove')
@@ -229,7 +233,7 @@ describe('Splitpanes.vue', () => {
})
document.dispatchEvent(event)
document.dispatchEvent(new MouseEvent('touchend'))
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
wrapper.unmount()
root.remove()
@@ -238,18 +242,15 @@ describe('Splitpanes.vue', () => {
it('drag - vertical - touch', async () => {
const root = document.createElement('div')
const place = document.createElement('div')
root.style.width = '600px'
root.style.height = '500px'
root.appendChild(place)
document.body.appendChild(root)
document.body.style.margin = 0
// mount the component
const wrapper = shallowMount(Splitpanes, {
attachTo: place,
attachTo: root,
slots: {
leftPane: '<div />',
rightPane: '<div />'
'left-pane': '<div />',
'right-pane': '<div />'
},
props: {
before: { size: 60, max: 100 },
@@ -257,6 +258,9 @@ describe('Splitpanes.vue', () => {
}
})
window.ontouchstart = null
const parent = root.querySelector('[data-v-app=""]')
parent.style.width = '600px'
parent.style.height = '500px'
await wrapper.find('.splitpanes-splitter').trigger('touchstart')
const event = new TouchEvent('touchmove')
@@ -269,7 +273,7 @@ describe('Splitpanes.vue', () => {
})
document.dispatchEvent(event)
document.dispatchEvent(new MouseEvent('touchend'))
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
wrapper.unmount()
root.remove()

View File

@@ -8,30 +8,20 @@ describe('Pager.vue', () => {
sinon.restore()
})
it('emits input event with a page', async () => {
it('emits update:modelValue event with a page', async () => {
const wrapper = mount(Pager, {
props: {
pageCount: 5
pageCount: 5,
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
}
})
// click on 'next page' link
await wrapper.find('.paginator-next').trigger('click')
expect(wrapper.emitted('input')[0]).to.eql([2])
expect(wrapper.props('modelValue')).to.eql(2)
// click on the link to page 3 (it has index 2)
await wrapper.findAll('.paginator-page-link')[2].trigger('click')
expect(wrapper.emitted('input')[1]).to.eql([3])
})
it('changes the page when value is changed', async () => {
const wrapper = mount(Pager, {
props: {
pageCount: 5
}
})
await wrapper.setProps({ value: 5 })
expect(wrapper.emitted('input')[0]).to.eql([5])
expect(wrapper.props('modelValue')).to.eql(3)
})
})