change code structure

tests/views/MainView/Editor/Schema/Schema.spec.js

@@ -0,0 +1,115 @@
+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'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('Schema.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Renders DB name on initial', () => {
+    // mock store state
+    const state = {
+      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 = {
+      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 = {
+      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 = {
+      dbName: 'fooDB',
+      db: {
+        export: sinon.stub().resolves()
+      }
+    }
+    const store = new Vuex.Store({ state })
+    const wrapper = mount(Schema, { store, localVue })
+
+    await wrapper.findComponent({ name: 'export-icon' }).trigger('click')
+    expect(state.db.export.calledOnceWith('fooDB'))
+  })
+})

tests/views/MainView/Editor/Schema/TableDescription.spec.js

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

tests/views/MainView/Editor/Tabs/Tab/Chart/Chart.spec.js

@@ -0,0 +1,68 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, shallowMount } from '@vue/test-utils'
+import Chart from '@/views/Main/Editor/Tabs/Tab/Chart'
+import chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
+
+describe('Chart.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('getChartStateForSave called with proper arguments', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart)
+    const vm = wrapper.vm
+    const stub = sinon.stub(chartHelper, 'getChartStateForSave').returns('result')
+    const chartData = vm.getChartStateForSave()
+    expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
+    expect(chartData).to.equal('result')
+  })
+
+  it('is not visible when visible is false', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { visible: false }
+    })
+
+    expect(wrapper.find('.chart-container').isVisible()).to.equal(false)
+  })
+
+  it('is visible when visible is true', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { visible: true }
+    })
+
+    expect(wrapper.find('.chart-container').isVisible()).to.equal(true)
+  })
+
+  it('emits update when plotly updates', async () => {
+    // mount the component
+    const wrapper = mount(Chart)
+    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+  })
+
+  it('calls dereference when sqlResult is changed', async () => {
+    sinon.stub(dereference, 'default')
+    const sqlResult = {
+      columns: ['id', 'name'],
+      values: [[1, 'foo']]
+    }
+
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { sqlResult: sqlResult }
+    })
+
+    const newSqlResult = {
+      columns: ['id', 'name'],
+      values: [[2, 'bar']]
+    }
+
+    await wrapper.setProps({ sqlResult: newSqlResult })
+    expect(dereference.default.called).to.equal(true)
+  })
+})

tests/views/MainView/Editor/Tabs/Tab/Chart/chartHelper.spec.js

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

tests/views/MainView/Editor/Tabs/Tab/SqlEditor/SqlEditor.spec.js

@@ -0,0 +1,12 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import SqlEditor from '@/views/Main/Editor/Tabs/Tab/SqlEditor'
+
+describe('SqlEditor.vue', () => {
+  it('Emits input event when a query is changed', async () => {
+    const wrapper = mount(SqlEditor)
+    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+    expect(wrapper.emitted('input')[0]).to.eql(['SELECT * FROM foo'])
+    // Take a pause to keep proper state in debounced '@/views/Main/Editor/Tabs/Tab/SqlEditor/hint'
+  })
+})

tests/views/MainView/Editor/Tabs/Tab/SqlEditor/hint.spec.js

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

tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js

@@ -0,0 +1,305 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import mutations from '@/store/mutations'
+import Vuex from 'vuex'
+import Tab from '@/views/Main/Editor/Tabs/Tab'
+
+describe('Tab.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Renders passed query', () => {
+    // mock store state
+    const state = {
+      currentTabId: 1
+    }
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initChart: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(true)
+    expect(wrapper.find('.table-view').isVisible()).to.equal(true)
+    expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(true)
+    expect(wrapper.find('.query-editor').text()).to.equal('SELECT * FROM foo')
+  })
+
+  it("Doesn't render tab when it's not active", () => {
+    // mock store state
+    const state = {
+      currentTabId: 0
+    }
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
+  })
+
+  it("Shows chart when view equals 'chart'", async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+
+    expect(wrapper.findComponent({ ref: 'chart' }).vm.visible).to.equal(false)
+    await wrapper.setData({ view: 'chart' })
+    expect(wrapper.find('.table-view').isVisible()).to.equal(false)
+    expect(wrapper.findComponent({ ref: 'chart' }).vm.visible).to.equal(true)
+  })
+
+  it('Is not visible when not active', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 0
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
+  })
+
+  it('Calls setCurrentTab when becomes active', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 0
+    }
+    sinon.spy(mutations, 'setCurrentTab')
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+
+    state.currentTabId = 1
+    expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true)
+  })
+
+  it('Update tab state when a query is changed', async () => {
+    // mock store state
+    const state = {
+      tabs: [
+        { id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isUnsaved: false }
+      ],
+      currentTabId: 1
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initChart: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+    await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
+    expect(state.tabs[0].isUnsaved).to.equal(true)
+  })
+
+  it('Shows .result-in-progress message when executing query', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute () { return new Promise(() => {}) }
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initChart: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    wrapper.vm.execute()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(false)
+    expect(wrapper.find('.table-view .result-in-progress').isVisible()).to.equal(true)
+  })
+
+  it('Shows error when executing query ends with error', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute: sinon.stub().rejects(new Error('There is no table foo'))
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initChart: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    await wrapper.vm.execute()
+    expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(false)
+    expect(wrapper.find('.table-view .result-in-progress').isVisible()).to.equal(false)
+    expect(wrapper.find('.table-preview.error').isVisible()).to.equal(true)
+    expect(wrapper.find('.table-preview.error').text()).to.include('There is no table foo')
+  })
+
+  it('Passes result to sql-table component', async () => {
+    const result = {
+      columns: ['id', 'name'],
+      values: [
+        [1, 'foo'],
+        [2, 'bar']
+      ]
+    }
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute: sinon.stub().resolves(result),
+        getSchema: sinon.stub().resolves({ dbName: '', schema: [] })
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initChart: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    await wrapper.vm.execute()
+    expect(wrapper.find('.table-view .result-before').isVisible()).to.equal(false)
+    expect(wrapper.find('.table-view .result-in-progress').isVisible()).to.equal(false)
+    expect(wrapper.find('.table-preview.error').isVisible()).to.equal(false)
+    expect(wrapper.findComponent({ name: 'SqlTable' }).vm.dataSet).to.eql(result)
+  })
+
+  it('Updates schema after query execution', async () => {
+    const result = {
+      columns: ['id', 'name'],
+      values: []
+    }
+    const newSchema = {
+      dbName: 'fooDb',
+      schema: [
+        {
+          name: 'foo',
+          columns: [
+            { name: 'id', type: 'INTEGER' },
+            { name: 'title', type: 'NVARCHAR(30)' }
+          ]
+        },
+        {
+          name: 'bar',
+          columns: [
+            { name: 'a', type: 'N/A' },
+            { name: 'b', type: 'N/A' }
+          ]
+        }
+      ]
+    }
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      dbName: 'fooDb',
+      db: {
+        execute: sinon.stub().resolves(result),
+        getSchema: sinon.stub().resolves(newSchema)
+      }
+    }
+
+    sinon.spy(mutations, 'saveSchema')
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+        initChart: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    await wrapper.vm.execute()
+    expect(state.db.getSchema.calledOnceWith('fooDb')).to.equal(true)
+    expect(mutations.saveSchema.calledOnceWith(state, newSchema)).to.equal(true)
+  })
+})

tests/views/MainView/Editor/Tabs/Tabs.spec.js

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