fix: save chart settings wihtout data #137

src/components/Chart.vue

@@ -81,11 +81,13 @@ export default {
   data() {
     return {
       plotly,
-      state: this.initOptions || {
+      state: this.initOptions
-        data: [],
+        ? JSON.parse(JSON.stringify(this.initOptions))
-        layout: { autosize: true },
+        : {
-        frames: []
+            data: [],
-      },
+            layout: { autosize: true },
+            frames: []
+          },
       config: {
         editable: true,
         displaylogo: false,
@@ -146,7 +148,7 @@ export default {
     this.handleResize()
     await nextTick()
     const plotlyDiv =
-      this.$refs.plotlyEditor.$el.querySelector('.js-plotly-plot')
+      this.$refs.plotlyEditor?.$el?.querySelector('.js-plotly-plot')
     plotlyDiv?.on('plotly_selected', selectionEvent => {
       if (selectionEvent) {
         this.selectedItem = 1
@@ -177,7 +179,7 @@ export default {
       // TODO: check changes and enable Save button if needed
     },
     update(data, layout, frames) {
-      if (layout.selections?.length > 0) {
+      if (layout?.selections?.length > 0) {
         layout.selections = []
         data.forEach(dataItem => delete dataItem.selectedpoints)
       }

src/components/DataView.vue

@@ -58,7 +58,7 @@
       </icon-button>
 
       <icon-button
-        v-if="mode !== 'pivot'"
+        v-if="mode === 'graph'"
         ref="viewNodeOrEdgeBtn"
         tooltip="View details"
         tooltipPosition="top-left"

tests/views/MainView.spec.js

@@ -0,0 +1,122 @@
+import { expect } from 'chai'
+import { mount, flushPromises } from '@vue/test-utils'
+import actions from '@/store/actions'
+import mutations from '@/store/mutations'
+import { createStore } from 'vuex'
+import MainView from '@/views/MainView.vue'
+import { routes } from '@/router'
+import { createRouter, createWebHistory } from 'vue-router'
+
+describe('MainView.vue', () => {
+  it('Saves inquiry without data', async () => {
+    const state = {
+      db: {},
+      tabs: [],
+      inquiries: []
+    }
+    const store = createStore({ state, actions, mutations })
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: routes
+    })
+
+    router.push('/workspace')
+    await router.isReady()
+    const wrapper = mount(MainView, {
+      global: {
+        stubs: {
+          'router-link': true,
+          teleport: false,
+          'app-diagnostic-info': true,
+          transition: false,
+          schema: true,
+          'run-result': true
+        },
+        plugins: [store, router]
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.find('#create-btn').trigger('click')
+
+    store.state.tabs[1].result = {
+      columns: ['id', 'name'],
+      values: {
+        id: [1, 2],
+        name: ['Harry', 'Drako']
+      }
+    }
+
+    await flushPromises()
+
+    // Add trace
+    await wrapper
+      .findAllComponents({ name: 'Chart' })[1]
+      .find('button.js-add-button')
+      .wrapperElement.click()
+
+    await flushPromises()
+
+    // Select data for axis x
+    await wrapper
+      .findAll('.field .dropdown-container .Select__indicator')[0]
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[0].trigger('click')
+
+    // Select data for axis y
+    await wrapper
+      .findAll('.field .dropdown-container .Select__indicator')[2]
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
+
+    // Click Save in the top menu
+    await wrapper.find('#save-btn').trigger('click')
+
+    // Input inquiry name
+    document.querySelector('.dialog input').value = 'test'
+    document.querySelector('.dialog input').dispatchEvent(
+      new InputEvent('input', {
+        data: 'test'
+      })
+    )
+
+    // Click Save in the dialog
+    document
+      .querySelector('.dialog .dialog-buttons-container button.primary')
+      .click()
+
+    const inquiriesInStore = store.state.inquiries
+    expect(inquiriesInStore.length).to.equal(1)
+    expect(inquiriesInStore[0].createdAt).to.not.be.null
+    expect(inquiriesInStore[0].createdAt).to.not.be.undefined
+    expect(inquiriesInStore[0].updateAt).to.not.be.null
+    expect(inquiriesInStore[0].updatedAt).to.not.be.undefined
+
+    expect(inquiriesInStore[0].id).to.not.be.null
+    expect(inquiriesInStore[0].id).to.not.be.undefined
+
+    expect(inquiriesInStore[0].name).to.equal('test')
+    expect(inquiriesInStore[0].viewType).to.equal('chart')
+    expect(inquiriesInStore[0].viewOptions.data).to.eql([
+      {
+        type: 'scatter',
+        mode: 'markers',
+        x: null,
+        xsrc: 'id',
+        meta: {
+          columnNames: {
+            x: 'id',
+            y: 'name'
+          }
+        },
+        y: null,
+        ysrc: 'name'
+      }
+    ])
+    wrapper.unmount()
+  })
+})