mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
Pivot implementation and redesign (#69)
- Pivot support implementation - Rename queries into inquiries - Rename editor into workspace - Change result set format - New JSON format for inquiries - Redesign panels
This commit is contained in:
lana-k
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,7 @@ import sinon from 'sinon'
|
||||
import { mount, shallowMount, createWrapper } from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import MainMenu from '@/views/Main/MainMenu'
|
||||
import storedQueries from '@/lib/storedQueries'
|
||||
import storedInquiries from '@/lib/storedInquiries'
|
||||
|
||||
let wrapper = null
|
||||
|
||||
@@ -16,91 +16,63 @@ describe('MainMenu.vue', () => {
|
||||
wrapper.destroy()
|
||||
})
|
||||
|
||||
it('Run and Save are visible only on /editor page', async () => {
|
||||
it('Create and Save are visible only on /workspace page', async () => {
|
||||
const state = {
|
||||
currentTab: { query: '', execute: sinon.stub() },
|
||||
tabs: [{}],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
// mount the component
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
expect(wrapper.find('#run-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#run-btn').isVisible()).to.equal(true)
|
||||
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)
|
||||
|
||||
await wrapper.vm.$set(wrapper.vm.$route, 'path', '/my-queries')
|
||||
expect(wrapper.find('#run-btn').exists()).to.equal(false)
|
||||
await wrapper.vm.$set(wrapper.vm.$route, 'path', '/inquiries')
|
||||
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)
|
||||
expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Run and Save are not visible if there is no tabs', () => {
|
||||
it('Save is not visible if there is no tabs', () => {
|
||||
const state = {
|
||||
currentTab: null,
|
||||
tabs: [{}],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
expect(wrapper.find('#run-btn').exists()).to.equal(false)
|
||||
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)
|
||||
expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Run is disabled if there is no db or no query', async () => {
|
||||
const state = {
|
||||
currentTab: { query: 'SELECT * FROM foo', execute: sinon.stub() },
|
||||
tabs: [{}],
|
||||
db: null
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.find('#run-btn').element.disabled).to.equal(true)
|
||||
|
||||
await vm.$set(state, 'db', {})
|
||||
expect(wrapper.find('#run-btn').element.disabled).to.equal(false)
|
||||
|
||||
await vm.$set(state.currentTab, 'query', '')
|
||||
expect(wrapper.find('#run-btn').element.disabled).to.equal(true)
|
||||
})
|
||||
|
||||
it('Save is disabled if current tab.isUnsaved is false', async () => {
|
||||
it('Save is disabled if current tab.isSaved is true', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
@@ -110,7 +82,7 @@ describe('MainMenu.vue', () => {
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
|
||||
|
||||
await vm.$set(state.tabs[0], 'isUnsaved', false)
|
||||
await vm.$set(state.tabs[0], 'isSaved', true)
|
||||
expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
|
||||
})
|
||||
|
||||
@@ -121,18 +93,18 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const newQueryId = 1
|
||||
const newInquiryId = 1
|
||||
const actions = {
|
||||
addTab: sinon.stub().resolves(newQueryId)
|
||||
addTab: sinon.stub().resolves(newInquiryId)
|
||||
}
|
||||
const mutations = {
|
||||
setCurrentTabId: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations, actions })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
@@ -144,29 +116,29 @@ describe('MainMenu.vue', () => {
|
||||
await wrapper.find('#create-btn').trigger('click')
|
||||
expect(actions.addTab.calledOnce).to.equal(true)
|
||||
await actions.addTab.returnValues[0]
|
||||
expect(mutations.setCurrentTabId.calledOnceWith(state, newQueryId)).to.equal(true)
|
||||
expect(mutations.setCurrentTabId.calledOnceWith(state, newInquiryId)).to.equal(true)
|
||||
expect($router.push.calledOnce).to.equal(false)
|
||||
})
|
||||
|
||||
it('Creates a tab and redirects to editor', async () => {
|
||||
it('Creates a tab and redirects to workspace', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const newQueryId = 1
|
||||
const newInquiryId = 1
|
||||
const actions = {
|
||||
addTab: sinon.stub().resolves(newQueryId)
|
||||
addTab: sinon.stub().resolves(newInquiryId)
|
||||
}
|
||||
const mutations = {
|
||||
setCurrentTabId: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations, actions })
|
||||
const $route = { path: '/my-queries' }
|
||||
const $route = { path: '/inquiries' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
@@ -178,11 +150,11 @@ describe('MainMenu.vue', () => {
|
||||
await wrapper.find('#create-btn').trigger('click')
|
||||
expect(actions.addTab.calledOnce).to.equal(true)
|
||||
await actions.addTab.returnValues[0]
|
||||
expect(mutations.setCurrentTabId.calledOnceWith(state, newQueryId)).to.equal(true)
|
||||
expect(mutations.setCurrentTabId.calledOnceWith(state, newInquiryId)).to.equal(true)
|
||||
expect($router.push.calledOnce).to.equal(true)
|
||||
})
|
||||
|
||||
it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/editor"',
|
||||
it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/workspace"',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
@@ -190,11 +162,11 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
@@ -205,29 +177,29 @@ describe('MainMenu.vue', () => {
|
||||
|
||||
const ctrlR = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true })
|
||||
const metaR = new KeyboardEvent('keydown', { key: 'r', metaKey: true })
|
||||
// Running is enabled and route path is editor
|
||||
// Running is enabled and route path is workspace
|
||||
document.dispatchEvent(ctrlR)
|
||||
expect(state.currentTab.execute.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaR)
|
||||
expect(state.currentTab.execute.calledTwice).to.equal(true)
|
||||
|
||||
// Running is disabled and route path is editor
|
||||
// Running is disabled and route path is workspace
|
||||
await wrapper.vm.$set(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 editor
|
||||
// Running is enabled and route path is not workspace
|
||||
await wrapper.vm.$set(state, 'db', {})
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
await wrapper.vm.$set($route, 'path', '/inquiries')
|
||||
document.dispatchEvent(ctrlR)
|
||||
expect(state.currentTab.execute.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaR)
|
||||
expect(state.currentTab.execute.calledTwice).to.equal(true)
|
||||
})
|
||||
|
||||
it('Ctrl Enter calls currentTab.execute if running is enabled and route.path is "/editor"',
|
||||
it('Ctrl Enter calls currentTab.execute if running is enabled and route.path is "/workspace"',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
@@ -235,11 +207,11 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
@@ -250,63 +222,63 @@ describe('MainMenu.vue', () => {
|
||||
|
||||
const ctrlEnter = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true })
|
||||
const metaEnter = new KeyboardEvent('keydown', { key: 'Enter', metaKey: true })
|
||||
// Running is enabled and route path is editor
|
||||
// Running is enabled and route path is workspace
|
||||
document.dispatchEvent(ctrlEnter)
|
||||
expect(state.currentTab.execute.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaEnter)
|
||||
expect(state.currentTab.execute.calledTwice).to.equal(true)
|
||||
|
||||
// Running is disabled and route path is editor
|
||||
// Running is disabled and route path is workspace
|
||||
await wrapper.vm.$set(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 editor
|
||||
// Running is enabled and route path is not workspace
|
||||
await wrapper.vm.$set(state, 'db', {})
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
await wrapper.vm.$set($route, 'path', '/inquiries')
|
||||
document.dispatchEvent(ctrlEnter)
|
||||
expect(state.currentTab.execute.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaEnter)
|
||||
expect(state.currentTab.execute.calledTwice).to.equal(true)
|
||||
})
|
||||
|
||||
it('Ctrl B calls createNewQuery', async () => {
|
||||
it('Ctrl B calls createNewInquiry', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
sinon.stub(wrapper.vm, 'createNewQuery')
|
||||
sinon.stub(wrapper.vm, 'createNewInquiry')
|
||||
|
||||
const ctrlB = new KeyboardEvent('keydown', { key: 'b', ctrlKey: true })
|
||||
const metaB = new KeyboardEvent('keydown', { key: 'b', metaKey: true })
|
||||
document.dispatchEvent(ctrlB)
|
||||
expect(wrapper.vm.createNewQuery.calledOnce).to.equal(true)
|
||||
expect(wrapper.vm.createNewInquiry.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaB)
|
||||
expect(wrapper.vm.createNewQuery.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.createNewInquiry.calledTwice).to.equal(true)
|
||||
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
await wrapper.vm.$set($route, 'path', '/inquiries')
|
||||
document.dispatchEvent(ctrlB)
|
||||
expect(wrapper.vm.createNewQuery.calledThrice).to.equal(true)
|
||||
expect(wrapper.vm.createNewInquiry.calledThrice).to.equal(true)
|
||||
document.dispatchEvent(metaB)
|
||||
expect(wrapper.vm.createNewQuery.callCount).to.equal(4)
|
||||
expect(wrapper.vm.createNewInquiry.callCount).to.equal(4)
|
||||
})
|
||||
|
||||
it('Ctrl S calls checkQueryBeforeSave if the tab is unsaved and route path is /editor',
|
||||
it('Ctrl S calls checkInquiryBeforeSave if the tab is unsaved and route path is /workspace',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
@@ -314,44 +286,44 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
tabs: [{ isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $route = { path: '/workspace' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
sinon.stub(wrapper.vm, 'checkQueryBeforeSave')
|
||||
sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
|
||||
|
||||
const ctrlS = new KeyboardEvent('keydown', { key: 's', ctrlKey: true })
|
||||
const metaS = new KeyboardEvent('keydown', { key: 's', metaKey: true })
|
||||
// tab is unsaved and route is /editor
|
||||
// tab is unsaved and route is /workspace
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledOnce).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
|
||||
// tab is saved and route is /editor
|
||||
await wrapper.vm.$set(state.tabs[0], 'isUnsaved', false)
|
||||
// tab is saved and route is /workspace
|
||||
await wrapper.vm.$set(state.tabs[0], 'isSaved', true)
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
|
||||
// tab is unsaved and route is not /editor
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
await wrapper.vm.$set(state.tabs[0], 'isUnsaved', 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)
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
})
|
||||
|
||||
it('Saves the query when no need the new name',
|
||||
it('Saves the inquiry when no need the new name',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
@@ -359,20 +331,21 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: 'foo', isUnsaved: true }],
|
||||
tabs: [{ id: 1, name: 'foo', isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const $route = { path: '/editor' }
|
||||
sinon.stub(storedQueries, 'isTabNeedName').returns(false)
|
||||
sinon.stub(storedQueries, 'save').returns({
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
|
||||
sinon.stub(storedInquiries, 'save').returns({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
viewType: 'chart',
|
||||
viewOptions: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
@@ -386,8 +359,8 @@ describe('MainMenu.vue', () => {
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
|
||||
|
||||
// check that the query was saved via storedQueries.save (newName='')
|
||||
expect(storedQueries.save.calledOnceWith(state.currentTab, '')).to.equal(true)
|
||||
// check that the inquiry was saved via storedInquiries.save (newName='')
|
||||
expect(storedInquiries.save.calledOnceWith(state.currentTab, '')).to.equal(true)
|
||||
|
||||
// check that the tab was updated
|
||||
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
|
||||
@@ -395,12 +368,13 @@ describe('MainMenu.vue', () => {
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: [],
|
||||
isUnsaved: false
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true
|
||||
}))).to.equal(true)
|
||||
|
||||
// check that 'querySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('querySaved')).to.have.lengthOf(1)
|
||||
// check that 'inquirySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('Shows en error when the new name is needed but not specifyied', async () => {
|
||||
@@ -410,20 +384,21 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isUnsaved: true }],
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const $route = { path: '/editor' }
|
||||
sinon.stub(storedQueries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedQueries, 'save').returns({
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedInquiries, 'save').returns({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
viewType: 'chart',
|
||||
viewOptions: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
@@ -444,31 +419,32 @@ describe('MainMenu.vue', () => {
|
||||
.trigger('click')
|
||||
|
||||
// check that we have an error message and dialog is still open
|
||||
expect(wrapper.find('.text-field-error').text()).to.equal('Query name can\'t be empty')
|
||||
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)
|
||||
})
|
||||
|
||||
it('Saves the query with a new name', async () => {
|
||||
it('Saves the inquiry with a new name', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isUnsaved: true }],
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const $route = { path: '/editor' }
|
||||
sinon.stub(storedQueries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedQueries, 'save').returns({
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedInquiries, 'save').returns({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
viewType: 'chart',
|
||||
viewOptions: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
@@ -494,8 +470,8 @@ describe('MainMenu.vue', () => {
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
|
||||
|
||||
// check that the query was saved via storedQueries.save (newName='foo')
|
||||
expect(storedQueries.save.calledOnceWith(state.currentTab, 'foo')).to.equal(true)
|
||||
// check that the inquiry was saved via storedInquiries.save (newName='foo')
|
||||
expect(storedInquiries.save.calledOnceWith(state.currentTab, 'foo')).to.equal(true)
|
||||
|
||||
// check that the tab was updated
|
||||
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
|
||||
@@ -503,15 +479,16 @@ describe('MainMenu.vue', () => {
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: [],
|
||||
isUnsaved: false
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true
|
||||
}))).to.equal(true)
|
||||
|
||||
// check that 'querySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('querySaved')).to.have.lengthOf(1)
|
||||
// check that 'inquirySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('Saves a predefined query with a new name', async () => {
|
||||
it('Saves a predefined inquiry with a new name', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
@@ -525,22 +502,24 @@ describe('MainMenu.vue', () => {
|
||||
[2, 'Drako Malfoy']
|
||||
]
|
||||
},
|
||||
view: 'chart'
|
||||
viewType: 'chart',
|
||||
viewOptions: []
|
||||
},
|
||||
tabs: [{ id: 1, name: 'foo', isUnsaved: true, isPredefined: true }],
|
||||
tabs: [{ id: 1, name: 'foo', isSaved: false, isPredefined: true }],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const $route = { path: '/editor' }
|
||||
sinon.stub(storedQueries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedQueries, 'save').returns({
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedInquiries, 'save').returns({
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
viewType: 'chart',
|
||||
viewOptions: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
@@ -569,8 +548,8 @@ describe('MainMenu.vue', () => {
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
|
||||
|
||||
// check that the query was saved via storedQueries.save (newName='bar')
|
||||
expect(storedQueries.save.calledOnceWith(state.currentTab, 'bar')).to.equal(true)
|
||||
// check that the inquiry was saved via storedInquiries.save (newName='bar')
|
||||
expect(storedInquiries.save.calledOnceWith(state.currentTab, 'bar')).to.equal(true)
|
||||
|
||||
// check that the tab was updated
|
||||
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
|
||||
@@ -578,18 +557,19 @@ describe('MainMenu.vue', () => {
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: [],
|
||||
isUnsaved: false
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true
|
||||
}))).to.equal(true)
|
||||
|
||||
// check that 'querySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('querySaved')).to.have.lengthOf(1)
|
||||
// check that 'inquirySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
|
||||
|
||||
// We saved predefined query, so the tab will be created again
|
||||
// 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.
|
||||
// That's why we need to restore data and view.
|
||||
// Check that result and view are preserved in the currentTab:
|
||||
expect(state.currentTab.view).to.equal('chart')
|
||||
expect(state.currentTab.viewType).to.equal('chart')
|
||||
expect(state.currentTab.result).to.eql({
|
||||
columns: ['id', 'name'],
|
||||
values: [
|
||||
@@ -606,16 +586,16 @@ describe('MainMenu.vue', () => {
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isUnsaved: true }],
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const $route = { path: '/editor' }
|
||||
sinon.stub(storedQueries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedQueries, 'save').returns({
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
|
||||
sinon.stub(storedInquiries, 'save').returns({
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
@@ -642,13 +622,13 @@ describe('MainMenu.vue', () => {
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
|
||||
|
||||
// check that the query was not saved via storedQueries.save
|
||||
expect(storedQueries.save.called).to.equal(false)
|
||||
// check that the inquiry was not saved via storedInquiries.save
|
||||
expect(storedInquiries.save.called).to.equal(false)
|
||||
|
||||
// check that the tab was not updated
|
||||
expect(mutations.updateTab.called).to.equal(false)
|
||||
|
||||
// check that 'querySaved' event is not listened on $root
|
||||
expect(wrapper.vm.$root.$listeners).to.not.have.property('querySaved')
|
||||
// check that 'inquirySaved' event is not listened on $root
|
||||
expect(wrapper.vm.$root.$listeners).to.not.have.property('inquirySaved')
|
||||
})
|
||||
})
|
||||
23
tests/views/Main/Workspace/Editor.spec.js
Normal file
23
tests/views/Main/Workspace/Editor.spec.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import actions from '@/store/actions'
|
||||
import Vuex from 'vuex'
|
||||
import Workspace from '@/views/Main/Workspace'
|
||||
|
||||
describe('Workspace.vue', () => {
|
||||
it('Creates a tab with example if schema is empty', () => {
|
||||
const state = {
|
||||
db: {},
|
||||
tabs: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, actions })
|
||||
mount(Workspace, { store })
|
||||
|
||||
expect(state.tabs[0].query).to.include('Your database is empty.')
|
||||
expect(state.tabs[0].tempName).to.equal('Untitled')
|
||||
expect(state.tabs[0].name).to.equal(null)
|
||||
expect(state.tabs[0].viewType).to.equal('chart')
|
||||
expect(state.tabs[0].viewOptions).to.equal(undefined)
|
||||
expect(state.tabs[0].isSaved).to.equal(false)
|
||||
})
|
||||
})
|
||||
@@ -2,8 +2,8 @@ import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { mount, createLocalVue } from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import Schema from '@/views/Main/Editor/Schema'
|
||||
import TableDescription from '@/views/Main/Editor/Schema/TableDescription'
|
||||
import Schema from '@/views/Main/Workspace/Schema'
|
||||
import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
|
||||
import database from '@/lib/database'
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import csv from '@/components/CsvImport/csv'
|
||||
@@ -129,10 +129,8 @@ describe('Schema.vue', () => {
|
||||
sinon.stub(csv, 'parse').resolves({
|
||||
delimiter: '|',
|
||||
data: {
|
||||
columns: ['col1', 'col2'],
|
||||
values: [
|
||||
[1, 'foo']
|
||||
]
|
||||
col1: [1],
|
||||
col2: ['foo']
|
||||
},
|
||||
hasErrors: false,
|
||||
messages: []
|
||||
@@ -171,8 +169,8 @@ describe('Schema.vue', () => {
|
||||
|
||||
const res = await wrapper.vm.$store.state.db.execute('select * from test')
|
||||
expect(res).to.eql({
|
||||
columns: ['col1', 'col2'],
|
||||
values: [[1, 'foo']]
|
||||
col1: [1],
|
||||
col2: ['foo']
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import TableDescription from '@/views/Main/Editor/Schema/TableDescription'
|
||||
import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
|
||||
|
||||
describe('TableDescription.vue', () => {
|
||||
it('Initially the columns are hidden and table name is rendered', () => {
|
||||
@@ -0,0 +1,50 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { mount, shallowMount } from '@vue/test-utils'
|
||||
import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
|
||||
import chartHelper from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart/chartHelper'
|
||||
import * as dereference from 'react-chart-editor/lib/lib/dereference'
|
||||
|
||||
describe('Chart.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('getOptionsForSave called with proper arguments', () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Chart)
|
||||
const vm = wrapper.vm
|
||||
const stub = sinon.stub(chartHelper, 'getOptionsForSave').returns('result')
|
||||
const chartData = vm.getOptionsForSave()
|
||||
expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
|
||||
expect(chartData).to.equal('result')
|
||||
})
|
||||
|
||||
it('emits update when plotly updates', async () => {
|
||||
// mount the component
|
||||
const wrapper = mount(Chart)
|
||||
wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
|
||||
expect(wrapper.emitted('update')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('calls dereference when sqlResult is changed', async () => {
|
||||
sinon.stub(dereference, 'default')
|
||||
const dataSources = {
|
||||
id: [1],
|
||||
name: ['foo']
|
||||
}
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Chart, {
|
||||
propsData: { dataSources }
|
||||
})
|
||||
|
||||
const newDataSources = {
|
||||
id: [2],
|
||||
name: ['bar']
|
||||
}
|
||||
|
||||
await wrapper.setProps({ dataSources: newDataSources })
|
||||
expect(dereference.default.called).to.equal(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount, createWrapper } from '@vue/test-utils'
|
||||
import DataView from '@/views/Main/Workspace/Tabs/Tab/DataView'
|
||||
import sinon from 'sinon'
|
||||
|
||||
describe('DataView.vue', () => {
|
||||
it('emits update on mode changing', async () => {
|
||||
const wrapper = mount(DataView)
|
||||
|
||||
const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
|
||||
await pivotBtn.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('method getOptionsForSave call the same method of the current view component', async () => {
|
||||
const wrapper = mount(DataView)
|
||||
|
||||
const chart = wrapper.findComponent({ name: 'Chart' }).vm
|
||||
sinon.stub(chart, 'getOptionsForSave').returns({ here_are: 'chart_settings' })
|
||||
|
||||
expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'chart_settings' })
|
||||
|
||||
const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
|
||||
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' })
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,214 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Pivot from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot'
|
||||
import $ from 'jquery'
|
||||
|
||||
describe('Pivot.vue', () => {
|
||||
it('renders pivot table', () => {
|
||||
const wrapper = mount(Pivot, {
|
||||
propsData: {
|
||||
dataSources: {
|
||||
item: ['foo', 'bar', 'bar', 'bar'],
|
||||
year: [2021, 2021, 2020, 2020]
|
||||
},
|
||||
initOptions: {
|
||||
rows: ['item'],
|
||||
cols: ['year'],
|
||||
colOrder: 'key_a_to_z',
|
||||
rowOrder: 'key_a_to_z',
|
||||
aggregatorName: 'Count',
|
||||
vals: [],
|
||||
rendererName: 'Table'
|
||||
}
|
||||
}
|
||||
})
|
||||
const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
|
||||
expect(colLabels.at(0).text()).to.equal('2020')
|
||||
expect(colLabels.at(1).text()).to.equal('2021')
|
||||
const rows = wrapper.findAll('.pivot-output tbody tr')
|
||||
// row0: bar - 2 - 1
|
||||
expect(rows.at(0).find('th').text()).to.equal('bar')
|
||||
expect(rows.at(0).find('td.col0').text()).to.equal('2')
|
||||
expect(rows.at(0).find('td.col1').text()).to.equal('1')
|
||||
expect(rows.at(0).find('td.rowTotal').text()).to.equal('3')
|
||||
|
||||
// row1: foo - - 2
|
||||
expect(rows.at(1).find('th').text()).to.equal('foo')
|
||||
expect(rows.at(1).find('td.col0').text()).to.equal('')
|
||||
expect(rows.at(1).find('td.col1').text()).to.equal('1')
|
||||
expect(rows.at(1).find('td.rowTotal').text()).to.equal('1')
|
||||
})
|
||||
|
||||
it('updates when dataSource changes', async () => {
|
||||
const wrapper = mount(Pivot, {
|
||||
propsData: {
|
||||
dataSources: {
|
||||
item: ['foo', 'bar', 'bar', 'bar'],
|
||||
year: [2021, 2021, 2020, 2020]
|
||||
},
|
||||
initOptions: {
|
||||
rows: ['item'],
|
||||
cols: ['year'],
|
||||
colOrder: 'key_a_to_z',
|
||||
rowOrder: 'key_a_to_z',
|
||||
aggregatorName: 'Count',
|
||||
vals: [],
|
||||
rendererName: 'Table'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.setProps({
|
||||
dataSources: {
|
||||
item: ['foo', 'bar', 'bar', 'bar', 'foo', 'baz'],
|
||||
year: [2021, 2021, 2020, 2020, 2021, 2020]
|
||||
}
|
||||
})
|
||||
|
||||
const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
|
||||
expect(colLabels.at(0).text()).to.equal('2020')
|
||||
expect(colLabels.at(1).text()).to.equal('2021')
|
||||
const rows = wrapper.findAll('.pivot-output tbody tr')
|
||||
// row0: bar - 2 - 1
|
||||
expect(rows.at(0).find('th').text()).to.equal('bar')
|
||||
expect(rows.at(0).find('td.col0').text()).to.equal('2')
|
||||
expect(rows.at(0).find('td.col1').text()).to.equal('1')
|
||||
expect(rows.at(0).find('td.rowTotal').text()).to.equal('3')
|
||||
|
||||
// row1: baz - 1 -
|
||||
expect(rows.at(1).find('th').text()).to.equal('baz')
|
||||
expect(rows.at(1).find('td.col0').text()).to.equal('1')
|
||||
expect(rows.at(1).find('td.col1').text()).to.equal('')
|
||||
expect(rows.at(1).find('td.rowTotal').text()).to.equal('1')
|
||||
|
||||
// row2: foo - - 2
|
||||
expect(rows.at(2).find('th').text()).to.equal('foo')
|
||||
expect(rows.at(2).find('td.col0').text()).to.equal('')
|
||||
expect(rows.at(2).find('td.col1').text()).to.equal('2')
|
||||
expect(rows.at(2).find('td.rowTotal').text()).to.equal('2')
|
||||
})
|
||||
|
||||
it('updates when pivot settings changes', async () => {
|
||||
const wrapper = mount(Pivot, {
|
||||
propsData: {
|
||||
dataSources: {
|
||||
item: ['foo', 'bar', 'bar', 'bar'],
|
||||
year: [2021, 2021, 2020, 2020]
|
||||
},
|
||||
initOptions: {
|
||||
rows: ['item'],
|
||||
cols: ['year'],
|
||||
colOrder: 'key_a_to_z',
|
||||
rowOrder: 'key_a_to_z',
|
||||
aggregatorName: 'Count',
|
||||
vals: [],
|
||||
rendererName: 'Table'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
|
||||
rows: ['year'],
|
||||
cols: ['item'],
|
||||
colOrder: 'key_a_to_z',
|
||||
rowOrder: 'key_a_to_z',
|
||||
aggregator: $.pivotUtilities.aggregators.Count(),
|
||||
aggregatorName: 'Count',
|
||||
renderer: $.pivotUtilities.renderers.Table,
|
||||
rendererName: 'Table',
|
||||
rendererOptions: undefined,
|
||||
vals: []
|
||||
})
|
||||
|
||||
const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
|
||||
expect(colLabels.at(0).text()).to.equal('bar')
|
||||
expect(colLabels.at(1).text()).to.equal('foo')
|
||||
const rows = wrapper.findAll('.pivot-output tbody tr')
|
||||
// row0: 2020 - 2 -
|
||||
expect(rows.at(0).find('th').text()).to.equal('2020')
|
||||
expect(rows.at(0).find('td.col0').text()).to.equal('2')
|
||||
expect(rows.at(0).find('td.col1').text()).to.equal('')
|
||||
expect(rows.at(0).find('td.rowTotal').text()).to.equal('2')
|
||||
|
||||
// row1: 2021 - 1 - 1
|
||||
expect(rows.at(1).find('th').text()).to.equal('2021')
|
||||
expect(rows.at(1).find('td.col0').text()).to.equal('1')
|
||||
expect(rows.at(1).find('td.col1').text()).to.equal('1')
|
||||
expect(rows.at(1).find('td.rowTotal').text()).to.equal('2')
|
||||
})
|
||||
|
||||
it('returns options for save', async () => {
|
||||
const wrapper = mount(Pivot, {
|
||||
propsData: {
|
||||
dataSources: {
|
||||
item: ['foo', 'bar', 'bar', 'bar'],
|
||||
year: [2021, 2021, 2020, 2020]
|
||||
},
|
||||
initOptions: {
|
||||
rows: ['item'],
|
||||
cols: ['year'],
|
||||
colOrder: 'key_a_to_z',
|
||||
rowOrder: 'key_a_to_z',
|
||||
aggregatorName: 'Count',
|
||||
vals: [],
|
||||
rendererName: 'Table'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
|
||||
rows: ['year'],
|
||||
cols: ['item'],
|
||||
colOrder: 'value_a_to_z',
|
||||
rowOrder: 'value_z_to_a',
|
||||
aggregator: $.pivotUtilities.aggregators.Count(),
|
||||
aggregatorName: 'Count',
|
||||
renderer: $.pivotUtilities.renderers.Table,
|
||||
rendererName: 'Table',
|
||||
rendererOptions: undefined,
|
||||
vals: []
|
||||
})
|
||||
|
||||
let optionsForSave = wrapper.vm.getOptionsForSave()
|
||||
|
||||
expect(optionsForSave.rows).to.eql(['year'])
|
||||
expect(optionsForSave.cols).to.eql(['item'])
|
||||
expect(optionsForSave.colOrder).to.equal('value_a_to_z')
|
||||
expect(optionsForSave.rowOrder).to.equal('value_z_to_a')
|
||||
expect(optionsForSave.aggregatorName).to.equal('Count')
|
||||
expect(optionsForSave.rendererName).to.equal('Table')
|
||||
expect(optionsForSave.rendererOptions).to.equal(undefined)
|
||||
expect(optionsForSave.vals).to.eql([])
|
||||
|
||||
await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
|
||||
rows: ['item'],
|
||||
cols: ['year'],
|
||||
colOrder: 'value_a_to_z',
|
||||
rowOrder: 'value_z_to_a',
|
||||
aggregator: $.pivotUtilities.aggregators.Count(),
|
||||
aggregatorName: 'Count',
|
||||
renderer: $.pivotUtilities.renderers['Custom chart'],
|
||||
rendererName: 'Custom chart',
|
||||
rendererOptions: {
|
||||
customChartComponent: {
|
||||
getOptionsForSave () {
|
||||
return { here_are: 'custom chart settings' }
|
||||
}
|
||||
}
|
||||
},
|
||||
vals: []
|
||||
})
|
||||
|
||||
optionsForSave = wrapper.vm.getOptionsForSave()
|
||||
expect(optionsForSave.rows).to.eql(['item'])
|
||||
expect(optionsForSave.cols).to.eql(['year'])
|
||||
expect(optionsForSave.colOrder).to.equal('value_a_to_z')
|
||||
expect(optionsForSave.rowOrder).to.equal('value_z_to_a')
|
||||
expect(optionsForSave.aggregatorName).to.equal('Count')
|
||||
expect(optionsForSave.rendererName).to.equal('Custom chart')
|
||||
expect(optionsForSave.rendererOptions).to.eql({
|
||||
customChartOptions: { here_are: 'custom chart settings' }
|
||||
})
|
||||
expect(optionsForSave.vals).to.eql([])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,21 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn'
|
||||
|
||||
describe('PivotSortBtn.vue', () => {
|
||||
it('switches order', async () => {
|
||||
const wrapper = shallowMount(PivotSortBtn, { propsData: { value: 'key_a_to_z' } })
|
||||
|
||||
expect(wrapper.vm.value).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'])
|
||||
|
||||
await wrapper.setProps({ value: 'value_a_to_z' })
|
||||
await wrapper.find('.pivot-sort-btn').trigger('click')
|
||||
expect(wrapper.emitted('input')[1]).to.eql(['value_z_to_a'])
|
||||
|
||||
await wrapper.setProps({ value: 'value_z_to_a' })
|
||||
await wrapper.find('.pivot-sort-btn').trigger('click')
|
||||
expect(wrapper.emitted('input')[2]).to.eql(['key_a_to_z'])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,143 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import PivotUi from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi'
|
||||
|
||||
describe('PivotUi.vue', () => {
|
||||
it('returns value when settings changed', async () => {
|
||||
const wrapper = mount(PivotUi, {
|
||||
propsData: {
|
||||
keyNames: ['foo', 'bar']
|
||||
}
|
||||
})
|
||||
|
||||
// choose columns
|
||||
await wrapper.findAll('.sqliteviz-select.cols .multiselect__element > span').at(0)
|
||||
.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([])
|
||||
|
||||
// choose rows
|
||||
await wrapper.findAll('.sqliteviz-select.rows .multiselect__element > span').at(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([])
|
||||
|
||||
// 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([])
|
||||
|
||||
// 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([])
|
||||
|
||||
// change aggregator
|
||||
await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span').at(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(['', ''])
|
||||
|
||||
// set first aggregator argument
|
||||
await wrapper
|
||||
.findAll('.sqliteviz-select.aggr-arg').at(0)
|
||||
.findAll('.multiselect__element > span').at(0)
|
||||
.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', ''])
|
||||
|
||||
// set second aggregator argument
|
||||
await wrapper
|
||||
.findAll('.sqliteviz-select.aggr-arg').at(1)
|
||||
.findAll('.multiselect__element > span').at(1)
|
||||
.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'])
|
||||
|
||||
// change renderer
|
||||
await wrapper.findAll('.sqliteviz-select.renderer .multiselect__element > span').at(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'])
|
||||
|
||||
// change aggregator again
|
||||
await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span').at(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'])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,56 @@
|
||||
import { expect } from 'chai'
|
||||
import { _getDataSources } from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/pivotHelper'
|
||||
|
||||
describe('pivotHelper.js', () => {
|
||||
it('_getDataSources returns data sources', () => {
|
||||
/*
|
||||
+---+---+---------+---------+
|
||||
| | x | 5 | 10 |
|
||||
| +---+----+----+----+----+
|
||||
| | z | 2 | 3 | 1 | 6 |
|
||||
+---+---+ | | | |
|
||||
| y | | | | | |
|
||||
+---+---+----+----+----+----+
|
||||
| 3 | 5 | 6 | 4 | 9 |
|
||||
+-------+----+----+----+----+
|
||||
| 6 | 8 | 9 | 7 | 12 |
|
||||
+-------+----+----+----+----+
|
||||
| 9 | 11 | 12 | 10 | 15 |
|
||||
+-------+----+----+----+----+
|
||||
*/
|
||||
const pivotData = {
|
||||
rowAttrs: ['y'],
|
||||
colAttrs: ['x', 'z'],
|
||||
getRowKeys () {
|
||||
return [[3], [6], [9]]
|
||||
},
|
||||
getColKeys () {
|
||||
return [
|
||||
[5, 2],
|
||||
[5, 3],
|
||||
[10, 1],
|
||||
[10, 6]
|
||||
]
|
||||
},
|
||||
getAggregator (row, col) {
|
||||
return {
|
||||
value () {
|
||||
return +row + +col[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expect(_getDataSources(pivotData)).to.eql({
|
||||
'Column keys': ['5-2', '5-3', '10-1', '10-6'],
|
||||
'Row keys': ['3', '6', '9'],
|
||||
'x-z:5-2': [5, 8, 11],
|
||||
'x-z:5-3': [6, 9, 12],
|
||||
'x-z:10-1': [4, 7, 10],
|
||||
'x-z:10-6': [9, 12, 15],
|
||||
'y:3': [5, 6, 4, 9],
|
||||
'y:6': [8, 9, 7, 12],
|
||||
'y:9': [11, 12, 10, 15]
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import * as chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
|
||||
import * as chartHelper from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart/chartHelper'
|
||||
import * as dereference from 'react-chart-editor/lib/lib/dereference'
|
||||
|
||||
describe('chartHelper.js', () => {
|
||||
@@ -8,22 +8,6 @@ describe('chartHelper.js', () => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('getDataSourcesFromSqlResult', () => {
|
||||
const sqlResult = {
|
||||
columns: ['id', 'name'],
|
||||
values: [
|
||||
[1, 'foo'],
|
||||
[2, 'bar']
|
||||
]
|
||||
}
|
||||
|
||||
const ds = chartHelper.getDataSourcesFromSqlResult(sqlResult)
|
||||
expect(ds).to.eql({
|
||||
id: [1, 2],
|
||||
name: ['foo', 'bar']
|
||||
})
|
||||
})
|
||||
|
||||
it('getOptionsFromDataSources', () => {
|
||||
const dataSources = {
|
||||
id: [1, 2],
|
||||
@@ -37,7 +21,7 @@ describe('chartHelper.js', () => {
|
||||
])
|
||||
})
|
||||
|
||||
it('getChartStateForSave', () => {
|
||||
it('getOptionsForSave', () => {
|
||||
const state = {
|
||||
data: {
|
||||
foo: {},
|
||||
@@ -53,7 +37,7 @@ describe('chartHelper.js', () => {
|
||||
sinon.stub(dereference, 'default')
|
||||
sinon.spy(JSON, 'parse')
|
||||
|
||||
const ds = chartHelper.getChartStateForSave(state, dataSources)
|
||||
const ds = chartHelper.getOptionsForSave(state, dataSources)
|
||||
|
||||
expect(dereference.default.calledOnce).to.equal(true)
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import SqlEditor from '@/views/Main/Workspace/Tabs/Tab/SqlEditor'
|
||||
|
||||
describe('SqlEditor.vue', () => {
|
||||
it('Emits input event when a query is changed', async () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
db: {}
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ 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'])
|
||||
})
|
||||
|
||||
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 wrapper = mount(SqlEditor, { store, propsData: { isGettingResults: false } })
|
||||
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
|
||||
const runButton = wrapper.findComponent({ name: 'RunIcon' }).vm.$parent
|
||||
|
||||
expect(runButton.disabled).to.equal(true)
|
||||
|
||||
await wrapper.vm.$set(store.state, 'db', {})
|
||||
expect(runButton.disabled).to.equal(false)
|
||||
|
||||
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', '')
|
||||
expect(runButton.disabled).to.equal(true)
|
||||
|
||||
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
|
||||
expect(runButton.disabled).to.equal(false)
|
||||
|
||||
await wrapper.setProps({ isGettingResults: true })
|
||||
expect(runButton.disabled).to.equal(true)
|
||||
})
|
||||
})
|
||||
@@ -1,7 +1,7 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import state from '@/store/state'
|
||||
import showHint, { getHints } from '@/views/Main/Editor/Tabs/Tab/SqlEditor/hint'
|
||||
import showHint, { getHints } from '@/views/Main/Workspace/Tabs/Tab/SqlEditor/hint'
|
||||
import CM from 'codemirror'
|
||||
|
||||
describe('hint.js', () => {
|
||||
@@ -1,13 +1,21 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { mount, createWrapper } from '@vue/test-utils'
|
||||
import mutations from '@/store/mutations'
|
||||
import Vuex from 'vuex'
|
||||
import Tab from '@/views/Main/Editor/Tabs/Tab'
|
||||
import Tab from '@/views/Main/Workspace/Tabs/Tab'
|
||||
|
||||
let place
|
||||
|
||||
describe('Tab.vue', () => {
|
||||
beforeEach(() => {
|
||||
place = document.createElement('div')
|
||||
document.body.appendChild(place)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
place.remove()
|
||||
})
|
||||
|
||||
it('Renders passed query', () => {
|
||||
@@ -19,21 +27,24 @@ describe('Tab.vue', () => {
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Tab, {
|
||||
attachTo: place,
|
||||
store,
|
||||
stubs: ['chart'],
|
||||
propsData: {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo',
|
||||
initChart: [],
|
||||
initViewType: 'chart',
|
||||
initViewOptions: [],
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('.table-view').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('.query-editor').text()).to.equal('SELECT * FROM foo')
|
||||
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')
|
||||
})
|
||||
|
||||
it("Doesn't render tab when it's not active", () => {
|
||||
@@ -54,29 +65,6 @@ describe('Tab.vue', () => {
|
||||
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
|
||||
})
|
||||
|
||||
it("Shows chart when view equals 'chart'", async () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
currentTabId: 1
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Tab, {
|
||||
store,
|
||||
stubs: ['chart'],
|
||||
propsData: {
|
||||
id: 1
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.findComponent({ ref: 'chart' }).vm.visible).to.equal(false)
|
||||
await wrapper.setData({ view: 'chart' })
|
||||
expect(wrapper.find('.table-view').isVisible()).to.equal(false)
|
||||
expect(wrapper.findComponent({ ref: 'chart' }).vm.visible).to.equal(true)
|
||||
})
|
||||
|
||||
it('Is not visible when not active', async () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
@@ -123,7 +111,7 @@ describe('Tab.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isUnsaved: false }
|
||||
{ id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isSaved: true }
|
||||
],
|
||||
currentTabId: 1
|
||||
}
|
||||
@@ -138,13 +126,14 @@ describe('Tab.vue', () => {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo',
|
||||
initChart: [],
|
||||
initViewOptions: [],
|
||||
initViewType: 'chart',
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
})
|
||||
await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
|
||||
expect(state.tabs[0].isUnsaved).to.equal(true)
|
||||
expect(state.tabs[0].isSaved).to.equal(false)
|
||||
})
|
||||
|
||||
it('Shows .result-in-progress message when executing query', async () => {
|
||||
@@ -165,7 +154,8 @@ describe('Tab.vue', () => {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo',
|
||||
initChart: [],
|
||||
initViewOptions: [],
|
||||
initViewType: 'chart',
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
@@ -173,8 +163,7 @@ describe('Tab.vue', () => {
|
||||
|
||||
wrapper.vm.execute()
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('.table-view .result-in-progress').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('.run-result-panel .result-in-progress').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Shows error when executing query ends with error', async () => {
|
||||
@@ -196,26 +185,24 @@ describe('Tab.vue', () => {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo',
|
||||
initChart: [],
|
||||
initViewOptions: [],
|
||||
initViewType: 'chart',
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.execute()
|
||||
expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('.table-view .result-in-progress').exists()).to.equal(false)
|
||||
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)
|
||||
expect(wrapper.findComponent({ name: 'logs' }).text()).to.include('There is no table foo')
|
||||
})
|
||||
|
||||
it('Passes result to sql-table component', async () => {
|
||||
const result = {
|
||||
columns: ['id', 'name'],
|
||||
values: [
|
||||
[1, 'foo'],
|
||||
[2, 'bar']
|
||||
]
|
||||
id: [1, 2],
|
||||
name: ['foo', 'bar']
|
||||
}
|
||||
// mock store state
|
||||
const state = {
|
||||
@@ -236,23 +223,24 @@ describe('Tab.vue', () => {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo',
|
||||
initChart: [],
|
||||
initViewOptions: [],
|
||||
initViewType: 'chart',
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.execute()
|
||||
expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('.table-view .result-in-progress').exists()).to.equal(false)
|
||||
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)
|
||||
expect(wrapper.findComponent({ name: 'SqlTable' }).vm.dataSet).to.eql(result)
|
||||
})
|
||||
|
||||
it('Updates schema after query execution', async () => {
|
||||
const result = {
|
||||
columns: ['id', 'name'],
|
||||
values: []
|
||||
id: [],
|
||||
name: []
|
||||
}
|
||||
|
||||
// mock store state
|
||||
@@ -275,7 +263,8 @@ describe('Tab.vue', () => {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
|
||||
initChart: [],
|
||||
initViewOptions: [],
|
||||
initViewType: 'chart',
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
@@ -284,4 +273,52 @@ describe('Tab.vue', () => {
|
||||
await wrapper.vm.execute()
|
||||
expect(state.db.refreshSchema.calledOnce).to.equal(true)
|
||||
})
|
||||
|
||||
it('Switches views', async () => {
|
||||
const state = {
|
||||
currentTabId: 1,
|
||||
db: {}
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(Tab, {
|
||||
attachTo: place,
|
||||
store,
|
||||
stubs: ['chart'],
|
||||
propsData: {
|
||||
id: 1,
|
||||
initName: 'foo',
|
||||
initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
|
||||
initViewOptions: [],
|
||||
initViewType: 'chart',
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
})
|
||||
|
||||
let tableBtn = createWrapper(wrapper.find('.above .side-tool-bar').findComponent({ name: 'tableIcon' }).vm.$parent)
|
||||
await tableBtn.trigger('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 = createWrapper(wrapper.find('.above .side-tool-bar').findComponent({ name: 'dataViewIcon' }).vm.$parent)
|
||||
await dataViewBtn.trigger('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 = createWrapper(wrapper.find('.above .side-tool-bar').findComponent({ name: 'sqlEditorIcon' }).vm.$parent)
|
||||
await sqlEditorBtn.trigger('click')
|
||||
|
||||
expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
|
||||
expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
|
||||
|
||||
tableBtn = createWrapper(wrapper.find('.bottomPane .side-tool-bar').findComponent({ name: 'tableIcon' }).vm.$parent)
|
||||
await tableBtn.trigger('click')
|
||||
|
||||
expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
|
||||
expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
|
||||
})
|
||||
})
|
||||
@@ -3,7 +3,7 @@ import sinon from 'sinon'
|
||||
import { shallowMount, mount, createWrapper } from '@vue/test-utils'
|
||||
import mutations from '@/store/mutations'
|
||||
import Vuex from 'vuex'
|
||||
import Tabs from '@/views/Main/Editor/Tabs'
|
||||
import Tabs from '@/views/Main/Workspace/Tabs'
|
||||
|
||||
describe('Tabs.vue', () => {
|
||||
afterEach(() => {
|
||||
@@ -31,8 +31,8 @@ describe('Tabs.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -65,8 +65,8 @@ describe('Tabs.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -94,8 +94,8 @@ describe('Tabs.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -125,8 +125,8 @@ describe('Tabs.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -166,8 +166,8 @@ describe('Tabs.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -199,9 +199,9 @@ describe('Tabs.vue', () => {
|
||||
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
||||
expect(firstTab.classes()).to.include('tab-selected')
|
||||
|
||||
// check that 'saveQuery' event was not emited
|
||||
// check that 'saveInquiry' event was not emited
|
||||
const rootWrapper = createWrapper(wrapper.vm.$root)
|
||||
expect(rootWrapper.emitted('saveQuery')).to.equal(undefined)
|
||||
expect(rootWrapper.emitted('saveInquiry')).to.equal(undefined)
|
||||
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
|
||||
@@ -211,8 +211,8 @@ describe('Tabs.vue', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -237,8 +237,8 @@ describe('Tabs.vue', () => {
|
||||
// click 'Save and close' in the dialog
|
||||
await closeBtn.trigger('click')
|
||||
|
||||
// pretend like saving is completed - trigger 'querySaved' on $root
|
||||
await wrapper.vm.$root.$emit('querySaved')
|
||||
// pretend like saving is completed - trigger 'inquirySaved' on $root
|
||||
await wrapper.vm.$root.$emit('inquirySaved')
|
||||
|
||||
// check that tab is closed
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
||||
@@ -247,20 +247,20 @@ describe('Tabs.vue', () => {
|
||||
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
||||
expect(firstTab.classes()).to.include('tab-selected')
|
||||
|
||||
// check that 'saveQuery' event was emited
|
||||
// check that 'saveInquiry' event was emited
|
||||
const rootWrapper = createWrapper(wrapper.vm.$root)
|
||||
expect(rootWrapper.emitted('saveQuery')).to.have.lengthOf(1)
|
||||
expect(rootWrapper.emitted('saveInquiry')).to.have.lengthOf(1)
|
||||
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Prevents closing a tab of a browser if there is unsaved query', () => {
|
||||
it('Prevents closing a tab of a browser if there is unsaved inquiry', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isUnsaved: true }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
|
||||
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
@@ -280,11 +280,11 @@ describe('Tabs.vue', () => {
|
||||
expect(event.preventDefault.calledOnce).to.equal(true)
|
||||
})
|
||||
|
||||
it("Doesn't prevent closing a tab of a browser if there is unsaved query", () => {
|
||||
it("Doesn't prevent closing a tab of a browser if there is unsaved inquiry", () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isUnsaved: false }
|
||||
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true }
|
||||
],
|
||||
currentTabId: 1
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { mount, shallowMount } from '@vue/test-utils'
|
||||
import Chart from '@/views/Main/Editor/Tabs/Tab/Chart'
|
||||
import chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
|
||||
import * as dereference from 'react-chart-editor/lib/lib/dereference'
|
||||
|
||||
describe('Chart.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('getChartStateForSave called with proper arguments', () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Chart)
|
||||
const vm = wrapper.vm
|
||||
const stub = sinon.stub(chartHelper, 'getChartStateForSave').returns('result')
|
||||
const chartData = vm.getChartStateForSave()
|
||||
expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
|
||||
expect(chartData).to.equal('result')
|
||||
})
|
||||
|
||||
it('is not visible when visible is false', () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Chart, {
|
||||
propsData: { visible: false }
|
||||
})
|
||||
|
||||
expect(wrapper.find('.chart-container').isVisible()).to.equal(false)
|
||||
})
|
||||
|
||||
it('is visible when visible is true', () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Chart, {
|
||||
propsData: { visible: true }
|
||||
})
|
||||
|
||||
expect(wrapper.find('.chart-container').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('emits update when plotly updates', async () => {
|
||||
// mount the component
|
||||
const wrapper = mount(Chart)
|
||||
wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
|
||||
expect(wrapper.emitted('update')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('calls dereference when sqlResult is changed', async () => {
|
||||
sinon.stub(dereference, 'default')
|
||||
const sqlResult = {
|
||||
columns: ['id', 'name'],
|
||||
values: [[1, 'foo']]
|
||||
}
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Chart, {
|
||||
propsData: { sqlResult: sqlResult }
|
||||
})
|
||||
|
||||
const newSqlResult = {
|
||||
columns: ['id', 'name'],
|
||||
values: [[2, 'bar']]
|
||||
}
|
||||
|
||||
await wrapper.setProps({ sqlResult: newSqlResult })
|
||||
expect(dereference.default.called).to.equal(true)
|
||||
})
|
||||
})
|
||||
@@ -1,11 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import SqlEditor from '@/views/Main/Editor/Tabs/Tab/SqlEditor'
|
||||
|
||||
describe('SqlEditor.vue', () => {
|
||||
it('Emits input event when a query is changed', async () => {
|
||||
const wrapper = mount(SqlEditor)
|
||||
await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
|
||||
expect(wrapper.emitted('input')[0]).to.eql(['SELECT * FROM foo'])
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user