mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
linter
This commit is contained in:
lana-k
@@ -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)
|
||||
})
|
||||
})
|
||||
@@ -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')
|
||||
})
|
||||
})
|
||||
@@ -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'])
|
||||
})
|
||||
})
|
||||
@@ -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')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user