fix tests

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

@@ -5,6 +5,7 @@ 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'
+import { nextTick } from 'vue'
 
 describe('Chart.vue', () => {
   afterEach(() => {
@@ -19,13 +20,15 @@ describe('Chart.vue', () => {
     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)
-    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
+    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('update')
     expect(wrapper.emitted('update')).to.have.lengthOf(1)
+    wrapper.unmount()
   })
 
   it('calls dereference when dataSources is changed', async () => {
@@ -47,6 +50,7 @@ describe('Chart.vue', () => {
 
     await wrapper.setProps({ dataSources: newDataSources })
     expect(dereference.default.called).to.equal(true)
+    wrapper.unmount()
   })
 
   it("doesn't calls dereference when dataSources is null", async () => {
@@ -63,6 +67,7 @@ describe('Chart.vue', () => {
 
     await wrapper.setProps({ dataSources: null })
     expect(dereference.default.called).to.equal(false)
+    wrapper.unmount()
   })
 
   it('saveAsPng', async () => {
@@ -77,11 +82,12 @@ describe('Chart.vue', () => {
     })
     sinon.spy(wrapper.vm, 'prepareCopy')
 
-    await wrapper.vm.$nextTick() // chart is rendered
+    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()
   })
 })

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

@@ -1,7 +1,8 @@
 import { expect } from 'chai'
-import { mount, DOMWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import DataView from '@/views/Main/Workspace/Tabs/Tab/DataView'
 import sinon from 'sinon'
+import { nextTick } from 'vue'
 
 describe('DataView.vue', () => {
   afterEach(() => {
@@ -11,10 +12,11 @@ describe('DataView.vue', () => {
   it('emits update on mode changing', async () => {
     const wrapper = mount(DataView)
 
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    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 () => {
@@ -25,13 +27,14 @@ describe('DataView.vue', () => {
 
     expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'chart_settings' })
 
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    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 () => {
@@ -42,12 +45,12 @@ describe('DataView.vue', () => {
     sinon.spy(chart, 'saveAsSvg')
 
     // Export to svg
-    const svgBtn = new DOMWrapper(wrapper.findComponent({ name: 'exportToSvgIcon' }).vm.$parent)
+    const svgBtn = wrapper.findComponent({ ref: 'svgExportBtn' })
     await svgBtn.trigger('click')
     expect(chart.saveAsSvg.calledOnce).to.equal(true)
 
     // Switch to pivot
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     // Find pivot and spy the method
@@ -61,6 +64,7 @@ describe('DataView.vue', () => {
     // 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 () => {
@@ -71,12 +75,12 @@ describe('DataView.vue', () => {
     sinon.spy(chart, 'saveAsHtml')
 
     // Export to html
-    const htmlBtn = new DOMWrapper(wrapper.findComponent({ name: 'htmlIcon' }).vm.$parent)
+    const htmlBtn = wrapper.findComponent({ ref: 'htmlExportBtn' })
     await htmlBtn.trigger('click')
     expect(chart.saveAsHtml.calledOnce).to.equal(true)
 
     // Switch to pivot
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     // Find pivot and spy the method
@@ -86,6 +90,7 @@ describe('DataView.vue', () => {
     // 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 () => {
@@ -94,7 +99,7 @@ describe('DataView.vue', () => {
     sinon.spy(window, 'alert')
     const wrapper = mount(DataView)
 
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     expect(
@@ -106,35 +111,44 @@ describe('DataView.vue', () => {
     ).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)
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
-      clock.tick(5000)
+    const wrapper = mount(DataView, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
+      await clock.tick(5000)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(true)
+    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)
-    clock.tick(0)
+    await clock.tick(0)
     // Wait untill prepareCopy is finished
     await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // ... with Ready message...
     expect(wrapper.find('.dialog-body').text()).to.equal('Image is ready')
@@ -143,7 +157,9 @@ describe('DataView.vue', () => {
     await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
 
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('copy to clipboard less than 1 sec', async () => {
@@ -151,52 +167,60 @@ describe('DataView.vue', () => {
     const clock = sinon.useFakeTimers()
     const wrapper = mount(DataView)
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
-      clock.tick(500)
+    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
+      await clock.tick(500)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let prepareCopy run)
-    clock.tick(0)
+    await clock.tick(0)
     // Wait untill prepareCopy is finished
     await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     // The dialog is not shown...
     expect(wrapper.find('[data-modal="prepareCopy"]').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)
+    const wrapper = mount(DataView, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: false }
+      }
+    })
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
-      clock.tick(5000)
+    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
+      await clock.tick(5000)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let prepareCopy run)
-    clock.tick(0)
+    await clock.tick(0)
     // Wait untill prepareCopy is finished
     await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Click cancel
     await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
 
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
+    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()
   })
 })

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

@@ -123,7 +123,7 @@ describe('Pivot.vue', () => {
       }
     })
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['year'],
       cols: ['item'],
       colOrder: 'value_a_to_z',
@@ -132,9 +132,10 @@ describe('Pivot.vue', () => {
       aggregatorName: 'Count',
       renderer: $.pivotUtilities.renderers.Table,
       rendererName: 'Table',
-      rendererOptions: undefined,
       vals: []
     })
+    sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'getOptionsForSave')
+      .returns({ here_are: 'custom chart settings' })
 
     let optionsForSave = wrapper.vm.getOptionsForSave()
 
@@ -147,7 +148,7 @@ describe('Pivot.vue', () => {
     expect(optionsForSave.rendererOptions).to.equal(undefined)
     expect(optionsForSave.vals).to.eql([])
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['item'],
       cols: ['year'],
       colOrder: 'value_a_to_z',
@@ -156,14 +157,6 @@ describe('Pivot.vue', () => {
       aggregatorName: 'Count',
       renderer: $.pivotUtilities.renderers['Custom chart'],
       rendererName: 'Custom chart',
-      rendererOptions: {
-        customChartComponent: {
-          $mount: sinon.stub(),
-          getOptionsForSave () {
-            return { here_are: 'custom chart settings' }
-          }
-        }
-      },
       vals: []
     })
 
@@ -202,7 +195,10 @@ describe('Pivot.vue', () => {
 
     expect(await wrapper.vm.prepareCopy()).to.be.instanceof(HTMLCanvasElement)
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    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',
@@ -211,18 +207,12 @@ describe('Pivot.vue', () => {
       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', {
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['item'],
       cols: ['year'],
       colOrder: 'value_a_to_z',
@@ -265,7 +255,7 @@ describe('Pivot.vue', () => {
       attachTo: container
     })
 
-    const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
+    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
     sinon.stub(chartComponent, 'saveAsSvg')
 
     await wrapper.vm.saveAsSvg()
@@ -300,7 +290,7 @@ describe('Pivot.vue', () => {
       attachTo: container
     })
 
-    const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
+    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
     sinon.stub(chartComponent, 'saveAsHtml')
 
     await wrapper.vm.saveAsHtml()
@@ -335,7 +325,7 @@ describe('Pivot.vue', () => {
       attachTo: container
     })
 
-    const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
+    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
     sinon.stub(chartComponent, 'saveAsPng')
 
     await wrapper.vm.saveAsPng()

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

@@ -4,18 +4,23 @@ import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi
 
 describe('PivotSortBtn.vue', () => {
   it('switches order', async () => {
-    const wrapper = shallowMount(PivotSortBtn, { props: { value: 'key_a_to_z' } })
+    const wrapper = shallowMount(PivotSortBtn, { 
+      props: {
+        modelValue: 'key_a_to_z',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
+    })
 
-    expect(wrapper.vm.value).to.equal('key_a_to_z')
+    expect(wrapper.props('modelValue')).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'])
+    expect(wrapper.props('modelValue')).to.equal('value_a_to_z')
 
-    await wrapper.setProps({ value: 'value_a_to_z' })
+    await wrapper.setValue('value_a_to_z')
     await wrapper.find('.pivot-sort-btn').trigger('click')
-    expect(wrapper.emitted('input')[1]).to.eql(['value_z_to_a'])
+    expect(wrapper.props('modelValue')).to.equal('value_z_to_a')
 
-    await wrapper.setProps({ value: 'value_z_to_a' })
+    await wrapper.setValue('value_z_to_a')
     await wrapper.find('.pivot-sort-btn').trigger('click')
-    expect(wrapper.emitted('input')[2]).to.eql(['key_a_to_z'])
+    expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
   })
 })

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

@@ -6,7 +6,8 @@ describe('PivotUi.vue', () => {
   it('returns value when settings changed', async () => {
     const wrapper = mount(PivotUi, {
       props: {
-        keyNames: ['foo', 'bar']
+        keyNames: ['foo', 'bar'],
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
       }
     })
 
@@ -15,68 +16,74 @@ describe('PivotUi.vue', () => {
       .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([])
+   
+    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)
-    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([])
+    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)
-    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([])
+    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)
-    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([])
+    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)
-    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(['', ''])
+    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
@@ -85,14 +92,15 @@ describe('PivotUi.vue', () => {
       .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', ''])
+    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
@@ -101,43 +109,42 @@ describe('PivotUi.vue', () => {
       .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'])
+    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)
-    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'])
+    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)
-    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'])
+    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'])
   })
 })