change code structure

tests/views/MainView/Editor/Tabs/Tab/Chart/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 '@/views/Main/Editor/Tabs/Tab/Chart'
+import chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
+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(chartHelper, '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)
+  })
+})

tests/views/MainView/Editor/Tabs/Tab/Chart/chartHelper.spec.js

@@ -0,0 +1,72 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import * as chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
+
+describe('chartHelper.js', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('getDataSourcesFromSqlResult', () => {
+    const sqlResult = {
+      columns: ['id', 'name'],
+      values: [
+        [1, 'foo'],
+        [2, 'bar']
+      ]
+    }
+
+    const ds = chartHelper.getDataSourcesFromSqlResult(sqlResult)
+    expect(ds).to.eql({
+      id: [1, 2],
+      name: ['foo', 'bar']
+    })
+  })
+
+  it('getOptionsFromDataSources', () => {
+    const dataSources = {
+      id: [1, 2],
+      name: ['foo', 'bar']
+    }
+
+    const ds = chartHelper.getOptionsFromDataSources(dataSources)
+    expect(ds).to.eql([
+      { value: 'id', label: 'id' },
+      { value: 'name', label: 'name' }
+    ])
+  })
+
+  it('getChartStateForSave', () => {
+    const state = {
+      data: {
+        foo: {},
+        bar: {}
+      },
+      layout: {},
+      frames: {}
+    }
+    const dataSources = {
+      id: [1, 2],
+      name: ['foo', 'bar']
+    }
+    sinon.stub(dereference, 'default')
+    sinon.spy(JSON, 'parse')
+
+    const ds = chartHelper.getChartStateForSave(state, dataSources)
+
+    expect(dereference.default.calledOnce).to.equal(true)
+
+    const args = dereference.default.firstCall.args
+    expect(args[0]).to.eql({
+      foo: {},
+      bar: {}
+    })
+    expect(args[1]).to.eql({
+      id: [],
+      name: []
+    })
+
+    expect(ds).to.equal(JSON.parse.returnValues[0])
+  })
+})