add tests for Pivot and Chart

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'))
+  })
 })

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)
+  })
 })