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

update tests

This commit is contained in:
lana-k
2025-01-05 17:13:55 +01:00
parent eee67763b5
commit e14696b59e
26 changed files with 523 additions and 409 deletions

View File

@@ -5,18 +5,18 @@ import CheckBox from '@/components/CheckBox'
describe('CheckBox', () => {
it('unchecked by default', () => {
const wrapper = shallowMount(CheckBox, {
propsData: { init: false }
props: { init: false }
})
expect(wrapper.find('img').isVisible()).to.equal(false)
})
it('gets init state according to passed props', () => {
const wrapperChecked = shallowMount(CheckBox, {
propsData: { init: true }
props: { init: true }
})
expect(wrapperChecked.find('img').isVisible()).to.equal(true)
const wrapperUnchecked = shallowMount(CheckBox, {
propsData: { init: false }
props: { init: false }
})
expect(wrapperUnchecked.find('img').isVisible()).to.equal(false)
})
@@ -39,7 +39,7 @@ describe('CheckBox', () => {
it('disabled', async () => {
const wrapper = shallowMount(CheckBox, {
propsData: { disabled: true }
props: { disabled: true }
})
expect(wrapper.find('.checkbox-container').classes()).to.include('disabled')
expect(wrapper.find('.checkbox-container').classes()).to.not.include('checked')

View File

@@ -42,7 +42,7 @@ describe('CsvJsonImport.vue', () => {
// mount the component
wrapper = mount(CsvJsonImport, {
store,
propsData: {
props: {
file,
dialogName: 'addCsvJson',
db
@@ -86,10 +86,10 @@ describe('CsvJsonImport.vue', () => {
expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(true)
const rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(2)
expect(rows.at(0).findAll('td').at(0).text()).to.equal('foo')
expect(rows.at(0).findAll('td').at(1).text()).to.equal('1')
expect(rows.at(1).findAll('td').at(0).text()).to.equal('bar')
expect(rows.at(1).findAll('td').at(1).text()).to.equal('2')
expect(rows[0].findAll('td')[0].text()).to.equal('foo')
expect(rows[0].findAll('td')[1].text()).to.equal('1')
expect(rows[1].findAll('td')[0].text()).to.equal('bar')
expect(rows[1].findAll('td')[1].text()).to.equal('2')
expect(wrapper.findComponent({ name: 'logs' }).text())
.to.include('Information about row 0. Comma was used as a standart delimiter.')
expect(wrapper.findComponent({ name: 'logs' }).text())
@@ -163,8 +163,8 @@ describe('CsvJsonImport.vue', () => {
let rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows.at(0).findAll('td').at(0).text()).to.equal('bar')
expect(rows.at(0).findAll('td').at(1).text()).to.equal('2')
expect(rows[0].findAll('td')[0].text()).to.equal('bar')
expect(rows[0].findAll('td')[1].text()).to.equal('2')
expect(wrapper.findComponent({ name: 'logs' }).text())
.to.include('Preview parsing is completed in')
@@ -193,8 +193,8 @@ describe('CsvJsonImport.vue', () => {
await csv.parse.returnValues[2]
rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows.at(0).findAll('td').at(0).text()).to.equal('baz')
expect(rows.at(0).findAll('td').at(1).text()).to.equal('3')
expect(rows[0].findAll('td')[0].text()).to.equal('baz')
expect(rows[0].findAll('td')[1].text()).to.equal('3')
expect(wrapper.findComponent({ name: 'logs' }).text())
.to.contain(
'Error in row 0. Quote is missed. ' +
@@ -220,8 +220,8 @@ describe('CsvJsonImport.vue', () => {
await csv.parse.returnValues[3]
rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows.at(0).findAll('td').at(0).text()).to.equal('qux')
expect(rows.at(0).findAll('td').at(1).text()).to.equal('4')
expect(rows[0].findAll('td')[0].text()).to.equal('qux')
expect(rows[0].findAll('td')[1].text()).to.equal('4')
expect(wrapper.findComponent({ name: 'logs' }).text())
.to.contain('Preview parsing is completed in')
@@ -242,8 +242,8 @@ describe('CsvJsonImport.vue', () => {
await csv.parse.returnValues[4]
rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows.at(0).findAll('td').at(0).text()).to.equal('corge')
expect(rows.at(0).findAll('td').at(1).text()).to.equal('5')
expect(rows[0].findAll('td')[0].text()).to.equal('corge')
expect(rows[0].findAll('td')[1].text()).to.equal('5')
expect(wrapper.findComponent({ name: 'logs' }).text())
.to.include('Preview parsing is completed in')
@@ -289,7 +289,7 @@ describe('CsvJsonImport.vue', () => {
await wrapper.vm.$nextTick()
// "Parsing CSV..." in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
.to.equal('Parsing CSV...')
// After 1 second - loading indicator is shown
@@ -362,7 +362,7 @@ describe('CsvJsonImport.vue', () => {
await wrapper.vm.$nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
.to.include('2 rows are parsed successfully in')
// All the dialog controls are disabled
@@ -430,8 +430,8 @@ describe('CsvJsonImport.vue', () => {
// Parsing success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
expect(logs).to.have.lengthOf(4)
expect(logs.at(1).text()).to.include('2 rows are parsed in')
expect(logs.at(2).text()).to.equals('Comma was used as a standart delimiter.')
expect(logs[1].text()).to.include('2 rows are parsed in')
expect(logs[2].text()).to.equals('Comma was used as a standart delimiter.')
// All the dialog controls are disabled
expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(true)
@@ -493,8 +493,8 @@ describe('CsvJsonImport.vue', () => {
// Parsing success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
expect(logs).to.have.lengthOf(3)
expect(logs.at(1).text()).to.include('Parsing ended with errors.')
expect(logs.at(2).text()).to.equals('Something is wrong.')
expect(logs[1].text()).to.include('Parsing ended with errors.')
expect(logs[2].text()).to.equals('Something is wrong.')
// All the dialog controls are enabled
expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
@@ -552,7 +552,7 @@ describe('CsvJsonImport.vue', () => {
await wrapper.vm.$nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(2).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
.to.equal('Importing CSV into a SQLite database...')
// After 1 second - loading indicator is shown
@@ -623,7 +623,7 @@ describe('CsvJsonImport.vue', () => {
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
expect(logs).to.have.lengthOf(3)
expect(logs.at(2).text()).to.contain('Importing CSV into a SQLite database is completed in')
expect(logs[2].text()).to.contain('Importing CSV into a SQLite database is completed in')
// All the dialog controls are enabled
expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
@@ -680,8 +680,8 @@ describe('CsvJsonImport.vue', () => {
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
expect(logs).to.have.lengthOf(4)
expect(logs.at(2).text()).to.contain('Importing CSV into a SQLite database...')
expect(logs.at(3).text()).to.equal('Error: fail.')
expect(logs[2].text()).to.contain('Importing CSV into a SQLite database...')
expect(logs[3].text()).to.equal('Error: fail.')
// All the dialog controls are enabled
expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
@@ -832,7 +832,7 @@ describe('CsvJsonImport.vue - json', () => {
// mount the component
wrapper = mount(CsvJsonImport, {
store,
propsData: {
props: {
file,
dialogName: 'addCsvJson',
db
@@ -857,7 +857,7 @@ describe('CsvJsonImport.vue - json', () => {
expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(false)
const rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows.at(0).findAll('td').at(0).text()).to.equal([
expect(rows[0].findAll('td')[0].text()).to.equal([
'{',
' "foo": [',
' 1,',
@@ -913,7 +913,7 @@ describe('CsvJsonImport.vue - json', () => {
await wrapper.vm.$nextTick()
// "Parsing JSON..." in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
.to.equal('Parsing JSON...')
// After 1 second - loading indicator is shown
@@ -954,7 +954,7 @@ describe('CsvJsonImport.vue - json', () => {
await wrapper.vm.$nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(2).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
.to.equal('Importing JSON into a SQLite database...')
// After 1 second - loading indicator is shown
@@ -994,7 +994,7 @@ describe('CsvJsonImport.vue - json', () => {
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
expect(logs).to.have.lengthOf(3)
expect(logs.at(2).text()).to.contain('Importing JSON into a SQLite database is completed in')
expect(logs[2].text()).to.contain('Importing JSON into a SQLite database is completed in')
// All the dialog controls are enabled
expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
@@ -1041,7 +1041,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
// mount the component
wrapper = mount(CsvJsonImport, {
store,
propsData: {
props: {
file,
dialogName: 'addCsvJson',
db
@@ -1078,7 +1078,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(false)
const rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows.at(0).findAll('td').at(0).text()).to.equal('{ "foo": [ 1, 2, 3 ] }')
expect(rows[0].findAll('td')[0].text()).to.equal('{ "foo": [ 1, 2, 3 ] }')
expect(wrapper.findComponent({ name: 'logs' }).text())
.to.include('Preview parsing is completed in')
expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
@@ -1122,7 +1122,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
await wrapper.vm.$nextTick()
// "Parsing JSON..." in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(1).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
.to.equal('Parsing JSON...')
// After 1 second - loading indicator is shown
@@ -1188,7 +1188,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
await wrapper.vm.$nextTick()
// Parsing success in the logs
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg').at(2).text())
expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
.to.equal('Importing JSON into a SQLite database...')
// After 1 second - loading indicator is shown
@@ -1253,7 +1253,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
// Import success in the logs
const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
expect(logs).to.have.lengthOf(3)
expect(logs.at(2).text()).to.contain('Importing JSON into a SQLite database is completed in')
expect(logs[2].text()).to.contain('Importing JSON into a SQLite database is completed in')
// All the dialog controls are enabled
expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)

View File

@@ -5,19 +5,19 @@ import DelimiterSelector from '@/components/CsvJsonImport/DelimiterSelector'
describe('DelimiterSelector', async () => {
it('shows the name of value', async () => {
let wrapper = shallowMount(DelimiterSelector, {
propsData: { value: ',' }
props: { value: ',' }
})
expect(wrapper.find('input').element.value).to.equal(',')
expect(wrapper.find('.name').text()).to.equal('comma')
wrapper = shallowMount(DelimiterSelector, {
propsData: { value: '\t' }
props: { value: '\t' }
})
expect(wrapper.find('input').element.value).to.equal('\t')
expect(wrapper.find('.name').text()).to.equal('horizontal tab')
wrapper = shallowMount(DelimiterSelector, {
propsData: { value: '' }
props: { value: '' }
})
expect(wrapper.find('input').element.value).to.equal('')
expect(wrapper.find('.name').text()).to.equal('')
@@ -25,7 +25,7 @@ describe('DelimiterSelector', async () => {
it('clears the field', async () => {
const wrapper = mount(DelimiterSelector, {
propsData: { value: ',' }
props: { value: ',' }
})
await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
@@ -36,7 +36,7 @@ describe('DelimiterSelector', async () => {
it('changes value by typing', async () => {
const wrapper = shallowMount(DelimiterSelector, {
propsData: { value: ',' }
props: { value: ',' }
})
await wrapper.find('input').setValue(';')
@@ -46,7 +46,7 @@ describe('DelimiterSelector', async () => {
it('changes value by selection from the list', async () => {
const wrapper = mount(DelimiterSelector, {
propsData: { value: '|' }
props: { value: '|' }
})
await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
@@ -59,7 +59,7 @@ describe('DelimiterSelector', async () => {
it("doesn't change value when becomes empty", async () => {
const wrapper = mount(DelimiterSelector, {
propsData: { value: '|' }
props: { value: '|' }
})
await wrapper.find('input').setValue('')
@@ -72,18 +72,18 @@ describe('DelimiterSelector', async () => {
const wrapper = mount(DelimiterSelector, {
attachTo: place,
propsData: { value: '|' }
props: { value: '|' }
})
await wrapper.find('.name').trigger('click')
expect(wrapper.find('input').element).to.equal(document.activeElement)
place.remove()
wrapper.destroy()
wrapper.unmount()
})
it('disabled', async () => {
const wrapper = mount(DelimiterSelector, {
propsData: { value: '|', disabled: true }
props: { value: '|', disabled: true }
})
await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
@@ -97,7 +97,7 @@ describe('DelimiterSelector', async () => {
it('has filled class when input is not empty', async () => {
const wrapper = shallowMount(DelimiterSelector, {
propsData: { value: ',' }
props: { value: ',' }
})
await wrapper.vm.$nextTick()
expect(wrapper.find('input').classes()).to.include('filled')

View File

@@ -48,8 +48,10 @@ describe('DbUploader.vue', () => {
const wrapper = shallowMount(DbUploader, {
attachTo: place,
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})
@@ -60,7 +62,7 @@ describe('DbUploader.vue', () => {
await wrapper.vm.animationPromise
await wrapper.vm.$nextTick()
expect($router.push.calledOnceWith('/workspace')).to.equal(true)
wrapper.destroy()
wrapper.unmount()
})
it('loads db on drop and redirects to /workspace', async () => {
@@ -78,8 +80,10 @@ describe('DbUploader.vue', () => {
const wrapper = shallowMount(DbUploader, {
attachTo: place,
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})
@@ -98,7 +102,7 @@ describe('DbUploader.vue', () => {
await wrapper.vm.animationPromise
await wrapper.vm.$nextTick()
expect($router.push.calledOnceWith('/workspace')).to.equal(true)
wrapper.destroy()
wrapper.unmount()
})
it("doesn't redirect if already on /workspace", async () => {
@@ -120,8 +124,10 @@ describe('DbUploader.vue', () => {
const wrapper = shallowMount(DbUploader, {
attachTo: place,
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})
@@ -131,7 +137,7 @@ describe('DbUploader.vue', () => {
await wrapper.vm.animationPromise
await wrapper.vm.$nextTick()
expect($router.push.called).to.equal(false)
wrapper.destroy()
wrapper.unmount()
})
it('shows parse dialog if gets csv file', async () => {
@@ -147,8 +153,10 @@ describe('DbUploader.vue', () => {
const wrapper = mount(DbUploader, {
attachTo: place,
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})
@@ -165,7 +173,7 @@ describe('DbUploader.vue', () => {
expect(CsvImport.preview.calledOnce).to.equal(true)
await wrapper.vm.$nextTick()
expect(CsvImport.open.calledOnce).to.equal(true)
wrapper.destroy()
wrapper.unmount()
})
it('shows parse dialog if gets json file', async () => {
@@ -181,8 +189,10 @@ describe('DbUploader.vue', () => {
const wrapper = mount(DbUploader, {
attachTo: place,
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})
@@ -199,7 +209,7 @@ describe('DbUploader.vue', () => {
expect(JsonImport.preview.calledOnce).to.equal(true)
await wrapper.vm.$nextTick()
expect(JsonImport.open.calledOnce).to.equal(true)
wrapper.destroy()
wrapper.unmount()
})
it('shows parse dialog if gets ndjson file', async () => {
@@ -215,8 +225,10 @@ describe('DbUploader.vue', () => {
const wrapper = mount(DbUploader, {
attachTo: place,
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})
@@ -233,7 +245,7 @@ describe('DbUploader.vue', () => {
expect(JsonImport.preview.calledOnce).to.equal(true)
await wrapper.vm.$nextTick()
expect(JsonImport.open.calledOnce).to.equal(true)
wrapper.destroy()
wrapper.unmount()
})
it('deletes temporary db if import is canceled', async () => {
@@ -248,8 +260,10 @@ describe('DbUploader.vue', () => {
// mount the component
const wrapper = mount(DbUploader, {
store,
mocks: { $router, $route },
propsData: {
global: {
mocks: { $router, $route }
},
props: {
type: 'illustrated'
}
})

View File

@@ -5,7 +5,7 @@ import LoadingIndicator from '@/components/LoadingIndicator'
describe('LoadingIndicator.vue', () => {
it('Calculates animation class', async () => {
const wrapper = shallowMount(LoadingIndicator, {
propsData: { progress: 0 }
props: { progress: 0 }
})
expect(wrapper.find('svg').classes()).to.contain('progress')
await wrapper.setProps({ progress: undefined })
@@ -15,7 +15,7 @@ describe('LoadingIndicator.vue', () => {
it('Calculates arc', async () => {
const wrapper = shallowMount(LoadingIndicator, {
propsData: { progress: 50 }
props: { progress: 50 }
})
// The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
// should be 25.12

View File

@@ -26,14 +26,14 @@ describe('Logs.vue', () => {
const viewHeight = containerHeight - 2 * borderWidth
const wrapper = shallowMount(Logs, {
attachTo: place,
propsData: { messages, style: `height: ${containerHeight}px` }
props: { messages, style: `height: ${containerHeight}px` }
})
await wrapper.vm.$nextTick()
const height = wrapper.find('.logs-container').element.scrollHeight
expect(wrapper.find('.logs-container').element.scrollTop)
.to.equal(height - viewHeight)
wrapper.destroy()
wrapper.unmount()
})
it('Scrolled to bottom when a message added', async () => {
@@ -49,7 +49,7 @@ describe('Logs.vue', () => {
const viewHeight = containerHeight - 2 * borderWidth
const wrapper = shallowMount(Logs, {
attachTo: place,
propsData: { messages, style: `height: ${containerHeight}px` }
props: { messages, style: `height: ${containerHeight}px` }
})
await wrapper.vm.$nextTick()
@@ -60,7 +60,7 @@ describe('Logs.vue', () => {
const height = wrapper.find('.logs-container').element.scrollHeight
expect(wrapper.find('.logs-container').element.scrollTop)
.to.equal(height - viewHeight)
wrapper.destroy()
wrapper.unmount()
})
it('Serializes messages', async () => {
@@ -72,13 +72,13 @@ describe('Logs.vue', () => {
]
const wrapper = shallowMount(Logs, {
propsData: { messages }
props: { messages }
})
const logs = wrapper.findAll('.msg')
expect(logs.at(0).text()).to.equal('Error in row 0. msg 1. Try again later.')
expect(logs.at(1).text()).to.equal('Error in row 2. msg 2!')
expect(logs.at(2).text()).to.equal('msg 3? Be happy!')
expect(logs.at(3).text()).to.equal('msg 4.')
expect(logs[0].text()).to.equal('Error in row 0. msg 1. Try again later.')
expect(logs[1].text()).to.equal('Error in row 2. msg 2!')
expect(logs[2].text()).to.equal('msg 3? Be happy!')
expect(logs[3].text()).to.equal('msg 4.')
})
})

View File

@@ -10,15 +10,15 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 60, max: 100 },
after: { size: 40, max: 100 }
}
})
expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
})
it('renders correctly - horizontal', () => {
@@ -28,7 +28,7 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 60, max: 100 },
after: { size: 40, max: 100 },
horizontal: true
@@ -36,8 +36,8 @@ describe('Splitpanes.vue', () => {
})
expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.height).to.equal('40%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.height).to.equal('40%')
})
it('toggles correctly - no maximized initially', async () => {
@@ -47,27 +47,27 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 60, max: 100 },
after: { size: 40, max: 100 }
}
})
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
await wrapper.findAll('.toggle-btn').at(1).trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
await wrapper.findAll('.toggle-btn')[1].trigger('click')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
})
it('toggles correctly - with maximized initially', async () => {
@@ -77,7 +77,7 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 0, max: 100 },
after: { size: 100, max: 100 },
default: { before: 20, after: 80 }
@@ -85,47 +85,47 @@ describe('Splitpanes.vue', () => {
})
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('20%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('80%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('20%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('80%')
await wrapper.findAll('.toggle-btn').at(0).trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
await wrapper.findAll('.toggle-btn')[0].trigger('click')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('20%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('80%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('20%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('80%')
await wrapper.findAll('.toggle-btn').at(1).trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
await wrapper.findAll('.toggle-btn')[1].trigger('click')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
wrapper = shallowMount(Splitpanes, {
slots: {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 100, max: 100 },
after: { size: 0, max: 100 }
}
})
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('50%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('50%')
await wrapper.findAll('.toggle-btn').at(0).trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
await wrapper.findAll('.toggle-btn')[0].trigger('click')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
await wrapper.find('.toggle-btn').trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('50%')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('50%')
await wrapper.findAll('.toggle-btn').at(1).trigger('click')
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
await wrapper.findAll('.toggle-btn')[1].trigger('click')
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
})
it('drag - vertical', async () => {
@@ -143,7 +143,7 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 60, max: 100 },
after: { size: 40, max: 100 }
}
@@ -156,8 +156,8 @@ describe('Splitpanes.vue', () => {
}))
document.dispatchEvent(new MouseEvent('mouseup'))
await wrapper.vm.$nextTick()
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
wrapper.destroy()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
wrapper.unmount()
root.remove()
})
@@ -176,7 +176,7 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 10, max: 100 },
after: { size: 90, max: 100 },
horizontal: true
@@ -190,8 +190,8 @@ describe('Splitpanes.vue', () => {
}))
document.dispatchEvent(new MouseEvent('mouseup'))
await wrapper.vm.$nextTick()
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
wrapper.destroy()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
wrapper.unmount()
root.remove()
})
@@ -210,7 +210,7 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 10, max: 100 },
after: { size: 90, max: 100 },
horizontal: true
@@ -230,8 +230,8 @@ describe('Splitpanes.vue', () => {
document.dispatchEvent(event)
document.dispatchEvent(new MouseEvent('touchend'))
await wrapper.vm.$nextTick()
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
wrapper.destroy()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
wrapper.unmount()
root.remove()
delete window.ontouchstart
})
@@ -251,7 +251,7 @@ describe('Splitpanes.vue', () => {
leftPane: '<div />',
rightPane: '<div />'
},
propsData: {
props: {
before: { size: 60, max: 100 },
after: { size: 40, max: 100 }
}
@@ -270,8 +270,8 @@ describe('Splitpanes.vue', () => {
document.dispatchEvent(event)
document.dispatchEvent(new MouseEvent('touchend'))
await wrapper.vm.$nextTick()
expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
wrapper.destroy()
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
wrapper.unmount()
root.remove()
delete window.ontouchstart
})

View File

@@ -10,7 +10,7 @@ describe('Pager.vue', () => {
it('emits input event with a page', async () => {
const wrapper = mount(Pager, {
propsData: {
props: {
pageCount: 5
}
})
@@ -20,13 +20,13 @@ describe('Pager.vue', () => {
expect(wrapper.emitted('input')[0]).to.eql([2])
// click on the link to page 3 (it has index 2)
await wrapper.findAll('.paginator-page-link').at(2).trigger('click')
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, {
propsData: {
props: {
pageCount: 5
}
})