linter

tests/views/MainView/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js

@@ -0,0 +1,182 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, flushPromises } from '@vue/test-utils'
+import Chart from '@/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.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', () => {
+    // mount the component
+    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 () => {
+    // mount the component
+    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]
+    }
+
+    // mount the component
+    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
+
+    wrapper.find('.chart-container').wrapperElement.parentElement.style.width =
+      `${newContainerWidth}px`
+    wrapper.find('.chart-container').wrapperElement.parentElement.style.height =
+      `${newContainerHeight}px`
+
+    await flushPromises()
+
+    expect(plot.scrollWidth).not.to.equal(initialPlotWidth)
+    expect(plot.scrollHeight).not.to.equal(initialPlotHeight)
+
+    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()
+  })
+})

tests/views/MainView/Workspace/Tabs/Tab/DataView/DataView.spec.js

@@ -0,0 +1,278 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import DataView from '@/views/MainView/Workspace/Tabs/Tab/DataView'
+import sinon from 'sinon'
+import { nextTick } from 'vue'
+
+describe('DataView.vue', () => {
+  const $store = { state: { isWorkspaceVisible: true } }
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('emits update on mode changing', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        stubs: { chart: true }
+      }
+    })
+
+    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 }
+      }
+    })
+
+    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'
+    })
+    wrapper.unmount()
+  })
+
+  it('method saveAsSvg calls the same method of the current view component', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    // Find chart and spy the method
+    const chart = wrapper.findComponent({ name: 'Chart' }).vm
+    sinon.spy(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.spy(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)
+    wrapper.unmount()
+  })
+
+  it('method saveAsHtml calls the same method of the current view component', async () => {
+    const wrapper = mount(DataView, {
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    // 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 svg
+    await htmlBtn.trigger('click')
+    expect(pivot.saveAsHtml.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()
+    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').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()
+    await nextTick()
+
+    // The dialog is shown...
+    expect(wrapper.find('.dialog.vfm').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').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('copy to clipboard less than 1 sec', 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(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]
+
+    await nextTick()
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').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').exists()).to.equal(false)
+    // copyToClipboard is not called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
+    wrapper.unmount()
+  })
+})

tests/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js

@@ -0,0 +1,536 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Pivot from '@/views/MainView/Workspace/Tabs/Tab/DataView/Pivot'
+import chartHelper from '@/lib/chartHelper'
+import fIo from '@/lib/utils/fileIo'
+import $ from 'jquery'
+import sinon from 'sinon'
+import pivotHelper from '@/views/MainView/Workspace/Tabs/Tab/DataView/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)
+  })
+})

tests/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js

@@ -0,0 +1,26 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import PivotSortBtn from '@/views/MainView/Workspace/Tabs/Tab/DataView/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/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js

@@ -0,0 +1,155 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import PivotUi from '@/views/MainView/Workspace/Tabs/Tab/DataView/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/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.spec.js

@@ -0,0 +1,86 @@
+import { expect } from 'chai'
+import {
+  _getDataSources,
+  getPivotCanvas,
+  getPivotHtml
+} from '@/views/MainView/Workspace/Tabs/Tab/DataView/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/views/MainView/Workspace/Tabs/Tab/RunResult/Record.spec.js

@@ -0,0 +1,124 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Record from '@/views/MainView/Workspace/Tabs/Tab/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/views/MainView/Workspace/Tabs/Tab/RunResult/RunResult.spec.js

@@ -0,0 +1,392 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import RunResult from '@/views/MainView/Workspace/Tabs/Tab/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').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').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').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)
+    await nextTick()
+
+    // The dialog is not shown...
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').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').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/views/MainView/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js

@@ -0,0 +1,86 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import ValueViewer from '@/views/MainView/Workspace/Tabs/Tab/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/views/MainView/Workspace/Tabs/Tab/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 '@/views/MainView/Workspace/Tabs/Tab/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/views/MainView/Workspace/Tabs/Tab/SqlEditor/hint.spec.js

@@ -0,0 +1,226 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import state from '@/store/state'
+import showHint, {
+  getHints
+} from '@/views/MainView/Workspace/Tabs/Tab/SqlEditor/hint'
+import CM from 'codemirror'
+
+describe('hint.js', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Calculates table list for hint', () => {
+    // mock store state
+    const db = {
+      schema: [
+        {
+          name: 'foo',
+          columns: [
+            { name: 'fooId', type: 'INTEGER' },
+            { name: 'name', type: 'NVARCHAR(20)' }
+          ]
+        },
+        {
+          name: 'bar',
+          columns: [{ name: 'barId', type: 'INTEGER' }]
+        }
+      ]
+    }
+    sinon.stub(state, 'db').value(db)
+
+    // mock showHint and editor
+    sinon.stub(CM, 'showHint')
+    const editor = {
+      getTokenAt() {
+        return {
+          string: 'SELECT',
+          type: 'keyword'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    showHint(editor)
+
+    expect(CM.showHint.called).to.equal(true)
+    expect(CM.showHint.firstCall.args[2].tables).to.eql({
+      foo: ['fooId', 'name'],
+      bar: ['barId']
+    })
+    expect(CM.showHint.firstCall.args[2].defaultTable).to.equal(null)
+  })
+
+  it('Add default table if there is only one table in schema', () => {
+    // mock store state
+    const db = {
+      schema: [
+        {
+          name: 'foo',
+          columns: [
+            { name: 'fooId', type: 'INTEGER' },
+            { name: 'name', type: 'NVARCHAR(20)' }
+          ]
+        }
+      ]
+    }
+    sinon.stub(state, 'db').value(db)
+
+    // mock showHint and editor
+    sinon.stub(CM, 'showHint')
+    const editor = {
+      getTokenAt() {
+        return {
+          string: 'SELECT',
+          type: 'keyword'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    showHint(editor)
+    expect(CM.showHint.firstCall.args[2].defaultTable).to.equal('foo')
+  })
+
+  it("Doesn't show hint when in string or space, or ';'", () => {
+    // mock showHint and editor
+    sinon.stub(CM, 'showHint')
+    const editor = {
+      getTokenAt() {
+        return {
+          string: 'foo',
+          type: 'string'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    showHint(editor)
+    expect(CM.showHint.called).to.equal(false)
+  })
+
+  it("Doesn't show hint after space", () => {
+    // mock showHint and editor
+    sinon.stub(CM, 'showHint')
+    const editor = {
+      getTokenAt() {
+        return {
+          string: ' ',
+          type: null
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    showHint(editor)
+    expect(CM.showHint.called).to.equal(false)
+  })
+
+  it("Doesn't show hint after ';'", () => {
+    // mock showHint and editor
+    sinon.stub(CM, 'showHint')
+    const editor = {
+      getTokenAt() {
+        return {
+          string: ';',
+          type: 'punctuation'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    showHint(editor)
+    expect(CM.showHint.called).to.equal(false)
+  })
+
+  it('getHints returns [ ] if there is only one option and 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/views/MainView/Workspace/Tabs/Tab/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 '@/views/MainView/Workspace/Tabs/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/views/MainView/Workspace/Tabs/Tabs.spec.js

@@ -0,0 +1,504 @@
+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 '@/views/MainView/Workspace/Tabs'
+import eventBus from '@/lib/eventBus'
+
+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',
+          chart: [],
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          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',
+          chart: [],
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          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',
+          chart: [],
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          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',
+          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()
+  })
+})