change repo structure

tests/components/Chart.spec.js

@@ -0,0 +1,247 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, flushPromises } from '@vue/test-utils'
+import Chart from '@/components/Chart.vue'
+import chartHelper from '@/lib/chartHelper'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
+import fIo from '@/lib/utils/fileIo'
+import { nextTick } from 'vue'
+
+describe('Chart.vue', () => {
+  const $store = { state: { isWorkspaceVisible: true } }
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('getOptionsForSave called with proper arguments', () => {
+    const wrapper = mount(Chart, {
+      global: {
+        mocks: { $store }
+      }
+    })
+    const vm = wrapper.vm
+    const stub = sinon.stub(chartHelper, 'getOptionsForSave').returns('result')
+    const chartData = vm.getOptionsForSave()
+    expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
+    expect(chartData).to.equal('result')
+    wrapper.unmount()
+  })
+
+  it('emits update when plotly updates', async () => {
+    const wrapper = mount(Chart, {
+      global: {
+        mocks: { $store }
+      }
+    })
+    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('update')
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+    wrapper.unmount()
+  })
+
+  it('calls dereference and updates chart when dataSources is changed', async () => {
+    sinon.spy(dereference, 'default')
+    const dataSources = {
+      name: ['Gryffindor'],
+      points: [80]
+    }
+
+    const wrapper = mount(Chart, {
+      props: {
+        dataSources,
+        initOptions: {
+          data: [
+            {
+              type: 'bar',
+              mode: 'markers',
+              x: null,
+              xsrc: 'name',
+              meta: {
+                columnNames: {
+                  x: 'name',
+                  y: 'points',
+                  text: 'points'
+                }
+              },
+              orientation: 'v',
+              y: null,
+              ysrc: 'points',
+              text: null,
+              textsrc: 'points'
+            }
+          ],
+          layout: {},
+          frames: []
+        }
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+    await flushPromises()
+
+    expect(wrapper.find('svg.main-svg .overplot text').text()).to.equal('80')
+    const newDataSources = {
+      name: ['Gryffindor'],
+      points: [100]
+    }
+
+    await wrapper.setProps({ dataSources: newDataSources })
+    await flushPromises()
+    expect(dereference.default.called).to.equal(true)
+    expect(wrapper.find('svg.main-svg .overplot text').text()).to.equal('100')
+  })
+
+  it('the plot resizes when the container resizes', async () => {
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources: null
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    // don't call flushPromises here, otherwize resize observer will be call to often
+    // which causes ResizeObserver loop completed with undelivered notifications.
+    await nextTick()
+
+    const container =
+      wrapper.find('.chart-container').wrapperElement.parentElement
+    const plot = wrapper.find('.svg-container').wrapperElement
+
+    const initialContainerWidth = container.scrollWidth
+    const initialContainerHeight = container.scrollHeight
+
+    const initialPlotWidth = plot.scrollWidth
+    const initialPlotHeight = plot.scrollHeight
+
+    const newContainerWidth = initialContainerWidth * 2 || 1000
+    const newContainerHeight = initialContainerHeight * 2 || 2000
+
+    container.style.width = `${newContainerWidth}px`
+    container.style.height = `${newContainerHeight}px`
+
+    await flushPromises()
+
+    expect(plot.scrollWidth).not.to.equal(initialPlotWidth)
+    expect(plot.scrollHeight).not.to.equal(initialPlotHeight)
+
+    container.style.width = 'unset'
+    container.style.height = 'unset'
+    wrapper.unmount()
+  })
+
+  it("doesn't calls dereference when dataSources is null", async () => {
+    sinon.stub(dereference, 'default')
+    const dataSources = {
+      id: [1],
+      name: ['foo']
+    }
+
+    // mount the component
+    const wrapper = mount(Chart, {
+      props: { dataSources },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    await wrapper.setProps({ dataSources: null })
+    expect(dereference.default.calledOnce).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('saveAsPng', async () => {
+    sinon.spy(fIo, 'downloadFromUrl')
+    const dataSources = {
+      id: [1],
+      name: ['foo']
+    }
+
+    const wrapper = mount(Chart, {
+      props: { dataSources },
+      global: {
+        mocks: { $store }
+      }
+    })
+    sinon.spy(wrapper.vm, 'prepareCopy')
+
+    await nextTick() // chart is rendered
+    await wrapper.vm.saveAsPng()
+
+    const url = await wrapper.vm.prepareCopy.returnValues[0]
+    expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
+    expect(fIo.downloadFromUrl.calledOnceWith(url, 'chart'))
+    wrapper.unmount()
+  })
+
+  it('dataSources are passed correctly', async () => {
+    const dataSources = {
+      name: ['Gryffindor'],
+      points: [80]
+    }
+
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources,
+        showViewSettings: true
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+    await flushPromises()
+    await wrapper.find('button.js-add-button').wrapperElement.click()
+
+    await flushPromises()
+
+    await wrapper
+      .find('.field .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    expect(wrapper.find('.Select__menu').text()).to.contain('name' + 'points')
+    wrapper.unmount()
+  })
+
+  it('hides and shows controls depending on showViewSettings and resizes the plot', async () => {
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources: null,
+        showViewSettings: false
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    // don't call flushPromises here, otherwize resize observer will be call to often
+    // which causes ResizeObserver loop completed with undelivered notifications.
+    await nextTick()
+
+    const plot = wrapper.find('.svg-container').wrapperElement
+    await flushPromises()
+    const initialPlotWidth = plot.scrollWidth
+    const initialPlotHeight = plot.scrollHeight
+
+    expect(wrapper.find('.plotly_editor .editor_controls').exists()).to.equal(
+      false
+    )
+
+    await wrapper.setProps({ showViewSettings: true })
+
+    await flushPromises()
+
+    expect(plot.scrollWidth).not.to.equal(initialPlotWidth)
+    expect(plot.scrollHeight).to.equal(initialPlotHeight)
+    expect(wrapper.find('.plotly_editor .editor_controls').exists()).to.equal(
+      true
+    )
+    wrapper.unmount()
+  })
+})

tests/components/Common/CheckBox.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import CheckBox from '@/components/CheckBox'
+import CheckBox from '@/components/Common/CheckBox'
 
 describe('CheckBox', () => {
   it('unchecked by default', () => {

tests/components/Common/LoadingIndicator.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import LoadingIndicator from '@/components/LoadingIndicator'
+import LoadingIndicator from '@/components/Common/LoadingIndicator'
 
 describe('LoadingIndicator.vue', () => {
   it('Calculates animation class', async () => {

tests/components/Common/Logs.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import Logs from '@/components/Logs'
+import Logs from '@/components/Common/Logs'
 import { nextTick } from 'vue'
 
 let place

tests/components/Common/Pager.spec.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount } from '@vue/test-utils'
-import Pager from '@/components/SqlTable/Pager'
+import Pager from '@/components/Common/Pager'
 
 describe('Pager.vue', () => {
   afterEach(() => {

tests/components/Common/Splitpanes/Splitpanes.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import Splitpanes from '@/components/Splitpanes'
+import Splitpanes from '@/components/Common/Splitpanes'
 import { nextTick } from 'vue'
 
 describe('Splitpanes.vue', () => {

tests/components/Common/Splitpanes/splitter.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import splitter from '@/components/Splitpanes/splitter'
+import splitter from '@/components/Common/Splitpanes/splitter'
 
 describe('splitter.js', () => {
   afterEach(() => {

tests/components/DataView.spec.js

@@ -0,0 +1,421 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import DataView from '@/components/DataView.vue'
+import sinon from 'sinon'
+import { nextTick } from 'vue'
+import cIo from '@/lib/utils/clipboardIo'
+
+describe('DataView.vue', () => {
+  const $store = { state: { isWorkspaceVisible: true } }
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('emits update on mode changing', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
+    await pivotBtn.trigger('click')
+
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+    wrapper.unmount()
+  })
+
+  it('method getOptionsForSave calls the same method of the current view component', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const chart = wrapper.findComponent({ name: 'Chart' }).vm
+    sinon
+      .stub(chart, 'getOptionsForSave')
+      .returns({ here_are: 'chart_settings' })
+
+    expect(wrapper.vm.getOptionsForSave()).to.eql({
+      here_are: 'chart_settings'
+    })
+
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
+    await pivotBtn.trigger('click')
+
+    const pivot = wrapper.findComponent({ name: 'pivot' }).vm
+    sinon
+      .stub(pivot, 'getOptionsForSave')
+      .returns({ here_are: 'pivot_settings' })
+
+    expect(wrapper.vm.getOptionsForSave()).to.eql({
+      here_are: 'pivot_settings'
+    })
+
+    const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
+    await graphBtn.trigger('click')
+
+    const graph = wrapper.findComponent({ name: 'graph' }).vm
+    sinon
+      .stub(graph, 'getOptionsForSave')
+      .returns({ here_are: 'graph_settings' })
+
+    expect(wrapper.vm.getOptionsForSave()).to.eql({
+      here_are: 'graph_settings'
+    })
+    wrapper.unmount()
+  })
+
+  it('method saveAsSvg calls the same method of the current view component', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    // Find chart and spy the method
+    const chart = wrapper.findComponent({ name: 'Chart' }).vm
+    sinon.stub(chart, 'saveAsSvg')
+
+    // Export to svg
+    const svgBtn = wrapper.findComponent({ ref: 'svgExportBtn' })
+    await svgBtn.trigger('click')
+    expect(chart.saveAsSvg.calledOnce).to.equal(true)
+
+    // Switch to pivot
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
+    await pivotBtn.trigger('click')
+
+    // Find pivot and spy the method
+    const pivot = wrapper.findComponent({ name: 'pivot' }).vm
+    sinon.stub(pivot, 'saveAsSvg')
+
+    // Switch to Custom Chart renderer
+    pivot.pivotOptions.rendererName = 'Custom chart'
+    await pivot.$nextTick()
+
+    // Export to svg
+    await svgBtn.trigger('click')
+    expect(pivot.saveAsSvg.calledOnce).to.equal(true)
+
+    // Switch to graph - svg disabled
+    const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
+    await graphBtn.trigger('click')
+    expect(svgBtn.attributes('disabled')).to.not.equal(undefined)
+
+    wrapper.unmount()
+  })
+
+  it('method saveAsHtml calls the same method of the current view component', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    // Find chart and spy the method
+    const chart = wrapper.findComponent({ name: 'Chart' }).vm
+    sinon.spy(chart, 'saveAsHtml')
+
+    // Export to html
+    const htmlBtn = wrapper.findComponent({ ref: 'htmlExportBtn' })
+    await htmlBtn.trigger('click')
+    expect(chart.saveAsHtml.calledOnce).to.equal(true)
+
+    // Switch to pivot
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
+    await pivotBtn.trigger('click')
+
+    // Find pivot and spy the method
+    const pivot = wrapper.findComponent({ name: 'pivot' }).vm
+    sinon.spy(pivot, 'saveAsHtml')
+
+    // Export to html
+    await htmlBtn.trigger('click')
+    expect(pivot.saveAsHtml.calledOnce).to.equal(true)
+
+    // Switch to graph - htmlBtn disabled
+    const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
+    await graphBtn.trigger('click')
+    expect(htmlBtn.attributes('disabled')).to.not.equal(undefined)
+
+    wrapper.unmount()
+  })
+
+  it('method saveAsPng calls the same method of the current view component', async () => {
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    // Find chart and stub the method
+    const chart = wrapper.findComponent({ name: 'Chart' }).vm
+    sinon.stub(chart, 'saveAsPng').callsFake(() => {
+      chart.$emit('loadingImageCompleted')
+    })
+
+    // Export to png
+    const pngBtn = wrapper.findComponent({ ref: 'pngExportBtn' })
+    await pngBtn.trigger('click')
+    await clock.tick(0)
+    expect(chart.saveAsPng.calledOnce).to.equal(true)
+
+    // Switch to pivot
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
+    await pivotBtn.trigger('click')
+
+    // Find pivot and stub the method
+    const pivot = wrapper.findComponent({ name: 'pivot' }).vm
+    sinon.stub(pivot, 'saveAsPng').callsFake(() => {
+      pivot.$emit('loadingImageCompleted')
+    })
+
+    // Export to png
+    await pngBtn.trigger('click')
+    await clock.tick(0)
+    expect(pivot.saveAsPng.calledOnce).to.equal(true)
+
+    // Switch to graph
+    const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
+    await graphBtn.trigger('click')
+
+    // Save as png is disabled because there is no data
+    expect(pngBtn.attributes('disabled')).to.not.equal(undefined)
+
+    await wrapper.setProps({ dataSource: { doc: [] } })
+
+    // Find graph and stub the method
+    const graph = wrapper.findComponent({ name: 'graph' }).vm
+    sinon.stub(graph, 'saveAsPng').callsFake(() => {
+      graph.$emit('loadingImageCompleted')
+    })
+
+    // Export to png
+    await pngBtn.trigger('click')
+    await clock.tick(0)
+    expect(graph.saveAsPng.calledOnce).to.equal(true)
+
+    wrapper.unmount()
+  })
+
+  it('shows alert when ClipboardItem is not supported', async () => {
+    const ClipboardItem = window.ClipboardItem
+    delete window.ClipboardItem
+    sinon.spy(window, 'alert')
+    const wrapper = mount(DataView, {
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    expect(
+      window.alert.calledOnceWith(
+        "Your browser doesn't support copying images into the clipboard. " +
+          'If you use Firefox you can enable it ' +
+          'by setting dom.events.asyncClipboard.clipboardItem to true.'
+      )
+    ).to.equal(true)
+
+    window.ClipboardItem = ClipboardItem
+    wrapper.unmount()
+  })
+
+  it('copy to clipboard more than 1 sec', async () => {
+    sinon.stub(window.navigator.clipboard, 'write').resolves()
+    sinon.stub(cIo, 'copyImage')
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(DataView, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: false },
+        mocks: { $store }
+      }
+    })
+    sinon
+      .stub(wrapper.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(5000)
+      })
+
+    // Click copy to clipboard
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Copy to clipboard'
+    )
+
+    // ... with Rendering message...
+    expect(wrapper.find('.dialog-body').text()).to.equal(
+      'Rendering the visualisation...'
+    )
+
+    // Switch to microtasks (let prepareCopy run)
+    await clock.tick(0)
+    // Wait untill prepareCopy is finished
+    await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
+
+    await nextTick()
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
+
+    // ... with Ready message...
+    expect(wrapper.find('.dialog-body').text()).to.equal('Image is ready')
+
+    // Click copy
+    await wrapper
+      .find('.dialog-buttons-container button.primary')
+      .trigger('click')
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('copy to clipboard less than 1 sec', async () => {
+    sinon.stub(window.navigator.clipboard, 'write').resolves()
+    sinon.stub(cIo, 'copyImage')
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(DataView, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: false },
+        mocks: { $store }
+      }
+    })
+    sinon.spy(wrapper.vm, 'copyToClipboard')
+    sinon
+      .stub(wrapper.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(500)
+      })
+
+    // Click copy to clipboard
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    // Switch to microtasks (let prepareCopy run)
+    await clock.tick(0)
+    // Wait untill prepareCopy is finished
+    await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+    // copyToClipboard is called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('cancel long copy', async () => {
+    sinon.stub(window.navigator.clipboard, 'write').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(DataView, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: false },
+        mocks: { $store }
+      }
+    })
+    sinon.spy(wrapper.vm, 'copyToClipboard')
+    sinon
+      .stub(wrapper.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(5000)
+      })
+
+    // Click copy to clipboard
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    // Switch to microtasks (let prepareCopy run)
+    await clock.tick(0)
+    // Wait untill prepareCopy is finished
+    await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
+
+    await nextTick()
+
+    // Click cancel
+    await wrapper
+      .find('.dialog-buttons-container button.secondary')
+      .trigger('click')
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+    // copyToClipboard is not called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('saves visualisation options and restores them when switch between modes', async () => {
+    const wrapper = mount(DataView, {
+      props: {
+        initMode: 'graph',
+        initOptions: { test_options: 'graph_options_from_inquiery' }
+      },
+      global: {
+        mocks: { $store },
+        stubs: {
+          chart: true,
+          graph: true,
+          pivot: true
+        }
+      }
+    })
+    const getOptionsForSaveStub = sinon.stub(wrapper.vm, 'getOptionsForSave')
+
+    expect(
+      wrapper.findComponent({ name: 'graph' }).props('initOptions')
+    ).to.eql({ test_options: 'graph_options_from_inquiery' })
+
+    getOptionsForSaveStub.returns({ test_options: 'latest_graph_options' })
+    const chartBtn = wrapper.findComponent({ ref: 'chartBtn' })
+    await chartBtn.trigger('click')
+
+    getOptionsForSaveStub.returns({ test_options: 'chart_settings' })
+
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
+    await pivotBtn.trigger('click')
+
+    getOptionsForSaveStub.returns({ test_options: 'pivot_settings' })
+    await chartBtn.trigger('click')
+    expect(
+      wrapper.findComponent({ name: 'chart' }).props('initOptions')
+    ).to.eql({ test_options: 'chart_settings' })
+
+    await pivotBtn.trigger('click')
+    expect(
+      wrapper.findComponent({ name: 'pivot' }).props('initOptions')
+    ).to.eql({ test_options: 'pivot_settings' })
+
+    const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
+    await graphBtn.trigger('click')
+    expect(
+      wrapper.findComponent({ name: 'graph' }).props('initOptions')
+    ).to.eql({ test_options: 'latest_graph_options' })
+  })
+})

tests/components/Graph/Graph.spec.js

@@ -0,0 +1,504 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, flushPromises } from '@vue/test-utils'
+import Graph from '@/components/Graph/index.vue'
+
+function getPixels(canvas) {
+  const context = canvas.getContext('webgl2')
+  const width = context.canvas.width
+  const height = context.canvas.height
+
+  // Create arrays to hold the pixel data
+  const pixels = new Uint8Array(width * height * 4)
+
+  // Read pixels from canvas
+  context.readPixels(
+    0,
+    0,
+    width,
+    height,
+    context.RGBA,
+    context.UNSIGNED_BYTE,
+    pixels
+  )
+  return pixels.join(' ')
+}
+
+describe('Graph.vue', () => {
+  const $store = { state: { isWorkspaceVisible: true } }
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('shows message when no data', () => {
+    const wrapper = mount(Graph, {
+      global: {
+        stubs: {
+          GraphEditor: true
+        }
+      },
+      attachTo: document.body
+    })
+    expect(wrapper.find('.no-data').isVisible()).to.equal(true)
+    expect(wrapper.find('.invalid-data').isVisible()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('shows message when data is invalid', () => {
+    const wrapper = mount(Graph, {
+      props: {
+        dataSources: {
+          column1: ['value1', 'value2']
+        }
+      },
+      global: {
+        stubs: {
+          GraphEditor: true
+        }
+      },
+      attachTo: document.body
+    })
+    expect(wrapper.find('.no-data').isVisible()).to.equal(false)
+    expect(wrapper.find('.invalid-data').isVisible()).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('emits update when graph editor updates', async () => {
+    const wrapper = mount(Graph, {
+      global: {
+        stubs: {
+          GraphEditor: true
+        }
+      }
+    })
+    wrapper.findComponent({ ref: 'graphEditor' }).vm.$emit('update')
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+  })
+
+  it('the graph resizes when the container resizes', async () => {
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type":0,"node_id":"Gryffindor"}',
+            '{"object_type":0,"node_id":"Hufflepuff"}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4'
+              },
+              label: {
+                source: null,
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const container =
+      wrapper.find('.graph-container').wrapperElement.parentElement
+    const canvas = wrapper.find('canvas.sigma-nodes').wrapperElement
+
+    const initialContainerWidth = container.scrollWidth
+    const initialContainerHeight = container.scrollHeight
+
+    const initialCanvasWidth = canvas.scrollWidth
+    const initialCanvasHeight = canvas.scrollHeight
+
+    const newContainerWidth = initialContainerWidth * 2 || 1000
+    const newContainerHeight = initialContainerHeight * 2 || 2000
+
+    container.style.width = `${newContainerWidth}px`
+    container.style.height = `${newContainerHeight}px`
+
+    await flushPromises()
+
+    expect(canvas.scrollWidth).not.to.equal(initialCanvasWidth)
+    expect(canvas.scrollHeight).not.to.equal(initialCanvasHeight)
+
+    wrapper.unmount()
+  })
+
+  it('nodes and edges are rendered', async () => {
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        showViewSettings: true,
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1}',
+            '{"object_type": 0, "node_id": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const container =
+      wrapper.find('.graph-container').wrapperElement.parentElement
+    container.style.height = '400px'
+
+    await wrapper
+      .find('.test_object_type_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    let options = wrapper.findAll('.Select__menu .Select__option')
+
+    await options[0].trigger('click')
+
+    const nodeCanvasPixelsBefore = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsBefore = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    await wrapper
+      .find('.test_node_id_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[1].trigger('click')
+
+    await wrapper
+      .find('.test_edge_source_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[2].trigger('click')
+
+    await wrapper
+      .find('.test_edge_target_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[3].trigger('click')
+
+    const nodeCanvasPixelsAfter = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsAfter = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    expect(nodeCanvasPixelsBefore).not.equal(nodeCanvasPixelsAfter)
+    expect(edgeCanvasPixelsBefore).not.equal(edgeCanvasPixelsAfter)
+
+    wrapper.unmount()
+  })
+
+  it('rerenders when dataSource changes but does not rerender if dataSources is empty', async () => {
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        showViewSettings: true,
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1}',
+            '{"object_type": 0, "node_id": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const container =
+      wrapper.find('.graph-container').wrapperElement.parentElement
+    container.style.height = '400px'
+
+    await wrapper
+      .find('.test_object_type_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    let options = wrapper.findAll('.Select__menu .Select__option')
+
+    await options[0].trigger('click')
+
+    await wrapper
+      .find('.test_node_id_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[1].trigger('click')
+
+    await wrapper
+      .find('.test_edge_source_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[2].trigger('click')
+
+    await wrapper
+      .find('.test_edge_target_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[3].trigger('click')
+
+    const nodeCanvasPixelsBefore = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsBefore = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+    await wrapper.setProps({
+      dataSources: {
+        doc: [
+          '{"object_type": 0, "node_id": 1}',
+          '{"object_type": 0, "node_id": 2}',
+          '{"object_type": 0, "node_id": 3}',
+          '{"object_type": 1, "source": 1, "target": 2}',
+          '{"object_type": 1, "source": 1, "target": 3}'
+        ]
+      }
+    })
+
+    const nodeCanvasPixelsAfter = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsAfter = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    expect(nodeCanvasPixelsBefore).not.equal(nodeCanvasPixelsAfter)
+    expect(edgeCanvasPixelsBefore).not.equal(edgeCanvasPixelsAfter)
+
+    await wrapper.setProps({
+      dataSources: null
+    })
+
+    const nodeCanvasPixelsAfterEmtyData = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsAfterEmtyData = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    expect(nodeCanvasPixelsAfterEmtyData).equal(nodeCanvasPixelsAfter)
+    expect(edgeCanvasPixelsAfterEmtyData).equal(edgeCanvasPixelsAfter)
+
+    wrapper.unmount()
+  })
+
+  it('saveAsPng', async () => {
+    const wrapper = mount(Graph, {
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type":0,"node_id":"Gryffindor"}',
+            '{"object_type":0,"node_id":"Hufflepuff"}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4'
+              },
+              label: {
+                source: null,
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+    sinon.stub(wrapper.vm.$refs.graphEditor, 'saveAsPng')
+    await wrapper.vm.saveAsPng()
+    expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
+  })
+
+  it('hides and shows controls depending on showViewSettings and resizes the graph', async () => {
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type":0,"node_id":"Gryffindor"}',
+            '{"object_type":0,"node_id":"Hufflepuff"}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4'
+              },
+              label: {
+                source: null,
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const canvas = wrapper.find('canvas.sigma-nodes').wrapperElement
+
+    const initialPlotWidth = canvas.scrollWidth
+    const initialPlotHeight = canvas.scrollHeight
+
+    expect(
+      wrapper.find('.plotly_editor .editor_controls').isVisible()
+    ).to.equal(false)
+
+    await wrapper.setProps({ showViewSettings: true })
+
+    await flushPromises()
+
+    expect(canvas.scrollWidth).not.to.equal(initialPlotWidth)
+    expect(canvas.scrollHeight).to.equal(initialPlotHeight)
+    expect(
+      wrapper.find('.plotly_editor .editor_controls').isVisible()
+    ).to.equal(true)
+    wrapper.unmount()
+  })
+})

tests/components/Pivot/Pivot.spec.js

@@ -0,0 +1,633 @@
+import { expect } from 'chai'
+import { mount, flushPromises } from '@vue/test-utils'
+import Pivot from '@/components/Pivot/index.vue'
+import chartHelper from '@/lib/chartHelper'
+import fIo from '@/lib/utils/fileIo'
+import $ from 'jquery'
+import sinon from 'sinon'
+import pivotHelper from '@/components/Pivot/pivotHelper'
+
+describe('Pivot.vue', () => {
+  let container
+  const $store = { state: { isWorkspaceVisible: true } }
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    sinon.restore()
+  })
+
+  it('renders pivot table', () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          rendererName: 'Table'
+        }
+      },
+      global: {
+        stubs: { chart: true }
+      }
+    })
+    const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
+    expect(colLabels[0].text()).to.equal('2020')
+    expect(colLabels[1].text()).to.equal('2021')
+    const rows = wrapper.findAll('.pivot-output tbody tr')
+    // row0: bar - 2 - 1
+    expect(rows[0].find('th').text()).to.equal('bar')
+    expect(rows[0].find('td.col0').text()).to.equal('2')
+    expect(rows[0].find('td.col1').text()).to.equal('1')
+    expect(rows[0].find('td.rowTotal').text()).to.equal('3')
+
+    // row1: foo -  - 2
+    expect(rows[1].find('th').text()).to.equal('foo')
+    expect(rows[1].find('td.col0').text()).to.equal('')
+    expect(rows[1].find('td.col1').text()).to.equal('1')
+    expect(rows[1].find('td.rowTotal').text()).to.equal('1')
+  })
+
+  it('updates when dataSource changes', async () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          rendererName: 'Table'
+        }
+      },
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    await wrapper.setProps({
+      dataSources: {
+        item: ['foo', 'bar', 'bar', 'bar', 'foo', 'baz'],
+        year: [2021, 2021, 2020, 2020, 2021, 2020]
+      }
+    })
+
+    const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
+    expect(colLabels[0].text()).to.equal('2020')
+    expect(colLabels[1].text()).to.equal('2021')
+    const rows = wrapper.findAll('.pivot-output tbody tr')
+    // row0: bar - 2 - 1
+    expect(rows[0].find('th').text()).to.equal('bar')
+    expect(rows[0].find('td.col0').text()).to.equal('2')
+    expect(rows[0].find('td.col1').text()).to.equal('1')
+    expect(rows[0].find('td.rowTotal').text()).to.equal('3')
+
+    // row1: baz - 1 -
+    expect(rows[1].find('th').text()).to.equal('baz')
+    expect(rows[1].find('td.col0').text()).to.equal('1')
+    expect(rows[1].find('td.col1').text()).to.equal('')
+    expect(rows[1].find('td.rowTotal').text()).to.equal('1')
+
+    // row2: foo -  - 2
+    expect(rows[2].find('th').text()).to.equal('foo')
+    expect(rows[2].find('td.col0').text()).to.equal('')
+    expect(rows[2].find('td.col1').text()).to.equal('2')
+    expect(rows[2].find('td.rowTotal').text()).to.equal('2')
+  })
+
+  it('returns options for save', async () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          rendererName: 'Table'
+        }
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
+      rows: ['year'],
+      cols: ['item'],
+      colOrder: 'value_a_to_z',
+      rowOrder: 'value_z_to_a',
+      aggregator: $.pivotUtilities.aggregators.Count(),
+      aggregatorName: 'Count',
+      renderer: $.pivotUtilities.renderers.Table,
+      rendererName: 'Table',
+      vals: []
+    })
+    sinon
+      .stub(
+        wrapper.findComponent({ ref: 'customChart' }).vm,
+        'getOptionsForSave'
+      )
+      .returns({ here_are: 'custom chart settings' })
+
+    let optionsForSave = wrapper.vm.getOptionsForSave()
+
+    expect(optionsForSave.rows).to.eql(['year'])
+    expect(optionsForSave.cols).to.eql(['item'])
+    expect(optionsForSave.colOrder).to.equal('value_a_to_z')
+    expect(optionsForSave.rowOrder).to.equal('value_z_to_a')
+    expect(optionsForSave.aggregatorName).to.equal('Count')
+    expect(optionsForSave.rendererName).to.equal('Table')
+    expect(optionsForSave.rendererOptions).to.equal(undefined)
+    expect(optionsForSave.vals).to.eql([])
+
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
+      rows: ['item'],
+      cols: ['year'],
+      colOrder: 'value_a_to_z',
+      rowOrder: 'value_z_to_a',
+      aggregator: $.pivotUtilities.aggregators.Count(),
+      aggregatorName: 'Count',
+      renderer: $.pivotUtilities.renderers['Custom chart'],
+      rendererName: 'Custom chart',
+      vals: []
+    })
+
+    optionsForSave = wrapper.vm.getOptionsForSave()
+    expect(optionsForSave.rows).to.eql(['item'])
+    expect(optionsForSave.cols).to.eql(['year'])
+    expect(optionsForSave.colOrder).to.equal('value_a_to_z')
+    expect(optionsForSave.rowOrder).to.equal('value_z_to_a')
+    expect(optionsForSave.aggregatorName).to.equal('Count')
+    expect(optionsForSave.rendererName).to.equal('Custom chart')
+    expect(optionsForSave.rendererOptions).to.eql({
+      customChartOptions: { here_are: 'custom chart settings' }
+    })
+    expect(optionsForSave.vals).to.eql([])
+  })
+
+  it('prepareCopy returns canvas for tables and url for plotly charts', async () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          rendererName: 'Table'
+        }
+      },
+      attachTo: container,
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    expect(await wrapper.vm.prepareCopy()).to.be.instanceof(HTMLCanvasElement)
+
+    sinon
+      .stub(wrapper.findComponent({ ref: 'customChart' }).vm, 'prepareCopy')
+      .returns(URL.createObjectURL(new Blob()))
+
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
+      rows: ['item'],
+      cols: ['year'],
+      colOrder: 'value_a_to_z',
+      rowOrder: 'value_z_to_a',
+      aggregator: $.pivotUtilities.aggregators.Count(),
+      aggregatorName: 'Count',
+      renderer: $.pivotUtilities.renderers['Custom chart'],
+      rendererName: 'Custom chart',
+      vals: []
+    })
+
+    expect(await wrapper.vm.prepareCopy()).to.be.a('string')
+
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
+      rows: ['item'],
+      cols: ['year'],
+      colOrder: 'value_a_to_z',
+      rowOrder: 'value_z_to_a',
+      aggregator: $.pivotUtilities.aggregators.Count(),
+      aggregatorName: 'Count',
+      renderer: $.pivotUtilities.renderers['Bar Chart'],
+      rendererName: 'Bar Chart',
+      vals: []
+    })
+
+    expect(await wrapper.vm.prepareCopy()).to.be.a('string')
+  })
+
+  it('saveAsSvg calls chart method if renderer is Custom Chart', async () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Custom chart'],
+          rendererName: 'Custom chart',
+          rendererOptions: {
+            customChartOptions: {
+              data: [],
+              layout: {},
+              frames: []
+            }
+          }
+        }
+      },
+      attachTo: container,
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    const chartComponent = wrapper.findComponent({ ref: 'customChart' }).vm
+    sinon.stub(chartComponent, 'saveAsSvg')
+
+    await wrapper.vm.saveAsSvg()
+    expect(chartComponent.saveAsSvg.called).to.equal(true)
+  })
+
+  it('saveAsHtml calls chart method if renderer is Custom Chart', async () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Custom chart'],
+          rendererName: 'Custom chart',
+          rendererOptions: {
+            customChartOptions: {
+              data: [],
+              layout: {},
+              frames: []
+            }
+          }
+        }
+      },
+      attachTo: container,
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    const chartComponent = wrapper.findComponent({ ref: 'customChart' }).vm
+    sinon.stub(chartComponent, 'saveAsHtml')
+
+    await wrapper.vm.saveAsHtml()
+    expect(chartComponent.saveAsHtml.called).to.equal(true)
+  })
+
+  it('saveAsPng calls chart method if renderer is Custom Chart', async () => {
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Custom chart'],
+          rendererName: 'Custom chart',
+          rendererOptions: {
+            customChartOptions: {
+              data: [],
+              layout: {},
+              frames: []
+            }
+          }
+        }
+      },
+      attachTo: container,
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    const chartComponent = wrapper.findComponent({ ref: 'customChart' }).vm
+    sinon.stub(chartComponent, 'saveAsPng')
+
+    await wrapper.vm.saveAsPng()
+    expect(chartComponent.saveAsPng.called).to.equal(true)
+  })
+
+  it('saveAsSvg - standart chart', async () => {
+    sinon.spy(chartHelper, 'getImageDataUrl')
+
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container,
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    await wrapper.vm.saveAsSvg()
+    expect(chartHelper.getImageDataUrl.calledOnce).to.equal(true)
+  })
+
+  it('saveAsHtml - standart chart', async () => {
+    sinon.spy(chartHelper, 'getChartData')
+    sinon.spy(chartHelper, 'getHtml')
+
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container,
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    await wrapper.vm.saveAsHtml()
+    expect(chartHelper.getChartData.calledOnce).to.equal(true)
+    const chartData = await chartHelper.getChartData.returnValues[0]
+    expect(chartHelper.getHtml.calledOnceWith(chartData)).to.equal(true)
+  })
+
+  it('saveAsHtml - table', async () => {
+    sinon.stub(pivotHelper, 'getPivotHtml')
+    sinon.stub(fIo, 'exportToFile')
+
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers.Table,
+          rendererName: 'Table'
+        }
+      },
+      attachTo: container,
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    await wrapper.vm.saveAsHtml()
+    expect(pivotHelper.getPivotHtml.calledOnce).to.equal(true)
+    const html = pivotHelper.getPivotHtml.returnValues[0]
+    expect(
+      fIo.exportToFile.calledOnceWith(html, 'pivot.html', 'text/html')
+    ).to.equal(true)
+  })
+
+  it('saveAsPng - standart chart', async () => {
+    sinon.stub(chartHelper, 'getImageDataUrl').returns('standat chart data url')
+    sinon.stub(fIo, 'downloadFromUrl')
+
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container,
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    await wrapper.vm.saveAsPng()
+    expect(chartHelper.getImageDataUrl.calledOnce).to.equal(true)
+    await chartHelper.getImageDataUrl.returnValues[0]
+    expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
+    expect(
+      fIo.downloadFromUrl.calledOnceWith('standat chart data url', 'pivot')
+    ).to.equal(true)
+  })
+
+  it('saveAsPng - table', async () => {
+    sinon
+      .stub(pivotHelper, 'getPivotCanvas')
+      .returns(document.createElement('canvas'))
+    sinon
+      .stub(HTMLCanvasElement.prototype, 'toDataURL')
+      .returns('canvas data url')
+    sinon.stub(fIo, 'downloadFromUrl')
+
+    const wrapper = mount(Pivot, {
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers.Table,
+          rendererName: 'Table'
+        }
+      },
+      attachTo: container,
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    await wrapper.vm.saveAsPng()
+    expect(HTMLCanvasElement.prototype.toDataURL.calledOnce).to.equal(true)
+    await HTMLCanvasElement.prototype.toDataURL.returnValues[0]
+    expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
+    expect(
+      fIo.downloadFromUrl.calledOnceWith('canvas data url', 'pivot')
+    ).to.equal(true)
+  })
+
+  it('resizes standart chart', async () => {
+    const wrapper = mount(Pivot, {
+      global: {
+        mocks: { $store: { state: { isWorkspaceVisible: true } } }
+      },
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container
+    })
+
+    await flushPromises()
+
+    const plotContainer = wrapper.find('.pivot-output').wrapperElement
+    const plot = wrapper.find('.svg-container').wrapperElement
+
+    const initialContainerWidth = plotContainer.scrollWidth
+    const initialContainerHeight = plotContainer.scrollHeight
+
+    const initialPlotWidth = plot.scrollWidth
+    const initialPlotHeight = plot.scrollHeight
+
+    const newContainerWidth = initialContainerWidth * 2 || 1000
+    const newContainerHeight = initialContainerHeight * 2 || 2000
+
+    plotContainer.style.width = `${newContainerWidth}px`
+    plotContainer.style.height = `${newContainerHeight}px`
+
+    await flushPromises()
+
+    const plotAfterResize = wrapper.find('.svg-container').wrapperElement
+    expect(plotAfterResize.scrollWidth).not.to.equal(initialPlotWidth)
+
+    expect(plotAfterResize.scrollWidth.scrollHeight).not.to.equal(
+      initialPlotHeight
+    )
+
+    wrapper.unmount()
+  })
+
+  it('hides or shows controlls depending on showViewSettings and resizes standart chart', async () => {
+    const wrapper = mount(Pivot, {
+      global: {
+        mocks: { $store: { state: { isWorkspaceVisible: true } } }
+      },
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container
+    })
+
+    expect(wrapper.find('.pivot-ui').isVisible()).to.equal(false)
+
+    await flushPromises()
+
+    const plot = wrapper.find('.svg-container').wrapperElement
+    const initialPlotHeight = plot.scrollHeight
+
+    await wrapper.setProps({ showViewSettings: true })
+    expect(wrapper.find('.pivot-ui').isVisible()).to.equal(true)
+
+    await flushPromises()
+    const plotAfterResize = wrapper.find('.svg-container').wrapperElement
+
+    expect(plotAfterResize.scrollWidth.scrollHeight).not.to.equal(
+      initialPlotHeight
+    )
+
+    wrapper.unmount()
+  })
+})

tests/components/Pivot/PivotUi/PivotSortBtn.spec.js

@@ -0,0 +1,26 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import PivotSortBtn from '@/components/Pivot/PivotUi/PivotSortBtn'
+
+describe('PivotSortBtn.vue', () => {
+  it('switches order', async () => {
+    const wrapper = shallowMount(PivotSortBtn, {
+      props: {
+        modelValue: 'key_a_to_z',
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
+      }
+    })
+
+    expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
+    await wrapper.find('.pivot-sort-btn').trigger('click')
+    expect(wrapper.props('modelValue')).to.equal('value_a_to_z')
+
+    await wrapper.setValue('value_a_to_z')
+    await wrapper.find('.pivot-sort-btn').trigger('click')
+    expect(wrapper.props('modelValue')).to.equal('value_z_to_a')
+
+    await wrapper.setValue('value_z_to_a')
+    await wrapper.find('.pivot-sort-btn').trigger('click')
+    expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
+  })
+})

tests/components/Pivot/PivotUi/PivotUi.spec.js

@@ -0,0 +1,155 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import PivotUi from '@/components/Pivot/PivotUi'
+
+describe('PivotUi.vue', () => {
+  it('returns value when settings changed', async () => {
+    const wrapper = mount(PivotUi, {
+      props: {
+        keyNames: ['foo', 'bar'],
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
+      }
+    })
+
+    // choose columns
+    await wrapper
+      .findAll('.sqliteviz-select.cols .multiselect__element > span')[0]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(1)
+
+    let value = wrapper.props('modelValue')
+    expect(value.rows).to.eql([])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('key_a_to_z')
+    expect(value.rowOrder).to.equal('key_a_to_z')
+    expect(value.aggregatorName).to.equal('Count')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
+
+    // choose rows
+    await wrapper
+      .findAll('.sqliteviz-select.rows .multiselect__element > span')[0]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(2)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('key_a_to_z')
+    expect(value.rowOrder).to.equal('key_a_to_z')
+    expect(value.aggregatorName).to.equal('Count')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
+
+    // change column order
+    await wrapper.find('.pivot-sort-btn.col').trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(3)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('key_a_to_z')
+    expect(value.aggregatorName).to.equal('Count')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
+
+    // change row order
+    await wrapper.find('.pivot-sort-btn.row').trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(4)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('value_a_to_z')
+    expect(value.aggregatorName).to.equal('Count')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
+
+    // change aggregator
+    await wrapper
+      .findAll('.sqliteviz-select.aggregator .multiselect__element > span')[12]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(5)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('value_a_to_z')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql(['', ''])
+
+    // set first aggregator argument
+    await wrapper
+      .findAll('.sqliteviz-select.aggr-arg')[0]
+      .findAll('.multiselect__element > span')[0]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(6)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('value_a_to_z')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql(['foo', ''])
+
+    // set second aggregator argument
+    await wrapper
+      .findAll('.sqliteviz-select.aggr-arg')[1]
+      .findAll('.multiselect__element > span')[1]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(7)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('value_a_to_z')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql(['foo', 'bar'])
+
+    // change renderer
+    await wrapper
+      .findAll('.sqliteviz-select.renderer .multiselect__element > span')[13]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(8)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('value_a_to_z')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
+    expect(value.rendererName).to.equal('Custom chart')
+    expect(value.vals).to.eql(['foo', 'bar'])
+
+    // change aggregator again
+    await wrapper
+      .findAll('.sqliteviz-select.aggregator .multiselect__element > span')[3]
+      .trigger('click')
+
+    expect(wrapper.emitted().update.length).to.equal(9)
+    value = wrapper.props('modelValue')
+    expect(value.rows).to.eql(['bar'])
+    expect(value.cols).to.eql(['foo'])
+    expect(value.colOrder).to.equal('value_a_to_z')
+    expect(value.rowOrder).to.equal('value_a_to_z')
+    expect(value.aggregatorName).to.equal('Sum')
+    expect(value.rendererName).to.equal('Custom chart')
+    expect(value.vals).to.eql(['foo'])
+  })
+})

tests/components/Pivot/pivotHelper.spec.js

@@ -0,0 +1,86 @@
+import { expect } from 'chai'
+import {
+  _getDataSources,
+  getPivotCanvas,
+  getPivotHtml
+} from '@/components/Pivot/pivotHelper'
+
+describe('pivotHelper.js', () => {
+  it('_getDataSources returns data sources', () => {
+    /*
+      +---+---+---------+---------+
+      |   | x |    5    |    10   |
+      |   +---+----+----+----+----+
+      |   | z |  2 |  3 |  1 |  6 |
+      +---+---+    |    |    |    |
+      | y |   |    |    |    |    |
+      +---+---+----+----+----+----+
+      |   3   |  5 |  6 |  4 |  9 |
+      +-------+----+----+----+----+
+      |   6   |  8 |  9 |  7 | 12 |
+      +-------+----+----+----+----+
+      |   9   | 11 | 12 | 10 | 15 |
+      +-------+----+----+----+----+
+    */
+    const pivotData = {
+      rowAttrs: ['y'],
+      colAttrs: ['x', 'z'],
+      getRowKeys() {
+        return [[3], [6], [9]]
+      },
+      getColKeys() {
+        return [
+          [5, 2],
+          [5, 3],
+          [10, 1],
+          [10, 6]
+        ]
+      },
+      getAggregator(row, col) {
+        return {
+          value() {
+            return +row + +col[1]
+          }
+        }
+      }
+    }
+
+    expect(_getDataSources(pivotData)).to.eql({
+      'Column keys': ['5-2', '5-3', '10-1', '10-6'],
+      'Row keys': ['3', '6', '9'],
+      'x-z:5-2': [5, 8, 11],
+      'x-z:5-3': [6, 9, 12],
+      'x-z:10-1': [4, 7, 10],
+      'x-z:10-6': [9, 12, 15],
+      'y:3': [5, 6, 4, 9],
+      'y:6': [8, 9, 7, 12],
+      'y:9': [11, 12, 10, 15]
+    })
+  })
+
+  it('getPivotCanvas returns canvas', async () => {
+    const pivotOutput = document.body
+    const child = document.createElement('div')
+    child.classList.add('pvtTable')
+    pivotOutput.append(child)
+
+    expect(await getPivotCanvas(pivotOutput)).to.be.instanceof(
+      HTMLCanvasElement
+    )
+  })
+
+  it('getPivotHtml returns html with styles', async () => {
+    const pivotOutput = document.createElement('div')
+    pivotOutput.append('test')
+
+    const html = getPivotHtml(pivotOutput)
+    const doc = document.createElement('div')
+    doc.innerHTML = html
+
+    expect(doc.innerHTML).to.equal(html)
+    expect(doc.children).to.have.lengthOf(2)
+    expect(doc.children[0].tagName).to.equal('STYLE')
+    expect(doc.children[1].tagName).to.equal('DIV')
+    expect(doc.children[1].innerHTML).to.equal('test')
+  })
+})

tests/components/RunResult/Record.spec.js

@@ -0,0 +1,124 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Record from '@/components/RunResult/Record'
+
+describe('Record.vue', () => {
+  it('shows record with selected cell', async () => {
+    const wrapper = mount(Record, {
+      props: {
+        dataSet: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        },
+        rowIndex: 1,
+        selectedColumnIndex: 1
+      }
+    })
+
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(2)
+    expect(rows[0].findAll('th')[0].text()).to.equals('id')
+    expect(rows[0].findAll('td')[0].text()).to.equals('2')
+    expect(rows[1].findAll('th')[0].text()).to.equals('name')
+    expect(rows[1].findAll('td')[0].text()).to.equals('bar')
+
+    const selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('bar')
+  })
+
+  it('switches to the next or previous row', async () => {
+    const wrapper = mount(Record, {
+      props: {
+        dataSet: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2, 3],
+            name: ['foo', 'bar', 'baz']
+          }
+        },
+        rowIndex: 0,
+        selectedColumnIndex: 0
+      }
+    })
+
+    let rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(2)
+    expect(rows[0].findAll('td')[0].text()).to.equals('1')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
+    let selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('1')
+
+    await wrapper.find('.next').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows[0].findAll('td')[0].text()).to.equals('2')
+    expect(rows[1].findAll('td')[0].text()).to.equals('bar')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('2')
+
+    await wrapper.find('.prev').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows[0].findAll('td')[0].text()).to.equals('1')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('1')
+
+    await wrapper.find('.last').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows[0].findAll('td')[0].text()).to.equals('3')
+    expect(rows[1].findAll('td')[0].text()).to.equals('baz')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('3')
+
+    await wrapper.find('.first').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows[0].findAll('td')[0].text()).to.equals('1')
+    expect(rows[1].findAll('td')[0].text()).to.equals('foo')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('1')
+  })
+
+  it('removes selection when click on selected cell', async () => {
+    const wrapper = mount(Record, {
+      props: {
+        dataSet: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        },
+        rowIndex: 1,
+        selectedColumnIndex: 1
+      }
+    })
+
+    const selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    await selectedCell.trigger('click')
+
+    const selectedCellAfterClick = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCellAfterClick.exists()).to.equals(false)
+  })
+})

tests/components/RunResult/RunResult.spec.js

@@ -0,0 +1,391 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import RunResult from '@/components/RunResult'
+import csv from '@/lib/csv'
+import sinon from 'sinon'
+import { nextTick } from 'vue'
+
+const $store = { state: { isWorkspaceVisible: true } }
+
+describe('RunResult.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('shows alert when ClipboardItem is not supported', async () => {
+    const ClipboardItem = window.ClipboardItem
+    delete window.ClipboardItem
+    sinon.spy(window, 'alert')
+    const wrapper = mount(RunResult, {
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
+      }
+    })
+
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    expect(
+      window.alert.calledOnceWith(
+        "Your browser doesn't support copying into the clipboard. " +
+          'If you use Firefox you can enable it ' +
+          'by setting dom.events.asyncClipboard.clipboardItem to true.'
+      )
+    ).to.equal(true)
+
+    window.ClipboardItem = ClipboardItem
+    wrapper.unmount()
+  })
+
+  it('copy to clipboard more than 1 sec', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(RunResult, {
+      attachTo: document.body,
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.stub(csv, 'serialize').callsFake(() => {
+      clock.tick(5000)
+    })
+
+    // Click copy to clipboard
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+    await nextTick()
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Copy to clipboard'
+    )
+
+    // ... with Building message...
+    expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
+
+    // Switch to microtasks (let serialize run)
+    await clock.tick(0)
+    await nextTick()
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
+
+    // ... with Ready message...
+    expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
+
+    // Click copy
+    await wrapper
+      .find('.dialog-buttons-container button.primary')
+      .trigger('click')
+    await window.navigator.clipboard.writeText.returnValues[0]
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('copy to clipboard less than 1 sec', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(RunResult, {
+      attachTo: document.body,
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.spy(wrapper.vm, 'copyToClipboard')
+    sinon.stub(csv, 'serialize').callsFake(async () => {
+      await clock.tick(500)
+    })
+
+    // Click copy to clipboard
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    // Switch to microtasks (let serialize run)
+    await clock.tick(0)
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+    // copyToClipboard is called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('cancel long copy', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(RunResult, {
+      attachTo: document.body,
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.spy(wrapper.vm, 'copyToClipboard')
+    sinon.stub(csv, 'serialize').callsFake(async () => {
+      await clock.tick(5000)
+    })
+
+    // Click copy to clipboard
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
+    await copyBtn.trigger('click')
+
+    // Switch to microtasks (let serialize run)
+    await clock.tick(0)
+    await nextTick()
+
+    // Click cancel
+    await wrapper
+      .find('.dialog-buttons-container button.secondary')
+      .trigger('click')
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+    // copyToClipboard is not called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('shows value of selected cell - result set', async () => {
+    const wrapper = mount(RunResult, {
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
+      }
+    })
+
+    // Open cell value panel
+    const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
+    await viewValueBtn.vm.$emit('click')
+
+    /*
+    Result set:
+    |1 | foo
+    +--+-----
+    |2 | bar
+    */
+
+    // Click on '1' cell
+    const rows = wrapper.findAll('table tbody tr')
+    await rows[0].findAll('td')[0].trigger('click')
+
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Go to 'foo' with right arrow key
+    await wrapper.find('table').trigger('keydown.right')
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+
+    // Go to 'bar' with down arrow key
+    await wrapper.find('table').trigger('keydown.down')
+    expect(wrapper.find('.value-body').text()).to.equals('bar')
+
+    // Go to '2' with left arrow key
+    await wrapper.find('table').trigger('keydown.left')
+    expect(wrapper.find('.value-body').text()).to.equals('2')
+
+    // Go to '1' with up arrow key
+    await wrapper.find('table').trigger('keydown.up')
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Click on 'bar' cell
+    await rows[1].findAll('td')[1].trigger('click')
+    expect(wrapper.find('.value-body').text()).to.equals('bar')
+
+    // Click on 'bar' cell again
+    await rows[1].findAll('td')[1].trigger('click')
+    expect(
+      wrapper.find('.value-viewer-container .table-preview').text()
+    ).to.equals('No cell selected to view')
+    wrapper.unmount()
+  })
+
+  it('shows value of selected cell - record view', async () => {
+    const wrapper = mount(RunResult, {
+      attachTo: document.body,
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        }
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    // Open cell value panel
+    const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
+    await viewValueBtn.vm.$emit('click')
+
+    // Go to record view
+    const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
+    await vierRecordBtn.vm.$emit('click')
+
+    /*
+    Record 1:
+    |id   | 1
+    +-----+-----
+    |name | foo
+
+    Record 2:
+    |id   | 2
+    +-----+-----
+    |name | bar
+
+    */
+
+    // Click '1' is selected by default
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Go to 'foo' with down arrow key
+    await wrapper.find('table').trigger('keydown.down')
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+
+    // Go to next record
+    await wrapper.find('.icon-btn.next').trigger('click')
+    await nextTick()
+    expect(wrapper.find('.value-body').text()).to.equals('bar')
+
+    // Go to '2' with up arrow key
+    await wrapper.find('table').trigger('keydown.up')
+    expect(wrapper.find('.value-body').text()).to.equals('2')
+
+    // Go to prev record
+    await wrapper.find('.icon-btn.prev').trigger('click')
+    await nextTick()
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Click on 'foo' cell
+    const rows = wrapper.findAll('table tbody tr')
+    await rows[1].find('td').trigger('click')
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+
+    // Click on 'foo' cell again
+    await rows[1].find('td').trigger('click')
+    expect(
+      wrapper.find('.value-viewer-container .table-preview').text()
+    ).to.equals('No cell selected to view')
+    wrapper.unmount()
+  })
+
+  it('keeps selected cell when switch between record and regular view', async () => {
+    const wrapper = mount(RunResult, {
+      attachTo: document.body,
+      props: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [...Array(30)].map((x, i) => i),
+            name: [...Array(30)].map((x, i) => `name-${i}`)
+          }
+        }
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    // Open cell value panel
+    const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
+    await viewValueBtn.vm.$emit('click')
+
+    // Click on 'name-1' cell
+    const rows = wrapper.findAll('table tbody tr')
+    await rows[1].findAll('td')[1].trigger('click')
+
+    expect(wrapper.find('.value-body').text()).to.equals('name-1')
+
+    // Go to record view
+    const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
+    await vierRecordBtn.vm.$emit('click')
+
+    // 'name-1' is selected
+    expect(wrapper.find('.value-body').text()).to.equals('name-1')
+    let selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('name-1')
+
+    // Go to last record
+    await wrapper.find('.icon-btn.last').trigger('click')
+    await nextTick()
+    expect(wrapper.find('.value-body').text()).to.equals('name-29')
+
+    // Go to '29' with up arrow key
+    await wrapper.find('table').trigger('keydown.up')
+    expect(wrapper.find('.value-body').text()).to.equals('29')
+
+    // Go to regular view
+    await vierRecordBtn.vm.$emit('click')
+
+    // '29' is selected
+    expect(wrapper.find('.value-body').text()).to.equals('29')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
+    expect(selectedCell.text()).to.equals('29')
+    wrapper.unmount()
+  })
+})

tests/components/RunResult/ValueViewer.spec.js

@@ -0,0 +1,86 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import ValueViewer from '@/components/RunResult/ValueViewer.vue'
+import sinon from 'sinon'
+
+describe('ValueViewer.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('shows value in text mode', () => {
+    const wrapper = mount(ValueViewer, {
+      props: {
+        cellValue: 'foo'
+      }
+    })
+
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+  })
+
+  it('shows error in json mode if the value is not json', async () => {
+    const wrapper = mount(ValueViewer, {
+      props: {
+        cellValue: 'foo'
+      }
+    })
+    await wrapper.find('button.json').trigger('click')
+    expect(wrapper.find('.value-body').text()).to.equals("Can't parse JSON.")
+  })
+
+  it('copy to clipboard', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const wrapper = mount(ValueViewer, {
+      props: {
+        cellValue: 'foo'
+      }
+    })
+
+    await wrapper.find('button.copy').trigger('click')
+
+    expect(window.navigator.clipboard.writeText.calledOnceWith('foo')).to.equal(
+      true
+    )
+  })
+
+  it('wraps lines', async () => {
+    const wrapper = mount(ValueViewer, {
+      attachTo: document.body,
+      props: {
+        cellValue: 'foo'
+      }
+    })
+
+    wrapper.wrapperElement.parentElement.style.width = '50px'
+    const valueBody = wrapper.find('.value-body').wrapperElement
+    expect(valueBody.scrollWidth).to.equal(valueBody.clientWidth)
+
+    await wrapper.setProps({ cellValue: 'foo'.repeat(100) })
+    expect(valueBody.scrollWidth).not.to.equal(valueBody.clientWidth)
+
+    await wrapper.find('button.line-wrap').trigger('click')
+    expect(valueBody.scrollWidth).to.equal(valueBody.clientWidth)
+    wrapper.unmount()
+  })
+
+  it('wraps lines in code mirror', async () => {
+    const wrapper = mount(ValueViewer, {
+      attachTo: document.body,
+      props: {
+        cellValue: '{"foo": "foofoofoofoofoofoofoofoofoofoo"}'
+      }
+    })
+
+    await wrapper.find('button.json').trigger('click')
+
+    wrapper.wrapperElement.parentElement.style.width = '50px'
+    const codeMirrorScroll = wrapper.find('.CodeMirror-scroll').wrapperElement
+    expect(codeMirrorScroll.scrollWidth).not.to.equal(
+      codeMirrorScroll.clientWidth
+    )
+
+    await wrapper.find('button.line-wrap').trigger('click')
+    expect(codeMirrorScroll.scrollWidth).to.equal(codeMirrorScroll.clientWidth)
+    wrapper.unmount()
+  })
+})

tests/components/Schema/Schema.spec.js

@@ -0,0 +1,230 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+import actions from '@/store/actions'
+import mutations from '@/store/mutations'
+import Schema from '@/components/Schema'
+import TableDescription from '@/components/Schema/TableDescription'
+import database from '@/lib/database'
+import fIo from '@/lib/utils/fileIo'
+import csv from '@/lib/csv'
+import { nextTick } from 'vue'
+
+describe('Schema.vue', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+  })
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Renders DB name on initial', () => {
+    // mock store state
+    const state = {
+      db: {
+        dbName: 'fooDB'
+      }
+    }
+    const store = createStore({ state })
+
+    // mout the component
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
+
+    // check DB name and schema visibility
+    expect(wrapper.find('.db-name').text()).to.equal('fooDB')
+    expect(wrapper.find('.schema').isVisible()).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('Schema visibility is toggled when click on DB name', async () => {
+    // mock store state
+    const state = {
+      db: {
+        dbName: 'fooDB'
+      }
+    }
+    const store = createStore({ state })
+
+    // mout the component
+    const wrapper = mount(Schema, {
+      attachTo: document.body,
+      global: {
+        plugins: [store]
+      }
+    })
+
+    // 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)
+    wrapper.unmount()
+  })
+
+  it('Schema filter', async () => {
+    // mock store state
+    const state = {
+      db: {
+        dbName: 'fooDB',
+        schema: [
+          {
+            name: 'foo',
+            columns: [
+              { name: 'id', type: 'INTEGER' },
+              { name: 'title', type: 'NVARCHAR(24)' }
+            ]
+          },
+          {
+            name: 'bar',
+            columns: [
+              { name: 'id', type: 'INTEGER' },
+              { name: 'price', type: 'INTEGER' }
+            ]
+          },
+          {
+            name: 'foobar',
+            columns: [
+              { name: 'id', type: 'INTEGER' },
+              { name: 'price', type: 'INTEGER' }
+            ]
+          }
+        ]
+      }
+    }
+    const store = createStore({ state })
+
+    // mount the component
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
+
+    // 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[0].vm.name).to.equal('foo')
+    expect(tables[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[0].vm.name).to.equal('bar')
+    expect(tables[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[0].vm.name).to.equal('foo')
+    expect(tables[1].vm.name).to.equal('bar')
+    expect(tables[2].vm.name).to.equal('foobar')
+    wrapper.unmount()
+  })
+
+  it('exports db', async () => {
+    const state = {
+      db: {
+        dbName: 'fooDB',
+        export: sinon.stub().resolves()
+      }
+    }
+    const store = createStore({ state })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
+
+    await wrapper
+      .findComponent({ name: 'export-icon' })
+      .find('svg')
+      .trigger('click')
+    expect(state.db.export.calledOnceWith('fooDB'))
+    wrapper.unmount()
+  })
+
+  it('adds table', async () => {
+    const file = new File([], 'test.csv')
+    sinon.stub(fIo, 'getFileFromUser').resolves(file)
+
+    sinon.stub(csv, 'parse').resolves({
+      delimiter: '|',
+      data: {
+        columns: ['col1', 'col2'],
+        values: {
+          col1: [1],
+          col2: ['foo']
+        }
+      },
+      hasErrors: false,
+      messages: []
+    })
+
+    const state = {
+      db: database.getNewDatabase(),
+      tabs: []
+    }
+    state.db.dbName = 'db'
+    state.db.execute('CREATE TABLE foo(id)')
+    state.db.refreshSchema()
+    sinon.spy(state.db, 'refreshSchema')
+
+    const store = createStore({ state, actions, mutations })
+    const wrapper = mount(Schema, {
+      attachTo: document.body,
+      global: {
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.spy(wrapper.vm.$refs.addCsvJson, 'preview')
+    sinon.spy(wrapper.vm, 'addCsvJson')
+    sinon.spy(wrapper.vm.$refs.addCsvJson, 'loadToDb')
+
+    await wrapper
+      .findComponent({ name: 'add-table-icon' })
+      .find('svg')
+      .trigger('click')
+    await wrapper.vm.$refs.addCsvJson.preview.returnValues[0]
+    await wrapper.vm.addCsvJson.returnValues[0]
+    await nextTick()
+    await nextTick()
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'CSV import'
+    )
+    await wrapper.find('#import-start').trigger('click')
+    await wrapper.vm.$refs.addCsvJson.loadToDb.returnValues[0]
+    await wrapper.find('#import-finish').trigger('click')
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    await state.db.refreshSchema.returnValues[0]
+
+    expect(wrapper.vm.$store.state.db.schema).to.eql([
+      { name: 'foo', columns: [{ name: 'id', type: 'N/A' }] },
+      {
+        name: 'test',
+        columns: [
+          { name: 'col1', type: 'REAL' },
+          { name: 'col2', type: 'TEXT' }
+        ]
+      }
+    ])
+
+    const res = await wrapper.vm.$store.state.db.execute('select * from test')
+    expect(res.values).to.eql({
+      col1: [1],
+      col2: ['foo']
+    })
+    wrapper.unmount()
+  })
+})

tests/components/Schema/TableDescription.spec.js

@@ -0,0 +1,46 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import TableDescription from '@/components/Schema/TableDescription'
+
+describe('TableDescription.vue', () => {
+  it('Initially the columns are hidden and table name is rendered', () => {
+    const wrapper = shallowMount(TableDescription, {
+      attachTo: document.body,
+      props: {
+        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)
+    wrapper.unmount()
+  })
+
+  it('Columns are visible and correct when click on table name', async () => {
+    const wrapper = shallowMount(TableDescription, {
+      global: {
+        stubs: ['router-link']
+      },
+      props: {
+        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')[0].text())
+      .to.include('id')
+      .and.include('number')
+    expect(wrapper.findAll('.column')[1].text())
+      .to.include('title')
+      .and.include('nvarchar(24)')
+  })
+})

tests/components/SqlEditor/SqlEditor.spec.js

@@ -0,0 +1,61 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+import SqlEditor from '@/components/SqlEditor'
+import { nextTick } from 'vue'
+
+describe('SqlEditor.vue', () => {
+  it('Emits update:modelValue event when a query is changed', async () => {
+    // mock store state
+    const state = {
+      db: {}
+    }
+
+    const store = createStore({ state })
+
+    const wrapper = mount(SqlEditor, {
+      global: {
+        plugins: [store]
+      }
+    })
+    await wrapper
+      .findComponent({ ref: 'cm' })
+      .setValue('SELECT * FROM foo', 'value')
+    expect(wrapper.emitted()['update:modelValue'][0]).to.eql([
+      'SELECT * FROM foo'
+    ])
+  })
+
+  it('Run is disabled if there is no db or no query or is getting result set', async () => {
+    const state = {
+      db: null
+    }
+    const store = createStore({ state })
+
+    const wrapper = mount(SqlEditor, {
+      global: { plugins: [store] },
+      props: { isGettingResults: false }
+    })
+    await wrapper
+      .findComponent({ ref: 'cm' })
+      .setValue('SELECT * FROM foo', 'value')
+    const runButton = wrapper.findComponent({ ref: 'runBtn' })
+
+    expect(runButton.props('disabled')).to.equal(true)
+
+    store.state.db = {}
+    await nextTick()
+    expect(runButton.props('disabled')).to.equal(false)
+
+    await wrapper.findComponent({ ref: 'cm' }).setValue('', 'value')
+    expect(runButton.props('disabled')).to.equal(true)
+
+    await wrapper
+      .findComponent({ ref: 'cm' })
+      .setValue('SELECT * FROM foo', 'value')
+    expect(runButton.props('disabled')).to.equal(false)
+
+    await wrapper.setProps({ isGettingResults: true })
+    expect(runButton.props('disabled')).to.equal(true)
+  })
+})

tests/components/SqlEditor/hint.spec.js

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

tests/components/Tab.spec.js

@@ -0,0 +1,612 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import mutations from '@/store/mutations'
+import { createStore } from 'vuex'
+import Tab from '@/components/Tab'
+import { nextTick } from 'vue'
+
+let place
+
+describe('Tab.vue', () => {
+  beforeEach(() => {
+    place = document.createElement('div')
+    document.body.appendChild(place)
+  })
+
+  afterEach(() => {
+    sinon.restore()
+    place.remove()
+  })
+
+  it('Renders passed query', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true
+    }
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true, 'icon-button': true },
+        plugins: [store]
+      },
+      props: {
+        tab: {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0
+        }
+      }
+    })
+    await nextTick()
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(true)
+    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(
+      true
+    )
+    expect(
+      wrapper.find('.run-result-panel .result-before').isVisible()
+    ).to.equal(true)
+    expect(
+      wrapper.find('.above .sql-editor-panel .codemirror-container').text()
+    ).to.contain('SELECT * FROM foo')
+  })
+
+  it("Doesn't render tab when it's not active", async () => {
+    // mock store state
+    const state = {
+      currentTabId: 0,
+      isWorkspaceVisible: true
+    }
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab: {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0
+        }
+      }
+    })
+    await nextTick()
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
+  })
+
+  it('Is not visible when not active', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 0,
+      isWorkspaceVisible: true
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab: {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0
+        }
+      }
+    })
+    await nextTick()
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
+  })
+
+  it('Updates tab state when a query is changed', async () => {
+    // mock store state
+    const state = {
+      isWorkspaceVisible: true,
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0,
+          isSaved: true
+        }
+      ],
+      currentTabId: 1
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab: store.state.tabs[0]
+      }
+    })
+    await nextTick()
+    await wrapper.findComponent({ name: 'SqlEditor' }).setValue(' limit 100')
+    expect(store.state.tabs[0].isSaved).to.equal(false)
+  })
+
+  it('Updates tab state when data view settings are changed', async () => {
+    // mock store state
+    const state = {
+      isWorkspaceVisible: true,
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0,
+          isSaved: true
+        }
+      ],
+      currentTabId: 1
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab: store.state.tabs[0]
+      }
+    })
+    await nextTick()
+    await wrapper.findComponent({ name: 'DataView' }).vm.$emit('update')
+    expect(store.state.tabs[0].isSaved).to.equal(false)
+  })
+
+  it('Shows .result-in-progress message when executing query', async () => {
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true,
+      tabs: [tab]
+    }
+
+    const store = createStore({ state, mutations })
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true, 'icon-button': true },
+        plugins: [store]
+      },
+      props: {
+        tab
+      }
+    })
+    await nextTick()
+
+    store.state.tabs[0].isGettingResults = true
+    await nextTick()
+    expect(
+      wrapper.find('.run-result-panel .result-in-progress').exists()
+    ).to.equal(true)
+  })
+
+  it('Shows error when executing query ends with error', async () => {
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true,
+      tabs: [tab]
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true, 'icon-button': true },
+        plugins: [store]
+      },
+      props: {
+        tab: store.state.tabs[0]
+      }
+    })
+    await nextTick()
+    store.state.tabs[0].error = {
+      type: 'error',
+      message: 'There is no table foo'
+    }
+    await nextTick()
+    expect(
+      wrapper.find('.run-result-panel .result-before').isVisible()
+    ).to.equal(false)
+    expect(
+      wrapper.find('.run-result-panel .result-in-progress').exists()
+    ).to.equal(false)
+    expect(wrapper.findComponent({ name: 'logs' }).isVisible()).to.equal(true)
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'There is no table foo'
+    )
+  })
+
+  it('Passes result to sql-table component', async () => {
+    const result = {
+      columns: ['id', 'name'],
+      values: {
+        id: [1, 2],
+        name: ['foo', 'bar']
+      }
+    }
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true,
+      tabs: [tab]
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab
+      }
+    })
+    await nextTick()
+    store.state.tabs[0].result = result
+    await nextTick()
+    expect(
+      wrapper.find('.run-result-panel .result-before').isVisible()
+    ).to.equal(false)
+    expect(
+      wrapper.find('.run-result-panel .result-in-progress').exists()
+    ).to.equal(false)
+    expect(wrapper.findComponent({ name: 'logs' }).exists()).to.equal(false)
+    expect(wrapper.findComponent({ name: 'SqlTable' }).vm.dataSet).to.eql(
+      result
+    )
+  })
+
+  it('Switches views', async () => {
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true
+    }
+
+    const store = createStore({ state, mutations })
+
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab
+      }
+    })
+
+    let tableBtn = wrapper
+      .find('.above .side-tool-bar')
+      .findComponent({ ref: 'tableBtn' })
+    await tableBtn.vm.$emit('click')
+
+    expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(
+      true
+    )
+    expect(wrapper.find('.above .run-result-panel').exists()).to.equal(true)
+
+    const dataViewBtn = wrapper
+      .find('.above .side-tool-bar')
+      .findComponent({ ref: 'dataViewBtn' })
+    await dataViewBtn.vm.$emit('click')
+
+    expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(
+      true
+    )
+    expect(wrapper.find('.above .data-view-panel').exists()).to.equal(true)
+
+    const sqlEditorBtn = wrapper
+      .find('.above .side-tool-bar')
+      .findComponent({ ref: 'sqlEditorBtn' })
+    await sqlEditorBtn.vm.$emit('click')
+
+    expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
+
+    tableBtn = wrapper
+      .find('.bottomPane .side-tool-bar')
+      .findComponent({ ref: 'tableBtn' })
+    await tableBtn.vm.$emit('click')
+
+    expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(
+      true
+    )
+  })
+
+  it('Maximize top panel if maximized panel is above', async () => {
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true
+    }
+    const store = createStore({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      maximize: 'sqlEditor',
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab
+      }
+    })
+    await nextTick()
+
+    expect(wrapper.find('.above').element.parentElement.style.height).to.equal(
+      '100%'
+    )
+  })
+
+  it('Maximize bottom panel if maximized panel is below', async () => {
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true
+    }
+    const store = createStore({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      maximize: 'table',
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab
+      }
+    })
+    await nextTick()
+    expect(
+      wrapper.find('.bottomPane').element.parentElement.style.height
+    ).to.equal('100%')
+  })
+
+  it('Panel size is 50 if nothing to maximize', async () => {
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true
+    }
+    const store = createStore({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      global: {
+        stubs: { chart: true },
+        plugins: [store]
+      },
+      props: {
+        tab
+      }
+    })
+
+    await nextTick()
+    expect(wrapper.find('.above').element.parentElement.style.height).to.equal(
+      '50%'
+    )
+    expect(
+      wrapper.find('.bottomPane').element.parentElement.style.height
+    ).to.equal('50%')
+  })
+})

tests/components/Tabs.spec.js

@@ -0,0 +1,719 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { shallowMount, mount } from '@vue/test-utils'
+import mutations from '@/store/mutations'
+import { createStore } from 'vuex'
+import Tabs from '@/components/Tabs'
+import eventBus from '@/lib/eventBus'
+import { nextTick } from 'vue'
+import cIo from '@/lib/utils/clipboardIo'
+import csv from '@/lib/csv'
+
+describe('Tabs.vue', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+    sinon.spy(eventBus, '$emit')
+  })
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Renders start guide when there is no opened tabs', () => {
+    // mock store state
+    const state = {
+      tabs: []
+    }
+    const store = createStore({ state })
+
+    // mount the component
+    const wrapper = shallowMount(Tabs, {
+      global: {
+        stubs: ['router-link'],
+        plugins: [store]
+      }
+    })
+
+    // check start-guide visibility
+    expect(wrapper.find('#start-guide').isVisible()).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('Renders tabs', () => {
+    // mock store state
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+    const store = createStore({ state })
+
+    // mount the component
+    const wrapper = shallowMount(Tabs, {
+      attachTo: document.body,
+      global: {
+        stubs: ['router-link'],
+        plugins: [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')[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')[1]
+    expect(secondTab.text()).to.include('Untitled')
+    expect(secondTab.find('.star').isVisible()).to.equal(true)
+    expect(secondTab.classes()).to.include('tab-selected')
+    wrapper.unmount()
+  })
+
+  it('Selects the tab on click', async () => {
+    // mock store state
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = shallowMount(Tabs, {
+      global: {
+        stubs: ['router-link'],
+        plugins: [store]
+      }
+    })
+
+    // click on the first tab
+    const firstTab = wrapper.findAll('.tab')[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')[1]
+    expect(secondTab.classes()).to.not.include('tab-selected')
+    expect(state.currentTabId).to.equal(1)
+    wrapper.unmount()
+  })
+
+  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',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tabs, {
+      global: {
+        stubs: ['router-link'],
+        plugins: [store]
+      }
+    })
+
+    // click on the close icon of the first tab
+    const firstTabCloseIcon = wrapper.findAll('.tab')[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')[0]
+    expect(firstTab.text()).to.include('Untitled')
+    expect(firstTab.find('.star').isVisible()).to.equal(true)
+    expect(firstTab.classes()).to.include('tab-selected')
+    wrapper.unmount()
+  })
+
+  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',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tabs, {
+      attachTo: document.body,
+      global: {
+        stubs: {
+          'router-link': true,
+          teleport: true,
+          transition: false
+        },
+        plugins: [store]
+      }
+    })
+
+    // click on the close icon of the second tab
+    const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
+    await secondTabCloseIcon.trigger('click')
+
+    // check that Close Tab dialog is visible
+    const modal = wrapper.find('.dialog.vfm')
+    expect(modal.exists()).to.equal(true)
+    expect(modal.find('.dialog-header').text()).to.contain('Close tab')
+
+    // find Cancel in the dialog
+    const cancelBtn = wrapper
+      .findAll('.dialog-buttons-container button')
+      .find(button => button.text() === "Don't close")
+
+    // 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
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('Closes without saving', async () => {
+    // mock store state
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tabs, {
+      attachTo: document.body,
+      global: {
+        stubs: {
+          'router-link': true,
+          teleport: true,
+          transition: false
+        },
+        plugins: [store]
+      }
+    })
+
+    // click on the close icon of the second tab
+    const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
+    await secondTabCloseIcon.trigger('click')
+
+    // find 'Close without saving' in the dialog
+    const closeBtn = wrapper
+      .findAll('.dialog-buttons-container button')
+      .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')[0]
+    expect(firstTab.text()).to.include('foo')
+    expect(firstTab.find('.star').isVisible()).to.equal(false)
+    expect(firstTab.classes()).to.include('tab-selected')
+
+    // check that 'saveInquiry' event was not emited
+    expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(false)
+
+    // check that the dialog is closed
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('Closes with saving', async () => {
+    // mock store state
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tabs, {
+      attachTo: document.body,
+      global: {
+        stubs: {
+          'router-link': true,
+          teleport: true,
+          transition: false
+        },
+        plugins: [store]
+      }
+    })
+
+    // click on the close icon of the second tab
+    const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
+    await secondTabCloseIcon.trigger('click')
+
+    // find 'Save and close' in the dialog
+    const closeBtn = wrapper
+      .findAll('.dialog-buttons-container button')
+      .find(button => button.text() === 'Save and close')
+
+    // click 'Save and close' in the dialog
+    await closeBtn.trigger('click')
+
+    // pretend like saving is completed - trigger 'inquirySaved' on eventBus
+    await eventBus.$emit('inquirySaved')
+
+    // check that tab is closed
+    expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
+    const firstTab = wrapper.findAll('.tab')[0]
+    expect(firstTab.text()).to.include('foo')
+    expect(firstTab.find('.star').isVisible()).to.equal(false)
+    expect(firstTab.classes()).to.include('tab-selected')
+
+    // check that 'saveInquiry' event was emited
+    expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(true)
+
+    // check that the dialog is closed
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('Prevents closing a tab of a browser if there is unsaved inquiry', () => {
+    // mock store state
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = shallowMount(Tabs, {
+      global: {
+        stubs: ['router-link'],
+        plugins: [store]
+      }
+    })
+
+    const event = new Event('beforeunload')
+    sinon.spy(event, 'preventDefault')
+    wrapper.vm.leavingSqliteviz(event)
+
+    expect(event.preventDefault.calledOnce).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it("Doesn't prevent closing a tab of a browser if there is unsaved inquiry", () => {
+    // mock store state
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          isSaved: true
+        }
+      ],
+      currentTabId: 1
+    }
+
+    const store = createStore({ state, mutations })
+
+    // mount the component
+    const wrapper = shallowMount(Tabs, {
+      global: {
+        stubs: ['router-link'],
+        plugins: [store]
+      }
+    })
+
+    const event = new Event('beforeunload')
+    sinon.spy(event, 'preventDefault')
+    wrapper.vm.leavingSqliteviz(event)
+
+    expect(event.preventDefault.calledOnce).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('Copy image to clipboard dialog works in the context of the tab', async () => {
+    // mock store state - 2 inquiries open
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: undefined,
+          layout: {
+            sqlEditor: 'above',
+            table: 'hidden',
+            dataView: 'bottom'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: undefined,
+          layout: {
+            sqlEditor: 'above',
+            table: 'hidden',
+            dataView: 'bottom'
+          },
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+    const store = createStore({ state })
+    sinon.stub(cIo, 'copyImage')
+
+    // mount the component
+    const wrapper = mount(Tabs, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: true, RouterLink: true },
+        plugins: [store]
+      }
+    })
+    const firstTabDataView = wrapper
+      .findAllComponents({ name: 'Tab' })[0]
+      .findComponent({ name: 'DataView' })
+
+    const secondTabDataView = wrapper
+      .findAllComponents({ name: 'Tab' })[1]
+      .findComponent({ name: 'DataView' })
+
+    // Stub prepareCopy method so it takes long and copy dialog will be shown
+    sinon
+      .stub(firstTabDataView.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(5000)
+        return 'prepareCopy result in tab 1'
+      })
+
+    sinon
+      .stub(secondTabDataView.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(5000)
+        return 'prepareCopy result in tab 2'
+      })
+
+    // Click Copy to clipboard button in the second tab
+    const copyBtn = secondTabDataView.findComponent({
+      ref: 'copyToClipboardBtn'
+    })
+    await copyBtn.trigger('click')
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Copy to clipboard'
+    )
+
+    // Switch to microtasks (let prepareCopy run)
+    await clock.tick(0)
+    // Wait untill prepareCopy is finished
+    await secondTabDataView.vm.$refs.viewComponent.prepareCopy.returnValues[0]
+
+    await nextTick()
+
+    // Click copy button in the dialog
+    await wrapper
+      .find('.dialog-buttons-container button.primary')
+      .trigger('click')
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+
+    // copyImage is called with prepare copy result calculated in tab 2, not null
+    // i.e. the dialog works in the tab 2 context
+    expect(
+      cIo.copyImage.calledOnceWith('prepareCopy result in tab 2')
+    ).to.equal(true)
+
+    wrapper.unmount()
+  })
+
+  it('Copy CSV to clipboard dialog works in the context of the tab', async () => {
+    // mock store state - 2 inquiries open
+    const state = {
+      tabs: [
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: undefined,
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          result: {
+            columns: ['id', 'name'],
+            values: {
+              id: [1, 2, 3],
+              name: ['Gryffindor', 'Hufflepuff']
+            }
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: undefined,
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          result: {
+            columns: ['name', 'points'],
+            values: {
+              name: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+              points: [100, 90, 95, 80]
+            }
+          },
+          isSaved: false
+        }
+      ],
+      currentTabId: 2
+    }
+    const store = createStore({ state })
+    sinon.stub(cIo, 'copyText')
+
+    // mount the component
+    const wrapper = mount(Tabs, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: true, RouterLink: true },
+        plugins: [store]
+      }
+    })
+
+    const secondTabRunResult = wrapper
+      .findAllComponents({ name: 'Tab' })[1]
+      .findComponent({ name: 'RunResult' })
+
+    // Stub prepareCopy method so it takes long and copy dialog will be shown
+    sinon.stub(csv, 'serialize').callsFake(() => {
+      clock.tick(5000)
+      return 'csv serialize result'
+    })
+
+    // Click Copy to clipboard button in the second tab
+    const copyBtn = secondTabRunResult.findComponent({
+      ref: 'copyToClipboardBtn'
+    })
+    await copyBtn.trigger('click')
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Copy to clipboard'
+    )
+
+    // Switch to microtasks (let prepareCopy run)
+    await clock.tick(0)
+    await nextTick()
+
+    // Click copy button in the dialog
+    await wrapper
+      .find('.dialog-buttons-container button.primary')
+      .trigger('click')
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
+
+    // copyText is called with 'csv serialize result' calculated in tab 2, not null
+    // i.e. the dialog works in the tab 2 context
+    expect(
+      cIo.copyText.calledOnceWith(
+        'csv serialize result',
+        'CSV copied to clipboard successfully'
+      )
+    ).to.equal(true)
+
+    wrapper.unmount()
+  })
+})