zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

fix tests

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

293
tests/views/Main/Inquiries/Inquiries.spec.js
View File

@@ -1,14 +1,22 @@
import { expect } from 'chai'
import sinon from 'sinon'
import { mount, shallowMount } from '@vue/test-utils'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import Inquiries from '@/views/Main/Inquiries'
import storedInquiries from '@/lib/storedInquiries'
import mutations from '@/store/mutations'
import actions from '@/store/actions'
import fu from '@/lib/utils/fileIo'
import { nextTick } from 'vue'
describe('Inquiries.vue', () => {
let clock
beforeEach(() => {
clock = sinon.useFakeTimers()
})
afterEach(() => {
sinon.restore()
})
@@ -24,10 +32,15 @@ describe('Inquiries.vue', () => {
updatePredefinedInquiries: sinon.stub(),
setLoadingPredefinedInquiries: sinon.stub()
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, {
global: {
plugins: [store]
}
})
expect(wrapper.find('#start-guide').exists()).to.equal(true)
wrapper.unmount()
})
it('Renders the list of saved and predefined inquiries', async () => {
@@ -64,10 +77,13 @@ describe('Inquiries.vue', () => {
]
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, {
attachTo: document.body,
global: { plugins: [store] }
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('#start-guide').exists()).to.equal(false)
expect(wrapper.find('#toolbar-btns-import').isVisible()).to.equal(true)
@@ -82,6 +98,7 @@ describe('Inquiries.vue', () => {
expect(rows[1].findAll('td')[1].text()).to.equals('3 November 2020 20:57')
expect(rows[2].findAll('td')[0].text()).to.equals('bar')
expect(rows[2].findAll('td')[1].text()).to.equals('4 December 2020 19:53')
wrapper.unmount()
})
it('Filters the list of inquiries', async () => {
@@ -118,15 +135,20 @@ describe('Inquiries.vue', () => {
]
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, {
global: {
plugins: [store]
}
})
await wrapper.find('#toolbar-search input').setValue('OO')
await wrapper.vm.$nextTick()
await nextTick()
const rows = wrapper.findAll('tbody tr')
expect(rows).to.have.lengthOf(1)
expect(rows[0].findAll('td')[0].text()).to.equals('foo')
expect(rows[0].findAll('td')[1].text()).to.contains('3 November 2020 20:57')
wrapper.unmount()
})
it('Shows No found message when filter returns nothing', async () => {
@@ -163,14 +185,18 @@ describe('Inquiries.vue', () => {
]
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: { plugins: [store] }
})
await wrapper.find('#toolbar-search input').setValue('baz')
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('#inquiries-not-found').text()).to.equal('No inquiries found')
expect(wrapper.find('#start-guide').exists()).to.equal(false)
expect(wrapper.find('tbody').isVisible()).to.equal(false)
wrapper.unmount()
})
it('Predefined inquiry has a badge', async () => {
@@ -199,14 +225,19 @@ describe('Inquiries.vue', () => {
]
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, {
global: {
plugins: [store]
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
const rows = wrapper.findAll('tbody tr')
expect(rows[0].find('td .badge').exists()).to.equals(true)
expect(rows[1].find('td .badge').exists()).to.equals(false)
wrapper.unmount()
})
it('Exports one inquiry', async () => {
@@ -227,12 +258,13 @@ describe('Inquiries.vue', () => {
]
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.findComponent({ name: 'ExportIcon' }).find('svg').trigger('click')
expect(fu.exportToFile.calledOnceWith('I am a serialized inquiry', 'foo.json')).to.equals(true)
wrapper.unmount()
})
it('Duplicates an inquiry', async () => {
@@ -259,11 +291,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [inquiryInStorage]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
expect(storedInquiries.duplicateInquiry.calledOnceWith(inquiryInStorage)).to.equals(true)
@@ -273,6 +305,7 @@ describe('Inquiries.vue', () => {
expect(rows[1].findAll('td')[0].text()).to.equals('foo copy')
expect(rows[1].findAll('td')[1].text()).to.contains('3 December 2020 20:57')
expect(state.inquiries).to.eql([inquiryInStorage, newInquiry])
wrapper.unmount()
})
it('The copy of the inquiry is not selected if all inquiries were selected before duplication',
@@ -299,11 +332,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [inquiryInStorage]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
.trigger('click')
await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
@@ -311,6 +344,7 @@ describe('Inquiries.vue', () => {
const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
expect(checkboxes[0].vm.checked).to.equals(true)
expect(checkboxes[1].vm.checked).to.equals(false)
wrapper.unmount()
})
it('Opens an inquiry', async () => {
@@ -332,23 +366,25 @@ describe('Inquiries.vue', () => {
const actions = { addTab: sinon.stub().resolves(1) }
sinon.spy(mutations, 'setCurrentTabId')
const $router = { push: sinon.stub() }
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, {
store,
global: {
mocks: { $router }
mocks: { $router },
plugins: [store]
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.find('tbody tr').trigger('click')
await clock.tick(0)
expect(actions.addTab.calledOnce).to.equals(true)
expect(actions.addTab.getCall(0).args[1]).to.equals(inquiryInStorage)
expect(actions.addTab.getCall(0).args[1]).to.eql(inquiryInStorage)
await actions.addTab.returnValues[0]
expect(mutations.setCurrentTabId.calledOnceWith(state, 1)).to.equals(true)
expect($router.push.calledOnceWith('/workspace')).to.equals(true)
wrapper.unmount()
})
it('Rename is not available for predefined inquiries', async () => {
@@ -367,12 +403,13 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: []
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.findComponent({ name: 'RenameIcon' }).exists()).to.equals(false)
wrapper.unmount()
})
it('Renames an inquiry', async () => {
@@ -392,17 +429,24 @@ describe('Inquiries.vue', () => {
}
]
}
const store = new Vuex.Store({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: {
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// click Rename icon in the grid
await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
// check that rename dialog is open
expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Rename inquiry')
// check that input is filled by the current inquiry name
expect(wrapper.find('.dialog-body input').element.value).to.equals('foo')
@@ -412,10 +456,10 @@ describe('Inquiries.vue', () => {
// find Rename in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Rename')
.trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
// check that the name in the grid is changed
expect(wrapper.find('tbody tr td').text()).to.equals('bar')
@@ -434,7 +478,9 @@ describe('Inquiries.vue', () => {
expect(state.tabs[0].name).to.equals('bar')
// check that rename dialog is closed
expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Shows an error if try to rename to empty string', async () => {
@@ -454,11 +500,17 @@ describe('Inquiries.vue', () => {
}
]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: {
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// click Rename icon in the grid
await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
@@ -468,14 +520,16 @@ describe('Inquiries.vue', () => {
// find Rename in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Rename')
.trigger('click')
expect(wrapper.find('.dialog-body .text-field-error').text())
.to.equals("Inquiry name can't be empty")
// check that rename dialog is still open
expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(true)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
wrapper.unmount()
})
it('Imports inquiries', async () => {
@@ -502,11 +556,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [inquiryInStorage]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = shallowMount(Inquiries, { store })
const wrapper = shallowMount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// click Import
await wrapper.find('#toolbar-btns-import').trigger('click')
@@ -516,6 +570,7 @@ describe('Inquiries.vue', () => {
expect(rows[1].findAll('td')[0].text()).to.equals('bar')
expect(rows[1].findAll('td')[1].text()).to.equals('3 December 2020 20:57')
expect(state.inquiries).to.eql([inquiryInStorage, importedInquiry])
wrapper.unmount()
})
it('Imported inquiries are not selected if master check box was checked', async () => {
@@ -542,11 +597,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [inquiryInStorage]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// click on master checkbox
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
@@ -559,6 +614,7 @@ describe('Inquiries.vue', () => {
expect(wrapper.findComponent({ ref: 'mainCheckBox' }).vm.checked).to.equals(false)
expect(checkboxes[0].vm.checked).to.equals(true)
expect(checkboxes[1].vm.checked).to.equals(false)
wrapper.unmount()
})
it('Deletion is not available for predefined inquiries', async () => {
@@ -577,12 +633,13 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: []
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.findComponent({ name: 'DeleteIcon' }).exists()).to.equals(false)
wrapper.unmount()
})
it('Delete an inquiry', async () => {
@@ -610,23 +667,31 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [foo, bar]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: {
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// click Delete icon in the first row of the grid
await wrapper.findComponent({ name: 'DeleteIcon' }).find('svg').trigger('click')
// check that delete dialog is open
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Delete inquiry')
// check the message in the dialog
expect(wrapper.find('.dialog-body').text()).to.contains('"foo"?')
// find Delete in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Delete')
.trigger('click')
@@ -642,7 +707,9 @@ describe('Inquiries.vue', () => {
expect(state.inquiries).to.eql([bar])
// check that delete dialog is closed
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Group operations are available when there are checked rows', async () => {
@@ -670,11 +737,14 @@ describe('Inquiries.vue', () => {
}
]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: { plugins: [store] }
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(false)
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(false)
@@ -695,6 +765,7 @@ describe('Inquiries.vue', () => {
await rows[0].find('.checkbox-container').trigger('click')
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(true)
wrapper.unmount()
})
it('Exports a group of inquiries', async () => {
@@ -730,11 +801,11 @@ describe('Inquiries.vue', () => {
createdAt: '2020-03-08T19:57:56.299Z'
}]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
const rows = wrapper.findAll('tbody tr')
@@ -751,6 +822,7 @@ describe('Inquiries.vue', () => {
expect(
fu.exportToFile.calledOnceWith('I am a serialized inquiries', 'My sqliteviz inquiries.json')
).to.equals(true)
wrapper.unmount()
})
it('Exports all inquiries', async () => {
@@ -779,11 +851,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [inquiryInStore]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
.trigger('click')
@@ -797,6 +869,7 @@ describe('Inquiries.vue', () => {
expect(
fu.exportToFile.calledOnceWith('I am a serialized inquiries', 'My sqliteviz inquiries.json')
).to.equals(true)
wrapper.unmount()
})
it('Deletes a group of inquiries', async () => {
@@ -841,11 +914,17 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [foo, bar, baz]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: {
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
const rows = wrapper.findAll('tbody tr')
@@ -856,7 +935,7 @@ describe('Inquiries.vue', () => {
await wrapper.find('#toolbar-btns-delete').trigger('click')
// check that delete dialog is open
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
// check the message in the dialog
expect(wrapper.find('.dialog-body').text())
@@ -864,7 +943,7 @@ describe('Inquiries.vue', () => {
// find Delete in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Delete')
.trigger('click')
@@ -882,7 +961,9 @@ describe('Inquiries.vue', () => {
expect(state.inquiries).to.eql([baz])
// check that delete dialog is closed
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Ignores predefined inquiries during deletion', async () => {
@@ -918,11 +999,17 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [foo, bar]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: {
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
const rows = wrapper.findAll('tbody tr')
@@ -933,7 +1020,7 @@ describe('Inquiries.vue', () => {
await wrapper.find('#toolbar-btns-delete').trigger('click')
// check that delete dialog is open
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
// check the message in the dialog
expect(wrapper.find('.dialog-body').text())
@@ -943,7 +1030,7 @@ describe('Inquiries.vue', () => {
// find Delete in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Delete')
.trigger('click')
@@ -956,7 +1043,9 @@ describe('Inquiries.vue', () => {
expect(state.inquiries).to.eql([bar])
// check that delete dialog is closed
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Deletes all inquiries ignoring predefined ones', async () => {
@@ -992,11 +1081,17 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [foo, bar]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, {
attachTo: document.body,
global: {
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
.trigger('click')
@@ -1004,7 +1099,7 @@ describe('Inquiries.vue', () => {
await wrapper.find('#toolbar-btns-delete').trigger('click')
// check that delete dialog is open
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
// check the message in the dialog
expect(wrapper.find('.dialog-body').text())
@@ -1014,7 +1109,7 @@ describe('Inquiries.vue', () => {
// find Delete in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Delete')
.trigger('click')
@@ -1026,7 +1121,9 @@ describe('Inquiries.vue', () => {
expect(state.inquiries).to.eql([])
// check that delete dialog is closed
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Main checkbox', async () => {
@@ -1052,11 +1149,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [foo, bar]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
const mainCheckBox = wrapper.findComponent({ ref: 'mainCheckBox' })
// Select all with main checkbox
@@ -1076,6 +1173,7 @@ describe('Inquiries.vue', () => {
await mainCheckBox.find('.checkbox-container').trigger('click')
expect(checkboxes[0].vm.checked).to.equals(false)
expect(checkboxes[0].vm.checked).to.equals(false)
wrapper.unmount()
})
it('Selection and filter', async () => {
@@ -1110,11 +1208,11 @@ describe('Inquiries.vue', () => {
predefinedInquiries: [],
inquiries: [foo, bar]
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const wrapper = mount(Inquiries, { store })
const wrapper = mount(Inquiries, { global: { plugins: [store] } })
await storedInquiries.readPredefinedInquiries.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
const mainCheckBox = wrapper.findComponent({ ref: 'mainCheckBox' })
// Select all with main checkbox
@@ -1128,7 +1226,7 @@ describe('Inquiries.vue', () => {
// Filter
await wrapper.find('#toolbar-search input').setValue('foo')
await wrapper.vm.$nextTick()
await nextTick()
expect([...wrapper.vm.selectedInquiriesIds]).to.eql([1])
expect(wrapper.vm.selectedNotPredefinedCount).to.eql(1)
checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
@@ -1136,7 +1234,7 @@ describe('Inquiries.vue', () => {
// Clear filter
await wrapper.find('#toolbar-search input').setValue('')
await wrapper.vm.$nextTick()
await nextTick()
expect([...wrapper.vm.selectedInquiriesIds]).to.eql([1])
expect(wrapper.vm.selectedNotPredefinedCount).to.eql(1)
checkboxes = wrapper.findAll('tr .checkbox-container')
@@ -1151,7 +1249,7 @@ describe('Inquiries.vue', () => {
// Filter
await wrapper.find('#toolbar-search input').setValue('hello')
await wrapper.vm.$nextTick()
await nextTick()
expect([...wrapper.vm.selectedInquiriesIds]).to.eql([0])
expect(wrapper.vm.selectedNotPredefinedCount).to.eql(0)
checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
@@ -1162,7 +1260,8 @@ describe('Inquiries.vue', () => {
// Clear filter - main checkbox bocomes not checked
await wrapper.find('#toolbar-search input').setValue('')
await wrapper.vm.$nextTick()
await nextTick()
expect(mainCheckBox.vm.checked).to.equals(false)
wrapper.unmount()
})
})

214
tests/views/Main/MainMenu.spec.js
View File

@@ -1,13 +1,23 @@
import { expect } from 'chai'
import sinon from 'sinon'
import { mount, shallowMount, DOMWrapper } from '@vue/test-utils'
import Vuex from 'vuex'
import { mount, shallowMount } from '@vue/test-utils'
import { createStore } from 'vuex'
import MainMenu from '@/views/Main/MainMenu'
import storedInquiries from '@/lib/storedInquiries'
import { nextTick } from 'vue'
import eventBus from '@/lib/eventBus'
let wrapper = null
describe('MainMenu.vue', () => {
let clock
beforeEach(() => {
clock = sinon.useFakeTimers()
sinon.spy(eventBus, '$emit')
sinon.spy(eventBus, '$off')
})
afterEach(() => {
sinon.restore()
@@ -22,22 +32,33 @@ describe('MainMenu.vue', () => {
tabs: [{}],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
// mount the component
// mount the component on workspace
wrapper = shallowMount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
expect(wrapper.find('#save-btn').exists()).to.equal(true)
expect(wrapper.find('#save-btn').isVisible()).to.equal(true)
expect(wrapper.find('#create-btn').exists()).to.equal(true)
expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
wrapper.unmount()
await wrapper.vm.$set(wrapper.vm.$route, 'path', '/inquiries')
$route.path = '/inquiries'
// mount the component on inquiries
wrapper = shallowMount(MainMenu, {
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link'],
plugins: [store]
}
})
expect(wrapper.find('#save-btn').exists()).to.equal(true)
expect(wrapper.find('#save-btn').isVisible()).to.equal(false)
expect(wrapper.find('#create-btn').exists()).to.equal(true)
@@ -50,13 +71,14 @@ describe('MainMenu.vue', () => {
tabs: [],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
wrapper = shallowMount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
expect(wrapper.find('#save-btn').exists()).to.equal(true)
@@ -77,20 +99,20 @@ describe('MainMenu.vue', () => {
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
const vm = wrapper.vm
expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
await vm.$set(state.tabs[0], 'isSaved', true)
store.state.tabs[0].isSaved = true
await vm.$nextTick()
expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
})
@@ -113,15 +135,15 @@ describe('MainMenu.vue', () => {
const mutations = {
setCurrentTabId: sinon.stub()
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/workspace' }
const $router = { push: sinon.stub() }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route, $router },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -150,15 +172,15 @@ describe('MainMenu.vue', () => {
const mutations = {
setCurrentTabId: sinon.stub()
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/inquiries' }
const $router = { push: sinon.stub() }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route, $router },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -181,15 +203,15 @@ describe('MainMenu.vue', () => {
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
const $router = { push: sinon.stub() }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route, $router },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -202,15 +224,15 @@ describe('MainMenu.vue', () => {
expect(state.currentTab.execute.calledTwice).to.equal(true)
// Running is disabled and route path is workspace
await wrapper.vm.$set(state, 'db', null)
store.state.db = null
document.dispatchEvent(ctrlR)
expect(state.currentTab.execute.calledTwice).to.equal(true)
document.dispatchEvent(metaR)
expect(state.currentTab.execute.calledTwice).to.equal(true)
// Running is enabled and route path is not workspace
await wrapper.vm.$set(state, 'db', {})
await wrapper.vm.$set($route, 'path', '/inquiries')
state.db = {}
wrapper.vm.$route.path = '/inquiries'
document.dispatchEvent(ctrlR)
expect(state.currentTab.execute.calledTwice).to.equal(true)
document.dispatchEvent(metaR)
@@ -229,15 +251,15 @@ describe('MainMenu.vue', () => {
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
const $router = { push: sinon.stub() }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route, $router },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -250,15 +272,15 @@ describe('MainMenu.vue', () => {
expect(state.currentTab.execute.calledTwice).to.equal(true)
// Running is disabled and route path is workspace
await wrapper.vm.$set(state, 'db', null)
store.state.db = null
document.dispatchEvent(ctrlEnter)
expect(state.currentTab.execute.calledTwice).to.equal(true)
document.dispatchEvent(metaEnter)
expect(state.currentTab.execute.calledTwice).to.equal(true)
// Running is enabled and route path is not workspace
await wrapper.vm.$set(state, 'db', {})
await wrapper.vm.$set($route, 'path', '/inquiries')
store.state.db = {}
wrapper.vm.$route.path = '/inquiries'
document.dispatchEvent(ctrlEnter)
expect(state.currentTab.execute.calledTwice).to.equal(true)
document.dispatchEvent(metaEnter)
@@ -276,14 +298,14 @@ describe('MainMenu.vue', () => {
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
sinon.stub(wrapper.vm, 'createNewInquiry')
@@ -295,7 +317,7 @@ describe('MainMenu.vue', () => {
document.dispatchEvent(metaB)
expect(wrapper.vm.createNewInquiry.calledTwice).to.equal(true)
await wrapper.vm.$set($route, 'path', '/inquiries')
wrapper.vm.$route.path = '/inquiries'
document.dispatchEvent(ctrlB)
expect(wrapper.vm.createNewInquiry.calledThrice).to.equal(true)
document.dispatchEvent(metaB)
@@ -314,14 +336,14 @@ describe('MainMenu.vue', () => {
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const $route = { path: '/workspace' }
wrapper = shallowMount(MainMenu, {
store,
global: {
mocks: { $route },
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
@@ -335,15 +357,15 @@ describe('MainMenu.vue', () => {
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
// tab is saved and route is /workspace
await wrapper.vm.$set(state.tabs[0], 'isSaved', true)
store.state.tabs[0].isSaved = true
document.dispatchEvent(ctrlS)
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
document.dispatchEvent(metaS)
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
// tab is unsaved and route is not /workspace
await wrapper.vm.$set($route, 'path', '/inquiries')
await wrapper.vm.$set(state.tabs[0], 'isSaved', false)
wrapper.vm.$route.path = '/inquiries'
store.state.tabs[0].isSaved = false
document.dispatchEvent(ctrlS)
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
document.dispatchEvent(metaS)
@@ -376,22 +398,26 @@ describe('MainMenu.vue', () => {
viewOptions: []
})
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/workspace' }
sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
wrapper = mount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link', 'app-diagnostic-info']
stubs: {
'router-link': true, 'app-diagnostic-info': true,
teleport: true, transition: false
},
plugins: [store]
}
})
await wrapper.find('#save-btn').trigger('click')
// check that the dialog is closed
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// check that the inquiry was saved via saveInquiry (newName='')
expect(actions.saveInquiry.calledOnce).to.equal(true)
@@ -412,8 +438,8 @@ describe('MainMenu.vue', () => {
}
}))).to.equal(true)
// check that 'inquirySaved' event was triggered on $root
expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
// check that 'inquirySaved' event was triggered on eventBus
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
})
it('Shows en error when the new name is needed but not specifyied', async () => {
@@ -442,32 +468,39 @@ describe('MainMenu.vue', () => {
viewOptions: []
})
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/workspace' }
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
wrapper = mount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link', 'app-diagnostic-info']
stubs: {
'router-link': true, 'app-diagnostic-info': true,
teleport: true, transition: false
},
plugins: [store]
}
})
await wrapper.find('#save-btn').trigger('click')
// check that the dialog is open
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Save inquiry')
// find Save in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Save')
.trigger('click')
// check that we have an error message and dialog is still open
expect(wrapper.find('.text-field-error').text()).to.equal('Inquiry name can\'t be empty')
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
})
it('Saves the inquiry with a new name', async () => {
@@ -496,36 +529,43 @@ describe('MainMenu.vue', () => {
viewOptions: []
})
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/workspace' }
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
wrapper = mount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link', 'app-diagnostic-info']
stubs: {
'router-link': true, 'app-diagnostic-info': true,
teleport: true, transition: false
},
plugins: [store]
}
})
await wrapper.find('#save-btn').trigger('click')
// check that the dialog is open
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Save inquiry')
// enter the new name
await wrapper.find('.dialog-body input').setValue('foo')
// find Save in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Save')
.trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
// check that the dialog is closed
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// check that the inquiry was saved via saveInquiry (newName='foo')
expect(actions.saveInquiry.calledOnce).to.equal(true)
@@ -547,8 +587,8 @@ describe('MainMenu.vue', () => {
}
}))).to.equal(true)
// check that 'inquirySaved' event was triggered on $root
expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
// check that 'inquirySaved' event was triggered on eventBus
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
})
it('Saves a predefined inquiry with a new name', async () => {
@@ -586,22 +626,28 @@ describe('MainMenu.vue', () => {
viewOptions: []
})
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/workspace' }
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
wrapper = mount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link', 'app-diagnostic-info']
stubs: {
'router-link': true, 'app-diagnostic-info': true,
teleport: true, transition: false
},
plugins: [store]
}
})
await wrapper.find('#save-btn').trigger('click')
// check that the dialog is open
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Save inquiry')
// check that save-note is visible (save-note is an explanation why do we need a new name)
expect(wrapper.find('#save-note').isVisible()).to.equal(true)
@@ -611,14 +657,15 @@ describe('MainMenu.vue', () => {
// find Save in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Save')
.trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
// check that the dialog is closed
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// check that the inquiry was saved via saveInquiry (newName='bar')
expect(actions.saveInquiry.calledOnce).to.equal(true)
@@ -640,8 +687,8 @@ describe('MainMenu.vue', () => {
}
}))).to.equal(true)
// check that 'inquirySaved' event was triggered on $root
expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
// check that 'inquirySaved' event was triggered on eventBus
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
// We saved predefined inquiry, so the tab will be created again
// (because of new id) and it will be without sql result and has default view - table.
@@ -682,31 +729,38 @@ describe('MainMenu.vue', () => {
chart: []
})
}
const store = new Vuex.Store({ state, mutations, actions })
const store = createStore({ state, mutations, actions })
const $route = { path: '/workspace' }
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
wrapper = mount(MainMenu, {
store,
attachTo: document.body,
global: {
mocks: { $route },
stubs: ['router-link', 'app-diagnostic-info']
stubs: {
'router-link': true, 'app-diagnostic-info': true,
teleport: true, transition: false
},
plugins: [store]
}
})
await wrapper.find('#save-btn').trigger('click')
// check that the dialog is open
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Save inquiry')
// find Cancel in the dialog and click
await wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Cancel')
.trigger('click')
// check that the dialog is closed
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// check that the inquiry was not saved via storedInquiries.save
expect(actions.saveInquiry.called).to.equal(false)
@@ -714,7 +768,7 @@ describe('MainMenu.vue', () => {
// check that the tab was not updated
expect(mutations.updateTab.called).to.equal(false)
// check that 'inquirySaved' event is not listened on $root
expect(wrapper.vm.$root.$listeners).to.not.have.property('inquirySaved')
// check that 'inquirySaved' event is not listened on eventBus
expect(eventBus.$off.calledOnceWith('inquirySaved')).to.equal(true)
})
})

29
tests/views/Main/Workspace/Schema/Schema.spec.js
View File

@@ -9,8 +9,16 @@ import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
import database from '@/lib/database'
import fIo from '@/lib/utils/fileIo'
import csv from '@/lib/csv'
import { nextTick } from 'vue'
describe('Schema.vue', () => {
let clock
beforeEach(() => {
clock = sinon.useFakeTimers()
})
afterEach(() => {
sinon.restore()
})
@@ -34,6 +42,7 @@ describe('Schema.vue', () => {
// check DB name and schema visibility
expect(wrapper.find('.db-name').text()).to.equal('fooDB')
expect(wrapper.find('.schema').isVisible()).to.equal(true)
wrapper.unmount()
})
it('Schema visibility is toggled when click on DB name', async () => {
@@ -47,6 +56,7 @@ describe('Schema.vue', () => {
// mout the component
const wrapper = mount(Schema, {
attachTo: document.body,
global: {
plugins: [store]
}
@@ -57,6 +67,7 @@ describe('Schema.vue', () => {
expect(wrapper.find('.schema').isVisible()).to.equal(false)
await wrapper.find('.db-name').trigger('click')
expect(wrapper.find('.schema').isVisible()).to.equal(true)
wrapper.unmount()
})
it('Schema filter', async () => {
@@ -117,6 +128,7 @@ describe('Schema.vue', () => {
expect(tables[0].vm.name).to.equal('foo')
expect(tables[1].vm.name).to.equal('bar')
expect(tables[2].vm.name).to.equal('foobar')
wrapper.unmount()
})
it('exports db', async () => {
@@ -135,6 +147,7 @@ describe('Schema.vue', () => {
await wrapper.findComponent({ name: 'export-icon' }).find('svg').trigger('click')
expect(state.db.export.calledOnceWith('fooDB'))
wrapper.unmount()
})
it('adds table', async () => {
@@ -165,8 +178,10 @@ describe('Schema.vue', () => {
const store = createStore({ state, actions, mutations })
const wrapper = mount(Schema, {
attachTo: document.body,
global: {
plugins: [store]
plugins: [store],
stubs: { teleport: true, transition: false }
}
})
sinon.spy(wrapper.vm.$refs.addCsvJson, 'preview')
@@ -176,13 +191,16 @@ describe('Schema.vue', () => {
await wrapper.findComponent({ name: 'add-table-icon' }).find('svg').trigger('click')
await wrapper.vm.$refs.addCsvJson.preview.returnValues[0]
await wrapper.vm.addCsvJson.returnValues[0]
await wrapper.vm.$nextTick()
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.vfm .dialog-header').text())
.to.contain('CSV import')
await wrapper.find('#import-start').trigger('click')
await wrapper.vm.$refs.addCsvJson.loadToDb.returnValues[0]
await wrapper.find('#import-finish').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)
await state.db.refreshSchema.returnValues[0]
expect(wrapper.vm.$store.state.db.schema).to.eql([
@@ -195,5 +213,6 @@ describe('Schema.vue', () => {
col1: [1],
col2: ['foo']
})
wrapper.unmount()
})
})

2
tests/views/Main/Workspace/Schema/TableDescription.spec.js
View File

@@ -5,6 +5,7 @@ import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
describe('TableDescription.vue', () => {
it('Initially the columns are hidden and table name is rendered', () => {
const wrapper = shallowMount(TableDescription, {
attachTo: document.body,
props: {
name: 'Test table',
columns: [
@@ -15,6 +16,7 @@ describe('TableDescription.vue', () => {
})
expect(wrapper.find('.table-name').text()).to.equal('Test table')
expect(wrapper.find('.columns').isVisible()).to.equal(false)
wrapper.unmount()
})
it('Columns are visible and correct when click on table name', async () => {

10
tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js
View File

@@ -5,6 +5,7 @@ import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
import chartHelper from '@/lib/chartHelper'
import * as dereference from 'react-chart-editor/lib/lib/dereference'
import fIo from '@/lib/utils/fileIo'
import { nextTick } from 'vue'
describe('Chart.vue', () => {
afterEach(() => {
@@ -19,13 +20,15 @@ describe('Chart.vue', () => {
const chartData = vm.getOptionsForSave()
expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
expect(chartData).to.equal('result')
wrapper.unmount()
})
it('emits update when plotly updates', async () => {
// mount the component
const wrapper = mount(Chart)
wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('update')
expect(wrapper.emitted('update')).to.have.lengthOf(1)
wrapper.unmount()
})
it('calls dereference when dataSources is changed', async () => {
@@ -47,6 +50,7 @@ describe('Chart.vue', () => {
await wrapper.setProps({ dataSources: newDataSources })
expect(dereference.default.called).to.equal(true)
wrapper.unmount()
})
it("doesn't calls dereference when dataSources is null", async () => {
@@ -63,6 +67,7 @@ describe('Chart.vue', () => {
await wrapper.setProps({ dataSources: null })
expect(dereference.default.called).to.equal(false)
wrapper.unmount()
})
it('saveAsPng', async () => {
@@ -77,11 +82,12 @@ describe('Chart.vue', () => {
})
sinon.spy(wrapper.vm, 'prepareCopy')
await wrapper.vm.$nextTick() // chart is rendered
await nextTick() // chart is rendered
await wrapper.vm.saveAsPng()
const url = await wrapper.vm.prepareCopy.returnValues[0]
expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
expect(fIo.downloadFromUrl.calledOnceWith(url, 'chart'))
wrapper.unmount()
})
})

82
tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
View File

@@ -1,7 +1,8 @@
import { expect } from 'chai'
import { mount, DOMWrapper } from '@vue/test-utils'
import { mount } from '@vue/test-utils'
import DataView from '@/views/Main/Workspace/Tabs/Tab/DataView'
import sinon from 'sinon'
import { nextTick } from 'vue'
describe('DataView.vue', () => {
afterEach(() => {
@@ -11,10 +12,11 @@ describe('DataView.vue', () => {
it('emits update on mode changing', async () => {
const wrapper = mount(DataView)
const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
await pivotBtn.trigger('click')
expect(wrapper.emitted('update')).to.have.lengthOf(1)
wrapper.unmount()
})
it('method getOptionsForSave calls the same method of the current view component', async () => {
@@ -25,13 +27,14 @@ describe('DataView.vue', () => {
expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'chart_settings' })
const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
await pivotBtn.trigger('click')
const pivot = wrapper.findComponent({ name: 'pivot' }).vm
sinon.stub(pivot, 'getOptionsForSave').returns({ here_are: 'pivot_settings' })
expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'pivot_settings' })
wrapper.unmount()
})
it('method saveAsSvg calls the same method of the current view component', async () => {
@@ -42,12 +45,12 @@ describe('DataView.vue', () => {
sinon.spy(chart, 'saveAsSvg')
// Export to svg
const svgBtn = new DOMWrapper(wrapper.findComponent({ name: 'exportToSvgIcon' }).vm.$parent)
const svgBtn = wrapper.findComponent({ ref: 'svgExportBtn' })
await svgBtn.trigger('click')
expect(chart.saveAsSvg.calledOnce).to.equal(true)
// Switch to pivot
const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
await pivotBtn.trigger('click')
// Find pivot and spy the method
@@ -61,6 +64,7 @@ describe('DataView.vue', () => {
// Export to svg
await svgBtn.trigger('click')
expect(pivot.saveAsSvg.calledOnce).to.equal(true)
wrapper.unmount()
})
it('method saveAsHtml calls the same method of the current view component', async () => {
@@ -71,12 +75,12 @@ describe('DataView.vue', () => {
sinon.spy(chart, 'saveAsHtml')
// Export to html
const htmlBtn = new DOMWrapper(wrapper.findComponent({ name: 'htmlIcon' }).vm.$parent)
const htmlBtn = wrapper.findComponent({ ref: 'htmlExportBtn' })
await htmlBtn.trigger('click')
expect(chart.saveAsHtml.calledOnce).to.equal(true)
// Switch to pivot
const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
await pivotBtn.trigger('click')
// Find pivot and spy the method
@@ -86,6 +90,7 @@ describe('DataView.vue', () => {
// Export to svg
await htmlBtn.trigger('click')
expect(pivot.saveAsHtml.calledOnce).to.equal(true)
wrapper.unmount()
})
it('shows alert when ClipboardItem is not supported', async () => {
@@ -94,7 +99,7 @@ describe('DataView.vue', () => {
sinon.spy(window, 'alert')
const wrapper = mount(DataView)
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
expect(
@@ -106,35 +111,44 @@ describe('DataView.vue', () => {
).to.equal(true)
window.ClipboardItem = ClipboardItem
wrapper.unmount()
})
it('copy to clipboard more than 1 sec', async () => {
sinon.stub(window.navigator.clipboard, 'write').resolves()
const clock = sinon.useFakeTimers()
const wrapper = mount(DataView)
sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
clock.tick(5000)
const wrapper = mount(DataView, {
attachTo: document.body,
global: {
stubs: { teleport: true, transition: false }
}
})
sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
await clock.tick(5000)
})
// Click copy to clipboard
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
// The dialog is shown...
expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Copy to clipboard')
// ... with Rendering message...
expect(wrapper.find('.dialog-body').text()).to.equal('Rendering the visualisation...')
// Switch to microtasks (let prepareCopy run)
clock.tick(0)
await clock.tick(0)
// Wait untill prepareCopy is finished
await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
await nextTick()
// The dialog is shown...
expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
// ... with Ready message...
expect(wrapper.find('.dialog-body').text()).to.equal('Image is ready')
@@ -143,7 +157,9 @@ describe('DataView.vue', () => {
await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
// The dialog is not shown...
expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('copy to clipboard less than 1 sec', async () => {
@@ -151,52 +167,60 @@ describe('DataView.vue', () => {
const clock = sinon.useFakeTimers()
const wrapper = mount(DataView)
sinon.spy(wrapper.vm, 'copyToClipboard')
sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
clock.tick(500)
sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
await clock.tick(500)
})
// Click copy to clipboard
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
// Switch to microtasks (let prepareCopy run)
clock.tick(0)
await clock.tick(0)
// Wait untill prepareCopy is finished
await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// The dialog is not shown...
expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
// copyToClipboard is called
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
wrapper.unmount()
})
it('cancel long copy', async () => {
sinon.stub(window.navigator.clipboard, 'write').resolves()
const clock = sinon.useFakeTimers()
const wrapper = mount(DataView)
const wrapper = mount(DataView, {
attachTo: document.body,
global: {
stubs: { teleport: true, transition: false }
}
})
sinon.spy(wrapper.vm, 'copyToClipboard')
sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
clock.tick(5000)
sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
await clock.tick(5000)
})
// Click copy to clipboard
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
// Switch to microtasks (let prepareCopy run)
clock.tick(0)
await clock.tick(0)
// Wait untill prepareCopy is finished
await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
await wrapper.vm.$nextTick()
await nextTick()
// Click cancel
await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
// The dialog is not shown...
expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// copyToClipboard is not called
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
wrapper.unmount()
})
})

34
tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
View File

@@ -123,7 +123,7 @@ describe('Pivot.vue', () => {
}
})
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
await wrapper.findComponent({ name: 'pivotUi' }).setValue({
rows: ['year'],
cols: ['item'],
colOrder: 'value_a_to_z',
@@ -132,9 +132,10 @@ describe('Pivot.vue', () => {
aggregatorName: 'Count',
renderer: $.pivotUtilities.renderers.Table,
rendererName: 'Table',
rendererOptions: undefined,
vals: []
})
sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'getOptionsForSave')
.returns({ here_are: 'custom chart settings' })
let optionsForSave = wrapper.vm.getOptionsForSave()
@@ -147,7 +148,7 @@ describe('Pivot.vue', () => {
expect(optionsForSave.rendererOptions).to.equal(undefined)
expect(optionsForSave.vals).to.eql([])
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
await wrapper.findComponent({ name: 'pivotUi' }).setValue({
rows: ['item'],
cols: ['year'],
colOrder: 'value_a_to_z',
@@ -156,14 +157,6 @@ describe('Pivot.vue', () => {
aggregatorName: 'Count',
renderer: $.pivotUtilities.renderers['Custom chart'],
rendererName: 'Custom chart',
rendererOptions: {
customChartComponent: {
$mount: sinon.stub(),
getOptionsForSave () {
return { here_are: 'custom chart settings' }
}
}
},
vals: []
})
@@ -202,7 +195,10 @@ describe('Pivot.vue', () => {
expect(await wrapper.vm.prepareCopy()).to.be.instanceof(HTMLCanvasElement)
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'prepareCopy')
.returns(URL.createObjectURL(new Blob()))
await wrapper.findComponent({ name: 'pivotUi' }).setValue({
rows: ['item'],
cols: ['year'],
colOrder: 'value_a_to_z',
@@ -211,18 +207,12 @@ describe('Pivot.vue', () => {
aggregatorName: 'Count',
renderer: $.pivotUtilities.renderers['Custom chart'],
rendererName: 'Custom chart',
rendererOptions: {
customChartComponent: {
$mount: sinon.stub(),
prepareCopy: sinon.stub().returns(URL.createObjectURL(new Blob()))
}
},
vals: []
})
expect(await wrapper.vm.prepareCopy()).to.be.a('string')
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
await wrapper.findComponent({ name: 'pivotUi' }).setValue({
rows: ['item'],
cols: ['year'],
colOrder: 'value_a_to_z',
@@ -265,7 +255,7 @@ describe('Pivot.vue', () => {
attachTo: container
})
const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
sinon.stub(chartComponent, 'saveAsSvg')
await wrapper.vm.saveAsSvg()
@@ -300,7 +290,7 @@ describe('Pivot.vue', () => {
attachTo: container
})
const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
sinon.stub(chartComponent, 'saveAsHtml')
await wrapper.vm.saveAsHtml()
@@ -335,7 +325,7 @@ describe('Pivot.vue', () => {
attachTo: container
})
const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
sinon.stub(chartComponent, 'saveAsPng')
await wrapper.vm.saveAsPng()

19
tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
View File

@@ -4,18 +4,23 @@ import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi
describe('PivotSortBtn.vue', () => {
it('switches order', async () => {
const wrapper = shallowMount(PivotSortBtn, { props: { value: 'key_a_to_z' } })
const wrapper = shallowMount(PivotSortBtn, {
props: {
modelValue: 'key_a_to_z',
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
}
})
expect(wrapper.vm.value).to.equal('key_a_to_z')
expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
await wrapper.find('.pivot-sort-btn').trigger('click')
expect(wrapper.emitted('input')[0]).to.eql(['value_a_to_z'])
expect(wrapper.props('modelValue')).to.equal('value_a_to_z')
await wrapper.setProps({ value: 'value_a_to_z' })
await wrapper.setValue('value_a_to_z')
await wrapper.find('.pivot-sort-btn').trigger('click')
expect(wrapper.emitted('input')[1]).to.eql(['value_z_to_a'])
expect(wrapper.props('modelValue')).to.equal('value_z_to_a')
await wrapper.setProps({ value: 'value_z_to_a' })
await wrapper.setValue('value_z_to_a')
await wrapper.find('.pivot-sort-btn').trigger('click')
expect(wrapper.emitted('input')[2]).to.eql(['key_a_to_z'])
expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
})
})

157
tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
View File

@@ -6,7 +6,8 @@ describe('PivotUi.vue', () => {
it('returns value when settings changed', async () => {
const wrapper = mount(PivotUi, {
props: {
keyNames: ['foo', 'bar']
keyNames: ['foo', 'bar'],
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
}
})
@@ -15,68 +16,74 @@ describe('PivotUi.vue', () => {
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(1)
expect(wrapper.emitted().input[0][0].rows).to.eql([])
expect(wrapper.emitted().input[0][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[0][0].colOrder).to.equal('key_a_to_z')
expect(wrapper.emitted().input[0][0].rowOrder).to.equal('key_a_to_z')
expect(wrapper.emitted().input[0][0].aggregatorName).to.equal('Count')
expect(wrapper.emitted().input[0][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[0][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[0][0].vals).to.eql([])
let value = wrapper.props('modelValue')
expect(value.rows).to.eql([])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('key_a_to_z')
expect(value.rowOrder).to.equal('key_a_to_z')
expect(value.aggregatorName).to.equal('Count')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql([])
// choose rows
await wrapper.findAll('.sqliteviz-select.rows .multiselect__element > span')[0]
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(2)
expect(wrapper.emitted().input[1][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[1][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[1][0].colOrder).to.equal('key_a_to_z')
expect(wrapper.emitted().input[1][0].rowOrder).to.equal('key_a_to_z')
expect(wrapper.emitted().input[1][0].aggregatorName).to.equal('Count')
expect(wrapper.emitted().input[1][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[1][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[1][0].vals).to.eql([])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('key_a_to_z')
expect(value.rowOrder).to.equal('key_a_to_z')
expect(value.aggregatorName).to.equal('Count')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql([])
// change column order
await wrapper.find('.pivot-sort-btn.col').trigger('click')
expect(wrapper.emitted().update.length).to.equal(3)
expect(wrapper.emitted().input[2][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[2][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[2][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[2][0].rowOrder).to.equal('key_a_to_z')
expect(wrapper.emitted().input[2][0].aggregatorName).to.equal('Count')
expect(wrapper.emitted().input[2][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[2][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[2][0].vals).to.eql([])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('key_a_to_z')
expect(value.aggregatorName).to.equal('Count')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql([])
// change row order
await wrapper.find('.pivot-sort-btn.row').trigger('click')
expect(wrapper.emitted().update.length).to.equal(4)
expect(wrapper.emitted().input[3][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[3][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[3][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[3][0].rowOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[3][0].aggregatorName).to.equal('Count')
expect(wrapper.emitted().input[3][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[3][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[3][0].vals).to.eql([])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('value_a_to_z')
expect(value.aggregatorName).to.equal('Count')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql([])
// change aggregator
await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[12]
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(5)
expect(wrapper.emitted().input[4][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[4][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[4][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[4][0].rowOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[4][0].aggregatorName).to.equal('Sum over Sum')
expect(wrapper.emitted().input[4][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[4][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[4][0].vals).to.eql(['', ''])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('value_a_to_z')
expect(value.aggregatorName).to.equal('Sum over Sum')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql(['', ''])
// set first aggregator argument
await wrapper
@@ -85,14 +92,15 @@ describe('PivotUi.vue', () => {
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(6)
expect(wrapper.emitted().input[5][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[5][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[5][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[5][0].rowOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[5][0].aggregatorName).to.equal('Sum over Sum')
expect(wrapper.emitted().input[5][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[5][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[5][0].vals).to.eql(['foo', ''])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('value_a_to_z')
expect(value.aggregatorName).to.equal('Sum over Sum')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql(['foo', ''])
// set second aggregator argument
await wrapper
@@ -101,43 +109,42 @@ describe('PivotUi.vue', () => {
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(7)
expect(wrapper.emitted().input[6][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[6][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[6][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[6][0].rowOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[6][0].aggregatorName).to.equal('Sum over Sum')
expect(wrapper.emitted().input[6][0].rendererName).to.equal('Table')
expect(wrapper.emitted().input[6][0].rendererOptions).to.equal(undefined)
expect(wrapper.emitted().input[6][0].vals).to.eql(['foo', 'bar'])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('value_a_to_z')
expect(value.aggregatorName).to.equal('Sum over Sum')
expect(value.rendererName).to.equal('Table')
expect(value.rendererOptions).to.equal(undefined)
expect(value.vals).to.eql(['foo', 'bar'])
// change renderer
await wrapper.findAll('.sqliteviz-select.renderer .multiselect__element > span')[13]
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(8)
expect(wrapper.emitted().input[7][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[7][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[7][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[7][0].rowOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[7][0].aggregatorName).to.equal('Sum over Sum')
expect(wrapper.emitted().input[7][0].rendererName).to.equal('Custom chart')
expect(wrapper.emitted().input[7][0].rendererOptions.customChartComponent)
.to.not.equal(undefined)
expect(wrapper.emitted().input[7][0].vals).to.eql(['foo', 'bar'])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('value_a_to_z')
expect(value.aggregatorName).to.equal('Sum over Sum')
expect(value.rendererName).to.equal('Custom chart')
expect(value.vals).to.eql(['foo', 'bar'])
// change aggregator again
await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[3]
.trigger('click')
expect(wrapper.emitted().update.length).to.equal(9)
expect(wrapper.emitted().input[8][0].rows).to.eql(['bar'])
expect(wrapper.emitted().input[8][0].cols).to.eql(['foo'])
expect(wrapper.emitted().input[8][0].colOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[8][0].rowOrder).to.equal('value_a_to_z')
expect(wrapper.emitted().input[8][0].aggregatorName).to.equal('Sum')
expect(wrapper.emitted().input[8][0].rendererName).to.equal('Custom chart')
expect(wrapper.emitted().input[8][0].rendererOptions.customChartComponent)
.to.not.equal(undefined)
expect(wrapper.emitted().input[8][0].vals).to.eql(['foo'])
value = wrapper.props('modelValue')
expect(value.rows).to.eql(['bar'])
expect(value.cols).to.eql(['foo'])
expect(value.colOrder).to.equal('value_a_to_z')
expect(value.rowOrder).to.equal('value_a_to_z')
expect(value.aggregatorName).to.equal('Sum')
expect(value.rendererName).to.equal('Custom chart')
expect(value.vals).to.eql(['foo'])
})
})

129
tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
View File

@@ -1,8 +1,11 @@
import { expect } from 'chai'
import { mount, DOMWrapper } from '@vue/test-utils'
import { mount } from '@vue/test-utils'
import RunResult from '@/views/Main/Workspace/Tabs/Tab/RunResult'
import csv from '@/lib/csv'
import sinon from 'sinon'
import { nextTick } from 'vue'
const $store = { state: { isWorkspaceVisible: true } }
describe('RunResult.vue', () => {
afterEach(() => {
@@ -23,10 +26,14 @@ describe('RunResult.vue', () => {
name: ['foo']
}
}
},
global: {
mocks: { $store },
stubs: { teleport: true, transition: false }
}
})
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
expect(
@@ -38,12 +45,14 @@ describe('RunResult.vue', () => {
).to.equal(true)
window.ClipboardItem = ClipboardItem
wrapper.unmount()
})
it('copy to clipboard more than 1 sec', async () => {
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
const clock = sinon.useFakeTimers()
const wrapper = mount(RunResult, {
attachTo: document.body,
props: {
tab: { id: 1 },
result: {
@@ -53,6 +62,10 @@ describe('RunResult.vue', () => {
name: ['foo']
}
}
},
global: {
mocks: { $store },
stubs: { teleport: true, transition: false }
}
})
sinon.stub(csv, 'serialize').callsFake(() => {
@@ -60,36 +73,43 @@ describe('RunResult.vue', () => {
})
// Click copy to clipboard
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
await nextTick()
// The dialog is shown...
expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm .dialog-header').text())
.to.contain('Copy to clipboard')
// ... with Building message...
expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
// Switch to microtasks (let serialize run)
clock.tick(0)
await wrapper.vm.$nextTick()
await clock.tick(0)
await nextTick()
// The dialog is shown...
expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
// ... with Ready message...
expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
// Click copy
await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
await window.navigator.clipboard.writeText.returnValues[0]
// The dialog is not shown...
expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('copy to clipboard less than 1 sec', async () => {
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
const clock = sinon.useFakeTimers()
const wrapper = mount(RunResult, {
attachTo: document.body,
props: {
tab: { id: 1 },
result: {
@@ -99,31 +119,38 @@ describe('RunResult.vue', () => {
name: ['foo']
}
}
},
global: {
mocks: { $store },
stubs: { teleport: true, transition: false }
}
})
sinon.spy(wrapper.vm, 'copyToClipboard')
sinon.stub(csv, 'serialize').callsFake(() => {
clock.tick(500)
sinon.stub(csv, 'serialize').callsFake(async () => {
await clock.tick(500)
})
// Click copy to clipboard
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
// Switch to microtasks (let serialize run)
clock.tick(0)
await wrapper.vm.$nextTick()
await clock.tick(0)
await nextTick()
// The dialog is not shown...
expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// copyToClipboard is called
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
wrapper.unmount()
})
it('cancel long copy', async () => {
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
const clock = sinon.useFakeTimers()
const wrapper = mount(RunResult, {
attachTo: document.body,
props: {
tab: { id: 1 },
result: {
@@ -133,28 +160,33 @@ describe('RunResult.vue', () => {
name: ['foo']
}
}
},
global: {
mocks: { $store },
stubs: { teleport: true, transition: false }
}
})
sinon.spy(wrapper.vm, 'copyToClipboard')
sinon.stub(csv, 'serialize').callsFake(() => {
clock.tick(5000)
sinon.stub(csv, 'serialize').callsFake(async () => {
await clock.tick(5000)
})
// Click copy to clipboard
const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
await copyBtn.trigger('click')
// Switch to microtasks (let serialize run)
clock.tick(0)
await wrapper.vm.$nextTick()
await clock.tick(0)
await nextTick()
// Click cancel
await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
// The dialog is not shown...
expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
// copyToClipboard is not called
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
wrapper.unmount()
})
it('shows value of selected cell - result set', async () => {
@@ -168,14 +200,16 @@ describe('RunResult.vue', () => {
name: ['foo', 'bar']
}
}
},
global: {
mocks: { $store },
stubs: { teleport: true, transition: false }
}
})
// Open cell value panel
const viewValueBtn = new DOMWrapper(
wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
)
await viewValueBtn.trigger('click')
const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
await viewValueBtn.vm.$emit('click')
/*
Result set:
@@ -208,18 +242,18 @@ describe('RunResult.vue', () => {
// Click on 'bar' cell
await rows[1].findAll('td')[1].trigger('click')
expect(wrapper.find('.value-body').text()).to.equals('bar')
// Click on 'bar' cell again
await rows[1].findAll('td')[1].trigger('click')
expect(wrapper.find('.value-viewer-container .table-preview').text())
.to.equals('No cell selected to view')
wrapper.unmount()
})
it('shows value of selected cell - record view', async () => {
const wrapper = mount(RunResult, {
attachTo: document.body,
props: {
tab: { id: 1 },
result: {
@@ -229,20 +263,19 @@ describe('RunResult.vue', () => {
name: ['foo', 'bar']
}
}
},
global: {
mocks: { $store }
}
})
// Open cell value panel
const viewValueBtn = new DOMWrapper(
wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
)
await viewValueBtn.trigger('click')
const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
await viewValueBtn.vm.$emit('click')
// Go to record view
const vierRecordBtn = new DOMWrapper(
wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
)
await vierRecordBtn.trigger('click')
const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
await vierRecordBtn.vm.$emit('click')
/*
Record 1:
@@ -266,7 +299,7 @@ describe('RunResult.vue', () => {
// Go to next record
await wrapper.find('.icon-btn.next').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('.value-body').text()).to.equals('bar')
// Go to '2' with up arrow key
@@ -275,7 +308,7 @@ describe('RunResult.vue', () => {
// Go to prev record
await wrapper.find('.icon-btn.prev').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('.value-body').text()).to.equals('1')
// Click on 'foo' cell
@@ -287,10 +320,12 @@ describe('RunResult.vue', () => {
await rows[1].find('td').trigger('click')
expect(wrapper.find('.value-viewer-container .table-preview').text())
.to.equals('No cell selected to view')
wrapper.unmount()
})
it('keeps selected cell when switch between record and regular view', async () => {
const wrapper = mount(RunResult, {
attachTo: document.body,
props: {
tab: { id: 1 },
result: {
@@ -300,14 +335,15 @@ describe('RunResult.vue', () => {
name: [...Array(30)].map((x, i) => `name-${i}`)
}
}
},
global: {
mocks: { $store }
}
})
// Open cell value panel
const viewValueBtn = new DOMWrapper(
wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
)
await viewValueBtn.trigger('click')
const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
await viewValueBtn.vm.$emit('click')
// Click on 'name-1' cell
const rows = wrapper.findAll('table tbody tr')
@@ -316,10 +352,8 @@ describe('RunResult.vue', () => {
expect(wrapper.find('.value-body').text()).to.equals('name-1')
// Go to record view
const vierRecordBtn = new DOMWrapper(
wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
)
await vierRecordBtn.trigger('click')
const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
await vierRecordBtn.vm.$emit('click')
// 'name-1' is selected
expect(wrapper.find('.value-body').text()).to.equals('name-1')
@@ -329,7 +363,7 @@ describe('RunResult.vue', () => {
// Go to last record
await wrapper.find('.icon-btn.last').trigger('click')
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('.value-body').text()).to.equals('name-29')
// Go to '29' with up arrow key
@@ -337,12 +371,13 @@ describe('RunResult.vue', () => {
expect(wrapper.find('.value-body').text()).to.equals('29')
// Go to regular view
await vierRecordBtn.trigger('click')
await vierRecordBtn.vm.$emit('click')
// '29' is selected
expect(wrapper.find('.value-body').text()).to.equals('29')
selectedCell = wrapper
.find('.sqliteviz-table tbody td[aria-selected="true"]')
expect(selectedCell.text()).to.equals('29')
wrapper.unmount()
})
})

45
tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
View File

@@ -1,44 +1,53 @@
import { expect } from 'chai'
import { mount } from '@vue/test-utils'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import SqlEditor from '@/views/Main/Workspace/Tabs/Tab/SqlEditor'
import { nextTick } from 'vue'
describe('SqlEditor.vue', () => {
it('Emits input event when a query is changed', async () => {
it('Emits update:modelValue event when a query is changed', async () => {
// mock store state
const state = {
db: {}
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const wrapper = mount(SqlEditor, { store })
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
expect(wrapper.emitted('input')[0]).to.eql(['SELECT * FROM foo'])
const wrapper = mount(SqlEditor, {
global: {
plugins: [store]
}
})
await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
expect(wrapper.emitted()['update:modelValue'][0]).to.eql(['SELECT * FROM foo'])
})
it('Run is disabled if there is no db or no query or is getting result set', async () => {
const state = {
db: null
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
const wrapper = mount(SqlEditor, { store, props: { isGettingResults: false } })
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
const runButton = wrapper.findComponent({ name: 'RunIcon' }).vm.$parent
const wrapper = mount(SqlEditor, {
global: { plugins: [store] },
props: { isGettingResults: false }
})
await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
const runButton = wrapper.findComponent({ ref: 'runBtn' })
expect(runButton.disabled).to.equal(true)
expect(runButton.props('disabled')).to.equal(true)
await wrapper.vm.$set(store.state, 'db', {})
expect(runButton.disabled).to.equal(false)
store.state.db = {}
await nextTick()
expect(runButton.props('disabled')).to.equal(false)
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', '')
expect(runButton.disabled).to.equal(true)
await wrapper.findComponent({ ref: 'cm' }).setValue('', 'value')
expect(runButton.props('disabled')).to.equal(true)
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
expect(runButton.disabled).to.equal(false)
await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
expect(runButton.props('disabled')).to.equal(false)
await wrapper.setProps({ isGettingResults: true })
expect(runButton.disabled).to.equal(true)
expect(runButton.props('disabled')).to.equal(true)
})
})

229
tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
View File

@@ -1,9 +1,10 @@
import { expect } from 'chai'
import sinon from 'sinon'
import { mount, DOMWrapper } from '@vue/test-utils'
import { mount } from '@vue/test-utils'
import mutations from '@/store/mutations'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import Tab from '@/views/Main/Workspace/Tabs/Tab'
import { nextTick } from 'vue'
let place
@@ -18,19 +19,20 @@ describe('Tab.vue', () => {
place.remove()
})
it('Renders passed query', () => {
it('Renders passed query', async () => {
// mock store state
const state = {
currentTabId: 1
currentTabId: 1,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
attachTo: place,
store,
global: {
stubs: ['chart']
stubs: { 'chart': true, 'icon-button': true },
plugins: [store]
},
props: {
tab: {
@@ -52,26 +54,28 @@ describe('Tab.vue', () => {
}
}
})
await nextTick()
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(true)
expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(true)
expect(wrapper.find('.above .sql-editor-panel .codemirror-container').text())
.to.equal('SELECT * FROM foo')
.to.contain('SELECT * FROM foo')
})
it("Doesn't render tab when it's not active", () => {
it("Doesn't render tab when it's not active", async () => {
// mock store state
const state = {
currentTabId: 0
currentTabId: 0,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab: {
@@ -93,22 +97,25 @@ describe('Tab.vue', () => {
}
}
})
await nextTick()
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
})
it('Is not visible when not active', async () => {
// mock store state
const state = {
currentTabId: 0
currentTabId: 0,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab: {
@@ -130,13 +137,14 @@ describe('Tab.vue', () => {
}
}
})
await nextTick()
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
})
it('Update tab state when a query is changed', async () => {
it('Updates tab state when a query is changed', async () => {
// mock store state
const state = {
isWorkspaceVisible: true,
tabs: [
{
id: 1,
@@ -160,25 +168,28 @@ describe('Tab.vue', () => {
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab: state.tabs[0]
tab: store.state.tabs[0]
}
})
await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
expect(state.tabs[0].isSaved).to.equal(false)
await nextTick()
await wrapper.findComponent({ name: 'SqlEditor' }).setValue(' limit 100')
expect(store.state.tabs[0].isSaved).to.equal(false)
})
it('Update tab state when data view settings are changed', async () => {
it('Updates tab state when data view settings are changed', async () => {
// mock store state
const state = {
isWorkspaceVisible: true,
tabs: [
{
id: 1,
@@ -202,30 +213,25 @@ describe('Tab.vue', () => {
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab: state.tabs[0]
tab: store.state.tabs[0]
}
})
await nextTick()
await wrapper.findComponent({ name: 'DataView' }).vm.$emit('update')
expect(state.tabs[0].isSaved).to.equal(false)
expect(store.state.tabs[0].isSaved).to.equal(false)
})
it('Shows .result-in-progress message when executing query', async () => {
// mock store state
const state = {
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
// mount the component
const tab = {
id: 1,
name: 'foo',
@@ -244,28 +250,34 @@ describe('Tab.vue', () => {
time: 0,
isSaved: true
}
// mock store state
const state = {
currentTabId: 1,
isWorkspaceVisible: true,
tabs: [tab]
}
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true, 'icon-button': true },
plugins: [store]
},
props: {
tab
}
})
await nextTick()
tab.isGettingResults = true
await wrapper.vm.$nextTick()
expect(wrapper.find('.run-result-panel .result-in-progress').isVisible()).to.equal(true)
store.state.tabs[0].isGettingResults = true
await nextTick()
expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(true)
})
it('Shows error when executing query ends with error', async () => {
// mock store state
const state = {
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
const tab = {
id: 1,
name: 'foo',
@@ -284,22 +296,33 @@ describe('Tab.vue', () => {
time: 0,
isSaved: true
}
// mock store state
const state = {
currentTabId: 1,
isWorkspaceVisible: true,
tabs: [tab]
}
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true, 'icon-button': true, },
plugins: [store]
},
props: {
tab
tab: store.state.tabs[0]
}
})
tab.error = {
await nextTick()
store.state.tabs[0].error = {
type: 'error',
message: 'There is no table foo'
}
await wrapper.vm.$nextTick()
await nextTick()
expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
expect(wrapper.findComponent({ name: 'logs' }).isVisible()).to.equal(true)
@@ -314,11 +337,6 @@ describe('Tab.vue', () => {
name: ['foo', 'bar']
}
}
// mock store state
const state = {
currentTabId: 1
}
const tab = {
id: 1,
name: 'foo',
@@ -337,22 +355,29 @@ describe('Tab.vue', () => {
time: 0,
isSaved: true
}
// mock store state
const state = {
currentTabId: 1,
isWorkspaceVisible: true,
tabs: [tab]
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
attachTo: place,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab
}
})
tab.result = result
await wrapper.vm.$nextTick()
await nextTick()
store.state.tabs[0].result = result
await nextTick()
expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
expect(wrapper.findComponent({ name: 'logs' }).exists()).to.equal(false)
@@ -361,10 +386,11 @@ describe('Tab.vue', () => {
it('Switches views', async () => {
const state = {
currentTabId: 1
currentTabId: 1,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
const tab = {
id: 1,
@@ -387,49 +413,50 @@ describe('Tab.vue', () => {
const wrapper = mount(Tab, {
attachTo: place,
store,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab
}
})
let tableBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
.findComponent({ name: 'tableIcon' }).vm.$parent)
await tableBtn.trigger('click')
let tableBtn = wrapper.find('.above .side-tool-bar')
.findComponent({ ref: 'tableBtn' })
await tableBtn.vm.$emit('click')
expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
expect(wrapper.find('.above .run-result-panel').exists()).to.equal(true)
const dataViewBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
.findComponent({ name: 'dataViewIcon' }).vm.$parent)
await dataViewBtn.trigger('click')
const dataViewBtn = wrapper.find('.above .side-tool-bar')
.findComponent({ ref: 'dataViewBtn' })
await dataViewBtn.vm.$emit('click')
expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
expect(wrapper.find('.above .data-view-panel').exists()).to.equal(true)
const sqlEditorBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
.findComponent({ name: 'sqlEditorIcon' }).vm.$parent)
await sqlEditorBtn.trigger('click')
const sqlEditorBtn = wrapper.find('.above .side-tool-bar')
.findComponent({ ref: 'sqlEditorBtn' })
await sqlEditorBtn.vm.$emit('click')
expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
tableBtn = new DOMWrapper(wrapper.find('.bottomPane .side-tool-bar')
.findComponent({ name: 'tableIcon' }).vm.$parent)
await tableBtn.trigger('click')
tableBtn = wrapper.find('.bottomPane .side-tool-bar')
.findComponent({ ref: 'tableBtn' })
await tableBtn.vm.$emit('click')
expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
})
it('Maximize top panel if maximized panel is above', () => {
it('Maximize top panel if maximized panel is above', async () => {
const state = {
currentTabId: 1
currentTabId: 1,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
const tab = {
id: 1,
name: 'foo',
@@ -452,24 +479,26 @@ describe('Tab.vue', () => {
const wrapper = mount(Tab, {
attachTo: place,
store,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab
}
})
await nextTick()
expect(wrapper.find('.above').element.parentElement.style.height)
.to.equal('100%')
})
it('Maximize bottom panel if maximized panel is below', () => {
it('Maximize bottom panel if maximized panel is below', async () => {
const state = {
currentTabId: 1
currentTabId: 1,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
const tab = {
id: 1,
name: 'foo',
@@ -492,24 +521,25 @@ describe('Tab.vue', () => {
const wrapper = mount(Tab, {
attachTo: place,
store,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab
}
})
await nextTick()
expect(wrapper.find('.bottomPane').element.parentElement.style.height)
.to.equal('100%')
})
it('Panel size is 50 is nothing to maximize', () => {
it('Panel size is 50 if nothing to maximize', async () => {
const state = {
currentTabId: 1
currentTabId: 1,
isWorkspaceVisible: true
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
const tab = {
id: 1,
name: 'foo',
@@ -531,15 +561,16 @@ describe('Tab.vue', () => {
const wrapper = mount(Tab, {
attachTo: place,
store,
global: {
stubs: ['chart']
stubs: { 'chart': true },
plugins: [store]
},
props: {
tab
}
})
await nextTick()
expect(wrapper.find('.above').element.parentElement.style.height)
.to.equal('50%')
expect(wrapper.find('.bottomPane').element.parentElement.style.height)

116
tests/views/Main/Workspace/Tabs/Tabs.spec.js
View File

@@ -1,11 +1,20 @@
import { expect } from 'chai'
import sinon from 'sinon'
import { shallowMount, mount, DOMWrapper } from '@vue/test-utils'
import { shallowMount, mount } from '@vue/test-utils'
import mutations from '@/store/mutations'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import Tabs from '@/views/Main/Workspace/Tabs'
import eventBus from '@/lib/eventBus'
describe('Tabs.vue', () => {
let clock
beforeEach(() => {
clock = sinon.useFakeTimers()
sinon.spy(eventBus, '$emit')
})
afterEach(() => {
sinon.restore()
})
@@ -15,18 +24,19 @@ describe('Tabs.vue', () => {
const state = {
tabs: []
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
// mount the component
const wrapper = shallowMount(Tabs, {
store,
global: {
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
// check start-guide visibility
expect(wrapper.find('#start-guide').isVisible()).to.equal(true)
wrapper.unmount()
})
it('Renders tabs', () => {
@@ -38,13 +48,14 @@ describe('Tabs.vue', () => {
],
currentTabId: 2
}
const store = new Vuex.Store({ state })
const store = createStore({ state })
// mount the component
const wrapper = shallowMount(Tabs, {
store,
attachTo: document.body,
global: {
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -63,6 +74,7 @@ describe('Tabs.vue', () => {
expect(secondTab.text()).to.include('Untitled')
expect(secondTab.find('.star').isVisible()).to.equal(true)
expect(secondTab.classes()).to.include('tab-selected')
wrapper.unmount()
})
it('Selects the tab on click', async () => {
@@ -75,13 +87,13 @@ describe('Tabs.vue', () => {
currentTabId: 2
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = shallowMount(Tabs, {
store,
global: {
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -94,6 +106,7 @@ describe('Tabs.vue', () => {
const secondTab = wrapper.findAll('.tab')[1]
expect(secondTab.classes()).to.not.include('tab-selected')
expect(state.currentTabId).to.equal(1)
wrapper.unmount()
})
it("Deletes the tab on close if it's saved", async () => {
@@ -131,13 +144,13 @@ describe('Tabs.vue', () => {
currentTabId: 2
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tabs, {
store,
global: {
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -152,6 +165,7 @@ describe('Tabs.vue', () => {
expect(firstTab.text()).to.include('Untitled')
expect(firstTab.find('.star').isVisible()).to.equal(true)
expect(firstTab.classes()).to.include('tab-selected')
wrapper.unmount()
})
it("Doesn't delete tab on close if user cancel closing", async () => {
@@ -189,13 +203,16 @@ describe('Tabs.vue', () => {
currentTabId: 2
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tabs, {
store,
attachTo: document.body,
global: {
stubs: ['router-link']
stubs: {
'router-link': true, teleport: true, transition: false
},
plugins: [store]
}
})
@@ -204,13 +221,14 @@ describe('Tabs.vue', () => {
await secondTabCloseIcon.trigger('click')
// check that Close Tab dialog is visible
const modal = wrapper.find('[data-modal="close-warn"]')
const modal = wrapper.find('.dialog.vfm')
expect(modal.exists()).to.equal(true)
expect(modal.find('.dialog-header').text()).to.contain('Close tab')
// find Cancel in the dialog
const cancelBtn = wrapper
.findAll('.dialog-buttons-container button').wrappers
.find(button => button.text() === 'Cancel')
.findAll('.dialog-buttons-container button')
.find(button => button.text() === "Don't close")
// click Cancel in the dialog
await cancelBtn.trigger('click')
@@ -219,7 +237,9 @@ describe('Tabs.vue', () => {
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
// check that the dialog is closed
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Closes without saving', async () => {
@@ -257,13 +277,16 @@ describe('Tabs.vue', () => {
currentTabId: 2
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tabs, {
store,
attachTo: document.body,
global: {
stubs: ['router-link']
stubs: {
'router-link': true, teleport: true, transition: false
},
plugins: [store]
}
})
@@ -273,7 +296,7 @@ describe('Tabs.vue', () => {
// find 'Close without saving' in the dialog
const closeBtn = wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Close without saving')
// click 'Close without saving' in the dialog
@@ -287,11 +310,12 @@ describe('Tabs.vue', () => {
expect(firstTab.classes()).to.include('tab-selected')
// check that 'saveInquiry' event was not emited
const rootWrapper = new DOMWrapper(wrapper.vm.$root)
expect(rootWrapper.emitted('saveInquiry')).to.equal(undefined)
expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(false)
// check that the dialog is closed
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Closes with saving', async () => {
@@ -329,13 +353,16 @@ describe('Tabs.vue', () => {
currentTabId: 2
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = mount(Tabs, {
store,
attachTo: document.body,
global: {
stubs: ['router-link']
stubs: {
'router-link': true, teleport: true, transition: false
},
plugins: [store]
}
})
@@ -345,14 +372,14 @@ describe('Tabs.vue', () => {
// find 'Save and close' in the dialog
const closeBtn = wrapper
.findAll('.dialog-buttons-container button').wrappers
.findAll('.dialog-buttons-container button')
.find(button => button.text() === 'Save and close')
// click 'Save and close' in the dialog
await closeBtn.trigger('click')
// pretend like saving is completed - trigger 'inquirySaved' on $root
await wrapper.vm.$root.$emit('inquirySaved')
// pretend like saving is completed - trigger 'inquirySaved' on eventBus
await eventBus.$emit('inquirySaved')
// check that tab is closed
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
@@ -362,11 +389,12 @@ describe('Tabs.vue', () => {
expect(firstTab.classes()).to.include('tab-selected')
// check that 'saveInquiry' event was emited
const rootWrapper = new DOMWrapper(wrapper.vm.$root)
expect(rootWrapper.emitted('saveInquiry')).to.have.lengthOf(1)
expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(true)
// check that the dialog is closed
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
await clock.tick(100)
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
wrapper.unmount()
})
it('Prevents closing a tab of a browser if there is unsaved inquiry', () => {
@@ -379,13 +407,13 @@ describe('Tabs.vue', () => {
currentTabId: 2
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = shallowMount(Tabs, {
store,
global: {
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -394,6 +422,7 @@ describe('Tabs.vue', () => {
wrapper.vm.leavingSqliteviz(event)
expect(event.preventDefault.calledOnce).to.equal(true)
wrapper.unmount()
})
it("Doesn't prevent closing a tab of a browser if there is unsaved inquiry", () => {
@@ -405,13 +434,13 @@ describe('Tabs.vue', () => {
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
const store = createStore({ state, mutations })
// mount the component
const wrapper = shallowMount(Tabs, {
store,
global: {
stubs: ['router-link']
stubs: ['router-link'],
plugins: [store]
}
})
@@ -420,5 +449,6 @@ describe('Tabs.vue', () => {
wrapper.vm.leavingSqliteviz(event)
expect(event.preventDefault.calledOnce).to.equal(false)
wrapper.unmount()
})
})

18
tests/views/Main/Workspace/Workspace.spec.js
View File

@@ -2,7 +2,7 @@ import { expect } from 'chai'
import { mount } from '@vue/test-utils'
import actions from '@/store/actions'
import mutations from '@/store/mutations'
import Vuex from 'vuex'
import { createStore } from 'vuex'
import Workspace from '@/views/Main/Workspace'
describe('Workspace.vue', () => {
@@ -11,13 +11,13 @@ describe('Workspace.vue', () => {
db: {},
tabs: []
}
const store = new Vuex.Store({ state, actions, mutations })
const store = createStore({ state, actions, mutations })
const $route = { path: '/workspace', query: {} }
mount(Workspace, {
store,
global: {
stubs: ['router-link'],
mocks: { $route }
stubs: ['router-link', 'modal'],
mocks: { $route },
plugins: [store]
}
})
@@ -34,13 +34,13 @@ describe('Workspace.vue', () => {
db: {},
tabs: []
}
const store = new Vuex.Store({ state, actions, mutations })
const store = createStore({ state, actions, mutations })
const $route = { path: '/workspace', query: { hide_schema: '1' } }
const vm = mount(Workspace, {
store,
global: {
stubs: ['router-link'],
mocks: { $route }
stubs: ['router-link', 'modal'],
mocks: { $route },
plugins: [store]
}
})