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

change code structure

This commit is contained in:
lana-k
2021-05-04 14:13:58 +02:00
parent a07f2d3d99
commit cc483f4720
72 changed files with 297 additions and 311 deletions

View File

@@ -0,0 +1,68 @@
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)
})
})

View File

@@ -0,0 +1,72 @@
import { expect } from 'chai'
import sinon from 'sinon'
import * as chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
import * as dereference from 'react-chart-editor/lib/lib/dereference'
describe('chartHelper.js', () => {
afterEach(() => {
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],
name: ['foo', 'bar']
}
const ds = chartHelper.getOptionsFromDataSources(dataSources)
expect(ds).to.eql([
{ value: 'id', label: 'id' },
{ value: 'name', label: 'name' }
])
})
it('getChartStateForSave', () => {
const state = {
data: {
foo: {},
bar: {}
},
layout: {},
frames: {}
}
const dataSources = {
id: [1, 2],
name: ['foo', 'bar']
}
sinon.stub(dereference, 'default')
sinon.spy(JSON, 'parse')
const ds = chartHelper.getChartStateForSave(state, dataSources)
expect(dereference.default.calledOnce).to.equal(true)
const args = dereference.default.firstCall.args
expect(args[0]).to.eql({
foo: {},
bar: {}
})
expect(args[1]).to.eql({
id: [],
name: []
})
expect(ds).to.equal(JSON.parse.returnValues[0])
})
})

View File

@@ -0,0 +1,12 @@
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'])
// Take a pause to keep proper state in debounced '@/views/Main/Editor/Tabs/Tab/SqlEditor/hint'
})
})

View File

@@ -0,0 +1,211 @@
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 CM from 'codemirror'
describe('hint.js', () => {
afterEach(() => {
sinon.restore()
})
it('Calculates table list for hint', () => {
// mock store state
const schema = [
{
name: 'foo',
columns: [
{ name: 'fooId', type: 'INTEGER' },
{ name: 'name', type: 'NVARCHAR(20)' }
]
},
{
name: 'bar',
columns: [
{ name: 'barId', type: 'INTEGER' }
]
}
]
sinon.stub(state, 'schema').value(schema)
// mock showHint and editor
sinon.stub(CM, 'showHint')
const editor = {
getTokenAt () {
return {
string: 'SELECT',
type: 'keyword'
}
},
getCursor: sinon.stub()
}
showHint(editor)
expect(CM.showHint.called).to.equal(true)
expect(CM.showHint.firstCall.args[2].tables).to.eql({
foo: ['fooId', 'name'],
bar: ['barId']
})
expect(CM.showHint.firstCall.args[2].defaultTable).to.equal(null)
})
it('Add default table if there is only one table in schema', () => {
// mock store state
const schema = [
{
name: 'foo',
columns: [
{ name: 'fooId', type: 'INTEGER' },
{ name: 'name', type: 'NVARCHAR(20)' }
]
}
]
sinon.stub(state, 'schema').value(schema)
// mock showHint and editor
sinon.stub(CM, 'showHint')
const editor = {
getTokenAt () {
return {
string: 'SELECT',
type: 'keyword'
}
},
getCursor: sinon.stub()
}
showHint(editor)
expect(CM.showHint.firstCall.args[2].defaultTable).to.equal('foo')
})
it("Doesn't show hint when in string or space, or ';'", () => {
// mock showHint and editor
sinon.stub(CM, 'showHint')
const editor = {
getTokenAt () {
return {
string: 'foo',
type: 'string'
}
},
getCursor: sinon.stub()
}
showHint(editor)
expect(CM.showHint.called).to.equal(false)
})
it("Doesn't show hint after space", () => {
// mock showHint and editor
sinon.stub(CM, 'showHint')
const editor = {
getTokenAt () {
return {
string: ' ',
type: null
}
},
getCursor: sinon.stub()
}
showHint(editor)
expect(CM.showHint.called).to.equal(false)
})
it("Doesn't show hint after ';'", () => {
// mock showHint and editor
sinon.stub(CM, 'showHint')
const editor = {
getTokenAt () {
return {
string: ';',
type: 'punctuation'
}
},
getCursor: sinon.stub()
}
showHint(editor)
expect(CM.showHint.called).to.equal(false)
})
it('getHints returns [ ] if there is only one option and the token is already completed with this option', () => {
// mock CM.hint.sql and editor
sinon.stub(CM.hint, 'sql').returns({ list: [{ text: 'SELECT' }] })
const editor = {
getTokenAt () {
return {
string: 'select',
type: 'keyword'
}
},
getCursor: sinon.stub()
}
const hints = getHints(editor, {})
expect(hints.list).to.eql([])
})
it('getHints returns hints as is when there are more than one option', () => {
// mock CM.hint.sql and editor
const list = [
{ text: 'SELECT' },
{ text: 'ST' }
]
sinon.stub(CM.hint, 'sql').returns({ list })
const editor = {
getTokenAt () {
return {
string: 'se',
type: 'keyword'
}
},
getCursor: sinon.stub()
}
const hints = getHints(editor, {})
expect(hints.list).to.eql(list)
sinon.restore()
})
it('getHints returns hints as is when there only one option but the token is not cpmpleted', () => {
// mock CM.hint.sql and editor
const list = [{ text: 'SELECT' }]
sinon.stub(CM.hint, 'sql').returns({ list })
const editor = {
getTokenAt () {
return {
string: 'sele',
type: 'keyword'
}
},
getCursor: sinon.stub()
}
const hints = getHints(editor, {})
expect(hints.list).to.eql(list)
})
it('tables is empty object when schema is null', () => {
// mock store state
sinon.stub(state, 'schema').value(null)
// mock showHint and editor
sinon.stub(CM, 'showHint')
const editor = {
getTokenAt () {
return {
string: 'SELECT',
type: 'keyword'
}
},
getCursor: sinon.stub()
}
showHint(editor)
expect(CM.showHint.called).to.equal(true)
expect(CM.showHint.firstCall.args[2].tables).to.eql({})
})
})

View File

@@ -0,0 +1,305 @@
import { expect } from 'chai'
import sinon from 'sinon'
import { mount } from '@vue/test-utils'
import mutations from '@/store/mutations'
import Vuex from 'vuex'
import Tab from '@/views/Main/Editor/Tabs/Tab'
describe('Tab.vue', () => {
afterEach(() => {
sinon.restore()
})
it('Renders passed query', () => {
// 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,
initName: 'foo',
initQuery: 'SELECT * FROM foo',
initChart: [],
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')
})
it("Doesn't render tab when it's not active", () => {
// mock store state
const state = {
currentTabId: 0
}
const store = new Vuex.Store({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
stubs: ['chart'],
propsData: {
id: 1
}
})
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 = {
currentTabId: 0
}
const store = new Vuex.Store({ state, mutations })
// mount the component
const wrapper = mount(Tab, {
store,
stubs: ['chart'],
propsData: {
id: 1
}
})
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
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: [], isUnsaved: false }
],
currentTabId: 1
}
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',
initChart: [],
tabIndex: 0,
isPredefined: false
}
})
await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
expect(state.tabs[0].isUnsaved).to.equal(true)
})
it('Shows .result-in-progress message when executing query', async () => {
// mock store state
const state = {
currentTabId: 1,
db: {
execute () { return new Promise(() => {}) }
}
}
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',
initChart: [],
tabIndex: 0,
isPredefined: false
}
})
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)
})
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'))
}
}
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',
initChart: [],
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').isVisible()).to.equal(false)
expect(wrapper.find('.table-preview.error').isVisible()).to.equal(true)
expect(wrapper.find('.table-preview.error').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']
]
}
// mock store state
const state = {
currentTabId: 1,
db: {
execute: sinon.stub().resolves(result),
getSchema: sinon.stub().resolves({ dbName: '', schema: [] })
}
}
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',
initChart: [],
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').isVisible()).to.equal(false)
expect(wrapper.find('.table-preview.error').isVisible()).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: []
}
const newSchema = {
dbName: 'fooDb',
schema: [
{
name: 'foo',
columns: [
{ name: 'id', type: 'INTEGER' },
{ name: 'title', type: 'NVARCHAR(30)' }
]
},
{
name: 'bar',
columns: [
{ name: 'a', type: 'N/A' },
{ name: 'b', type: 'N/A' }
]
}
]
}
// mock store state
const state = {
currentTabId: 1,
dbName: 'fooDb',
db: {
execute: sinon.stub().resolves(result),
getSchema: sinon.stub().resolves(newSchema)
}
}
sinon.spy(mutations, 'saveSchema')
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);',
initChart: [],
tabIndex: 0,
isPredefined: false
}
})
await wrapper.vm.execute()
expect(state.db.getSchema.calledOnceWith('fooDb')).to.equal(true)
expect(mutations.saveSchema.calledOnceWith(state, newSchema)).to.equal(true)
})
})