add tests for Chart.vue

src/chart.js

@@ -32,3 +32,9 @@ export function getChartStateForSave (state, dataSources) {
   dereference(stateCopy.data, emptySources)
   return stateCopy
 }
+
+export default {
+  getDataSourcesFromSqlResult,
+  getOptionsFromDataSources,
+  getChartStateForSave
+}

src/components/Chart.vue

@@ -17,6 +17,7 @@
     :debug="true"
     :advancedTraceTypeSelector="true"
     class="chart"
+    ref="plotlyEditor"
     :style="{ height: !sqlResult ? 'calc(100% - 40px)' : '100%' }"
   />
 </div>
@@ -27,11 +28,7 @@ import plotly from 'plotly.js/dist/plotly'
 import 'react-chart-editor/lib/react-chart-editor.min.css'
 
 import PlotlyEditor from 'react-chart-editor'
-import {
+import chart from '@/chart'
-  getOptionsFromDataSources,
-  getDataSourcesFromSqlResult,
-  getChartStateForSave
-} from '@/chart'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 
 export default {
@@ -52,10 +49,10 @@ export default {
   },
   computed: {
     dataSources () {
-      return getDataSourcesFromSqlResult(this.sqlResult)
+      return chart.getDataSourcesFromSqlResult(this.sqlResult)
     },
     dataSourceOptions () {
-      return getOptionsFromDataSources(this.dataSources)
+      return chart.getOptionsFromDataSources(this.dataSources)
     }
   },
   watch: {
@@ -74,7 +71,7 @@ export default {
       this.$emit('update')
     },
     getChartStateForSave () {
-      return getChartStateForSave(this.state, this.dataSources)
+      return chart.getChartStateForSave(this.state, this.dataSources)
     }
   }
 }

tests/unit/components/Chart.spec.js

@@ -0,0 +1,68 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, shallowMount } from '@vue/test-utils'
+import Chart from '@/components/Chart.vue'
+import chart  from '@/chart.js'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
+
+describe('Chart.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+  
+  it('getChartStateForSave called with proper arguments', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart)
+    const vm = wrapper.vm
+    const stub = sinon.stub(chart, 'getChartStateForSave').returns('result')
+    const chartData = vm.getChartStateForSave()
+    expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
+    expect(chartData).to.equal('result')
+  })
+
+  it('is not visible when visible is false', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { visible: false }
+    })
+    
+    expect(wrapper.find('.chart-container').isVisible()).to.equal(false)
+  })
+
+  it('is visible when visible is true', () => {
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { visible: true }
+    })
+    
+    expect(wrapper.find('.chart-container').isVisible()).to.equal(true)
+  })
+
+  it('emits update when plotly updates', async () => {
+    // mount the component
+    const wrapper = mount(Chart)
+    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+  })
+
+  it('calls dereference when sqlResult is changed', async () => {
+    sinon.stub(dereference, 'default')
+    const sqlResult = {
+      columns: ['id', 'name'],
+      values: [[1, 'foo']]
+    }
+
+    // mount the component
+    const wrapper = shallowMount(Chart, {
+      propsData: { sqlResult: sqlResult }
+    })
+
+    const newSqlResult = {
+      columns: ['id', 'name'],
+      values: [[2, 'bar']]
+    }
+
+    await wrapper.setProps({sqlResult: newSqlResult})
+    expect(dereference.default.called).to.equal(true)
+  })
+})