move tests to tests folder

rename util modules
rename DbUpload to DbUploader
add tests for DbUploader component #27

tests/components/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 '@/components/Chart.vue'
+import chart from '@/chart.js'
+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(chart, '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/components/CheckBox.spec.js

@@ -0,0 +1,50 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import CheckBox from '@/components/CheckBox'
+
+describe('CheckBox', () => {
+  it('unchecked by default', () => {
+    const wrapper = shallowMount(CheckBox, {
+      propsData: { init: false }
+    })
+    expect(wrapper.find('img').isVisible()).to.equal(false)
+  })
+
+  it('gets init state according to passed props', () => {
+    const wrapperChecked = shallowMount(CheckBox, {
+      propsData: { init: true }
+    })
+    expect(wrapperChecked.find('img').isVisible()).to.equal(true)
+    const wrapperUnchecked = shallowMount(CheckBox, {
+      propsData: { init: false }
+    })
+    expect(wrapperUnchecked.find('img').isVisible()).to.equal(false)
+  })
+
+  it('checked on click', async () => {
+    const wrapper = shallowMount(CheckBox)
+    await wrapper.trigger('click')
+    expect(wrapper.find('img').isVisible()).to.equal(true)
+  })
+
+  it('emits event on click', async () => {
+    const wrapper = shallowMount(CheckBox)
+    await wrapper.trigger('click')
+    expect(wrapper.emitted().click).to.have.lengthOf(1)
+    expect(wrapper.emitted().click[0]).to.eql([true])
+    await wrapper.trigger('click')
+    expect(wrapper.emitted().click).to.have.lengthOf(2)
+    expect(wrapper.emitted().click[1]).to.eql([false])
+  })
+
+  it('disabled', async () => {
+    const wrapper = shallowMount(CheckBox, {
+      propsData: { disabled: true }
+    })
+    expect(wrapper.find('.checkbox-container').classes()).to.include('disabled')
+    expect(wrapper.find('.checkbox-container').classes()).to.not.include('checked')
+    await wrapper.trigger('click')
+    expect(wrapper.emitted().click).to.equal(undefined)
+    expect(wrapper.find('.checkbox-container').classes()).to.not.include('checked')
+  })
+})

tests/components/DbUploader.spec.js

@@ -0,0 +1,293 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Vuex from 'vuex'
+import { shallowMount, mount } from '@vue/test-utils'
+import DbUploader from '@/components/DbUploader.vue'
+import fu from '@/file.utils'
+import database from '@/database.js'
+import csv from '@/csv'
+
+let state = {}
+let mutations = {}
+let store = {}
+
+describe('DbUploader.vue', () => {
+  beforeEach(() => {
+    // mock store state and mutations
+    state = {}
+    mutations = {
+      saveSchema: sinon.stub()
+    }
+    store = new Vuex.Store({ state, mutations })
+  })
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('loads db on click and redirects to /editor', async () => {
+    // mock getting a file from user
+    const file = {}
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock db loading
+    const schema = {}
+    const db = {
+      loadDb: sinon.stub().resolves(schema)
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/' }
+
+    // mount the component
+    const wrapper = shallowMount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    expect(db.loadDb.calledOnceWith(file)).to.equal(true)
+    await db.loadDb.returnValues[0]
+    expect(mutations.saveSchema.calledOnceWith(state, schema)).to.equal(true)
+    expect($router.push.calledOnceWith('/editor')).to.equal(true)
+  })
+
+  it('loads db on drop and redirects to /editor', async () => {
+    // mock db loading
+    const schema = {}
+    const db = {
+      loadDb: sinon.stub().resolves(schema)
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/' }
+
+    // mount the component
+    const wrapper = shallowMount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    // mock a file dropped by a user
+    const file = {}
+    const dropData = { dataTransfer: new DataTransfer() }
+    Object.defineProperty(dropData.dataTransfer, 'files', {
+      value: [file],
+      writable: false
+    })
+
+    await wrapper.find('.drop-area').trigger('drop', dropData)
+    expect(db.loadDb.calledOnceWith(file)).to.equal(true)
+    await db.loadDb.returnValues[0]
+    expect(mutations.saveSchema.calledOnceWith(state, schema)).to.equal(true)
+    expect($router.push.calledOnceWith('/editor')).to.equal(true)
+  })
+
+  it("doesn't redirect if already on /editor", async () => {
+    // mock getting a file from user
+    const file = {}
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock db loading
+    const schema = {}
+    const db = {
+      loadDb: sinon.stub().resolves(schema)
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/editor' }
+
+    // mount the component
+    const wrapper = shallowMount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    await db.loadDb.returnValues[0]
+    expect($router.push.called).to.equal(false)
+  })
+
+  it('shows parse dialog if gets csv file', async () => {
+    // mock getting a file from user
+    const file = { type: 'text/csv' }
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/editor' }
+
+    sinon.stub(csv, 'parse').resolves({
+      delimiter: '|',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [1, 'foo'],
+          [2, 'bar']
+        ]
+      },
+      messages: [{
+        code: 'UndetectableDelimiter',
+        message: 'Comma was used as a standart delimiter',
+        row: 0,
+        type: 'info',
+        hint: undefined
+      }]
+    })
+
+    // mount the component
+    const wrapper = mount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    await csv.parse.returnValues[0]
+    await wrapper.vm.animationPromise
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('[data-modal="parse"]').exists()).to.equal(true)
+    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.value).to.equal('|')
+    expect(wrapper.find('#quote-char input').element.value).to.equal('"')
+    expect(wrapper.find('#escape-char input').element.value).to.equal('"')
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(true)
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(2)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('1')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('foo')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equal('2')
+    expect(rows.at(1).findAll('td').at(1).text()).to.equal('bar')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Information about row 0. Comma was used as a standart delimiter.')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Preview parsing is completed in')
+  })
+
+  it('reparses when parameters changes', async () => {
+    // mock getting a file from user
+    const file = { type: 'text/csv' }
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/editor' }
+
+    const parse = sinon.stub(csv, 'parse')
+    parse.onCall(0).resolves({
+      delimiter: '|',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [1, 'foo']
+        ]
+      }
+    })
+
+    // mount the component
+    const wrapper = mount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    await csv.parse.returnValues[0]
+    await wrapper.vm.animationPromise
+    await wrapper.vm.$nextTick()
+
+    parse.onCall(1).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [2, 'bar']
+        ]
+      },
+      hasErrors: false
+    })
+    await wrapper.find('.delimiter-selector-container input').setValue(',')
+    expect(parse.callCount).to.equal(2)
+    await csv.parse.returnValues[1]
+
+    let rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('2')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('bar')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Preview parsing is completed in')
+
+    parse.onCall(2).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [3, 'baz']
+        ]
+      },
+      hasErrors: true,
+      messages: [{
+        code: 'MissingQuotes',
+        message: 'Quote is missed',
+        row: 0,
+        type: 'error',
+        hint: 'Edit your CSV so that the field has a closing quote char.'
+      }]
+    })
+
+    await wrapper.find('#quote-char input').setValue("'")
+    expect(parse.callCount).to.equal(3)
+    await csv.parse.returnValues[2]
+    rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('3')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('baz')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.contain('Error in row 0. Quote is missed. Edit your CSV so that the field has a closing quote char.')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.not.contain('Preview parsing is completed in')
+
+    parse.onCall(3).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [4, 'qux']
+        ]
+      },
+      hasErrors: false
+    })
+    await wrapper.find('#escape-char input').setValue("'")
+    expect(parse.callCount).to.equal(4)
+    await csv.parse.returnValues[3]
+    rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('4')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('qux')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.contain('Preview parsing is completed in')
+
+    parse.onCall(4).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [5, 'corge']
+        ]
+      },
+      hasErrors: false
+    })
+    await wrapper.findComponent({ name: 'check-box' }).trigger('click')
+    expect(parse.callCount).to.equal(5)
+    await csv.parse.returnValues[4]
+    rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('5')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('corge')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Preview parsing is completed in')
+  })
+})

tests/components/DelimiterSelector.spec.js

@@ -0,0 +1,93 @@
+import { expect } from 'chai'
+import { mount, shallowMount } from '@vue/test-utils'
+import DelimiterSelector from '@/components/DelimiterSelector'
+
+describe('DelimiterSelector', async () => {
+  it('shows the name of value', async () => {
+    const wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+    expect(wrapper.find('input').element.value).to.equal(',')
+    expect(wrapper.find('.name').text()).to.equal('comma')
+
+    await wrapper.setProps({ value: '\t' })
+    expect(wrapper.find('input').element.value).to.equal('\t')
+    expect(wrapper.find('.name').text()).to.equal('horizontal tab')
+
+    await wrapper.setProps({ value: '' })
+    expect(wrapper.find('input').element.value).to.equal('')
+    expect(wrapper.find('.name').text()).to.equal('')
+  })
+
+  it('clears the field', async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+
+    await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
+
+    expect(wrapper.find('input').element.value).to.equal('')
+    expect(wrapper.emitted().input).to.equal(undefined)
+  })
+
+  it('changes value by typing', async () => {
+    const wrapper = shallowMount(DelimiterSelector, {
+      propsData: { value: ',' }
+    })
+
+    await wrapper.find('input').setValue(';')
+    expect(wrapper.emitted().input).to.have.lengthOf(1)
+    expect(wrapper.emitted().input[0]).to.eql([';'])
+  })
+
+  it('changes value by selection from the list', async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: '|' }
+    })
+
+    await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
+    expect(wrapper.find('.options').isVisible()).to.equal(true)
+    await wrapper.find('.option').trigger('click')
+    expect(wrapper.find('.options').isVisible()).to.equal(false)
+    expect(wrapper.emitted().input).to.have.lengthOf(1)
+    expect(wrapper.emitted().input[0]).to.eql([','])
+  })
+
+  it("doesn't change value when becomes empty", async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: '|' }
+    })
+
+    await wrapper.find('input').setValue('')
+    expect(wrapper.emitted().input).to.equal(undefined)
+  })
+
+  it('set focus in input when click on character name', async () => {
+    const place = document.createElement('div')
+    document.body.appendChild(place)
+
+    const wrapper = mount(DelimiterSelector, {
+      attachTo: place,
+      propsData: { value: '|' }
+    })
+
+    await wrapper.find('.name').trigger('click')
+    expect(wrapper.find('input').element).to.equal(document.activeElement)
+    place.remove()
+    wrapper.destroy()
+  })
+
+  it('disabled', async () => {
+    const wrapper = mount(DelimiterSelector, {
+      propsData: { value: '|', disabled: true }
+    })
+
+    await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
+
+    expect(wrapper.find('input').element.value).to.equal('|')
+    expect(wrapper.emitted().input).to.equal(undefined)
+
+    await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
+    expect(wrapper.find('.options').isVisible()).to.equal(false)
+  })
+})

tests/components/LoadingIndicator.spec.js

@@ -0,0 +1,24 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+
+describe('LoadingIndicator.vue', () => {
+  it('Calculates animation class', async () => {
+    const wrapper = shallowMount(LoadingIndicator, {
+      propsData: { progress: 0 }
+    })
+    expect(wrapper.find('svg').classes()).to.contain('progress')
+    await wrapper.setProps({ progress: undefined })
+    expect(wrapper.find('svg').classes()).to.not.contain('progress')
+    expect(wrapper.find('svg').classes()).to.contain('loading')
+  })
+
+  it('Calculates arc', async () => {
+    const wrapper = shallowMount(LoadingIndicator, {
+      propsData: { progress: 50 }
+    })
+    // The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
+    // should be 25.12
+    expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray).to.equal('25.12, 25.12')
+  })
+})

tests/components/Logs.spec.js

@@ -0,0 +1,82 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import Logs from '@/components/Logs.vue'
+
+let place
+describe('Logs.vue', () => {
+  beforeEach(() => {
+    place = document.createElement('div')
+    document.body.appendChild(place)
+  })
+  afterEach(() => {
+    place.remove()
+  })
+
+  it('Scrolled to bottom on mounted', async () => {
+    const messages = [
+      { type: 'error', message: 'msg 1' },
+      { type: 'error', message: 'msg 2' },
+      { type: 'error', message: 'msg 3' },
+      { type: 'error', message: 'msg 4' }
+    ]
+
+    const containerHeight = 160
+    const borderWidth = 1
+    const viewHeight = containerHeight - 2 * borderWidth
+    const wrapper = shallowMount(Logs, {
+      attachTo: place,
+      propsData: { messages, style: `height: ${containerHeight}px` }
+    })
+
+    await wrapper.vm.$nextTick()
+    const height = wrapper.find('.logs-container').element.scrollHeight
+    expect(wrapper.find('.logs-container').element.scrollTop)
+      .to.equal(height - viewHeight)
+    wrapper.destroy()
+  })
+
+  it('Scrolled to bottom when a message added', async () => {
+    const messages = [
+      { type: 'error', message: 'msg 1' },
+      { type: 'error', message: 'msg 2' },
+      { type: 'error', message: 'msg 3' },
+      { type: 'error', message: 'msg 4' }
+    ]
+
+    const containerHeight = 160
+    const borderWidth = 1
+    const viewHeight = containerHeight - 2 * borderWidth
+    const wrapper = shallowMount(Logs, {
+      attachTo: place,
+      propsData: { messages, style: `height: ${containerHeight}px` }
+    })
+
+    await wrapper.vm.$nextTick()
+    messages.push({ type: 'error', message: 'msg 5' })
+
+    await wrapper.vm.$nextTick()
+    const height = wrapper.find('.logs-container').element.scrollHeight
+    expect(wrapper.find('.logs-container').element.scrollTop)
+      .to.equal(height - viewHeight)
+    wrapper.destroy()
+  })
+
+  it('Serializes messages', async () => {
+    const messages = [
+      { type: 'error', message: 'msg 1.', row: 0, hint: 'Try again later.' },
+      { type: 'error', message: 'msg 2!', row: 2, hint: undefined },
+      { type: 'error', message: 'msg 3?', hint: 'Be happy!' },
+      { type: 'error', message: 'msg 4' }
+    ]
+
+    const wrapper = shallowMount(Logs, {
+      propsData: { messages }
+    })
+
+    const logs = wrapper.findAll('.msg')
+    expect(logs.at(0).text()).to.equal('Error in row 0. msg 1. Try again later.')
+    expect(logs.at(1).text()).to.equal('Error in row 2. msg 2!')
+    expect(logs.at(2).text()).to.equal('msg 3? Be happy!')
+    expect(logs.at(3).text()).to.equal('msg 4.')
+  })
+})

tests/components/MainMenu.spec.js

@@ -0,0 +1,609 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, shallowMount, createWrapper } from '@vue/test-utils'
+import Vuex from 'vuex'
+import MainMenu from '@/components/MainMenu.vue'
+import storedQueries from '@/storedQueries.js'
+
+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: [{}],
+      schema: []
+    }
+    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: [{}],
+      schema: []
+    }
+    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 schema or no query', async () => {
+    const state = {
+      currentTab: { query: 'SELECT * FROM foo', execute: sinon.stub() },
+      tabs: [{}],
+      schema: 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, 'schema', [])
+    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 }],
+      schema: 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('#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 }],
+      schema: null
+    }
+    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 }],
+      schema: null
+    }
+    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 }],
+        schema: []
+      }
+      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, 'schema', 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, 'schema', [])
+      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 B calls createNewQuery', async () => {
+    const state = {
+      currentTab: {
+        query: 'SELECT * FROM foo',
+        execute: sinon.stub(),
+        tabIndex: 0
+      },
+      tabs: [{ isUnsaved: true }],
+      schema: []
+    }
+    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 }],
+        schema: []
+      }
+      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 }],
+        schema: []
+      }
+      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']
+      })
+
+      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 }],
+      schema: []
+    }
+    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']
+    })
+
+    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 }],
+      schema: []
+    }
+    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']
+    })
+
+    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 }],
+      schema: []
+    }
+    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']
+    })
+
+    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 }],
+      schema: []
+    }
+    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']
+    })
+
+    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')
+  })
+})

tests/components/Pager.spec.js

@@ -0,0 +1,37 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import Pager from '@/components/Pager.vue'
+
+describe('Pager.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('emits input event with a page', async () => {
+    const wrapper = mount(Pager, {
+      propsData: {
+        pageCount: 5
+      }
+    })
+
+    // click on 'next page' link
+    await wrapper.find('.paginator-next').trigger('click')
+    expect(wrapper.emitted('input')[0]).to.eql([2])
+
+    // click on the link to page 3 (it has index 2)
+    await wrapper.findAll('.paginator-page-link').at(2).trigger('click')
+    expect(wrapper.emitted('input')[1]).to.eql([3])
+  })
+
+  it('changes the page when value is changed', async () => {
+    const wrapper = mount(Pager, {
+      propsData: {
+        pageCount: 5
+      }
+    })
+
+    await wrapper.setProps({ value: 5 })
+    expect(wrapper.emitted('input')[0]).to.eql([5])
+  })
+})

tests/components/Schema.spec.js

@@ -0,0 +1,101 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import Schema from '@/components/Schema.vue'
+import TableDescription from '@/components/TableDescription.vue'
+
+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')
+  })
+})

tests/components/Splitpanes.spec.js

@@ -0,0 +1,220 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import Splitpanes from '@/components/Splitpanes.vue'
+
+describe('Splitpanes.vue', () => {
+  it('renders correctly - vertical', () => {
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+
+    expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+  })
+
+  it('renders correctly - horizontal', () => {
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 },
+        horizontal: true
+      }
+    })
+
+    expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.height).to.equal('40%')
+  })
+
+  it('toggles correctly', async () => {
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+
+    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+  })
+
+  it('drag - vertical', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+
+    await wrapper.find('.splitpanes-splitter').trigger('mousedown')
+    document.dispatchEvent(new MouseEvent('mousemove', {
+      clientX: 300,
+      clientY: 80
+    }))
+    document.dispatchEvent(new MouseEvent('mouseup'))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+  })
+
+  it('drag - horizontal', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 10, max: 100 },
+        after: { size: 90, max: 100 },
+        horizontal: true
+      }
+    })
+
+    await wrapper.find('.splitpanes-splitter').trigger('mousedown')
+    document.dispatchEvent(new MouseEvent('mousemove', {
+      clientX: 10,
+      clientY: 250
+    }))
+    document.dispatchEvent(new MouseEvent('mouseup'))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+  })
+
+  it('drag - horizontal - touch', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 10, max: 100 },
+        after: { size: 90, max: 100 },
+        horizontal: true
+      }
+    })
+
+    window.ontouchstart = null
+    await wrapper.find('.splitpanes-splitter').trigger('touchstart')
+    const event = new TouchEvent('touchmove')
+    Object.defineProperty(event, 'touches', {
+      value: [{
+        clientX: 10,
+        clientY: 250
+      }],
+      writable: true
+    })
+    document.dispatchEvent(event)
+    document.dispatchEvent(new MouseEvent('touchend'))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+    delete window.ontouchstart
+  })
+
+  it('drag - vertical - touch', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+    window.ontouchstart = null
+
+    await wrapper.find('.splitpanes-splitter').trigger('touchstart')
+    const event = new TouchEvent('touchmove')
+    Object.defineProperty(event, 'touches', {
+      value: [{
+        clientX: 300,
+        clientY: 80
+      }],
+      writable: true
+    })
+    document.dispatchEvent(event)
+    document.dispatchEvent(new MouseEvent('touchend'))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+    delete window.ontouchstart
+  })
+})

tests/components/SqlEditor.spec.js

@@ -0,0 +1,11 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import SqlEditor from '@/components/SqlEditor.vue'
+
+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'])
+  })
+})

tests/components/Tab.spec.js

@@ -0,0 +1,246 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import { mutations } from '@/store'
+import Vuex from 'vuex'
+import Tab from '@/components/Tab.vue'
+
+describe('Tab.vue', () => {
+  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', (done) => {
+    // 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()
+    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)
+    })
+    done()
+  })
+
+  it('Shows error when executing query ends with error', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute () { return Promise.reject(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 () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute () { return Promise.resolve(result) }
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+    const result = {
+      columns: ['id', 'name'],
+      values: [
+        [1, 'foo'],
+        [2, 'bar']
+      ]
+    }
+
+    // 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)
+  })
+})

tests/components/TableDescription.spec.js

@@ -0,0 +1,37 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import TableDescription from '@/components/TableDescription.vue'
+
+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, {
+      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/components/Tabs.spec.js

@@ -0,0 +1,275 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { shallowMount, mount, createWrapper } from '@vue/test-utils'
+import { mutations } from '@/store'
+import Vuex from 'vuex'
+import Tabs from '@/components/Tabs.vue'
+
+describe('Tabs.vue', () => {
+  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 })
+
+    // 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 })
+
+    // 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 })
+
+    // 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 })
+
+    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 })
+
+    const event = new Event('beforeunload')
+    sinon.spy(event, 'preventDefault')
+    wrapper.vm.leavingSqliteviz(event)
+
+    expect(event.preventDefault.calledOnce).to.equal(false)
+  })
+})