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

Tab refactor

Browse Source
This commit is contained in:
lana-k
2023-06-01 14:42:51 +02:00
parent db3dbdf993
commit 998e8d66f7
15 changed files with 810 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,7 +45,7 @@ describe('MainMenu.vue', () => {
it('Save is not visible if there is no tabs', () => {
const state = {
currentTab: null,
tabs: [{}],
tabs: [],
db: {}
}
const store = new Vuex.Store({ state })
@@ -62,13 +62,15 @@ describe('MainMenu.vue', () => {
})
it('Save is disabled if current tab.isSaved is true', async () => {
const tab = {
id: 1,
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
@@ -83,17 +85,19 @@ describe('MainMenu.vue', () => {
expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
await vm.$set(state.tabs[0], 'isSaved', true)
await vm.$nextTick()
expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
})
it('Creates a tab', async () => {
const tab = {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const newInquiryId = 1
@@ -121,13 +125,14 @@ describe('MainMenu.vue', () => {
})
it('Creates a tab and redirects to workspace', async () => {
const tab = {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const newInquiryId = 1
@@ -156,13 +161,14 @@ describe('MainMenu.vue', () => {
it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/workspace"',
async () => {
const tab = {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
@@ -201,13 +207,14 @@ describe('MainMenu.vue', () => {
it('Ctrl Enter calls currentTab.execute if running is enabled and route.path is "/workspace"',
async () => {
const tab = {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
@@ -245,13 +252,14 @@ describe('MainMenu.vue', () => {
})
it('Ctrl B calls createNewInquiry', async () => {
const tab = {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
@@ -280,13 +288,14 @@ describe('MainMenu.vue', () => {
it('Ctrl S calls checkInquiryBeforeSave if the tab is unsaved and route path is /workspace',
async () => {
const tab = {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const store = new Vuex.Store({ state })
@@ -325,13 +334,16 @@ describe('MainMenu.vue', () => {
it('Saves the inquiry when no need the new name',
async () => {
const tab = {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ id: 1, name: 'foo', isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const mutations = {
@@ -364,13 +376,15 @@ describe('MainMenu.vue', () => {
// check that the tab was updated
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
index: 0,
name: 'foo',
id: 1,
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: [],
isSaved: true
tab,
newValues: {
name: 'foo',
id: 1,
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: [],
isSaved: true
}
}))).to.equal(true)
// check that 'inquirySaved' event was triggered on $root
@@ -378,13 +392,17 @@ describe('MainMenu.vue', () => {
})
it('Shows en error when the new name is needed but not specifyied', async () => {
const tab = {
id: 1,
name: null,
tempName: 'Untitled',
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const mutations = {
@@ -424,13 +442,17 @@ describe('MainMenu.vue', () => {
})
it('Saves the inquiry with a new name', async () => {
const tab = {
id: 1,
name: null,
tempName: 'Untitled',
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const mutations = {
@@ -475,13 +497,15 @@ describe('MainMenu.vue', () => {
// check that the tab was updated
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
index: 0,
name: 'foo',
id: 1,
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: [],
isSaved: true
tab: tab,
newValues: {
name: 'foo',
id: 1,
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: [],
isSaved: true
}
}))).to.equal(true)
// check that 'inquirySaved' event was triggered on $root
@@ -489,23 +513,26 @@ describe('MainMenu.vue', () => {
})
it('Saves a predefined inquiry with a new name', async () => {
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0,
isPredefined: true,
result: {
columns: ['id', 'name'],
values: [
[1, 'Harry Potter'],
[2, 'Drako Malfoy']
]
},
viewType: 'chart',
viewOptions: []
const tab = {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isPredefined: true,
result: {
columns: ['id', 'name'],
values: [
[1, 'Harry Potter'],
[2, 'Drako Malfoy']
]
},
tabs: [{ id: 1, name: 'foo', isSaved: false, isPredefined: true }],
viewType: 'chart',
viewOptions: [],
isSaved: false
}
const state = {
currentTab: tab,
tabs: [tab],
db: {}
}
const mutations = {
@@ -553,13 +580,15 @@ describe('MainMenu.vue', () => {
// check that the tab was updated
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
index: 0,
name: 'bar',
id: 2,
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: [],
isSaved: true
tab,
newValues: {
name: 'bar',
id: 2,
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: [],
isSaved: true
}
}))).to.equal(true)
// check that 'inquirySaved' event was triggered on $root
@@ -580,13 +609,17 @@ describe('MainMenu.vue', () => {
})
it('Cancel saving', async () => {
const tab = {
id: 1,
name: null,
tempName: 'Untitled',
query: 'SELECT * FROM foo',
execute: sinon.stub(),
isSaved: false
}
const state = {
currentTab: {
query: 'SELECT * FROM foo',
execute: sinon.stub(),
tabIndex: 0
},
tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
currentTab: tab,
tabs: [tab],
db: {}
}
const mutations = {

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

@@ -31,13 +31,23 @@ describe('Tab.vue', () => {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initViewType: 'chart',
initViewOptions: [],
tabIndex: 0,
isPredefined: false
tab: {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0
}
}
})
@@ -60,7 +70,23 @@ describe('Tab.vue', () => {
store,
stubs: ['chart'],
propsData: {
id: 1
tab: {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0
}
}
})
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
@@ -79,40 +105,51 @@ describe('Tab.vue', () => {
store,
stubs: ['chart'],
propsData: {
id: 1
tab: {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0
}
}
})
expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
})
it('Calls setCurrentTab when becomes active', async () => {
// mock store state
const state = {
currentTabId: 0
}
sinon.spy(mutations, 'setCurrentTab')
const store = new Vuex.Store({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
stubs: ['chart'],
propsData: {
id: 1
}
})
state.currentTabId = 1
await wrapper.vm.$nextTick()
expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true)
})
it('Update tab state when a query is changed', async () => {
// mock store state
const state = {
tabs: [
{ id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isSaved: true }
{
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0,
isSaved: true
}
],
currentTabId: 1
}
@@ -124,13 +161,7 @@ describe('Tab.vue', () => {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initViewOptions: [],
initViewType: 'chart',
tabIndex: 0,
isPredefined: false
tab: state.tabs[0]
}
})
await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
@@ -141,7 +172,24 @@ describe('Tab.vue', () => {
// mock store state
const state = {
tabs: [
{ id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isSaved: true }
{
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0,
isSaved: true
}
],
currentTabId: 1
}
@@ -153,13 +201,7 @@ describe('Tab.vue', () => {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initViewOptions: [],
initViewType: 'chart',
tabIndex: 0,
isPredefined: false
tab: state.tabs[0]
}
})
await wrapper.findComponent({ name: 'DataView' }).vm.$emit('update')
@@ -169,29 +211,38 @@ describe('Tab.vue', () => {
it('Shows .result-in-progress message when executing query', async () => {
// mock store state
const state = {
currentTabId: 1,
db: {
execute () { return new Promise(() => {}) }
}
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
// mount the component
const tab = {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0,
isSaved: true
}
const wrapper = mount(Tab, {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initViewOptions: [],
initViewType: 'chart',
tabIndex: 0,
isPredefined: false
tab
}
})
wrapper.vm.execute()
tab.isGettingResults = true
await wrapper.vm.$nextTick()
expect(wrapper.find('.run-result-panel .result-in-progress').isVisible()).to.equal(true)
})
@@ -199,30 +250,42 @@ describe('Tab.vue', () => {
it('Shows error when executing query ends with error', async () => {
// mock store state
const state = {
currentTabId: 1,
db: {
execute: sinon.stub().rejects(new Error('There is no table foo')),
refreshSchema: sinon.stub().resolves()
}
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
const tab = {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0,
isSaved: true
}
// mount the component
const wrapper = mount(Tab, {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initViewOptions: [],
initViewType: 'chart',
tabIndex: 0,
isPredefined: false
tab
}
})
await wrapper.vm.execute()
tab.error = {
type: 'error',
message: 'There is no table foo'
}
await wrapper.vm.$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)
@@ -239,11 +302,26 @@ describe('Tab.vue', () => {
}
// mock store state
const state = {
currentTabId: 1,
db: {
execute: sinon.stub().resolves(result),
refreshSchema: sinon.stub().resolves()
}
currentTabId: 1
}
const tab = {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0,
isSaved: true
}
const store = new Vuex.Store({ state, mutations })
@@ -253,83 +331,50 @@ describe('Tab.vue', () => {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initViewOptions: [],
initViewType: 'chart',
tabIndex: 0,
isPredefined: false
tab
}
})
await wrapper.vm.execute()
tab.result = result
await wrapper.vm.$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)
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
const state = {
currentTabId: 1,
dbName: 'fooDb',
db: {
execute: sinon.stub().resolves(result),
refreshSchema: sinon.stub().resolves()
}
}
const store = new Vuex.Store({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
stubs: ['chart'],
propsData: {
id: 1,
initName: 'foo',
initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
initViewOptions: [],
initViewType: 'chart',
tabIndex: 0,
isPredefined: false
}
})
await wrapper.vm.execute()
expect(state.db.refreshSchema.calledOnce).to.equal(true)
})
it('Switches views', async () => {
const state = {
currentTabId: 1,
db: {}
currentTabId: 1
}
const store = new Vuex.Store({ state, mutations })
const tab = {
id: 1,
name: 'foo',
query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isPredefined: false,
result: null,
isGettingResults: false,
error: null,
time: 0,
isSaved: true
}
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
tab
}
})

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

@@ -94,8 +94,33 @@ describe('Tabs.vue', () => {
// mock store state
const state = {
tabs: [
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
{
id: 1,
name: 'foo',
query: 'select * from foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: true
},
{
id: 2,
name: null,
tempName: 'Untitled',
query: '',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: false
}
],
currentTabId: 2
}
@@ -125,8 +150,33 @@ describe('Tabs.vue', () => {
// mock store state
const state = {
tabs: [
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
{
id: 1,
name: 'foo',
query: 'select * from foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: true
},
{
id: 2,
name: null,
tempName: 'Untitled',
query: '',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: false
}
],
currentTabId: 2
}
@@ -166,8 +216,33 @@ describe('Tabs.vue', () => {
// mock store state
const state = {
tabs: [
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
{
id: 1,
name: 'foo',
query: 'select * from foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: true
},
{
id: 2,
name: null,
tempName: 'Untitled',
query: '',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: false
}
],
currentTabId: 2
}
@@ -211,8 +286,33 @@ describe('Tabs.vue', () => {
// mock store state
const state = {
tabs: [
{ id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
{ id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
{
id: 1,
name: 'foo',
query: 'select * from foo',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: true
},
{
id: 2,
name: null,
tempName: 'Untitled',
query: '',
viewType: 'chart',
viewOptions: {},
layout: {
sqlEditor: 'above',
table: 'bottom',
dataView: 'hidden'
},
isSaved: false
}
],
currentTabId: 2
}