diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js index 44de677..9ec5eec 100644 --- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js +++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js @@ -4,8 +4,11 @@ import { mount, shallowMount } from '@vue/test-utils' import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart' import chartHelper from '@/lib/chartHelper' import * as dereference from 'react-chart-editor/lib/lib/dereference' +import fIo from '@/lib/utils/fileIo' describe('Chart.vue', () => { + let container + afterEach(() => { sinon.restore() }) @@ -63,4 +66,24 @@ describe('Chart.vue', () => { await wrapper.setProps({ dataSources: null }) expect(dereference.default.called).to.equal(false) }) + + it('saveAsPng', async () => { + sinon.spy(fIo, 'downloadFromUrl') + const dataSources = { + id: [1], + name: ['foo'] + } + + const wrapper = mount(Chart, { + propsData: { dataSources } + }) + sinon.spy(wrapper.vm, 'prepareCopy') + + await wrapper.vm.$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')) + }) }) diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js index 125f8c7..3483eff 100644 --- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js +++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js @@ -1,13 +1,24 @@ import { expect } from 'chai' import { mount } from '@vue/test-utils' import Pivot from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot' +import chartHelper from '@/lib/chartHelper' +import fIo from '@/lib/utils/fileIo' import $ from 'jquery' import sinon from 'sinon' describe('Pivot.vue', () => { + let container + + beforeEach(() => { + container = document.createElement('div') + document.body.appendChild(container) + }) + afterEach(() => { + container.remove() sinon.restore() }) + it('renders pivot table', () => { const wrapper = mount(Pivot, { propsData: { @@ -92,55 +103,6 @@ describe('Pivot.vue', () => { 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: { @@ -216,4 +178,212 @@ describe('Pivot.vue', () => { }) expect(optionsForSave.vals).to.eql([]) }) + + it('prepareCopy returns canvas for tables and url for plotly charts', 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' + } + }, + attachTo: container + }) + + expect(await wrapper.vm.prepareCopy()).to.be.instanceof(HTMLCanvasElement) + + 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: { + $mount: sinon.stub(), + prepareCopy: sinon.stub().returns(URL.createObjectURL(new Blob())) + } + }, + vals: [] + }) + + expect(await wrapper.vm.prepareCopy()).to.be.a('string') + + 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['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, { + 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: [], + renderer: $.pivotUtilities.renderers['Custom chart'], + rendererName: 'Custom chart', + rendererOptions: { + customChartOptions: {} + } + } + }, + attachTo: container + }) + + const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent + sinon.stub(chartComponent, 'saveAsSvg') + + await wrapper.vm.saveAsSvg() + expect(chartComponent.saveAsSvg.called).to.equal(true) + }) + + it('saveAsPng calls chart method if renderer is Custom Chart', 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: [], + renderer: $.pivotUtilities.renderers['Custom chart'], + rendererName: 'Custom chart', + rendererOptions: { + customChartOptions: {} + } + } + }, + attachTo: container + }) + + const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent + 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, { + 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: [], + renderer: $.pivotUtilities.renderers['Bar Chart'], + rendererName: 'Bar Chart' + } + }, + attachTo: container + }) + + await wrapper.vm.saveAsSvg() + expect(chartHelper.getImageDataUrl.calledOnce).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, { + 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: [], + renderer: $.pivotUtilities.renderers['Bar Chart'], + rendererName: 'Bar Chart' + } + }, + attachTo: container + }) + + 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(HTMLCanvasElement.prototype, 'toDataURL').returns('canvas data url') + sinon.stub(fIo, 'downloadFromUrl') + + 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: [], + renderer: $.pivotUtilities.renderers.Table, + rendererName: 'Table' + } + }, + attachTo: container + }) + + 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) + }) })