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
@@ -1,178 +0,0 @@
|
||||
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 database from '@/lib/database'
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import csv from '@/components/CsvImport/csv'
|
||||
|
||||
const localVue = createLocalVue()
|
||||
localVue.use(Vuex)
|
||||
|
||||
describe('Schema.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('Renders DB name on initial', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
db: {
|
||||
dbName: 'fooDB'
|
||||
}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
|
||||
// mout the component
|
||||
const wrapper = mount(Schema, { store, localVue })
|
||||
|
||||
// check DB name and schema visibility
|
||||
expect(wrapper.find('.db-name').text()).to.equal('fooDB')
|
||||
expect(wrapper.find('.schema').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Schema visibility is toggled when click on DB name', async () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
db: {
|
||||
dbName: 'fooDB'
|
||||
}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
|
||||
// mout the component
|
||||
const wrapper = mount(Schema, { store, localVue })
|
||||
|
||||
// click and check visibility
|
||||
await wrapper.find('.db-name').trigger('click')
|
||||
expect(wrapper.find('.schema').isVisible()).to.equal(false)
|
||||
await wrapper.find('.db-name').trigger('click')
|
||||
expect(wrapper.find('.schema').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Schema filter', async () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
db: {
|
||||
dbName: 'fooDB',
|
||||
schema: [
|
||||
{
|
||||
name: 'foo',
|
||||
columns: [
|
||||
{ name: 'id', type: 'INTEGER' },
|
||||
{ name: 'title', type: 'NVARCHAR(24)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
columns: [
|
||||
{ name: 'id', type: 'INTEGER' },
|
||||
{ name: 'price', type: 'INTEGER' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'foobar',
|
||||
columns: [
|
||||
{ name: 'id', type: 'INTEGER' },
|
||||
{ name: 'price', type: 'INTEGER' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Schema, { store, localVue })
|
||||
|
||||
// apply filters and check the list of tables
|
||||
await wrapper.find('#schema-filter input').setValue('foo')
|
||||
let tables = wrapper.findAllComponents(TableDescription)
|
||||
expect(tables).to.have.lengthOf(2)
|
||||
expect(tables.at(0).vm.name).to.equal('foo')
|
||||
expect(tables.at(1).vm.name).to.equal('foobar')
|
||||
|
||||
await wrapper.find('#schema-filter input').setValue('bar')
|
||||
tables = wrapper.findAllComponents(TableDescription)
|
||||
expect(tables).to.have.lengthOf(2)
|
||||
expect(tables.at(0).vm.name).to.equal('bar')
|
||||
expect(tables.at(1).vm.name).to.equal('foobar')
|
||||
|
||||
await wrapper.find('#schema-filter input').setValue('')
|
||||
tables = wrapper.findAllComponents(TableDescription)
|
||||
expect(tables).to.have.lengthOf(3)
|
||||
expect(tables.at(0).vm.name).to.equal('foo')
|
||||
expect(tables.at(1).vm.name).to.equal('bar')
|
||||
expect(tables.at(2).vm.name).to.equal('foobar')
|
||||
})
|
||||
|
||||
it('exports db', async () => {
|
||||
const state = {
|
||||
db: {
|
||||
dbName: 'fooDB',
|
||||
export: sinon.stub().resolves()
|
||||
}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const wrapper = mount(Schema, { store, localVue })
|
||||
|
||||
await wrapper.findComponent({ name: 'export-icon' }).find('svg').trigger('click')
|
||||
expect(state.db.export.calledOnceWith('fooDB'))
|
||||
})
|
||||
|
||||
it('adds table', async () => {
|
||||
const file = { name: 'test.csv' }
|
||||
sinon.stub(fIo, 'getFileFromUser').resolves(file)
|
||||
|
||||
sinon.stub(csv, 'parse').resolves({
|
||||
delimiter: '|',
|
||||
data: {
|
||||
columns: ['col1', 'col2'],
|
||||
values: [
|
||||
[1, 'foo']
|
||||
]
|
||||
},
|
||||
hasErrors: false,
|
||||
messages: []
|
||||
})
|
||||
|
||||
const state = {
|
||||
db: database.getNewDatabase()
|
||||
}
|
||||
state.db.dbName = 'db'
|
||||
state.db.execute('CREATE TABLE foo(id)')
|
||||
state.db.refreshSchema()
|
||||
sinon.spy(state.db, 'refreshSchema')
|
||||
|
||||
const store = new Vuex.Store({ state })
|
||||
const wrapper = mount(Schema, { store, localVue })
|
||||
sinon.spy(wrapper.vm.$refs.addCsv, 'previewCsv')
|
||||
sinon.spy(wrapper.vm, 'addCsv')
|
||||
sinon.spy(wrapper.vm.$refs.addCsv, 'loadFromCsv')
|
||||
|
||||
await wrapper.findComponent({ name: 'add-table-icon' }).find('svg').trigger('click')
|
||||
await wrapper.vm.$refs.addCsv.previewCsv.returnValues[0]
|
||||
await wrapper.vm.addCsv.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('[data-modal="addCsv"]').exists()).to.equal(true)
|
||||
await wrapper.find('#csv-import').trigger('click')
|
||||
await wrapper.vm.$refs.addCsv.loadFromCsv.returnValues[0]
|
||||
await wrapper.find('#csv-finish').trigger('click')
|
||||
expect(wrapper.find('[data-modal="addCsv"]').exists()).to.equal(false)
|
||||
await state.db.refreshSchema.returnValues[0]
|
||||
|
||||
expect(wrapper.vm.$store.state.db.schema).to.eql([
|
||||
{ name: 'test', columns: [{ name: 'col1', type: 'real' }, { name: 'col2', type: 'text' }] },
|
||||
{ name: 'foo', columns: [{ name: 'id', type: 'N/A' }] }
|
||||
])
|
||||
|
||||
const res = await wrapper.vm.$store.state.db.execute('select * from test')
|
||||
expect(res).to.eql({
|
||||
columns: ['col1', 'col2'],
|
||||
values: [[1, 'foo']]
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,38 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import TableDescription from '@/views/Main/Editor/Schema/TableDescription'
|
||||
|
||||
describe('TableDescription.vue', () => {
|
||||
it('Initially the columns are hidden and table name is rendered', () => {
|
||||
const wrapper = shallowMount(TableDescription, {
|
||||
propsData: {
|
||||
name: 'Test table',
|
||||
columns: [
|
||||
{ name: 'id', type: 'number' },
|
||||
{ name: 'title', type: 'nvarchar(24)' }
|
||||
]
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.table-name').text()).to.equal('Test table')
|
||||
expect(wrapper.find('.columns').isVisible()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Columns are visible and correct when click on table name', async () => {
|
||||
const wrapper = shallowMount(TableDescription, {
|
||||
stubs: ['router-link'],
|
||||
propsData: {
|
||||
name: 'Test table',
|
||||
columns: [
|
||||
{ name: 'id', type: 'number' },
|
||||
{ name: 'title', type: 'nvarchar(24)' }
|
||||
]
|
||||
}
|
||||
})
|
||||
await wrapper.find('.table-name').trigger('click')
|
||||
|
||||
expect(wrapper.find('.columns').isVisible()).to.equal(true)
|
||||
expect(wrapper.findAll('.column').length).to.equal(2)
|
||||
expect(wrapper.findAll('.column').at(0).text()).to.include('id').and.include('number')
|
||||
expect(wrapper.findAll('.column').at(1).text()).to.include('title').and.include('nvarchar(24)')
|
||||
})
|
||||
})
|
||||
@@ -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,72 +0,0 @@
|
||||
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])
|
||||
})
|
||||
})
|
||||
@@ -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'])
|
||||
})
|
||||
})
|
||||
@@ -1,215 +0,0 @@
|
||||
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 db = {
|
||||
schema: [
|
||||
{
|
||||
name: 'foo',
|
||||
columns: [
|
||||
{ name: 'fooId', type: 'INTEGER' },
|
||||
{ name: 'name', type: 'NVARCHAR(20)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
columns: [
|
||||
{ name: 'barId', type: 'INTEGER' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
sinon.stub(state, 'db').value(db)
|
||||
|
||||
// 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 db = {
|
||||
schema: [
|
||||
{
|
||||
name: 'foo',
|
||||
columns: [
|
||||
{ name: 'fooId', type: 'INTEGER' },
|
||||
{ name: 'name', type: 'NVARCHAR(20)' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
sinon.stub(state, 'db').value(db)
|
||||
|
||||
// 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, 'db').value({ schema: 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({})
|
||||
})
|
||||
})
|
||||
@@ -1,287 +0,0 @@
|
||||
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
|
||||
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: [], 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')),
|
||||
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',
|
||||
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').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']
|
||||
]
|
||||
}
|
||||
// mock store state
|
||||
const state = {
|
||||
currentTabId: 1,
|
||||
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',
|
||||
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').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: []
|
||||
}
|
||||
|
||||
// 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);',
|
||||
initChart: [],
|
||||
tabIndex: 0,
|
||||
isPredefined: false
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.execute()
|
||||
expect(state.db.refreshSchema.calledOnce).to.equal(true)
|
||||
})
|
||||
})
|
||||
@@ -1,306 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
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'
|
||||
|
||||
describe('Tabs.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('Renders start guide when there is no opened tabs', () => {
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: []
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// check start-guide visibility
|
||||
expect(wrapper.find('#start-guide').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Renders tabs', () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// check start-guide visibility
|
||||
expect(wrapper.find('#start-guide').isVisible()).to.equal(false)
|
||||
|
||||
// check tabs
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
|
||||
|
||||
const firstTab = wrapper.findAll('.tab').at(0)
|
||||
expect(firstTab.text()).to.include('foo')
|
||||
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
||||
expect(firstTab.classes()).to.not.include('tab-selected')
|
||||
|
||||
const secondTab = wrapper.findAll('.tab').at(1)
|
||||
expect(secondTab.text()).to.include('Untitled')
|
||||
expect(secondTab.find('.star').isVisible()).to.equal(true)
|
||||
expect(secondTab.classes()).to.include('tab-selected')
|
||||
})
|
||||
|
||||
it('Selects the tab on click', async () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// click on the first tab
|
||||
const firstTab = wrapper.findAll('.tab').at(0)
|
||||
await firstTab.trigger('click')
|
||||
|
||||
// check that first tab is the current now
|
||||
expect(firstTab.classes()).to.include('tab-selected')
|
||||
const secondTab = wrapper.findAll('.tab').at(1)
|
||||
expect(secondTab.classes()).to.not.include('tab-selected')
|
||||
expect(state.currentTabId).to.equal(1)
|
||||
})
|
||||
|
||||
it("Deletes the tab on close if it's saved", async () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// click on the close icon of the first tab
|
||||
const firstTabCloseIcon = wrapper.findAll('.tab').at(0).find('.close-icon')
|
||||
await firstTabCloseIcon.trigger('click')
|
||||
|
||||
// check that the only one tab left and it's opened
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
||||
|
||||
const firstTab = wrapper.findAll('.tab').at(0)
|
||||
expect(firstTab.text()).to.include('Untitled')
|
||||
expect(firstTab.find('.star').isVisible()).to.equal(true)
|
||||
expect(firstTab.classes()).to.include('tab-selected')
|
||||
})
|
||||
|
||||
it("Doesn't delete tab on close if user cancel closing", async () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// click on the close icon of the second tab
|
||||
const secondTabCloseIcon = wrapper.findAll('.tab').at(1).find('.close-icon')
|
||||
await secondTabCloseIcon.trigger('click')
|
||||
|
||||
// check that Close Tab dialog is visible
|
||||
const modal = wrapper.find('[data-modal="close-warn"]')
|
||||
expect(modal.exists()).to.equal(true)
|
||||
|
||||
// find Cancel in the dialog
|
||||
const cancelBtn = wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Cancel')
|
||||
|
||||
// click Cancel in the dialog
|
||||
await cancelBtn.trigger('click')
|
||||
|
||||
// check that tab is still opened
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
|
||||
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Closes without saving', async () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// click on the close icon of the second tab
|
||||
const secondTabCloseIcon = wrapper.findAll('.tab').at(1).find('.close-icon')
|
||||
await secondTabCloseIcon.trigger('click')
|
||||
|
||||
// find 'Close without saving' in the dialog
|
||||
const closeBtn = wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Close without saving')
|
||||
|
||||
// click 'Close without saving' in the dialog
|
||||
await closeBtn.trigger('click')
|
||||
|
||||
// check that tab is closed
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
||||
const firstTab = wrapper.findAll('.tab').at(0)
|
||||
expect(firstTab.text()).to.include('foo')
|
||||
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
||||
expect(firstTab.classes()).to.include('tab-selected')
|
||||
|
||||
// check that 'saveQuery' event was not emited
|
||||
const rootWrapper = createWrapper(wrapper.vm.$root)
|
||||
expect(rootWrapper.emitted('saveQuery')).to.equal(undefined)
|
||||
|
||||
// check that the dialog is closed
|
||||
expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Closes with saving', async () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = mount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
// click on the close icon of the second tab
|
||||
const secondTabCloseIcon = wrapper.findAll('.tab').at(1).find('.close-icon')
|
||||
await secondTabCloseIcon.trigger('click')
|
||||
|
||||
// find 'Save and close' in the dialog
|
||||
const closeBtn = wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Save and close')
|
||||
|
||||
// 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')
|
||||
|
||||
// check that tab is closed
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
||||
const firstTab = wrapper.findAll('.tab').at(0)
|
||||
expect(firstTab.text()).to.include('foo')
|
||||
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
||||
expect(firstTab.classes()).to.include('tab-selected')
|
||||
|
||||
// check that 'saveQuery' event was emited
|
||||
const rootWrapper = createWrapper(wrapper.vm.$root)
|
||||
expect(rootWrapper.emitted('saveQuery')).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', () => {
|
||||
// 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 }
|
||||
],
|
||||
currentTabId: 2
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
const event = new Event('beforeunload')
|
||||
sinon.spy(event, 'preventDefault')
|
||||
wrapper.vm.leavingSqliteviz(event)
|
||||
|
||||
expect(event.preventDefault.calledOnce).to.equal(true)
|
||||
})
|
||||
|
||||
it("Doesn't prevent closing a tab of a browser if there is unsaved query", () => {
|
||||
// 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 = shallowMount(Tabs, {
|
||||
store,
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
const event = new Event('beforeunload')
|
||||
sinon.spy(event, 'preventDefault')
|
||||
wrapper.vm.leavingSqliteviz(event)
|
||||
|
||||
expect(event.preventDefault.calledOnce).to.equal(false)
|
||||
})
|
||||
})
|
||||
@@ -1,654 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
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'
|
||||
|
||||
let wrapper = null
|
||||
|
||||
describe('MainMenu.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
|
||||
// We need explicitly destroy the component, so that beforeDestroy hook was called
|
||||
// It's important because in this hook MainMenu component removes keydown event listener.
|
||||
wrapper.destroy()
|
||||
})
|
||||
|
||||
it('Run and Save are visible only on /editor page', async () => {
|
||||
const state = {
|
||||
currentTab: { query: '', execute: sinon.stub() },
|
||||
tabs: [{}],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
// 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)
|
||||
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', () => {
|
||||
const state = {
|
||||
currentTab: null,
|
||||
tabs: [{}],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
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 () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
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('#save-btn').element.disabled).to.equal(false)
|
||||
|
||||
await vm.$set(state.tabs[0], 'isUnsaved', false)
|
||||
expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
|
||||
})
|
||||
|
||||
it('Creates a tab', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
const newQueryId = 1
|
||||
const actions = {
|
||||
addTab: sinon.stub().resolves(newQueryId)
|
||||
}
|
||||
const mutations = {
|
||||
setCurrentTabId: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations, actions })
|
||||
const $route = { path: '/editor' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route, $router },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
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($router.push.calledOnce).to.equal(false)
|
||||
})
|
||||
|
||||
it('Creates a tab and redirects to editor', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
const newQueryId = 1
|
||||
const actions = {
|
||||
addTab: sinon.stub().resolves(newQueryId)
|
||||
}
|
||||
const mutations = {
|
||||
setCurrentTabId: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations, actions })
|
||||
const $route = { path: '/my-queries' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route, $router },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
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($router.push.calledOnce).to.equal(true)
|
||||
})
|
||||
|
||||
it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/editor"',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route, $router },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
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
|
||||
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
|
||||
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
|
||||
await wrapper.vm.$set(state, 'db', {})
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
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"',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
const $router = { push: sinon.stub() }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route, $router },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
|
||||
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
|
||||
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
|
||||
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
|
||||
await wrapper.vm.$set(state, 'db', {})
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
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 () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
sinon.stub(wrapper.vm, 'createNewQuery')
|
||||
|
||||
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)
|
||||
document.dispatchEvent(metaB)
|
||||
expect(wrapper.vm.createNewQuery.calledTwice).to.equal(true)
|
||||
|
||||
await wrapper.vm.$set($route, 'path', '/my-queries')
|
||||
document.dispatchEvent(ctrlB)
|
||||
expect(wrapper.vm.createNewQuery.calledThrice).to.equal(true)
|
||||
document.dispatchEvent(metaB)
|
||||
expect(wrapper.vm.createNewQuery.callCount).to.equal(4)
|
||||
})
|
||||
|
||||
it('Ctrl S calls checkQueryBeforeSave if the tab is unsaved and route path is /editor',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ isUnsaved: true }],
|
||||
db: {}
|
||||
}
|
||||
const store = new Vuex.Store({ state })
|
||||
const $route = { path: '/editor' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link']
|
||||
})
|
||||
sinon.stub(wrapper.vm, 'checkQueryBeforeSave')
|
||||
|
||||
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
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
|
||||
// tab is saved and route is /editor
|
||||
await wrapper.vm.$set(state.tabs[0], 'isUnsaved', false)
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.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)
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.checkQueryBeforeSave.calledTwice).to.equal(true)
|
||||
})
|
||||
|
||||
it('Saves the query when no need the new name',
|
||||
async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: 'foo', isUnsaved: true }],
|
||||
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({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link', 'app-diagnostic-info']
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// 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 tab was updated
|
||||
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
|
||||
index: 0,
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: [],
|
||||
isUnsaved: false
|
||||
}))).to.equal(true)
|
||||
|
||||
// check that 'querySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('querySaved')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('Shows en error when the new name is needed but not specifyied', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isUnsaved: 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({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link', 'app-diagnostic-info']
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the dialog is open
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
|
||||
|
||||
// find Save in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
// check that we have an error message and dialog is still open
|
||||
expect(wrapper.find('.text-field-error').text()).to.equal('Query name can\'t be empty')
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Saves the query 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 }],
|
||||
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({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link', 'app-diagnostic-info']
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the dialog is open
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
|
||||
|
||||
// enter the new name
|
||||
await wrapper.find('.dialog-body input').setValue('foo')
|
||||
|
||||
// find Save in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
// 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 tab was updated
|
||||
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
|
||||
index: 0,
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: [],
|
||||
isUnsaved: false
|
||||
}))).to.equal(true)
|
||||
|
||||
// check that 'querySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('querySaved')).to.have.lengthOf(1)
|
||||
})
|
||||
|
||||
it('Saves a predefined query 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']
|
||||
]
|
||||
},
|
||||
view: 'chart'
|
||||
},
|
||||
tabs: [{ id: 1, name: 'foo', isUnsaved: true, 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({
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link', 'app-diagnostic-info']
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the dialog is open
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
|
||||
|
||||
// check that save-note is visible (save-note is an explanation why do we need a new name)
|
||||
expect(wrapper.find('#save-note').isVisible()).to.equal(true)
|
||||
|
||||
// enter the new name
|
||||
await wrapper.find('.dialog-body input').setValue('bar')
|
||||
|
||||
// find Save in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
// 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 tab was updated
|
||||
expect(mutations.updateTab.calledOnceWith(state, sinon.match({
|
||||
index: 0,
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: [],
|
||||
isUnsaved: false
|
||||
}))).to.equal(true)
|
||||
|
||||
// check that 'querySaved' event was triggered on $root
|
||||
expect(createWrapper(wrapper.vm.$root).emitted('querySaved')).to.have.lengthOf(1)
|
||||
|
||||
// We saved predefined query, 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.result).to.eql({
|
||||
columns: ['id', 'name'],
|
||||
values: [
|
||||
[1, 'Harry Potter'],
|
||||
[2, 'Drako Malfoy']
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
it('Cancel saving', async () => {
|
||||
const state = {
|
||||
currentTab: {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
tabIndex: 0
|
||||
},
|
||||
tabs: [{ id: 1, name: null, tempName: 'Untitled', isUnsaved: 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({
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
chart: []
|
||||
})
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
store,
|
||||
mocks: { $route },
|
||||
stubs: ['router-link', 'app-diagnostic-info']
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the dialog is open
|
||||
expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
|
||||
|
||||
// find Cancel in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Cancel')
|
||||
.trigger('click')
|
||||
|
||||
// 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 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')
|
||||
})
|
||||
})
|
||||
@@ -1,913 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { mount, shallowMount } from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import MyQueries from '@/views/Main/MyQueries'
|
||||
import storedQueries from '@/lib/storedQueries'
|
||||
import mutations from '@/store/mutations'
|
||||
import fu from '@/lib/utils/fileIo'
|
||||
|
||||
describe('MyQueries.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('Shows start-guide message if there are no saved and predefined queries', () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([])
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const mutations = {
|
||||
updatePredefinedQueries: sinon.stub()
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const wrapper = shallowMount(MyQueries, { store })
|
||||
|
||||
expect(wrapper.find('#start-guide').exists()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Renders the list on saved or predefined queries', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([
|
||||
{ id: 0, name: 'hello_world', query: '', chart: [], createdAt: '2020-03-08T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' },
|
||||
{ id: 2, name: 'bar', query: '', chart: [], createdAt: '2020-12-04T18:53:56.299Z' }
|
||||
])
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const wrapper = shallowMount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.find('#start-guide').exists()).to.equal(false)
|
||||
expect(wrapper.find('#toolbar-btns-import').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(false)
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).to.have.lengthOf(3)
|
||||
expect(rows.at(0).findAll('td').at(0).text()).to.contains('hello_world')
|
||||
expect(rows.at(0).findAll('td').at(1).text()).to.equals('8 March 2020 20:57')
|
||||
expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
|
||||
expect(rows.at(1).findAll('td').at(1).text()).to.equals('3 November 2020 20:57')
|
||||
expect(rows.at(2).findAll('td').at(0).text()).to.equals('bar')
|
||||
expect(rows.at(2).findAll('td').at(1).text()).to.equals('4 December 2020 19:53')
|
||||
})
|
||||
|
||||
it('Filters the list of queries', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([
|
||||
{ id: 0, name: 'hello_world', query: '', chart: [], createdAt: '2020-03-08T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' },
|
||||
{ id: 2, name: 'bar', query: '', chart: [], createdAt: '2020-12-04T18:53:56.299Z' }
|
||||
])
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await wrapper.find('#toolbar-search input').setValue('OO')
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).to.have.lengthOf(1)
|
||||
expect(rows.at(0).findAll('td').at(0).text()).to.equals('foo')
|
||||
expect(rows.at(0).findAll('td').at(1).text()).to.contains('3 November 2020 20:57')
|
||||
})
|
||||
|
||||
it('Predefined query has a badge', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([
|
||||
{ id: 0, name: 'hello_world', query: '', chart: [], createdAt: '2020-03-08T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' }
|
||||
])
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const wrapper = shallowMount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows.at(0).find('td .badge').exists()).to.equals(true)
|
||||
expect(rows.at(1).find('td .badge').exists()).to.equals(false)
|
||||
})
|
||||
|
||||
it('Exports one query', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'serialiseQueries').returns('I am a serialized query')
|
||||
sinon.stub(fu, 'exportToFile')
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.findComponent({ name: 'ExportIcon' }).find('svg').trigger('click')
|
||||
expect(fu.exportToFile.calledOnceWith('I am a serialized query', 'foo.json')).to.equals(true)
|
||||
})
|
||||
|
||||
it('Duplicates a query', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const queryInStorage = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStorage])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
const newQuery = {
|
||||
id: 2,
|
||||
name: 'foo copy',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-12-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'duplicateQuery').returns(newQuery)
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
|
||||
|
||||
expect(storedQueries.duplicateQuery.calledOnceWith(queryInStorage)).to.equals(true)
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).to.have.lengthOf(2)
|
||||
expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo copy')
|
||||
expect(rows.at(1).findAll('td').at(1).text()).to.contains('3 December 2020 20:57')
|
||||
expect(storedQueries.updateStorage.calledOnceWith(sinon.match([queryInStorage, newQuery])))
|
||||
.to.equals(true)
|
||||
})
|
||||
|
||||
it('Makes the copy of the query selected if all queries were selected before duplication',
|
||||
async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const queryInStorage = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStorage])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
const newQuery = {
|
||||
id: 2,
|
||||
name: 'foo copy',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-12-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'duplicateQuery').returns(newQuery)
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container').trigger('click')
|
||||
await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
|
||||
expect(checkboxes.at(0).vm.checked).to.equals(true)
|
||||
expect(checkboxes.at(1).vm.checked).to.equals(true)
|
||||
})
|
||||
|
||||
it('Opens a query', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const queryInStorage = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStorage])
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const actions = { addTab: sinon.stub().resolves(1) }
|
||||
sinon.spy(mutations, 'setCurrentTabId')
|
||||
const $router = { push: sinon.stub() }
|
||||
const store = new Vuex.Store({ state, mutations, actions })
|
||||
|
||||
const wrapper = shallowMount(MyQueries, {
|
||||
store,
|
||||
mocks: { $router }
|
||||
})
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.find('tbody tr').trigger('click')
|
||||
|
||||
expect(actions.addTab.calledOnce).to.equals(true)
|
||||
expect(actions.addTab.getCall(0).args[1]).to.equals(queryInStorage)
|
||||
await actions.addTab.returnValues[0]
|
||||
expect(mutations.setCurrentTabId.calledOnceWith(state, 1)).to.equals(true)
|
||||
expect($router.push.calledOnceWith('/editor')).to.equals(true)
|
||||
})
|
||||
|
||||
it('Rename is not available for predefined queries', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([
|
||||
{ id: 0, name: 'hello_world', query: '', chart: [], createdAt: '2020-03-08T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([])
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.findComponent({ name: 'RenameIcon' }).exists()).to.equals(false)
|
||||
})
|
||||
|
||||
it('Renames a query', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
const state = {
|
||||
tabs: [{ id: 1, name: 'foo' }],
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// click Rename icon in the grid
|
||||
await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
|
||||
|
||||
// check that rename dialog is open
|
||||
expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(true)
|
||||
|
||||
// check that input is filled by the current query name
|
||||
expect(wrapper.find('.dialog-body input').element.value).to.equals('foo')
|
||||
|
||||
// change the name
|
||||
await wrapper.find('.dialog-body input').setValue('bar')
|
||||
|
||||
// find Rename in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Rename')
|
||||
.trigger('click')
|
||||
|
||||
// check that the name in the grid is changed
|
||||
expect(wrapper.find('tbody tr td').text()).to.equals('bar')
|
||||
|
||||
// check that storage is updated
|
||||
expect(storedQueries.updateStorage.calledOnceWith(sinon.match([{
|
||||
id: 1,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}]))).to.equals(true)
|
||||
|
||||
// check that coresponding tab also changed the name
|
||||
expect(state.tabs[0].name).to.equals('bar')
|
||||
|
||||
// check that rename dialog is closed
|
||||
expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Shows an error if try to rename to empty string', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
const state = {
|
||||
tabs: [{ id: 1, name: 'foo' }],
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// click Rename icon in the grid
|
||||
await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
|
||||
|
||||
// change the name
|
||||
await wrapper.find('.dialog-body input').setValue('')
|
||||
|
||||
// find Rename in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Rename')
|
||||
.trigger('click')
|
||||
|
||||
expect(wrapper.find('.dialog-body .text-field-error').text())
|
||||
.to.equals("Query name can't be empty")
|
||||
// check that rename dialog is still open
|
||||
expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Imports queries', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const queryInStorage = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStorage])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
const importedQuery = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-12-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'importQueries').resolves([importedQuery])
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = shallowMount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// click Import
|
||||
await wrapper.find('#toolbar-btns-import').trigger('click')
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).to.have.lengthOf(2)
|
||||
expect(rows.at(1).findAll('td').at(0).text()).to.equals('bar')
|
||||
expect(rows.at(1).findAll('td').at(1).text()).to.equals('3 December 2020 20:57')
|
||||
expect(storedQueries.updateStorage.calledOnceWith(
|
||||
sinon.match([queryInStorage, importedQuery])
|
||||
)).to.equals(true)
|
||||
})
|
||||
|
||||
it('Imported queries are selected if master check box is checked', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const queryInStorage = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStorage])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
const importedQuery = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-12-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'importQueries').resolves([importedQuery])
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// click on master checkbox
|
||||
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container').trigger('click')
|
||||
|
||||
// click Import
|
||||
await wrapper.find('#toolbar-btns-import').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
|
||||
expect(checkboxes.at(0).vm.checked).to.equals(true)
|
||||
expect(checkboxes.at(1).vm.checked).to.equals(true)
|
||||
})
|
||||
|
||||
it('Deletion is not available for predefined queries', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([
|
||||
{ id: 0, name: 'hello_world', query: '', chart: [], createdAt: '2020-03-08T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([])
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.findComponent({ name: 'DeleteIcon' }).exists()).to.equals(false)
|
||||
})
|
||||
|
||||
it('Delete a query', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const foo = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
const bar = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-11-03T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([foo, bar])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
|
||||
const state = {
|
||||
tabs: [{ id: 1 }, { id: 2 }],
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
// click Delete icon in the first row of the grid
|
||||
await wrapper.findComponent({ name: 'DeleteIcon' }).find('svg').trigger('click')
|
||||
|
||||
// check that delete dialog is open
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
|
||||
|
||||
// check the message in the dialog
|
||||
expect(wrapper.find('.dialog-body').text()).to.contains('"foo"?')
|
||||
|
||||
// find Delete in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Delete')
|
||||
.trigger('click')
|
||||
|
||||
// check the rows in the grid
|
||||
expect(wrapper.findAll('tbody tr')).to.have.lengthOf(1)
|
||||
expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.equals('bar')
|
||||
|
||||
// check that deleted query was also deleted from tabs
|
||||
expect(state.tabs).to.have.lengthOf(1)
|
||||
expect(state.tabs[0].id).to.equals(2)
|
||||
|
||||
// check that storage is updated
|
||||
expect(storedQueries.updateStorage.calledOnceWith(sinon.match([bar]))).to.equals(true)
|
||||
|
||||
// check that delete dialog is closed
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Group operations are available when there are checked rows', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([
|
||||
{ id: 0, name: 'hello_world', query: '', chart: [], createdAt: '2020-03-08T19:57:56.299Z' }
|
||||
])
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([
|
||||
{ id: 1, name: 'foo', query: '', chart: [], createdAt: '2020-11-03T19:57:56.299Z' }
|
||||
])
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(false)
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
|
||||
// Select a predefined query
|
||||
await rows.at(0).find('.checkbox-container').trigger('click')
|
||||
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(false)
|
||||
|
||||
// Select also not predefined query
|
||||
await rows.at(1).find('.checkbox-container').trigger('click')
|
||||
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(true)
|
||||
|
||||
// Uncheck a predefined query
|
||||
await rows.at(0).find('.checkbox-container').trigger('click')
|
||||
expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Exports a group of queries', async () => {
|
||||
const predefinedQuery = {
|
||||
id: 0,
|
||||
name: 'hello_world',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([predefinedQuery])
|
||||
const queryInStore = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStore, {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}])
|
||||
|
||||
sinon.stub(storedQueries, 'serialiseQueries').returns('I am a serialized queries')
|
||||
sinon.stub(fu, 'exportToFile')
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
|
||||
// Select queries
|
||||
await rows.at(0).find('.checkbox-container').trigger('click')
|
||||
await rows.at(1).find('.checkbox-container').trigger('click')
|
||||
|
||||
await wrapper.find('#toolbar-btns-export').trigger('click')
|
||||
|
||||
expect(storedQueries.serialiseQueries.calledOnceWith(
|
||||
sinon.match([predefinedQuery, queryInStore])
|
||||
)).to.equals(true)
|
||||
|
||||
expect(
|
||||
fu.exportToFile.calledOnceWith('I am a serialized queries', 'My sqliteviz queries.json')
|
||||
).to.equals(true)
|
||||
})
|
||||
|
||||
it('Exports all queries', async () => {
|
||||
const predefinedQuery = {
|
||||
id: 0,
|
||||
name: 'hello_world',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([predefinedQuery])
|
||||
const queryInStore = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([queryInStore])
|
||||
|
||||
sinon.stub(storedQueries, 'serialiseQueries').returns('I am a serialized queries')
|
||||
sinon.stub(fu, 'exportToFile')
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
|
||||
.trigger('click')
|
||||
|
||||
await wrapper.find('#toolbar-btns-export').trigger('click')
|
||||
|
||||
expect(storedQueries.serialiseQueries.calledOnceWith(
|
||||
sinon.match([predefinedQuery, queryInStore])
|
||||
)).to.equals(true)
|
||||
|
||||
expect(
|
||||
fu.exportToFile.calledOnceWith('I am a serialized queries', 'My sqliteviz queries.json')
|
||||
).to.equals(true)
|
||||
})
|
||||
|
||||
it('Deletes a group of queries', async () => {
|
||||
const predefinedQuery = {
|
||||
id: 0,
|
||||
name: 'hello_world',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([predefinedQuery])
|
||||
const foo = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
const bar = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
const baz = {
|
||||
id: 3,
|
||||
name: 'baz',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([foo, bar, baz])
|
||||
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
|
||||
const state = {
|
||||
tabs: [{ id: 1 }, { id: 2 }, { id: 0 }, { id: 3 }],
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
|
||||
// Select queries (don't select predefined queries)
|
||||
await rows.at(1).find('.checkbox-container').trigger('click')
|
||||
await rows.at(2).find('.checkbox-container').trigger('click')
|
||||
|
||||
await wrapper.find('#toolbar-btns-delete').trigger('click')
|
||||
|
||||
// check that delete dialog is open
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
|
||||
|
||||
// check the message in the dialog
|
||||
expect(wrapper.find('.dialog-body').text())
|
||||
.to.contains('Are you sure you want to delete 2 queries?')
|
||||
|
||||
// find Delete in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Delete')
|
||||
.trigger('click')
|
||||
|
||||
// check the rows in the grid
|
||||
expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
|
||||
expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.contains('hello_world')
|
||||
expect(wrapper.findAll('tbody tr').at(1).find('td').text()).to.equals('baz')
|
||||
|
||||
// check that deleted query was also deleted from tabs
|
||||
expect(state.tabs).to.have.lengthOf(2)
|
||||
expect(state.tabs[0].id).to.equals(0)
|
||||
expect(state.tabs[1].id).to.equals(3)
|
||||
|
||||
// check that storage is updated
|
||||
expect(storedQueries.updateStorage.calledOnceWith(sinon.match([baz]))).to.equals(true)
|
||||
|
||||
// check that delete dialog is closed
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Ignores predefined queries during deletion', async () => {
|
||||
const predefinedQuery = {
|
||||
id: 0,
|
||||
name: 'hello_world',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([predefinedQuery])
|
||||
const foo = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
const bar = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([foo, bar])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
|
||||
const state = {
|
||||
tabs: [],
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
|
||||
// Select queries (select also predefined queries)
|
||||
await rows.at(0).find('.checkbox-container').trigger('click')
|
||||
await rows.at(1).find('.checkbox-container').trigger('click')
|
||||
|
||||
await wrapper.find('#toolbar-btns-delete').trigger('click')
|
||||
|
||||
// check that delete dialog is open
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
|
||||
|
||||
// check the message in the dialog
|
||||
expect(wrapper.find('.dialog-body').text())
|
||||
.to.contains('Are you sure you want to delete 1 query?')
|
||||
|
||||
expect(wrapper.find('.dialog-body #note').isVisible()).to.equals(true)
|
||||
|
||||
// find Delete in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Delete')
|
||||
.trigger('click')
|
||||
|
||||
// check the rows in the grid
|
||||
expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
|
||||
expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.contains('hello_world')
|
||||
expect(wrapper.findAll('tbody tr').at(1).find('td').text()).to.equals('bar')
|
||||
|
||||
// check that storage is updated
|
||||
expect(storedQueries.updateStorage.calledOnceWith(sinon.match([bar]))).to.equals(true)
|
||||
|
||||
// check that delete dialog is closed
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Deletes all queries ignoring predefined ones', async () => {
|
||||
const predefinedQuery = {
|
||||
id: 0,
|
||||
name: 'hello_world',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([predefinedQuery])
|
||||
const foo = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
const bar = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([foo, bar])
|
||||
sinon.stub(storedQueries, 'updateStorage')
|
||||
|
||||
const state = {
|
||||
tabs: [],
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
|
||||
.trigger('click')
|
||||
|
||||
await wrapper.find('#toolbar-btns-delete').trigger('click')
|
||||
|
||||
// check that delete dialog is open
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
|
||||
|
||||
// check the message in the dialog
|
||||
expect(wrapper.find('.dialog-body').text())
|
||||
.to.contains('Are you sure you want to delete 2 queries?')
|
||||
|
||||
expect(wrapper.find('.dialog-body #note').isVisible()).to.equals(true)
|
||||
|
||||
// find Delete in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button').wrappers
|
||||
.find(button => button.text() === 'Delete')
|
||||
.trigger('click')
|
||||
|
||||
// check the rows in the grid
|
||||
expect(wrapper.findAll('tbody tr')).to.have.lengthOf(1)
|
||||
expect(wrapper.findAll('tbody tr').at(0).find('td').text()).to.contains('hello_world')
|
||||
|
||||
// check that storage is updated
|
||||
expect(storedQueries.updateStorage.calledOnceWith(sinon.match([]))).to.equals(true)
|
||||
|
||||
// check that delete dialog is closed
|
||||
expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
|
||||
})
|
||||
|
||||
it('Main checkbox', async () => {
|
||||
sinon.stub(storedQueries, 'readPredefinedQueries').resolves([])
|
||||
const foo = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
const bar = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: '',
|
||||
chart: [],
|
||||
createdAt: '2020-03-08T19:57:56.299Z'
|
||||
}
|
||||
sinon.stub(storedQueries, 'getStoredQueries').returns([foo, bar])
|
||||
|
||||
const state = {
|
||||
predefinedQueries: []
|
||||
}
|
||||
const store = new Vuex.Store({ state, mutations })
|
||||
|
||||
const wrapper = mount(MyQueries, { store })
|
||||
await storedQueries.readPredefinedQueries.returnValues[0]
|
||||
await storedQueries.getStoredQueries.returnValues[0]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const mainCheckBox = wrapper.findComponent({ ref: 'mainCheckBox' })
|
||||
// Select all with main checkbox
|
||||
await mainCheckBox.find('.checkbox-container').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
|
||||
expect(checkboxes.at(0).vm.checked).to.equals(true)
|
||||
expect(checkboxes.at(1).vm.checked).to.equals(true)
|
||||
|
||||
// Uncheck first row - main checkbox bocomes not checked
|
||||
await wrapper.find('tbody tr .checkbox-container').trigger('click')
|
||||
expect(mainCheckBox.vm.checked).to.equals(false)
|
||||
|
||||
// Select all again ...
|
||||
await mainCheckBox.find('.checkbox-container').trigger('click')
|
||||
// ... and uncheck all
|
||||
await mainCheckBox.find('.checkbox-container').trigger('click')
|
||||
expect(checkboxes.at(0).vm.checked).to.equals(false)
|
||||
expect(checkboxes.at(0).vm.checked).to.equals(false)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user