fix tests

src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -31,7 +31,7 @@ import 'react-chart-editor/lib/react-chart-editor.css'
 
 import ReactPlotlyEditor from 'react-chart-editor'
 import chartHelper from '@/lib/chartHelper'
-import dereference from 'react-chart-editor/lib/lib/dereference'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
 import events from '@/lib/utils/events'
 
@@ -101,7 +101,7 @@ export default {
       // we need to update state.data in order to update the graph
       // https://github.com/plotly/react-chart-editor/issues/948
       if (this.dataSources) {
-        dereference(this.state.data, this.dataSources)
+        dereference.default(this.state.data, this.dataSources)
       }
     }
   },

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue

@@ -15,6 +15,7 @@ import SortIcon from '@/components/svg/sort'
 export default {
   name: 'PivotSortBtn',
   props: ['direction', 'modelValue'],
+  emits: ['update:modelValue'],
   components: {
     SortIcon
   },

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -18,7 +18,7 @@
       ref="customChart"
       v-bind="customChartComponentProps"
       @update="$emit('update')"
-      @onLoadingImageCompleted="$emit('loadingImageCompleted')"
+      @loadingImageCompleted="$emit('loadingImageCompleted')"
     />
   </div>
 </div>
@@ -183,13 +183,12 @@ export default {
 
     getOptionsForSave () {
       const options = { ...this.pivotOptions }
-      if (options.rendererOptions) {
+      if (this.viewCustomChart) {
         const chartComponent = this.$refs.customChart
         options.rendererOptions = {
           customChartOptions: chartComponent.getOptionsForSave()
         }
       }
-
       return options
     },
 

src/views/Main/Workspace/Tabs/Tab/DataView/index.vue

@@ -22,6 +22,7 @@
         <chart-icon />
       </icon-button>
       <icon-button
+        ref="pivotBtn"
         :active="mode === 'pivot'"
         @click="mode = 'pivot'"
         tooltip="Switch to pivot"
@@ -42,6 +43,7 @@
         <png-icon />
       </icon-button>
       <icon-button
+        ref="svgExportBtn"
         :disabled="!importToSvgEnabled"
         tooltip="Save as SVG"
         tooltip-position="top-left"
@@ -51,6 +53,7 @@
       </icon-button>
 
       <icon-button
+        ref="htmlExportBtn"
         tooltip="Save as HTML"
         tooltip-position="top-left"
         @click="saveAsHtml"
@@ -58,6 +61,7 @@
         <HtmlIcon />
       </icon-button>
       <icon-button
+        ref="copyToClipboardBtn"
         :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
         tooltip-position="top-left"
@@ -234,19 +238,4 @@ export default {
   height: 100%;
   overflow: auto;
 }
-:deep(.vm--container) {
-  animation: show-modal 1s linear 0s 1;
-}
-
-@keyframes show-modal {
-  0% {
-    opacity: 0;
-  }
-  99% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 </style>

src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue

@@ -37,6 +37,7 @@
       </icon-button>
 
       <icon-button
+        ref="copyToClipboardBtn"
         :disabled="!result"
         tooltip="Copy result set to clipboard"
         tooltip-position="top-left"
@@ -46,6 +47,7 @@
       </icon-button>
 
       <icon-button
+        ref="rowBtn"
         :disabled="!result"
         tooltip="View record"
         tooltip-position="top-left"
@@ -56,6 +58,7 @@
       </icon-button>
 
       <icon-button
+        ref="viewCellValueBtn"
         :disabled="!result"
         tooltip="View value"
         tooltip-position="top-left"
@@ -166,7 +169,7 @@ export default {
       viewRecord: false,
       defaultPage: 1,
       defaultSelectedCell: null,
-      enableTeleport: false
+      enableTeleport: this.$store.state.isWorkspaceVisible
     }
   },
   components: {
@@ -204,9 +207,6 @@ export default {
     this.enableTeleport = false
   },
   mounted () {
-    if (this.$store.state.isWorkspaceVisible) {
-      this.enableTeleport = true
-    }
     this.resizeObserver = new ResizeObserver(this.handleResize)
     this.resizeObserver.observe(this.$refs.runResultPanel)
     this.calculatePageSize()
@@ -376,20 +376,4 @@ export default {
     opacity: 1;
   }
 }
-
-:deep(.vm--container) {
-  animation: show-modal 1s linear 0s 1;
-}
-
-@keyframes show-modal {
-  0% {
-    opacity: 0;
-  }
-  99% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 </style>

src/views/Main/Workspace/Tabs/Tab/SideToolBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="side-tool-bar">
     <icon-button
+      ref="sqlEditorBtn"
       :active="panel === 'sqlEditor'"
       tooltip="Switch panel to SQL editor"
       tooltip-position="top-left"
@@ -10,6 +11,7 @@
     </icon-button>
 
     <icon-button
+      ref="tableBtn"
       :active="panel === 'table'"
       tooltip="Switch panel to result set"
       tooltip-position="top-left"
@@ -19,6 +21,7 @@
     </icon-button>
 
     <icon-button
+      ref="dataViewBtn"
       :active="panel === 'dataView'"
       tooltip="Switch panel to data view"
       tooltip-position="top-left"

src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js

@@ -43,7 +43,7 @@ export function showHintOnDemand (editor) {
   CM.showHint(editor, getHints, hintOptions)
 }
 
-export default function showHint (value, editor) {
+export default function showHint (editor) {
   // Don't show autocomplete after a space or semicolon or in string literals
   const token = editor.getTokenAt(editor.getCursor())
   const ch = token.string.slice(-1)

src/views/Main/Workspace/Tabs/Tab/SqlEditor/index.vue

@@ -11,6 +11,7 @@
     </div>
     <side-tool-bar panel="sqlEditor" @switchTo="$emit('switchTo', $event)">
       <icon-button
+        ref="runBtn"
         :disabled="runDisabled"
         :loading="isGettingResults"
         tooltip="Run SQL query"
@@ -72,9 +73,9 @@ export default {
     }
   },
   methods: {
-    onChange: time.debounce(showHint, 400),
+    onChange: time.debounce((value, editor) => showHint(editor), 400),
     focus () {
-      this.$refs.cm.cminstance.focus()
+      this.$refs.cm.cminstance?.focus()
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/index.vue

@@ -89,7 +89,7 @@ export default {
       topPaneSize: this.tab.maximize
         ? this.tab.layout[this.tab.maximize] === 'above' ? 100 : 0
         : 50,
-      enableTeleport: false
+      enableTeleport: this.$store.state.isWorkspaceVisible
     }
   },
   computed: {
@@ -103,7 +103,7 @@ export default {
       async handler () {
         if (this.isActive) {
           await nextTick()
-          this.$refs.sqlEditor.focus()
+          this.$refs.sqlEditor?.focus()
         }
       }
     },
@@ -114,16 +114,17 @@ export default {
       })
     }
   },
-  activated () {
+  async activated () {
     this.enableTeleport = true
+    if (this.isActive) {
+      await nextTick()
+      this.$refs.sqlEditor.focus()
+    }
   },
   deactivated () {
     this.enableTeleport = false
   },
-  mounted () {
-    if (this.$store.state.isWorkspaceVisible) {
-      this.enableTeleport = true
-    }
+  async mounted () {
     this.tab.dataView = this.$refs.dataView
   },
   methods: {