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,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()
|
||||
})
|
||||
})
|
||||
@@ -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()
|
||||
})
|
||||
})
|
||||
@@ -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