fix tests

src/components/CheckBox.vue

@@ -5,13 +5,18 @@
   >
     <div v-show="!checked" class="unchecked" />
     <img
-      v-show="checked && !disabled"
-      :src="theme === 'light'
-        ? '~@/assets/images/checkbox_checked_light.svg'
-        : '~@/assets/images/checkbox_checked.svg'"
+      v-show="checked && !disabled && theme === 'light'"
+      class="checked-light"
+      src="~@/assets/images/checkbox_checked_light.svg"
+    />
+    <img
+      v-show="checked && !disabled && theme !== 'light'"
+      class="checked"
+      src="~@/assets/images/checkbox_checked.svg"
     />
     <img
       v-show="checked && disabled"
+      class="checked-disabled"
       src="~@/assets/images/checkbox_checked_disabled.svg"
     />
     <span v-if="label" class="label">{{ label }}</span>

src/components/CsvJsonImport/DelimiterSelector/index.vue

@@ -47,6 +47,7 @@ import ClearIcon from '@/components/svg/clear'
 export default {
   name: 'DelimiterSelector',
   props: ['modelValue', 'width', 'disabled'],
+  emits: ['update:modelValue'],
   components: { DropDownChevron, ClearIcon },
   data () {
     return {

src/components/CsvJsonImport/index.vue

@@ -290,17 +290,16 @@ export default {
         delimiter: this.delimiter,
         columns: !this.isJson && !this.isNdJson ? null : ['doc']
       }
-      const parsingMsg = {
+      let parsingMsg = {}
+      this.importMessages.push({
         message: `Parsing ${this.typeName}...`,
         type: 'info'
-      }
-      this.importMessages.push(parsingMsg)
+      })
+      // Get *reactive* link to parsing message for later updates
+      parsingMsg = this.importMessages[this.importMessages.length - 1]
       const parsingLoadingIndicator = setTimeout(() => { parsingMsg.type = 'loading' }, 1000)
 
-      const importMsg = {
-        message: `Importing ${this.typeName} into a SQLite database...`,
-        type: 'info'
-      }
+      let importMsg = {}
       let importLoadingIndicator = null
 
       const updateProgress = progress => {
@@ -333,7 +332,11 @@ export default {
           clearTimeout(parsingLoadingIndicator)
 
           // Add info about import start
-          this.importMessages.push(importMsg)
+          this.importMessages.push({
+            message: `Importing ${this.typeName} into a SQLite database...`,
+            type: 'info'
+          })
+          importMsg = this.importMessages[this.importMessages.length - 1]
 
           // Show import progress after 1 second
           importLoadingIndicator = setTimeout(() => {

src/components/LoadingDialog.vue

@@ -3,6 +3,8 @@
     :modal-id="name"
     class="dialog"
     :clickToClose="false"
+    :contentTransition="{name: 'loading-dialog'}"
+    :overlayTransition="{name: 'loading-dialog'}"
   >
     <div class="dialog-header">
       {{ title }}
@@ -21,6 +23,7 @@
     <div class="dialog-buttons-container">
       <button
         class="secondary"
+        type="button"
         :disabled="loading"
         @click="$emit('cancel')"
       >
@@ -28,6 +31,7 @@
       </button>
       <button
         class="primary"
+        type="button"
         :disabled="loading"
         @click="$emit('action')"
       >
@@ -68,6 +72,31 @@ export default {
 }
 </script>
 
+<style>
+.loading-dialog-enter-active {
+  animation: show-modal 1s linear 0s 1;
+}
+.loading-dialog-leave-active {
+  opacity: 0;
+}
+
+@keyframes show-modal {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.loading-modal {
+  width: 400px;
+}
+</style>
+
 <style scoped>
 .loading-dialog-body {
   display: flex;

src/lib/chartHelper.js

@@ -1,4 +1,4 @@
-import dereference from 'react-chart-editor/lib/lib/dereference'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
 import plotly from 'plotly.js'
 import { nanoid } from 'nanoid'
 
@@ -21,7 +21,7 @@ export function getOptionsForSave (state, dataSources) {
   for (const key in dataSources) {
     emptySources[key] = []
   }
-  dereference(stateCopy.data, emptySources)
+  dereference.default(stateCopy.data, emptySources)
   return stateCopy
 }
 

src/lib/database/_sql.js

@@ -1,4 +1,4 @@
-import initSqlJs from 'sql.js/dist/sql-wasm.js'
+import initSqlJs from 'sql.js'
 import dbUtils from './_statements'
 import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
 

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: {