Pivot implementation and redesign (#69)

- Pivot support implementation 
- Rename queries into inquiries
- Rename editor into workspace
- Change result set format
- New JSON format for inquiries
- Redesign panels

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

@@ -0,0 +1,50 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, shallowMount } from '@vue/test-utils'
+import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
+import chartHelper from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart/chartHelper'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
+
+describe('Chart.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('getOptionsForSave called with proper arguments', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart)
+    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')
+  })
+
+  it('emits update when plotly updates', async () => {
+    // mount the component
+    const wrapper = mount(Chart)
+    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+  })
+
+  it('calls dereference when sqlResult is changed', async () => {
+    sinon.stub(dereference, 'default')
+    const dataSources = {
+      id: [1],
+      name: ['foo']
+    }
+
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { dataSources }
+    })
+
+    const newDataSources = {
+      id: [2],
+      name: ['bar']
+    }
+
+    await wrapper.setProps({ dataSources: newDataSources })
+    expect(dereference.default.called).to.equal(true)
+  })
+})

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

@@ -0,0 +1,32 @@
+import { expect } from 'chai'
+import { mount, createWrapper } from '@vue/test-utils'
+import DataView from '@/views/Main/Workspace/Tabs/Tab/DataView'
+import sinon from 'sinon'
+
+describe('DataView.vue', () => {
+  it('emits update on mode changing', async () => {
+    const wrapper = mount(DataView)
+
+    const pivotBtn = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    await pivotBtn.trigger('click')
+
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+  })
+
+  it('method getOptionsForSave call the same method of the current view component', async () => {
+    const wrapper = mount(DataView)
+
+    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 = createWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    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' })
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Pivot/Pivot.spec.js

@@ -0,0 +1,214 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Pivot from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot'
+import $ from 'jquery'
+
+describe('Pivot.vue', () => {
+  it('renders pivot table', () => {
+    const wrapper = mount(Pivot, {
+      propsData: {
+        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'
+        }
+      }
+    })
+    const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
+    expect(colLabels.at(0).text()).to.equal('2020')
+    expect(colLabels.at(1).text()).to.equal('2021')
+    const rows = wrapper.findAll('.pivot-output tbody tr')
+    // row0: bar - 2 - 1
+    expect(rows.at(0).find('th').text()).to.equal('bar')
+    expect(rows.at(0).find('td.col0').text()).to.equal('2')
+    expect(rows.at(0).find('td.col1').text()).to.equal('1')
+    expect(rows.at(0).find('td.rowTotal').text()).to.equal('3')
+
+    // row1: foo -  - 2
+    expect(rows.at(1).find('th').text()).to.equal('foo')
+    expect(rows.at(1).find('td.col0').text()).to.equal('')
+    expect(rows.at(1).find('td.col1').text()).to.equal('1')
+    expect(rows.at(1).find('td.rowTotal').text()).to.equal('1')
+  })
+
+  it('updates when dataSource changes', async () => {
+    const wrapper = mount(Pivot, {
+      propsData: {
+        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'
+        }
+      }
+    })
+
+    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.at(0).text()).to.equal('2020')
+    expect(colLabels.at(1).text()).to.equal('2021')
+    const rows = wrapper.findAll('.pivot-output tbody tr')
+    // row0: bar - 2 - 1
+    expect(rows.at(0).find('th').text()).to.equal('bar')
+    expect(rows.at(0).find('td.col0').text()).to.equal('2')
+    expect(rows.at(0).find('td.col1').text()).to.equal('1')
+    expect(rows.at(0).find('td.rowTotal').text()).to.equal('3')
+
+    // row1: baz - 1 -
+    expect(rows.at(1).find('th').text()).to.equal('baz')
+    expect(rows.at(1).find('td.col0').text()).to.equal('1')
+    expect(rows.at(1).find('td.col1').text()).to.equal('')
+    expect(rows.at(1).find('td.rowTotal').text()).to.equal('1')
+
+    // row2: foo -  - 2
+    expect(rows.at(2).find('th').text()).to.equal('foo')
+    expect(rows.at(2).find('td.col0').text()).to.equal('')
+    expect(rows.at(2).find('td.col1').text()).to.equal('2')
+    expect(rows.at(2).find('td.rowTotal').text()).to.equal('2')
+  })
+
+  it('updates when pivot settings changes', async () => {
+    const wrapper = mount(Pivot, {
+      propsData: {
+        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'
+        }
+      }
+    })
+
+    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+      rows: ['year'],
+      cols: ['item'],
+      colOrder: 'key_a_to_z',
+      rowOrder: 'key_a_to_z',
+      aggregator: $.pivotUtilities.aggregators.Count(),
+      aggregatorName: 'Count',
+      renderer: $.pivotUtilities.renderers.Table,
+      rendererName: 'Table',
+      rendererOptions: undefined,
+      vals: []
+    })
+
+    const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
+    expect(colLabels.at(0).text()).to.equal('bar')
+    expect(colLabels.at(1).text()).to.equal('foo')
+    const rows = wrapper.findAll('.pivot-output tbody tr')
+    // row0: 2020 - 2 -
+    expect(rows.at(0).find('th').text()).to.equal('2020')
+    expect(rows.at(0).find('td.col0').text()).to.equal('2')
+    expect(rows.at(0).find('td.col1').text()).to.equal('')
+    expect(rows.at(0).find('td.rowTotal').text()).to.equal('2')
+
+    // row1: 2021 - 1 - 1
+    expect(rows.at(1).find('th').text()).to.equal('2021')
+    expect(rows.at(1).find('td.col0').text()).to.equal('1')
+    expect(rows.at(1).find('td.col1').text()).to.equal('1')
+    expect(rows.at(1).find('td.rowTotal').text()).to.equal('2')
+  })
+
+  it('returns options for save', async () => {
+    const wrapper = mount(Pivot, {
+      propsData: {
+        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'
+        }
+      }
+    })
+
+    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+      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',
+      rendererOptions: undefined,
+      vals: []
+    })
+
+    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' }).vm.$emit('input', {
+      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',
+      rendererOptions: {
+        customChartComponent: {
+          getOptionsForSave () {
+            return { here_are: 'custom chart settings' }
+          }
+        }
+      },
+      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([])
+  })
+})

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

@@ -0,0 +1,21 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn'
+
+describe('PivotSortBtn.vue', () => {
+  it('switches order', async () => {
+    const wrapper = shallowMount(PivotSortBtn, { propsData: { value: 'key_a_to_z' } })
+
+    expect(wrapper.vm.value).to.equal('key_a_to_z')
+    await wrapper.find('.pivot-sort-btn').trigger('click')
+    expect(wrapper.emitted('input')[0]).to.eql(['value_a_to_z'])
+
+    await wrapper.setProps({ value: 'value_a_to_z' })
+    await wrapper.find('.pivot-sort-btn').trigger('click')
+    expect(wrapper.emitted('input')[1]).to.eql(['value_z_to_a'])
+
+    await wrapper.setProps({ value: 'value_z_to_a' })
+    await wrapper.find('.pivot-sort-btn').trigger('click')
+    expect(wrapper.emitted('input')[2]).to.eql(['key_a_to_z'])
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Pivot/PivotUi/PivotUi.spec.js

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

tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Pivot/PivotUi/pivotHelper.spec.js

@@ -0,0 +1,56 @@
+import { expect } from 'chai'
+import { _getDataSources } from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/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]
+    })
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/chartHelper.spec.js

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

tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js

@@ -0,0 +1,44 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import SqlEditor from '@/views/Main/Workspace/Tabs/Tab/SqlEditor'
+
+describe('SqlEditor.vue', () => {
+  it('Emits input event when a query is changed', async () => {
+    // mock store state
+    const state = {
+      db: {}
+    }
+
+    const store = new Vuex.Store({ state })
+
+    const wrapper = mount(SqlEditor, { store })
+    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+    expect(wrapper.emitted('input')[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 = new Vuex.Store({ state })
+
+    const wrapper = mount(SqlEditor, { store, propsData: { isGettingResults: false } })
+    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+    const runButton = wrapper.findComponent({ name: 'RunIcon' }).vm.$parent
+
+    expect(runButton.disabled).to.equal(true)
+
+    await wrapper.vm.$set(store.state, 'db', {})
+    expect(runButton.disabled).to.equal(false)
+
+    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', '')
+    expect(runButton.disabled).to.equal(true)
+
+    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+    expect(runButton.disabled).to.equal(false)
+
+    await wrapper.setProps({ isGettingResults: true })
+    expect(runButton.disabled).to.equal(true)
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.spec.js

@@ -0,0 +1,215 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import state from '@/store/state'
+import showHint, { getHints } from '@/views/Main/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 the token is already completed with this option', () => {
+    // mock CM.hint.sql and editor
+    sinon.stub(CM.hint, 'sql').returns({ list: [{ text: 'SELECT' }] })
+    const editor = {
+      getTokenAt () {
+        return {
+          string: 'select',
+          type: 'keyword'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    const hints = getHints(editor, {})
+    expect(hints.list).to.eql([])
+  })
+
+  it('getHints returns hints as is when there are more than one option', () => {
+    // mock CM.hint.sql and editor
+    const list = [
+      { text: 'SELECT' },
+      { text: 'ST' }
+    ]
+    sinon.stub(CM.hint, 'sql').returns({ list })
+    const editor = {
+      getTokenAt () {
+        return {
+          string: 'se',
+          type: 'keyword'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    const hints = getHints(editor, {})
+    expect(hints.list).to.eql(list)
+
+    sinon.restore()
+  })
+
+  it('getHints returns hints as is when there only one option but the token is not cpmpleted', () => {
+    // mock CM.hint.sql and editor
+    const list = [{ text: 'SELECT' }]
+    sinon.stub(CM.hint, 'sql').returns({ list })
+    const editor = {
+      getTokenAt () {
+        return {
+          string: 'sele',
+          type: 'keyword'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    const hints = getHints(editor, {})
+    expect(hints.list).to.eql(list)
+  })
+
+  it('tables is empty object when schema is null', () => {
+    // mock store state
+    sinon.stub(state, 'db').value({ schema: null })
+
+    // mock showHint and editor
+    sinon.stub(CM, 'showHint')
+    const editor = {
+      getTokenAt () {
+        return {
+          string: 'SELECT',
+          type: 'keyword'
+        }
+      },
+      getCursor: sinon.stub()
+    }
+
+    showHint(editor)
+    expect(CM.showHint.called).to.equal(true)
+    expect(CM.showHint.firstCall.args[2].tables).to.eql({})
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js

@@ -0,0 +1,324 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, createWrapper } from '@vue/test-utils'
+import mutations from '@/store/mutations'
+import Vuex from 'vuex'
+import Tab from '@/views/Main/Workspace/Tabs/Tab'
+
+let place
+
+describe('Tab.vue', () => {
+  beforeEach(() => {
+    place = document.createElement('div')
+    document.body.appendChild(place)
+  })
+
+  afterEach(() => {
+    sinon.restore()
+    place.remove()
+  })
+
+  it('Renders passed query', () => {
+    // mock store state
+    const state = {
+      currentTabId: 1
+    }
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initViewType: 'chart',
+        initViewOptions: [],
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    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.equal('SELECT * FROM foo')
+  })
+
+  it("Doesn't render tab when it's not active", () => {
+    // mock store state
+    const state = {
+      currentTabId: 0
+    }
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
+  })
+
+  it('Is not visible when not active', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 0
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+
+    expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
+  })
+
+  it('Calls setCurrentTab when becomes active', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 0
+    }
+    sinon.spy(mutations, 'setCurrentTab')
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1
+      }
+    })
+
+    state.currentTabId = 1
+    await wrapper.vm.$nextTick()
+    expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true)
+  })
+
+  it('Update tab state when a query is changed', async () => {
+    // mock store state
+    const state = {
+      tabs: [
+        { id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isSaved: true }
+      ],
+      currentTabId: 1
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initViewOptions: [],
+        initViewType: 'chart',
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+    await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
+    expect(state.tabs[0].isSaved).to.equal(false)
+  })
+
+  it('Shows .result-in-progress message when executing query', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute () { return new Promise(() => {}) }
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initViewOptions: [],
+        initViewType: 'chart',
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    wrapper.vm.execute()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.run-result-panel .result-in-progress').isVisible()).to.equal(true)
+  })
+
+  it('Shows error when executing query ends with error', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute: sinon.stub().rejects(new Error('There is no table foo')),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initViewOptions: [],
+        initViewType: 'chart',
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    await wrapper.vm.execute()
+    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 = {
+      id: [1, 2],
+      name: ['foo', 'bar']
+    }
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      db: {
+        execute: sinon.stub().resolves(result),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo',
+        initViewOptions: [],
+        initViewType: 'chart',
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    await wrapper.vm.execute()
+    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('Updates schema after query execution', async () => {
+    const result = {
+      id: [],
+      name: []
+    }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      dbName: 'fooDb',
+      db: {
+        execute: sinon.stub().resolves(result),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    // mount the component
+    const wrapper = mount(Tab, {
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+        initViewOptions: [],
+        initViewType: 'chart',
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    await wrapper.vm.execute()
+    expect(state.db.refreshSchema.calledOnce).to.equal(true)
+  })
+
+  it('Switches views', async () => {
+    const state = {
+      currentTabId: 1,
+      db: {}
+    }
+
+    const store = new Vuex.Store({ state, mutations })
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      store,
+      stubs: ['chart'],
+      propsData: {
+        id: 1,
+        initName: 'foo',
+        initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+        initViewOptions: [],
+        initViewType: 'chart',
+        tabIndex: 0,
+        isPredefined: false
+      }
+    })
+
+    let tableBtn = createWrapper(wrapper.find('.above .side-tool-bar').findComponent({ name: 'tableIcon' }).vm.$parent)
+    await tableBtn.trigger('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 = createWrapper(wrapper.find('.above .side-tool-bar').findComponent({ name: 'dataViewIcon' }).vm.$parent)
+    await dataViewBtn.trigger('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 = createWrapper(wrapper.find('.above .side-tool-bar').findComponent({ name: 'sqlEditorIcon' }).vm.$parent)
+    await sqlEditorBtn.trigger('click')
+
+    expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
+
+    tableBtn = createWrapper(wrapper.find('.bottomPane .side-tool-bar').findComponent({ name: 'tableIcon' }).vm.$parent)
+    await tableBtn.trigger('click')
+
+    expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
+  })
+})