fix tests

karma.conf.cjs

@@ -0,0 +1,119 @@
+module.exports = function (config) {
+  config.set({
+    vite: {
+      config: {
+        resolve: {
+          alias: {
+            'vue': 'vue/dist/vue.esm-bundler.js'
+          }
+        },
+      },
+      coverage: {
+        enable: true,
+        include: 'src/*',
+        exclude: ['node_modules', 'src/components/svg/*'],
+        extension: ['.js', '.vue'],
+        requireEnv: false
+      }
+    },
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha', 'sinon-chai', 'vite'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      {
+        pattern: 'test.setup.js',
+        type: 'module',
+        watched: false,
+        served: false,
+      },
+      {
+        pattern: 'tests/**/*.spec.js',
+        type: 'module',
+        watched: false,
+        served: false,
+      },
+      {
+        pattern: 'src/assets/styles/*.css',
+        type: 'css',
+        watched: false,
+        served: false,
+      }
+    ],
+
+    plugins: [
+      'karma-vite',
+      'karma-mocha',
+      'karma-sinon-chai',
+      'karma-firefox-launcher',
+      'karma-chrome-launcher',
+      'karma-spec-reporter',
+      'karma-coverage'
+    ],
+
+    // list of files / patterns to exclude
+    exclude: [],
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec', 'coverage'],
+
+    coverageReporter: {
+      dir: 'coverage',
+      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
+    },
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||
+    // config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    customLaunchers: {
+      FirefoxHeadlessTouch: {
+        base: 'FirefoxHeadless',
+        prefs: {
+          'dom.w3c_touch_events.enabled': 1,
+          'dom.events.asyncClipboard.clipboardItem': true
+        }
+      }
+    },
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['ChromiumHeadless', 'FirefoxHeadlessTouch'],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: 2,
+
+    client: {
+      captureConsole: true,
+      mocha: {
+        timeout: 7000
+      }
+    },
+    browserConsoleLogOptions: {
+      terminal: true,
+      level: ''
+    }
+  })
+  // Fix the timezone
+  process.env.TZ = 'Europe/Amsterdam'
+}

karma.conf.js

@@ -1,203 +0,0 @@
-// Karma configuration
-'use strict'
-const path = require('path')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-
-function resolve (dir) {
-  return path.join(__dirname, dir)
-}
-
-module.exports = function (config) {
-  config.set({
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'sinon-chai'],
-
-    // list of files / patterns to load in the browser
-    files: [
-      './karma.files.js',
-      {
-        pattern: 'node_modules/sql.js/dist/sql-wasm.wasm',
-        watched: false,
-        included: false,
-        served: true,
-        nocache: false
-      }
-    ],
-
-    // list of files / patterns to exclude
-    exclude: [],
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      './karma.files.js': ['webpack']
-    },
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['spec', 'coverage'],
-
-    coverageReporter: {
-      dir: 'coverage',
-      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
-    },
-
-    // !!DONOT delete this reporter, or vue-cli-addon-ui-karma doesnot work
-    jsonResultReporter: {
-      outputFile: 'report/karma-result.json',
-      isSynchronous: true
-    },
-
-    junitReporter: {
-      outputDir: 'report', // results will be saved as $outputDir/$browserName.xml
-      // if included, results will be saved as $outputDir/$browserName/$outputFile
-      outputFile: undefined,
-      suite: '', // suite will become the package name attribute in xml testsuite element
-      useBrowserName: true, // add browser name to report and classes names
-      // function (browser, result) to customize the name attribute in xml testcase element
-      nameFormatter: undefined,
-      // function (browser, result) to customize the classname attribute in xml testcase element
-      classNameFormatter: undefined,
-      properties: {} // key value pairs add to the <properties> section of the report
-    },
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||
-    // config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: false,
-
-    customLaunchers: {
-      FirefoxHeadlessTouch: {
-        base: 'FirefoxHeadless',
-        prefs: {
-          'dom.w3c_touch_events.enabled': 1,
-          'dom.events.asyncClipboard.clipboardItem': true
-        }
-      }
-    },
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['ChromiumHeadless', 'FirefoxHeadlessTouch'],
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: 2,
-
-    client: {
-      captureConsole: true,
-      mocha: {
-        timeout: 7000
-      }
-    },
-    browserConsoleLogOptions: {
-      terminal: true,
-      level: ''
-    },
-    webpack: {
-      mode: 'development',
-      entry: './src/main.js',
-      resolve: {
-        extensions: ['.js', '.vue', '.json'],
-        alias: {
-          vue$: 'vue/dist/vue.esm.js',
-          '@': resolve('src')
-        }
-      },
-      module: {
-        rules: [
-          {
-            test: /\.js$/,
-            exclude: /(node_modules|bower_components)/,
-            use: [
-              {
-                loader: 'babel-loader'
-              }
-            ]
-          },
-          {
-            test: /\.js$/,
-            include: /src/,
-            exclude: /(node_modules|bower_components|\.spec\.js$)/,
-            use: [
-              {
-                loader: 'istanbul-instrumenter-loader',
-                options: {
-                  esModules: true
-                }
-              }
-            ]
-          },
-          {
-            test: /worker\.js$/,
-            loader: 'worker-loader'
-          },
-          {
-            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-            loader: 'url-loader'
-          },
-          {
-            test: /\.vue$/,
-            loader: 'vue-loader',
-            options: {
-              loaders: {
-                js: 'babel-loader'
-              },
-              postLoaders: {
-                js: 'istanbul-instrumenter-loader?esModules=true'
-              }
-            }
-          },
-          {
-            test: /\.css$/,
-            use: ['vue-style-loader', 'css-loader']
-          },
-          {
-            test: /\.scss$/,
-            use: ['vue-style-loader', 'css-loader', 'sass-loader']
-          },
-          {
-            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-            loader: 'url-loader',
-            options: {
-              limit: 10000,
-              name: resolve('fonts/[name].[hash:7].[ext]')
-            }
-          }
-        ]
-      },
-      plugins: [new VueLoaderPlugin()],
-      node: {
-        fs: 'empty'
-      }
-    },
-    webpackMiddleware: {
-      watchOptions: {
-        ignored: /node_modules/
-      }
-    },
-    proxies: {
-      '/_karma_webpack_/sql-wasm.wasm': '/base/node_modules/sql.js/dist/sql-wasm.wasm',
-      '/base/sql-wasm.wasm': '/base/node_modules/sql.js/dist/sql-wasm.wasm'
-    }
-  })
-  // Fix the timezone
-  process.env.TZ = 'Europe/Amsterdam'
-}

karma.files.js

@@ -1,21 +0,0 @@
-import Vue from 'vue'
-// import { VuePlugin } from 'vuera'
-// import VModal from 'vue-js-modal'
-
-// Vue.use(VuePlugin)
-// Vue.use(VModal)
-Vue.config.productionTip = false
-
-// require all test files (files that ends with .spec.js)
-const testsContext = require.context('./tests', true, /\.spec.js$/)
-
-// Read more about why we need to call testContext:
-// https://www.npmjs.com/package/require-context#context-api
-testsContext.keys().forEach(testsContext)
-
-// require all src files except main.js and router/index.js for coverage.
-// you can also change this to match only the subset of files that
-// you want coverage for.
-// We don't include router/index.js to avoid installing VueRouter globally in tests
-const srcContext = require.context('./src', true, /^\.\/(?!(main|(router(\/)?(index)?))(\.js)?$)/)
-srcContext.keys().forEach(srcContext)

package.json

@@ -3,14 +3,17 @@
   "version": "0.25.1",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
-    "build": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build",
+    "build": "vite build",
-    "test": "vue-cli-service karma",
+    "serve": "vite preview",
-    "lint": "vue-cli-service lint"
+    "test": "karma start karma.conf.cjs",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
     "assert": "^2.1.0",
+    "buffer": "^6.0.3",
     "codemirror": "^5.65.18",
     "codemirror-editor-vue3": "^2.8.0",
     "core-js": "^3.6.5",
@@ -28,7 +31,6 @@
     "sql.js": "file:./lib/sql-js",
     "stream-browserify": "^3.0.0",
     "tiny-emitter": "^2.1.0",
-    "url-loader": "^4.1.1",
     "veaury": "^2.5.1",
     "vue": "^3.5.11",
     "vue-final-modal": "^4.5.5",
@@ -39,16 +41,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.7",
-    "@babel/eslint-parser": "^7.25.7",
+    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-vuex": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
     "chai": "^4.1.2",
-    "chai-as-promised": "^7.1.1",
+    "chai-as-promised": "^8.0.1",
     "copy-webpack-plugin": "^6.4.1",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.20.2",
@@ -57,11 +54,27 @@
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^9.28.0",
     "flush-promises": "^1.0.2",
-    "karma": "^3.1.4",
+    "karma": "^6.4.4",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-coverage": "^2.2.1",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-firefox-launcher": "^2.1.3",
+    "karma-mocha": "^1.3.0",
+    "karma-spec-reporter": "^0.0.36",
+    "karma-vite": "^1.0.5",
     "karma-webpack": "^5.0.1",
+    "mocha": "^5.2.0",
+    "process": "^0.11.10",
+    "url-loader": "^4.1.1",
+    "vite": "^5.4.14",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-static-copy": "^2.2.0",
     "vue-cli-plugin-ui-karma": "^0.2.5",
-    "workbox-webpack-plugin": "^6.1.5",
+    "workbox-webpack-plugin": "^6.1.5"
-    "worker-loader": "^3.0.8"
+  },
+  "overrides": {
+    "karma-vite": {
+      "vite-plugin-istanbul": "$vite-plugin-istanbul"
+    }
   }
 }

src/components/CheckBox.vue

@@ -5,13 +5,18 @@
   >
     <div v-show="!checked" class="unchecked" />
     <img
-      v-show="checked && !disabled"
+      v-show="checked && !disabled && theme === 'light'"
-      :src="theme === 'light'
+      class="checked-light"
-        ? '~@/assets/images/checkbox_checked_light.svg'
+      src="~@/assets/images/checkbox_checked_light.svg"
-        : '~@/assets/images/checkbox_checked.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 = {
+      let importMsg = {}
-        message: `Importing ${this.typeName} into a SQLite database...`,
-        type: 'info'
-      }
       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 () {
+  async mounted () {
-    if (this.$store.state.isWorkspaceVisible) {
-      this.enableTeleport = true
-    }
     this.tab.dataView = this.$refs.dataView
   },
   methods: {

test.setup.js

@@ -0,0 +1,14 @@
+import { config } from '@vue/test-utils'
+import { createVfm, VueFinalModal, useVfm } from 'vue-final-modal'
+
+config.global.plugins = [createVfm()]
+config.global.components = {
+  'modal': VueFinalModal
+}
+const vfm = useVfm()
+config.global.mocks = {
+    $modal: {
+      show: modalId => vfm.open(modalId),
+      hide: modalId => vfm.close(modalId)
+    }
+  }

tests/App.spec.js

@@ -1,10 +1,11 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { shallowMount } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import App from '@/App'
 import storedInquiries from '@/lib/storedInquiries'
 import mutations from '@/store/mutations'
+import { nextTick } from 'vue'
 
 describe('App.vue', () => {
   afterEach(() => {
@@ -19,8 +20,13 @@ describe('App.vue', () => {
       predefinedInquiries: [],
       inquiries: []
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
-    shallowMount(App, { store, stubs: ['router-view'] })
+    shallowMount(App, {
+      global: { 
+        stubs: ['router-view'],
+        plugins: [store]
+      }
+    })
 
     expect(state.inquiries).to.eql([{ id: 1 }, { id: 2 }, { id: 3 }])
   })
@@ -35,11 +41,14 @@ describe('App.vue', () => {
       predefinedInquiries: [],
       inquiries: []
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
-    const wrapper = shallowMount(App, { store, stubs: ['router-view'] })
+    shallowMount(App, {
+      global: { stubs: ['router-view'],
+      plugins: [store] }
+    })
 
     store.state.inquiries.splice(0, 1, { id: 1, name: 'new foo name' })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(storedInquiries.updateStorage.calledTwice).to.equal(true)
 

tests/components/CheckBox.spec.js

@@ -5,26 +5,34 @@ import CheckBox from '@/components/CheckBox'
 describe('CheckBox', () => {
   it('unchecked by default', () => {
     const wrapper = shallowMount(CheckBox, {
-      props: { init: false }
+      props: { init: false },
+      attachTo: document.body
     })
     expect(wrapper.find('img').isVisible()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('gets init state according to passed props', () => {
     const wrapperChecked = shallowMount(CheckBox, {
-      props: { init: true }
+      props: { init: true },
+      attachTo: document.body
     })
-    expect(wrapperChecked.find('img').isVisible()).to.equal(true)
+    expect(wrapperChecked.find('img.checked').isVisible()).to.equal(true)
+    wrapperChecked.unmount()
+    
     const wrapperUnchecked = shallowMount(CheckBox, {
-      props: { init: false }
+      props: { init: false },
+      attachTo: document.body
     })
     expect(wrapperUnchecked.find('img').isVisible()).to.equal(false)
+    wrapperUnchecked.unmount()
   })
 
   it('checked on click', async () => {
-    const wrapper = shallowMount(CheckBox)
+    const wrapper = shallowMount(CheckBox, { attachTo: document.body })
     await wrapper.trigger('click')
-    expect(wrapper.find('img').isVisible()).to.equal(true)
+    expect(wrapper.find('img.checked').isVisible()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('emits event on click', async () => {

tests/components/CsvImport/CsvImport.spec.js

@@ -1,15 +1,16 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import { mount } from '@vue/test-utils'
 import CsvJsonImport from '@/components/CsvJsonImport'
 import csv from '@/lib/csv'
+import { nextTick } from 'vue'
+
 
 describe('CsvJsonImport.vue', () => {
   let state = {}
   let actions = {}
   let mutations = {}
-  let store = {}
   let clock
   let wrapper
   const newTabId = 1
@@ -27,7 +28,7 @@ describe('CsvJsonImport.vue', () => {
     actions = {
       addTab: sinon.stub().resolves(newTabId)
     }
-    store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
     const db = {
       sanitizeTableName: sinon.stub().returns('my_data'),
@@ -41,17 +42,25 @@ describe('CsvJsonImport.vue', () => {
 
     // mount the component
     wrapper = mount(CsvJsonImport, {
-      store,
+      global: {
+        plugins: [store],
+        stubs: {
+          teleport: true,
+          transition: false
+        }
+      },
       props: {
         file,
         dialogName: 'addCsvJson',
         db
-      }
+      },
+      attachTo: document.body
     })
   })
 
   afterEach(() => {
     sinon.restore()
+    wrapper.unmount()
   })
 
   it('previews', async () => {
@@ -76,11 +85,12 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
+    await nextTick()
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
     expect(wrapper.find('.dialog-header').text()).to.equal('CSV import')
     expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.value).to.equal('|')
+    expect(wrapper.findComponent({ name: 'delimiter-selector' }).props('modelValue')).to.equal('|')
     expect(wrapper.find('#quote-char input').element.value).to.equal('"')
     expect(wrapper.find('#escape-char input').element.value).to.equal('"')
     expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(true)
@@ -115,7 +125,8 @@ describe('CsvJsonImport.vue', () => {
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(0)
     expect(wrapper.findComponent({ name: 'logs' }).text())
@@ -123,7 +134,7 @@ describe('CsvJsonImport.vue', () => {
     expect(wrapper.find('.no-data').isVisible()).to.equal(true)
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
-    expect(wrapper.find('#import-start').attributes().disabled).to.equal('disabled')
+    expect(wrapper.find('#import-start').attributes().disabled).to.equal('')
   })
 
   it('reparses when parameters changes', async () => {
@@ -143,7 +154,8 @@ describe('CsvJsonImport.vue', () => {
     wrapper.vm.preview()
     wrapper.vm.open()
     await csv.parse.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     parse.onCall(1).resolves({
       delimiter: ',',
@@ -266,7 +278,8 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     let resolveParsing
     parse.onCall(1).returns(new Promise(resolve => {
@@ -286,7 +299,6 @@ describe('CsvJsonImport.vue', () => {
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
-    await wrapper.vm.$nextTick()
 
     // "Parsing CSV..." in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -349,7 +361,8 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     let resolveImport
     wrapper.vm.db.addTableFromCsv.onCall(0).returns(new Promise(resolve => {
@@ -359,7 +372,6 @@ describe('CsvJsonImport.vue', () => {
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -420,12 +432,12 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -483,12 +495,12 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -544,12 +556,12 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
 
     // Parsing success in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
@@ -613,12 +625,12 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
 
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -670,12 +682,12 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
 
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -711,17 +723,18 @@ describe('CsvJsonImport.vue', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#import-start').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     await wrapper.find('#import-finish').trigger('click')
-
+    await clock.tick(100)
     expect(actions.addTab.calledOnce).to.equal(true)
     await actions.addTab.returnValues[0]
     expect(mutations.setCurrentTabId.calledOnceWith(state, newTabId)).to.equal(true)
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(false)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     expect(wrapper.emitted('finish')).to.have.lengthOf(1)
   })
 
@@ -742,14 +755,15 @@ describe('CsvJsonImport.vue', () => {
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#import-start').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     await wrapper.find('#import-cancel').trigger('click')
-
+    await clock.tick(100)
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(false)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     expect(wrapper.vm.db.execute.calledOnceWith('DROP TABLE "my_data"')).to.equal(true)
     expect(wrapper.vm.db.refreshSchema.calledOnce).to.equal(true)
     expect(wrapper.emitted('cancel')).to.have.lengthOf(1)
@@ -763,23 +777,24 @@ describe('CsvJsonImport.vue', () => {
     })
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await clock.tick(400)
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('#csv-json-table-name .text-field-error').text()).to.equal('')
 
     wrapper.vm.db.validateTableName = sinon.stub().rejects(new Error('this is a bad table name'))
     await wrapper.find('#csv-json-table-name input').setValue('bar')
     await clock.tick(400)
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('#csv-json-table-name .text-field-error').text())
       .to.equal('this is a bad table name. Try another table name.')
 
     await wrapper.find('#csv-json-table-name input').setValue('')
     await clock.tick(400)
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('#csv-json-table-name .text-field-error').text()).to.equal('')
 
     await wrapper.find('#import-start').trigger('click')
@@ -793,7 +808,6 @@ describe('CsvJsonImport.vue - json', () => {
   let state = {}
   let actions = {}
   let mutations = {}
-  let store = {}
   let clock
   let wrapper
   const newTabId = 1
@@ -817,7 +831,7 @@ describe('CsvJsonImport.vue - json', () => {
     actions = {
       addTab: sinon.stub().resolves(newTabId)
     }
-    store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
     const db = {
       sanitizeTableName: sinon.stub().returns('my_data'),
@@ -831,24 +845,33 @@ describe('CsvJsonImport.vue - json', () => {
 
     // mount the component
     wrapper = mount(CsvJsonImport, {
-      store,
+      global: { 
+        plugins: [store],
+        stubs: {
+          teleport: true,
+          transition: false
+        }
+      },
       props: {
         file,
         dialogName: 'addCsvJson',
         db
-      }
+      },
+      attachTo: document.body
     })
   })
 
   afterEach(() => {
     sinon.restore()
+    wrapper.unmount()
   })
 
   it('previews', async () => {
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
+    await nextTick()
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
     expect(wrapper.find('.dialog-header').text()).to.equal('JSON import')
     expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
     expect(wrapper.findComponent({ name: 'delimiter-selector' }).exists()).to.equal(false)
@@ -906,11 +929,12 @@ describe('CsvJsonImport.vue - json', () => {
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // "Parsing JSON..." in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -946,12 +970,13 @@ describe('CsvJsonImport.vue - json', () => {
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await getJsonParseResult.returnValues[1]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Parsing success in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
@@ -984,12 +1009,14 @@ describe('CsvJsonImport.vue - json', () => {
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await getJsonParseResult.returnValues[1]
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
@@ -1008,7 +1035,6 @@ describe('CsvJsonImport.vue - ndjson', () => {
   let state = {}
   let actions = {}
   let mutations = {}
-  let store = {}
   let clock
   let wrapper
   const newTabId = 1
@@ -1026,7 +1052,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
     actions = {
       addTab: sinon.stub().resolves(newTabId)
     }
-    store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
     const db = {
       sanitizeTableName: sinon.stub().returns('my_data'),
@@ -1040,17 +1066,25 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     // mount the component
     wrapper = mount(CsvJsonImport, {
-      store,
+      global: {
+        plugins: [store],
+        stubs: {
+          teleport: true,
+          transition: false
+        }
+      },
       props: {
         file,
         dialogName: 'addCsvJson',
         db
-      }
+      },
+      attachTo: document.body
     })
   })
 
   afterEach(() => {
     sinon.restore()
+    wrapper.unmount()
   })
 
   it('previews', async () => {
@@ -1068,8 +1102,9 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     wrapper.vm.preview()
     await wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
+    await nextTick()
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
     expect(wrapper.find('.dialog-header').text()).to.equal('JSON import')
     expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
     expect(wrapper.findComponent({ name: 'delimiter-selector' }).exists()).to.equal(false)
@@ -1100,7 +1135,8 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     let resolveParsing
     parse.onCall(1).returns(new Promise(resolve => {
@@ -1119,7 +1155,7 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // "Parsing JSON..." in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
@@ -1180,12 +1216,13 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Parsing success in the logs
     expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
@@ -1243,12 +1280,13 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     wrapper.vm.preview()
     wrapper.vm.open()
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')

tests/components/CsvImport/DelimiterSelector.spec.js

@@ -1,23 +1,24 @@
 import { expect } from 'chai'
 import { mount, shallowMount } from '@vue/test-utils'
 import DelimiterSelector from '@/components/CsvJsonImport/DelimiterSelector'
+import { nextTick } from 'vue'
 
 describe('DelimiterSelector', async () => {
   it('shows the name of value', async () => {
     let wrapper = shallowMount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { modelValue: ',' }
     })
     expect(wrapper.find('input').element.value).to.equal(',')
     expect(wrapper.find('.name').text()).to.equal('comma')
 
     wrapper = shallowMount(DelimiterSelector, {
-      props: { value: '\t' }
+      props: { modelValue: '\t' }
     })
     expect(wrapper.find('input').element.value).to.equal('\t')
     expect(wrapper.find('.name').text()).to.equal('horizontal tab')
 
     wrapper = shallowMount(DelimiterSelector, {
-      props: { value: '' }
+      props: { modelValue: '' }
     })
     expect(wrapper.find('input').element.value).to.equal('')
     expect(wrapper.find('.name').text()).to.equal('')
@@ -25,7 +26,7 @@ describe('DelimiterSelector', async () => {
 
   it('clears the field', async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { modelValue: ',' }
     })
 
     await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
@@ -36,34 +37,43 @@ describe('DelimiterSelector', async () => {
 
   it('changes value by typing', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { 
+        modelValue: ',',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
     })
 
     await wrapper.find('input').setValue(';')
-    expect(wrapper.emitted().input).to.have.lengthOf(1)
+    expect(wrapper.props('modelValue')).to.eql(';')
-    expect(wrapper.emitted().input[0]).to.eql([';'])
   })
 
   it('changes value by selection from the list', async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: '|' }
+      props: {
+        modelValue: '|',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      },
+      attachTo: document.body
     })
 
     await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(true)
     await wrapper.find('.option').trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
-    expect(wrapper.emitted().input).to.have.lengthOf(1)
+    expect(wrapper.props('modelValue')).to.eql(',')
-    expect(wrapper.emitted().input[0]).to.eql([','])
+    wrapper.unmount()
   })
 
   it("doesn't change value when becomes empty", async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: '|' }
+      props: { 
+        modelValue: '|',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
     })
 
     await wrapper.find('input').setValue('')
-    expect(wrapper.emitted().input).to.equal(undefined)
+    expect(wrapper.props('modelValue')).to.eql('|')
   })
 
   it('set focus in input when click on character name', async () => {
@@ -72,7 +82,7 @@ describe('DelimiterSelector', async () => {
 
     const wrapper = mount(DelimiterSelector, {
       attachTo: place,
-      props: { value: '|' }
+      props: { modelValue: '|' }
     })
 
     await wrapper.find('.name').trigger('click')
@@ -83,23 +93,28 @@ describe('DelimiterSelector', async () => {
 
   it('disabled', async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { value: '|', disabled: true }
+      props: {
+        modelValue: '|',
+        disabled: true,
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      },
+      attachTo: document.body
     })
 
     await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
 
     expect(wrapper.find('input').element.value).to.equal('|')
-    expect(wrapper.emitted().input).to.equal(undefined)
 
     await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('has filled class when input is not empty', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      props: { value: ',' }
+      props: { modelValue: ',' }
     })
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('input').classes()).to.include('filled')
     await wrapper.find('input').setValue('')
     expect(wrapper.find('input').classes()).to.not.include('filled')

tests/components/DbUploader.spec.js

@@ -1,10 +1,12 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import { shallowMount, mount } from '@vue/test-utils'
 import DbUploader from '@/components/DbUploader'
 import fu from '@/lib/utils/fileIo'
 import database from '@/lib/database'
+import { nextTick } from 'vue'
+
 
 describe('DbUploader.vue', () => {
   let state = {}
@@ -18,7 +20,7 @@ describe('DbUploader.vue', () => {
     mutations = {
       setDb: sinon.stub()
     }
-    store = new Vuex.Store({ state, mutations })
+    store = createStore({ state, mutations })
 
     place = document.createElement('div')
     document.body.appendChild(place)
@@ -47,9 +49,9 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = shallowMount(DbUploader, {
       attachTo: place,
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -60,7 +62,7 @@ describe('DbUploader.vue', () => {
     expect(db.loadDb.calledOnceWith(file)).to.equal(true)
     await db.loadDb.returnValues[0]
     await wrapper.vm.animationPromise
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect($router.push.calledOnceWith('/workspace')).to.equal(true)
     wrapper.unmount()
   })
@@ -79,9 +81,9 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = shallowMount(DbUploader, {
       attachTo: place,
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -100,7 +102,7 @@ describe('DbUploader.vue', () => {
     expect(db.loadDb.calledOnceWith(file)).to.equal(true)
     await db.loadDb.returnValues[0]
     await wrapper.vm.animationPromise
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect($router.push.calledOnceWith('/workspace')).to.equal(true)
     wrapper.unmount()
   })
@@ -123,9 +125,9 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = shallowMount(DbUploader, {
       attachTo: place,
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -135,7 +137,7 @@ describe('DbUploader.vue', () => {
     await wrapper.find('.drop-area').trigger('click')
     await db.loadDb.returnValues[0]
     await wrapper.vm.animationPromise
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect($router.push.called).to.equal(false)
     wrapper.unmount()
   })
@@ -152,9 +154,9 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = mount(DbUploader, {
       attachTo: place,
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -167,11 +169,11 @@ describe('DbUploader.vue', () => {
     sinon.stub(CsvImport, 'open')
 
     await wrapper.find('.drop-area').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(CsvImport.reset.calledOnce).to.equal(true)
     await wrapper.vm.animationPromise
     expect(CsvImport.preview.calledOnce).to.equal(true)
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(CsvImport.open.calledOnce).to.equal(true)
     wrapper.unmount()
   })
@@ -188,9 +190,9 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = mount(DbUploader, {
       attachTo: place,
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -203,11 +205,11 @@ describe('DbUploader.vue', () => {
     sinon.stub(JsonImport, 'open')
 
     await wrapper.find('.drop-area').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(JsonImport.reset.calledOnce).to.equal(true)
     await wrapper.vm.animationPromise
     expect(JsonImport.preview.calledOnce).to.equal(true)
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(JsonImport.open.calledOnce).to.equal(true)
     wrapper.unmount()
   })
@@ -224,9 +226,9 @@ describe('DbUploader.vue', () => {
     // mount the component
     const wrapper = mount(DbUploader, {
       attachTo: place,
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -239,11 +241,11 @@ describe('DbUploader.vue', () => {
     sinon.stub(JsonImport, 'open')
 
     await wrapper.find('.drop-area').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(JsonImport.reset.calledOnce).to.equal(true)
     await wrapper.vm.animationPromise
     expect(JsonImport.preview.calledOnce).to.equal(true)
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(JsonImport.open.calledOnce).to.equal(true)
     wrapper.unmount()
   })
@@ -259,9 +261,9 @@ describe('DbUploader.vue', () => {
 
     // mount the component
     const wrapper = mount(DbUploader, {
-      store,
       global: {
-        mocks: { $router, $route }
+        mocks: { $router, $route },
+        plugins: [store]
       },
       props: {
         type: 'illustrated'
@@ -274,7 +276,7 @@ describe('DbUploader.vue', () => {
     sinon.stub(CsvImport, 'open')
 
     await wrapper.find('.drop-area').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     await CsvImport.$emit('cancel')
     expect(wrapper.vm.newDb).to.equal(null)
   })

tests/components/Logs.spec.js

@@ -1,6 +1,7 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
 import Logs from '@/components/Logs'
+import { nextTick } from 'vue'
 
 let place
 describe('Logs.vue', () => {
@@ -28,8 +29,7 @@ describe('Logs.vue', () => {
       attachTo: place,
       props: { messages, style: `height: ${containerHeight}px` }
     })
-
+    await nextTick()
-    await wrapper.vm.$nextTick()
     const height = wrapper.find('.logs-container').element.scrollHeight
     expect(wrapper.find('.logs-container').element.scrollTop)
       .to.equal(height - viewHeight)
@@ -52,11 +52,11 @@ describe('Logs.vue', () => {
       props: { messages, style: `height: ${containerHeight}px` }
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     messages.push({ type: 'error', message: 'msg 5' })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    await wrapper.vm.$nextTick()
+    await nextTick()
     const height = wrapper.find('.logs-container').element.scrollHeight
     expect(wrapper.find('.logs-container').element.scrollTop)
       .to.equal(height - viewHeight)

tests/components/Splitpanes/Splitpanes.spec.js

@@ -1,14 +1,15 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
 import Splitpanes from '@/components/Splitpanes'
+import { nextTick } from 'vue'
 
 describe('Splitpanes.vue', () => {
   it('renders correctly - vertical', () => {
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 60, max: 100 },
@@ -44,8 +45,8 @@ describe('Splitpanes.vue', () => {
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 60, max: 100 },
@@ -74,8 +75,8 @@ describe('Splitpanes.vue', () => {
     // mount the component
     let wrapper = shallowMount(Splitpanes, {
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 0, max: 100 },
@@ -130,24 +131,24 @@ describe('Splitpanes.vue', () => {
 
   it('drag - vertical', async () => {
     const root = document.createElement('div')
-    const place = document.createElement('div')
-    root.style.width = '600px'
-    root.style.height = '500px'
-    root.appendChild(place)
     document.body.appendChild(root)
+    document.body.style.margin = 0
 
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
-      attachTo: place,
+      attachTo: root,
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 60, max: 100 },
         after: { size: 40, max: 100 }
       }
     })
+    const parent = root.querySelector('[data-v-app=""]')
+    parent.style.width = '600px'
+    parent.style.height = '500px'
 
     await wrapper.find('.splitpanes-splitter').trigger('mousedown')
     document.dispatchEvent(new MouseEvent('mousemove', {
@@ -155,7 +156,7 @@ describe('Splitpanes.vue', () => {
       clientY: 80
     }))
     document.dispatchEvent(new MouseEvent('mouseup'))
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
     wrapper.unmount()
     root.remove()
@@ -163,18 +164,15 @@ describe('Splitpanes.vue', () => {
 
   it('drag - horizontal', async () => {
     const root = document.createElement('div')
-    const place = document.createElement('div')
-    root.style.width = '600px'
-    root.style.height = '500px'
-    root.appendChild(place)
     document.body.appendChild(root)
+    document.body.style.margin = 0
 
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
-      attachTo: place,
+      attachTo: root,
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 10, max: 100 },
@@ -183,13 +181,18 @@ describe('Splitpanes.vue', () => {
       }
     })
 
+    const parent = root.querySelector('[data-v-app=""]')
+    parent.style.width = '600px'
+    parent.style.height = '500px'
+
     await wrapper.find('.splitpanes-splitter').trigger('mousedown')
     document.dispatchEvent(new MouseEvent('mousemove', {
       clientX: 10,
       clientY: 250
     }))
     document.dispatchEvent(new MouseEvent('mouseup'))
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
     expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
     wrapper.unmount()
     root.remove()
@@ -197,18 +200,15 @@ describe('Splitpanes.vue', () => {
 
   it('drag - horizontal - touch', async () => {
     const root = document.createElement('div')
-    const place = document.createElement('div')
-    root.style.width = '600px'
-    root.style.height = '500px'
-    root.appendChild(place)
     document.body.appendChild(root)
+    document.body.style.margin = 0
 
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
-      attachTo: place,
+      attachTo: root,
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 10, max: 100 },
@@ -217,6 +217,10 @@ describe('Splitpanes.vue', () => {
       }
     })
 
+    const parent = root.querySelector('[data-v-app=""]')
+    parent.style.width = '600px'
+    parent.style.height = '500px'
+
     window.ontouchstart = null
     await wrapper.find('.splitpanes-splitter').trigger('touchstart')
     const event = new TouchEvent('touchmove')
@@ -229,7 +233,7 @@ describe('Splitpanes.vue', () => {
     })
     document.dispatchEvent(event)
     document.dispatchEvent(new MouseEvent('touchend'))
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
     wrapper.unmount()
     root.remove()
@@ -238,18 +242,15 @@ describe('Splitpanes.vue', () => {
 
   it('drag - vertical - touch', async () => {
     const root = document.createElement('div')
-    const place = document.createElement('div')
-    root.style.width = '600px'
-    root.style.height = '500px'
-    root.appendChild(place)
     document.body.appendChild(root)
+    document.body.style.margin = 0
 
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
-      attachTo: place,
+      attachTo: root,
       slots: {
-        leftPane: '<div />',
+        'left-pane': '<div />',
-        rightPane: '<div />'
+        'right-pane': '<div />'
       },
       props: {
         before: { size: 60, max: 100 },
@@ -257,6 +258,9 @@ describe('Splitpanes.vue', () => {
       }
     })
     window.ontouchstart = null
+    const parent = root.querySelector('[data-v-app=""]')
+    parent.style.width = '600px'
+    parent.style.height = '500px'
 
     await wrapper.find('.splitpanes-splitter').trigger('touchstart')
     const event = new TouchEvent('touchmove')
@@ -269,7 +273,7 @@ describe('Splitpanes.vue', () => {
     })
     document.dispatchEvent(event)
     document.dispatchEvent(new MouseEvent('touchend'))
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
     wrapper.unmount()
     root.remove()

tests/components/SqlTable/Pager.spec.js

@@ -8,30 +8,20 @@ describe('Pager.vue', () => {
     sinon.restore()
   })
 
-  it('emits input event with a page', async () => {
+  it('emits update:modelValue event with a page', async () => {
     const wrapper = mount(Pager, {
       props: {
-        pageCount: 5
+        pageCount: 5,
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
       }
     })
 
     // click on 'next page' link
     await wrapper.find('.paginator-next').trigger('click')
-    expect(wrapper.emitted('input')[0]).to.eql([2])
+    expect(wrapper.props('modelValue')).to.eql(2)
 
     // click on the link to page 3 (it has index 2)
     await wrapper.findAll('.paginator-page-link')[2].trigger('click')
-    expect(wrapper.emitted('input')[1]).to.eql([3])
+    expect(wrapper.props('modelValue')).to.eql(3)
-  })
-
-  it('changes the page when value is changed', async () => {
-    const wrapper = mount(Pager, {
-      props: {
-        pageCount: 5
-      }
-    })
-
-    await wrapper.setProps({ value: 5 })
-    expect(wrapper.emitted('input')[0]).to.eql([5])
   })
 })

tests/lib/chartHelper.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import * as chartHelper from '@/lib/chartHelper'
+import chartHelper from '@/lib/chartHelper'
 import * as dereference from 'react-chart-editor/lib/lib/dereference'
 
 describe('chartHelper.js', () => {

tests/tooltipMixin.spec.js

@@ -18,7 +18,7 @@ describe('tooltipMixin.js', () => {
       template: '<div :style="tooltipStyle"></div>',
       mixins: [tooltipMixin]
     }
-    const wrapper = mount(component)
+    const wrapper = mount(component, { attachTo: container })
     expect(wrapper.find('div').isVisible()).to.equal(false)
   })
 
@@ -108,7 +108,7 @@ describe('tooltipMixin.js', () => {
       template: '<div :style="tooltipStyle"></div>',
       mixins: [tooltipMixin]
     }
-    const wrapper = mount(component)
+    const wrapper = mount(component, { attachTo: container })
     await wrapper.vm.showTooltip(new MouseEvent('mouseenter', {
       clientX: 10,
       clientY: 20

tests/views/LoadView.spec.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import LoadView from '@/views/LoadView'
 import fu from '@/lib/utils/fileIo'
 import database from '@/lib/database'
@@ -26,7 +26,7 @@ describe('LoadView.vue', () => {
     const actions = {
       addTab: sinon.stub().callsFake(realActions.addTab)
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = {
       path: '/workspace',
       query: {
@@ -58,10 +58,10 @@ describe('LoadView.vue', () => {
     Tab.prototype.execute = sinon.stub()
 
     const wrapper = mount(LoadView, {
-      store,
       global: {
         mocks: { $route, $router },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -106,7 +106,7 @@ describe('LoadView.vue', () => {
     const actions = {
       addTab: sinon.stub().callsFake(realActions.addTab)
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = {
       path: '/workspace',
       query: {
@@ -136,10 +136,10 @@ describe('LoadView.vue', () => {
     })
 
     const wrapper = mount(LoadView, {
-      store,
       global: {
         mocks: { $route, $router },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 

tests/views/Main/Inquiries/Inquiries.spec.js

@@ -1,14 +1,22 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount, shallowMount } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import Inquiries from '@/views/Main/Inquiries'
 import storedInquiries from '@/lib/storedInquiries'
 import mutations from '@/store/mutations'
 import actions from '@/store/actions'
 import fu from '@/lib/utils/fileIo'
+import { nextTick } from 'vue'
+
 
 describe('Inquiries.vue', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+  })
+
   afterEach(() => {
     sinon.restore()
   })
@@ -24,10 +32,15 @@ describe('Inquiries.vue', () => {
       updatePredefinedInquiries: sinon.stub(),
       setLoadingPredefinedInquiries: sinon.stub()
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-    const wrapper = shallowMount(Inquiries, { store })
+    const wrapper = shallowMount(Inquiries, {
+      global: {
+        plugins: [store]
+      }
+    })
 
     expect(wrapper.find('#start-guide').exists()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('Renders the list of saved and predefined inquiries', async () => {
@@ -64,10 +77,13 @@ describe('Inquiries.vue', () => {
       ]
     }
 
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-    const wrapper = shallowMount(Inquiries, { store })
+    const wrapper = shallowMount(Inquiries, {
+      attachTo: document.body,
+      global: { plugins: [store] } 
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.find('#start-guide').exists()).to.equal(false)
     expect(wrapper.find('#toolbar-btns-import').isVisible()).to.equal(true)
@@ -82,6 +98,7 @@ describe('Inquiries.vue', () => {
     expect(rows[1].findAll('td')[1].text()).to.equals('3 November 2020 20:57')
     expect(rows[2].findAll('td')[0].text()).to.equals('bar')
     expect(rows[2].findAll('td')[1].text()).to.equals('4 December 2020 19:53')
+    wrapper.unmount()
   })
 
   it('Filters the list of inquiries', async () => {
@@ -118,15 +135,20 @@ describe('Inquiries.vue', () => {
       ]
     }
 
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      global: {
+        plugins: [store]
+      }
+    })
     await wrapper.find('#toolbar-search input').setValue('OO')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
     expect(rows[0].findAll('td')[0].text()).to.equals('foo')
     expect(rows[0].findAll('td')[1].text()).to.contains('3 November 2020 20:57')
+    wrapper.unmount()
   })
 
   it('Shows No found message when filter returns nothing', async () => {
@@ -163,14 +185,18 @@ describe('Inquiries.vue', () => {
       ]
     }
 
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body, 
+      global: { plugins: [store] } 
+    })
     await wrapper.find('#toolbar-search input').setValue('baz')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.find('#inquiries-not-found').text()).to.equal('No inquiries found')
     expect(wrapper.find('#start-guide').exists()).to.equal(false)
     expect(wrapper.find('tbody').isVisible()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Predefined inquiry has a badge', async () => {
@@ -199,14 +225,19 @@ describe('Inquiries.vue', () => {
       ]
     }
 
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-    const wrapper = shallowMount(Inquiries, { store })
+    const wrapper = shallowMount(Inquiries, {
+      global: {
+        plugins: [store]
+      }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows[0].find('td .badge').exists()).to.equals(true)
     expect(rows[1].find('td .badge').exists()).to.equals(false)
+    wrapper.unmount()
   })
 
   it('Exports one inquiry', async () => {
@@ -227,12 +258,13 @@ describe('Inquiries.vue', () => {
       ]
     }
 
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
     await wrapper.findComponent({ name: 'ExportIcon' }).find('svg').trigger('click')
     expect(fu.exportToFile.calledOnceWith('I am a serialized inquiry', 'foo.json')).to.equals(true)
+    wrapper.unmount()
   })
 
   it('Duplicates an inquiry', async () => {
@@ -259,11 +291,11 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [inquiryInStorage]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
     await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
 
     expect(storedInquiries.duplicateInquiry.calledOnceWith(inquiryInStorage)).to.equals(true)
@@ -273,6 +305,7 @@ describe('Inquiries.vue', () => {
     expect(rows[1].findAll('td')[0].text()).to.equals('foo copy')
     expect(rows[1].findAll('td')[1].text()).to.contains('3 December 2020 20:57')
     expect(state.inquiries).to.eql([inquiryInStorage, newInquiry])
+    wrapper.unmount()
   })
 
   it('The copy of the inquiry is not selected if all inquiries were selected before duplication',
@@ -299,11 +332,11 @@ describe('Inquiries.vue', () => {
         predefinedInquiries: [],
         inquiries: [inquiryInStorage]
       }
-      const store = new Vuex.Store({ state, mutations, actions })
+      const store = createStore({ state, mutations, actions })
 
-      const wrapper = mount(Inquiries, { store })
+      const wrapper = mount(Inquiries, { global: { plugins: [store] } })
       await storedInquiries.readPredefinedInquiries.returnValues[0]
-      await wrapper.vm.$nextTick()
+      await nextTick()
       await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
         .trigger('click')
       await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
@@ -311,6 +344,7 @@ describe('Inquiries.vue', () => {
       const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
       expect(checkboxes[0].vm.checked).to.equals(true)
       expect(checkboxes[1].vm.checked).to.equals(false)
+      wrapper.unmount()
     })
 
   it('Opens an inquiry', async () => {
@@ -332,23 +366,25 @@ describe('Inquiries.vue', () => {
     const actions = { addTab: sinon.stub().resolves(1) }
     sinon.spy(mutations, 'setCurrentTabId')
     const $router = { push: sinon.stub() }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
     const wrapper = shallowMount(Inquiries, {
-      store,
       global: {
-        mocks: { $router }
+        mocks: { $router },
+        plugins: [store]
       }
     })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
     await wrapper.find('tbody tr').trigger('click')
+    await clock.tick(0)
 
     expect(actions.addTab.calledOnce).to.equals(true)
-    expect(actions.addTab.getCall(0).args[1]).to.equals(inquiryInStorage)
+    expect(actions.addTab.getCall(0).args[1]).to.eql(inquiryInStorage)
     await actions.addTab.returnValues[0]
     expect(mutations.setCurrentTabId.calledOnceWith(state, 1)).to.equals(true)
     expect($router.push.calledOnceWith('/workspace')).to.equals(true)
+    wrapper.unmount()
   })
 
   it('Rename is not available for predefined inquiries', async () => {
@@ -367,12 +403,13 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: []
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.findComponent({ name: 'RenameIcon' }).exists()).to.equals(false)
+    wrapper.unmount()
   })
 
   it('Renames an inquiry', async () => {
@@ -392,17 +429,24 @@ describe('Inquiries.vue', () => {
         }
       ]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
-
+    const wrapper = mount(Inquiries, {
-    const wrapper = mount(Inquiries, { store })
+      attachTo: document.body,
+      global: { 
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // click Rename icon in the grid
     await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
 
     // check that rename dialog is open
-    expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Rename inquiry')
 
     // check that input is filled by the current inquiry name
     expect(wrapper.find('.dialog-body input').element.value).to.equals('foo')
@@ -412,10 +456,10 @@ describe('Inquiries.vue', () => {
 
     // find Rename in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Rename')
       .trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // check that the name in the grid is changed
     expect(wrapper.find('tbody tr td').text()).to.equals('bar')
@@ -434,7 +478,9 @@ describe('Inquiries.vue', () => {
     expect(state.tabs[0].name).to.equals('bar')
 
     // check that rename dialog is closed
-    expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Shows an error if try to rename to empty string', async () => {
@@ -454,11 +500,17 @@ describe('Inquiries.vue', () => {
         }
       ]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: {
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // click Rename icon in the grid
     await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
@@ -468,14 +520,16 @@ describe('Inquiries.vue', () => {
 
     // find Rename in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Rename')
       .trigger('click')
 
     expect(wrapper.find('.dialog-body .text-field-error').text())
       .to.equals("Inquiry name can't be empty")
     // check that rename dialog is still open
-    expect(wrapper.find('[data-modal="rename"]').exists()).to.equal(true)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('Imports inquiries', async () => {
@@ -502,11 +556,11 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [inquiryInStorage]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = shallowMount(Inquiries, { store })
+    const wrapper = shallowMount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // click Import
     await wrapper.find('#toolbar-btns-import').trigger('click')
@@ -516,6 +570,7 @@ describe('Inquiries.vue', () => {
     expect(rows[1].findAll('td')[0].text()).to.equals('bar')
     expect(rows[1].findAll('td')[1].text()).to.equals('3 December 2020 20:57')
     expect(state.inquiries).to.eql([inquiryInStorage, importedInquiry])
+    wrapper.unmount()
   })
 
   it('Imported inquiries are not selected if master check box was checked', async () => {
@@ -542,11 +597,11 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [inquiryInStorage]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // click on master checkbox
     await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
@@ -559,6 +614,7 @@ describe('Inquiries.vue', () => {
     expect(wrapper.findComponent({ ref: 'mainCheckBox' }).vm.checked).to.equals(false)
     expect(checkboxes[0].vm.checked).to.equals(true)
     expect(checkboxes[1].vm.checked).to.equals(false)
+    wrapper.unmount()
   })
   
   it('Deletion is not available for predefined inquiries', async () => {
@@ -577,12 +633,13 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: []
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.findComponent({ name: 'DeleteIcon' }).exists()).to.equals(false)
+    wrapper.unmount()
   })
 
   it('Delete an inquiry', async () => {
@@ -610,23 +667,31 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [foo, bar]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: { 
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+     })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
     // click Delete icon in the first row of the grid
     await wrapper.findComponent({ name: 'DeleteIcon' }).find('svg').trigger('click')
 
     // check that delete dialog is open
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+    .to.contain('Delete inquiry')
 
     // check the message in the dialog
     expect(wrapper.find('.dialog-body').text()).to.contains('"foo"?')
 
     // find Delete in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Delete')
       .trigger('click')
 
@@ -642,7 +707,9 @@ describe('Inquiries.vue', () => {
     expect(state.inquiries).to.eql([bar])
 
     // check that delete dialog is closed
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Group operations are available when there are checked rows', async () => {
@@ -670,11 +737,14 @@ describe('Inquiries.vue', () => {
         }
       ]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: { plugins: [store] }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(false)
     expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(false)
@@ -695,6 +765,7 @@ describe('Inquiries.vue', () => {
     await rows[0].find('.checkbox-container').trigger('click')
     expect(wrapper.find('#toolbar-btns-export').isVisible()).to.equal(true)
     expect(wrapper.find('#toolbar-btns-delete').isVisible()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('Exports a group of inquiries', async () => {
@@ -730,11 +801,11 @@ describe('Inquiries.vue', () => {
         createdAt: '2020-03-08T19:57:56.299Z'
       }]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const rows = wrapper.findAll('tbody tr')
 
@@ -751,6 +822,7 @@ describe('Inquiries.vue', () => {
     expect(
       fu.exportToFile.calledOnceWith('I am a serialized inquiries', 'My sqliteviz inquiries.json')
     ).to.equals(true)
+    wrapper.unmount()
   })
 
   it('Exports all inquiries', async () => {
@@ -779,11 +851,11 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [inquiryInStore]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
       .trigger('click')
@@ -797,6 +869,7 @@ describe('Inquiries.vue', () => {
     expect(
       fu.exportToFile.calledOnceWith('I am a serialized inquiries', 'My sqliteviz inquiries.json')
     ).to.equals(true)
+    wrapper.unmount()
   })
 
   it('Deletes a group of inquiries', async () => {
@@ -841,11 +914,17 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [foo, bar, baz]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: { 
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+       }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const rows = wrapper.findAll('tbody tr')
 
@@ -856,7 +935,7 @@ describe('Inquiries.vue', () => {
     await wrapper.find('#toolbar-btns-delete').trigger('click')
 
     // check that delete dialog is open
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // check the message in the dialog
     expect(wrapper.find('.dialog-body').text())
@@ -864,7 +943,7 @@ describe('Inquiries.vue', () => {
 
     // find Delete in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Delete')
       .trigger('click')
 
@@ -882,7 +961,9 @@ describe('Inquiries.vue', () => {
     expect(state.inquiries).to.eql([baz])
 
     // check that delete dialog is closed
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Ignores predefined inquiries during deletion', async () => {
@@ -918,11 +999,17 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [foo, bar]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: {
+        plugins: [store],
+        stubs: { teleport: true, transition: false } 
+      }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const rows = wrapper.findAll('tbody tr')
 
@@ -933,7 +1020,7 @@ describe('Inquiries.vue', () => {
     await wrapper.find('#toolbar-btns-delete').trigger('click')
 
     // check that delete dialog is open
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // check the message in the dialog
     expect(wrapper.find('.dialog-body').text())
@@ -943,7 +1030,7 @@ describe('Inquiries.vue', () => {
 
     // find Delete in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Delete')
       .trigger('click')
 
@@ -956,7 +1043,9 @@ describe('Inquiries.vue', () => {
     expect(state.inquiries).to.eql([bar])
 
     // check that delete dialog is closed
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Deletes all inquiries ignoring predefined ones', async () => {
@@ -992,11 +1081,17 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [foo, bar]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: {
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
       .trigger('click')
@@ -1004,7 +1099,7 @@ describe('Inquiries.vue', () => {
     await wrapper.find('#toolbar-btns-delete').trigger('click')
 
     // check that delete dialog is open
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // check the message in the dialog
     expect(wrapper.find('.dialog-body').text())
@@ -1014,7 +1109,7 @@ describe('Inquiries.vue', () => {
 
     // find Delete in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Delete')
       .trigger('click')
 
@@ -1026,7 +1121,9 @@ describe('Inquiries.vue', () => {
     expect(state.inquiries).to.eql([])
 
     // check that delete dialog is closed
-    expect(wrapper.find('[data-modal="delete"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Main checkbox', async () => {
@@ -1052,11 +1149,11 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [foo, bar]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const mainCheckBox = wrapper.findComponent({ ref: 'mainCheckBox' })
     // Select all with main checkbox
@@ -1076,6 +1173,7 @@ describe('Inquiries.vue', () => {
     await mainCheckBox.find('.checkbox-container').trigger('click')
     expect(checkboxes[0].vm.checked).to.equals(false)
     expect(checkboxes[0].vm.checked).to.equals(false)
+    wrapper.unmount()
   })
 
   it('Selection and filter', async () => {
@@ -1110,11 +1208,11 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: [],
       inquiries: [foo, bar]
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
 
-    const wrapper = mount(Inquiries, { store })
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const mainCheckBox = wrapper.findComponent({ ref: 'mainCheckBox' })
     // Select all with main checkbox
@@ -1128,7 +1226,7 @@ describe('Inquiries.vue', () => {
 
     // Filter
     await wrapper.find('#toolbar-search input').setValue('foo')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([1])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(1)
     checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
@@ -1136,7 +1234,7 @@ describe('Inquiries.vue', () => {
 
     // Clear filter
     await wrapper.find('#toolbar-search input').setValue('')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([1])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(1)
     checkboxes = wrapper.findAll('tr .checkbox-container')
@@ -1151,7 +1249,7 @@ describe('Inquiries.vue', () => {
 
     // Filter
     await wrapper.find('#toolbar-search input').setValue('hello')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect([...wrapper.vm.selectedInquiriesIds]).to.eql([0])
     expect(wrapper.vm.selectedNotPredefinedCount).to.eql(0)
     checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
@@ -1162,7 +1260,8 @@ describe('Inquiries.vue', () => {
 
     // Clear filter - main checkbox bocomes not checked
     await wrapper.find('#toolbar-search input').setValue('')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(mainCheckBox.vm.checked).to.equals(false)
+    wrapper.unmount()
   })
 })

tests/views/Main/MainMenu.spec.js

@@ -1,13 +1,23 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { mount, shallowMount, DOMWrapper } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import MainMenu from '@/views/Main/MainMenu'
 import storedInquiries from '@/lib/storedInquiries'
+import { nextTick } from 'vue'
+import eventBus from '@/lib/eventBus'
 
 let wrapper = null
 
 describe('MainMenu.vue', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+    sinon.spy(eventBus, '$emit')
+    sinon.spy(eventBus, '$off')
+  })
+
   afterEach(() => {
     sinon.restore()
 
@@ -22,22 +32,33 @@ describe('MainMenu.vue', () => {
       tabs: [{}],
       db: {}
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
     const $route = { path: '/workspace' }
-    // mount the component
+    // mount the component on workspace
     wrapper = shallowMount(MainMenu, {
-      store,
+      attachTo: document.body,
       global: {
         mocks: { $route },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
     expect(wrapper.find('#save-btn').exists()).to.equal(true)
     expect(wrapper.find('#save-btn').isVisible()).to.equal(true)
     expect(wrapper.find('#create-btn').exists()).to.equal(true)
     expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
+    wrapper.unmount()
 
-    await wrapper.vm.$set(wrapper.vm.$route, 'path', '/inquiries')
+    $route.path = '/inquiries'
+    // mount the component on inquiries
+    wrapper = shallowMount(MainMenu, {
+      attachTo: document.body,
+      global: {
+        mocks: { $route },
+        stubs: ['router-link'],
+        plugins: [store]
+      }
+    })
     expect(wrapper.find('#save-btn').exists()).to.equal(true)
     expect(wrapper.find('#save-btn').isVisible()).to.equal(false)
     expect(wrapper.find('#create-btn').exists()).to.equal(true)
@@ -50,13 +71,14 @@ describe('MainMenu.vue', () => {
       tabs: [],
       db: {}
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
     const $route = { path: '/workspace' }
     wrapper = shallowMount(MainMenu, {
-      store,
+      attachTo: document.body,
       global: {
         mocks: { $route },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
     expect(wrapper.find('#save-btn').exists()).to.equal(true)
@@ -77,20 +99,20 @@ describe('MainMenu.vue', () => {
       tabs: [tab],
       db: {}
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
     const $route = { path: '/workspace' }
 
     wrapper = shallowMount(MainMenu, {
-      store,
       global: {
         mocks: { $route },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
     const vm = wrapper.vm
     expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
 
-    await vm.$set(state.tabs[0], 'isSaved', true)
+    store.state.tabs[0].isSaved = true
     await vm.$nextTick()
     expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
   })
@@ -113,15 +135,15 @@ describe('MainMenu.vue', () => {
     const mutations = {
       setCurrentTabId: sinon.stub()
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = { path: '/workspace' }
     const $router = { push: sinon.stub() }
 
     wrapper = shallowMount(MainMenu, {
-      store,
       global: {
         mocks: { $route, $router },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -150,15 +172,15 @@ describe('MainMenu.vue', () => {
     const mutations = {
       setCurrentTabId: sinon.stub()
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = { path: '/inquiries' }
     const $router = { push: sinon.stub() }
 
     wrapper = shallowMount(MainMenu, {
-      store,
       global: {
         mocks: { $route, $router },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -181,15 +203,15 @@ describe('MainMenu.vue', () => {
         tabs: [tab],
         db: {}
       }
-      const store = new Vuex.Store({ state })
+      const store = createStore({ state })
       const $route = { path: '/workspace' }
       const $router = { push: sinon.stub() }
 
       wrapper = shallowMount(MainMenu, {
-        store,
         global: {
           mocks: { $route, $router },
-          stubs: ['router-link']
+          stubs: ['router-link'],
+          plugins: [store]
         }
       })
 
@@ -202,15 +224,15 @@ describe('MainMenu.vue', () => {
       expect(state.currentTab.execute.calledTwice).to.equal(true)
 
       // Running is disabled and route path is workspace
-      await wrapper.vm.$set(state, 'db', null)
+      store.state.db = null
       document.dispatchEvent(ctrlR)
       expect(state.currentTab.execute.calledTwice).to.equal(true)
       document.dispatchEvent(metaR)
       expect(state.currentTab.execute.calledTwice).to.equal(true)
 
       // Running is enabled and route path is not workspace
-      await wrapper.vm.$set(state, 'db', {})
+      state.db = {}
-      await wrapper.vm.$set($route, 'path', '/inquiries')
+      wrapper.vm.$route.path = '/inquiries'
       document.dispatchEvent(ctrlR)
       expect(state.currentTab.execute.calledTwice).to.equal(true)
       document.dispatchEvent(metaR)
@@ -229,15 +251,15 @@ describe('MainMenu.vue', () => {
         tabs: [tab],
         db: {}
       }
-      const store = new Vuex.Store({ state })
+      const store = createStore({ state })
       const $route = { path: '/workspace' }
       const $router = { push: sinon.stub() }
 
       wrapper = shallowMount(MainMenu, {
-        store,
         global: {
           mocks: { $route, $router },
-          stubs: ['router-link']
+          stubs: ['router-link'],
+          plugins: [store]
         }
       })
 
@@ -250,15 +272,15 @@ describe('MainMenu.vue', () => {
       expect(state.currentTab.execute.calledTwice).to.equal(true)
 
       // Running is disabled and route path is workspace
-      await wrapper.vm.$set(state, 'db', null)
+      store.state.db = null
       document.dispatchEvent(ctrlEnter)
       expect(state.currentTab.execute.calledTwice).to.equal(true)
       document.dispatchEvent(metaEnter)
       expect(state.currentTab.execute.calledTwice).to.equal(true)
 
       // Running is enabled and route path is not workspace
-      await wrapper.vm.$set(state, 'db', {})
+      store.state.db = {}
-      await wrapper.vm.$set($route, 'path', '/inquiries')
+      wrapper.vm.$route.path = '/inquiries'
       document.dispatchEvent(ctrlEnter)
       expect(state.currentTab.execute.calledTwice).to.equal(true)
       document.dispatchEvent(metaEnter)
@@ -276,14 +298,14 @@ describe('MainMenu.vue', () => {
       tabs: [tab],
       db: {}
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
     const $route = { path: '/workspace' }
 
     wrapper = shallowMount(MainMenu, {
-      store,
       global: {
         mocks: { $route },
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
     sinon.stub(wrapper.vm, 'createNewInquiry')
@@ -295,7 +317,7 @@ describe('MainMenu.vue', () => {
     document.dispatchEvent(metaB)
     expect(wrapper.vm.createNewInquiry.calledTwice).to.equal(true)
 
-    await wrapper.vm.$set($route, 'path', '/inquiries')
+    wrapper.vm.$route.path = '/inquiries'
     document.dispatchEvent(ctrlB)
     expect(wrapper.vm.createNewInquiry.calledThrice).to.equal(true)
     document.dispatchEvent(metaB)
@@ -314,14 +336,14 @@ describe('MainMenu.vue', () => {
         tabs: [tab],
         db: {}
       }
-      const store = new Vuex.Store({ state })
+      const store = createStore({ state })
       const $route = { path: '/workspace' }
 
       wrapper = shallowMount(MainMenu, {
-        store,
         global: {
           mocks: { $route },
-          stubs: ['router-link']
+          stubs: ['router-link'],
+          plugins: [store]
         }
       })
       sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
@@ -335,15 +357,15 @@ describe('MainMenu.vue', () => {
       expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
 
       // tab is saved and route is /workspace
-      await wrapper.vm.$set(state.tabs[0], 'isSaved', true)
+      store.state.tabs[0].isSaved = true
       document.dispatchEvent(ctrlS)
       expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
       document.dispatchEvent(metaS)
       expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
 
       // tab is unsaved and route is not /workspace
-      await wrapper.vm.$set($route, 'path', '/inquiries')
+      wrapper.vm.$route.path = '/inquiries'
-      await wrapper.vm.$set(state.tabs[0], 'isSaved', false)
+      store.state.tabs[0].isSaved = false
       document.dispatchEvent(ctrlS)
       expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
       document.dispatchEvent(metaS)
@@ -376,22 +398,26 @@ describe('MainMenu.vue', () => {
           viewOptions: []
         })
       }
-      const store = new Vuex.Store({ state, mutations, actions })
+      const store = createStore({ state, mutations, actions })
       const $route = { path: '/workspace' }
       sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
 
       wrapper = mount(MainMenu, {
-        store,
+        attachTo: document.body,
         global: {
           mocks: { $route },
-          stubs: ['router-link', 'app-diagnostic-info']
+          stubs: {
+            'router-link': true, 'app-diagnostic-info': true,
+            teleport: true, transition: false
+          },
+          plugins: [store]
         }
       })
 
       await wrapper.find('#save-btn').trigger('click')
 
       // check that the dialog is closed
-      expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
+      expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
 
       // check that the inquiry was saved via saveInquiry (newName='')
       expect(actions.saveInquiry.calledOnce).to.equal(true)
@@ -412,8 +438,8 @@ describe('MainMenu.vue', () => {
         }
       }))).to.equal(true)
 
-      // check that 'inquirySaved' event was triggered on $root
+      // check that 'inquirySaved' event was triggered on eventBus
-      expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
+      expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
     })
 
   it('Shows en error when the new name is needed but not specifyied', async () => {
@@ -442,32 +468,39 @@ describe('MainMenu.vue', () => {
         viewOptions: []
       })
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = { path: '/workspace' }
     sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
 
     wrapper = mount(MainMenu, {
-      store,
+      attachTo: document.body,
       global: {
         mocks: { $route },
-        stubs: ['router-link', 'app-diagnostic-info']
+        stubs: {
+          'router-link': true, 'app-diagnostic-info': true,
+          teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
     await wrapper.find('#save-btn').trigger('click')
 
     // check that the dialog is open
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Save inquiry')
 
     // find Save in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Save')
       .trigger('click')
 
     // check that we have an error message and dialog is still open
     expect(wrapper.find('.text-field-error').text()).to.equal('Inquiry name can\'t be empty')
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
   })
 
   it('Saves the inquiry with a new name', async () => {
@@ -496,36 +529,43 @@ describe('MainMenu.vue', () => {
         viewOptions: []
       })
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = { path: '/workspace' }
     sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
 
     wrapper = mount(MainMenu, {
-      store,
+      attachTo: document.body,
       global: {
         mocks: { $route },
-        stubs: ['router-link', 'app-diagnostic-info']
+        stubs: {
+          'router-link': true, 'app-diagnostic-info': true,
+          teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
     await wrapper.find('#save-btn').trigger('click')
 
     // check that the dialog is open
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Save inquiry')
 
     // enter the new name
     await wrapper.find('.dialog-body input').setValue('foo')
 
     // find Save in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Save')
       .trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // check that the dialog is closed
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
 
     // check that the inquiry was saved via saveInquiry (newName='foo')
     expect(actions.saveInquiry.calledOnce).to.equal(true)
@@ -547,8 +587,8 @@ describe('MainMenu.vue', () => {
       }
     }))).to.equal(true)
 
-    // check that 'inquirySaved' event was triggered on $root
+    // check that 'inquirySaved' event was triggered on eventBus
-    expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
+    expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
   })
 
   it('Saves a predefined inquiry with a new name', async () => {
@@ -586,22 +626,28 @@ describe('MainMenu.vue', () => {
         viewOptions: []
       })
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = { path: '/workspace' }
     sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
 
     wrapper = mount(MainMenu, {
-      store,
+      attachTo: document.body,
       global: {
         mocks: { $route },
-        stubs: ['router-link', 'app-diagnostic-info']
+        stubs: {
+          'router-link': true, 'app-diagnostic-info': true,
+          teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
     await wrapper.find('#save-btn').trigger('click')
 
     // check that the dialog is open
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Save inquiry')
 
     // check that save-note is visible (save-note is an explanation why do we need a new name)
     expect(wrapper.find('#save-note').isVisible()).to.equal(true)
@@ -611,14 +657,15 @@ describe('MainMenu.vue', () => {
 
     // find Save in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Save')
       .trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // check that the dialog is closed
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
 
     // check that the inquiry was saved via saveInquiry (newName='bar')
     expect(actions.saveInquiry.calledOnce).to.equal(true)
@@ -640,8 +687,8 @@ describe('MainMenu.vue', () => {
       }
     }))).to.equal(true)
 
-    // check that 'inquirySaved' event was triggered on $root
+    // check that 'inquirySaved' event was triggered on eventBus
-    expect(new DOMWrapper(wrapper.vm.$root).emitted('inquirySaved')).to.have.lengthOf(1)
+    expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
 
     // We saved predefined inquiry, so the tab will be created again
     // (because of new id) and it will be without sql result and has default view - table.
@@ -682,31 +729,38 @@ describe('MainMenu.vue', () => {
         chart: []
       })
     }
-    const store = new Vuex.Store({ state, mutations, actions })
+    const store = createStore({ state, mutations, actions })
     const $route = { path: '/workspace' }
     sinon.stub(storedInquiries, 'isTabNeedName').returns(true)
 
     wrapper = mount(MainMenu, {
-      store,
+      attachTo: document.body,
       global: {
         mocks: { $route },
-        stubs: ['router-link', 'app-diagnostic-info']
+        stubs: {
+          'router-link': true, 'app-diagnostic-info': true,
+          teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
     await wrapper.find('#save-btn').trigger('click')
 
     // check that the dialog is open
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Save inquiry')
 
     // find Cancel in the dialog and click
     await wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Cancel')
       .trigger('click')
 
     // check that the dialog is closed
-    expect(wrapper.find('[data-modal="save"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
 
     // check that the inquiry was not saved via storedInquiries.save
     expect(actions.saveInquiry.called).to.equal(false)
@@ -714,7 +768,7 @@ describe('MainMenu.vue', () => {
     // check that the tab was not updated
     expect(mutations.updateTab.called).to.equal(false)
 
-    // check that 'inquirySaved' event is not listened on $root
+    // check that 'inquirySaved' event is not listened on eventBus
-    expect(wrapper.vm.$root.$listeners).to.not.have.property('inquirySaved')
+    expect(eventBus.$off.calledOnceWith('inquirySaved')).to.equal(true)
   })
 })

tests/views/Main/Workspace/Schema/Schema.spec.js

@@ -9,8 +9,16 @@ import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
 import database from '@/lib/database'
 import fIo from '@/lib/utils/fileIo'
 import csv from '@/lib/csv'
+import { nextTick } from 'vue'
+
 
 describe('Schema.vue', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+  })
+
   afterEach(() => {
     sinon.restore()
   })
@@ -34,6 +42,7 @@ describe('Schema.vue', () => {
     // check DB name and schema visibility
     expect(wrapper.find('.db-name').text()).to.equal('fooDB')
     expect(wrapper.find('.schema').isVisible()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('Schema visibility is toggled when click on DB name', async () => {
@@ -47,6 +56,7 @@ describe('Schema.vue', () => {
 
     // mout the component
     const wrapper = mount(Schema, {
+      attachTo: document.body,
       global: {
         plugins: [store]
       }
@@ -57,6 +67,7 @@ describe('Schema.vue', () => {
     expect(wrapper.find('.schema').isVisible()).to.equal(false)
     await wrapper.find('.db-name').trigger('click')
     expect(wrapper.find('.schema').isVisible()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('Schema filter', async () => {
@@ -117,6 +128,7 @@ describe('Schema.vue', () => {
     expect(tables[0].vm.name).to.equal('foo')
     expect(tables[1].vm.name).to.equal('bar')
     expect(tables[2].vm.name).to.equal('foobar')
+    wrapper.unmount()
   })
 
   it('exports db', async () => {
@@ -135,6 +147,7 @@ describe('Schema.vue', () => {
 
     await wrapper.findComponent({ name: 'export-icon' }).find('svg').trigger('click')
     expect(state.db.export.calledOnceWith('fooDB'))
+    wrapper.unmount()
   })
 
   it('adds table', async () => {
@@ -165,8 +178,10 @@ describe('Schema.vue', () => {
 
     const store = createStore({ state, actions, mutations })
     const wrapper = mount(Schema, {
+      attachTo: document.body,
       global: {
-        plugins: [store]
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
       }
     })
     sinon.spy(wrapper.vm.$refs.addCsvJson, 'preview')
@@ -176,13 +191,16 @@ describe('Schema.vue', () => {
     await wrapper.findComponent({ name: 'add-table-icon' }).find('svg').trigger('click')
     await wrapper.vm.$refs.addCsvJson.preview.returnValues[0]
     await wrapper.vm.addCsvJson.returnValues[0]
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('CSV import')
     await wrapper.find('#import-start').trigger('click')
     await wrapper.vm.$refs.addCsvJson.loadToDb.returnValues[0]
     await wrapper.find('#import-finish').trigger('click')
-    expect(wrapper.find('[data-modal="addCsvJson"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     await state.db.refreshSchema.returnValues[0]
 
     expect(wrapper.vm.$store.state.db.schema).to.eql([
@@ -195,5 +213,6 @@ describe('Schema.vue', () => {
       col1: [1],
       col2: ['foo']
     })
+    wrapper.unmount()
   })
 })

tests/views/Main/Workspace/Schema/TableDescription.spec.js

@@ -5,6 +5,7 @@ import TableDescription from '@/views/Main/Workspace/Schema/TableDescription'
 describe('TableDescription.vue', () => {
   it('Initially the columns are hidden and table name is rendered', () => {
     const wrapper = shallowMount(TableDescription, {
+      attachTo: document.body,
       props: {
         name: 'Test table',
         columns: [
@@ -15,6 +16,7 @@ describe('TableDescription.vue', () => {
     })
     expect(wrapper.find('.table-name').text()).to.equal('Test table')
     expect(wrapper.find('.columns').isVisible()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Columns are visible and correct when click on table name', async () => {

tests/views/Main/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js

@@ -5,6 +5,7 @@ import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import * as dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
+import { nextTick } from 'vue'
 
 describe('Chart.vue', () => {
   afterEach(() => {
@@ -19,13 +20,15 @@ describe('Chart.vue', () => {
     const chartData = vm.getOptionsForSave()
     expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
     expect(chartData).to.equal('result')
+    wrapper.unmount()
   })
 
   it('emits update when plotly updates', async () => {
     // mount the component
     const wrapper = mount(Chart)
-    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('onUpdate')
+    wrapper.findComponent({ ref: 'plotlyEditor' }).vm.$emit('update')
     expect(wrapper.emitted('update')).to.have.lengthOf(1)
+    wrapper.unmount()
   })
 
   it('calls dereference when dataSources is changed', async () => {
@@ -47,6 +50,7 @@ describe('Chart.vue', () => {
 
     await wrapper.setProps({ dataSources: newDataSources })
     expect(dereference.default.called).to.equal(true)
+    wrapper.unmount()
   })
 
   it("doesn't calls dereference when dataSources is null", async () => {
@@ -63,6 +67,7 @@ describe('Chart.vue', () => {
 
     await wrapper.setProps({ dataSources: null })
     expect(dereference.default.called).to.equal(false)
+    wrapper.unmount()
   })
 
   it('saveAsPng', async () => {
@@ -77,11 +82,12 @@ describe('Chart.vue', () => {
     })
     sinon.spy(wrapper.vm, 'prepareCopy')
 
-    await wrapper.vm.$nextTick() // chart is rendered
+    await nextTick() // chart is rendered
     await wrapper.vm.saveAsPng()
 
     const url = await wrapper.vm.prepareCopy.returnValues[0]
     expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
     expect(fIo.downloadFromUrl.calledOnceWith(url, 'chart'))
+    wrapper.unmount()
   })
 })

tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js

@@ -1,7 +1,8 @@
 import { expect } from 'chai'
-import { mount, DOMWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import DataView from '@/views/Main/Workspace/Tabs/Tab/DataView'
 import sinon from 'sinon'
+import { nextTick } from 'vue'
 
 describe('DataView.vue', () => {
   afterEach(() => {
@@ -11,10 +12,11 @@ describe('DataView.vue', () => {
   it('emits update on mode changing', async () => {
     const wrapper = mount(DataView)
 
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     expect(wrapper.emitted('update')).to.have.lengthOf(1)
+    wrapper.unmount()
   })
 
   it('method getOptionsForSave calls the same method of the current view component', async () => {
@@ -25,13 +27,14 @@ describe('DataView.vue', () => {
 
     expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'chart_settings' })
 
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     const pivot = wrapper.findComponent({ name: 'pivot' }).vm
     sinon.stub(pivot, 'getOptionsForSave').returns({ here_are: 'pivot_settings' })
 
     expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'pivot_settings' })
+    wrapper.unmount()
   })
 
   it('method saveAsSvg calls the same method of the current view component', async () => {
@@ -42,12 +45,12 @@ describe('DataView.vue', () => {
     sinon.spy(chart, 'saveAsSvg')
 
     // Export to svg
-    const svgBtn = new DOMWrapper(wrapper.findComponent({ name: 'exportToSvgIcon' }).vm.$parent)
+    const svgBtn = wrapper.findComponent({ ref: 'svgExportBtn' })
     await svgBtn.trigger('click')
     expect(chart.saveAsSvg.calledOnce).to.equal(true)
 
     // Switch to pivot
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     // Find pivot and spy the method
@@ -61,6 +64,7 @@ describe('DataView.vue', () => {
     // Export to svg
     await svgBtn.trigger('click')
     expect(pivot.saveAsSvg.calledOnce).to.equal(true)
+    wrapper.unmount()
   })
 
   it('method saveAsHtml calls the same method of the current view component', async () => {
@@ -71,12 +75,12 @@ describe('DataView.vue', () => {
     sinon.spy(chart, 'saveAsHtml')
 
     // Export to html
-    const htmlBtn = new DOMWrapper(wrapper.findComponent({ name: 'htmlIcon' }).vm.$parent)
+    const htmlBtn = wrapper.findComponent({ ref: 'htmlExportBtn' })
     await htmlBtn.trigger('click')
     expect(chart.saveAsHtml.calledOnce).to.equal(true)
 
     // Switch to pivot
-    const pivotBtn = new DOMWrapper(wrapper.findComponent({ name: 'pivotIcon' }).vm.$parent)
+    const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     // Find pivot and spy the method
@@ -86,6 +90,7 @@ describe('DataView.vue', () => {
     // Export to svg
     await htmlBtn.trigger('click')
     expect(pivot.saveAsHtml.calledOnce).to.equal(true)
+    wrapper.unmount()
   })
 
   it('shows alert when ClipboardItem is not supported', async () => {
@@ -94,7 +99,7 @@ describe('DataView.vue', () => {
     sinon.spy(window, 'alert')
     const wrapper = mount(DataView)
 
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     expect(
@@ -106,35 +111,44 @@ describe('DataView.vue', () => {
     ).to.equal(true)
 
     window.ClipboardItem = ClipboardItem
+    wrapper.unmount()
   })
 
   it('copy to clipboard more than 1 sec', async () => {
     sinon.stub(window.navigator.clipboard, 'write').resolves()
     const clock = sinon.useFakeTimers()
-    const wrapper = mount(DataView)
+    const wrapper = mount(DataView, {
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
+      attachTo: document.body,
-      clock.tick(5000)
+      global: {
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
+      await clock.tick(5000)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Copy to clipboard')
 
     // ... with Rendering message...
     expect(wrapper.find('.dialog-body').text()).to.equal('Rendering the visualisation...')
 
     // Switch to microtasks (let prepareCopy run)
-    clock.tick(0)
+    await clock.tick(0)
     // Wait untill prepareCopy is finished
     await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
+    await nextTick()
 
     // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // ... with Ready message...
     expect(wrapper.find('.dialog-body').text()).to.equal('Image is ready')
@@ -143,7 +157,9 @@ describe('DataView.vue', () => {
     await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
 
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('copy to clipboard less than 1 sec', async () => {
@@ -151,52 +167,60 @@ describe('DataView.vue', () => {
     const clock = sinon.useFakeTimers()
     const wrapper = mount(DataView)
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
+    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
-      clock.tick(500)
+      await clock.tick(500)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let prepareCopy run)
-    clock.tick(0)
+    await clock.tick(0)
     // Wait untill prepareCopy is finished
     await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     // The dialog is not shown...
     expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
     // copyToClipboard is called
     expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
+    wrapper.unmount()
   })
 
   it('cancel long copy', async () => {
     sinon.stub(window.navigator.clipboard, 'write').resolves()
     const clock = sinon.useFakeTimers()
-    const wrapper = mount(DataView)
+    const wrapper = mount(DataView, {
+      attachTo: document.body,
+      global: {
+        stubs: { teleport: true, transition: false }
+      }
+    })
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(() => {
+    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
-      clock.tick(5000)
+      await clock.tick(5000)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let prepareCopy run)
-    clock.tick(0)
+    await clock.tick(0)
     // Wait untill prepareCopy is finished
     await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Click cancel
     await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
 
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCopy"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     // copyToClipboard is not called
     expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
+    wrapper.unmount()
   })
 })

tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js

@@ -123,7 +123,7 @@ describe('Pivot.vue', () => {
       }
     })
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['year'],
       cols: ['item'],
       colOrder: 'value_a_to_z',
@@ -132,9 +132,10 @@ describe('Pivot.vue', () => {
       aggregatorName: 'Count',
       renderer: $.pivotUtilities.renderers.Table,
       rendererName: 'Table',
-      rendererOptions: undefined,
       vals: []
     })
+    sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'getOptionsForSave')
+      .returns({ here_are: 'custom chart settings' })
 
     let optionsForSave = wrapper.vm.getOptionsForSave()
 
@@ -147,7 +148,7 @@ describe('Pivot.vue', () => {
     expect(optionsForSave.rendererOptions).to.equal(undefined)
     expect(optionsForSave.vals).to.eql([])
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['item'],
       cols: ['year'],
       colOrder: 'value_a_to_z',
@@ -156,14 +157,6 @@ describe('Pivot.vue', () => {
       aggregatorName: 'Count',
       renderer: $.pivotUtilities.renderers['Custom chart'],
       rendererName: 'Custom chart',
-      rendererOptions: {
-        customChartComponent: {
-          $mount: sinon.stub(),
-          getOptionsForSave () {
-            return { here_are: 'custom chart settings' }
-          }
-        }
-      },
       vals: []
     })
 
@@ -202,7 +195,10 @@ describe('Pivot.vue', () => {
 
     expect(await wrapper.vm.prepareCopy()).to.be.instanceof(HTMLCanvasElement)
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'prepareCopy')
+      .returns(URL.createObjectURL(new Blob()))
+
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['item'],
       cols: ['year'],
       colOrder: 'value_a_to_z',
@@ -211,18 +207,12 @@ describe('Pivot.vue', () => {
       aggregatorName: 'Count',
       renderer: $.pivotUtilities.renderers['Custom chart'],
       rendererName: 'Custom chart',
-      rendererOptions: {
-        customChartComponent: {
-          $mount: sinon.stub(),
-          prepareCopy: sinon.stub().returns(URL.createObjectURL(new Blob()))
-        }
-      },
       vals: []
     })
 
     expect(await wrapper.vm.prepareCopy()).to.be.a('string')
 
-    await wrapper.findComponent({ name: 'pivotUi' }).vm.$emit('input', {
+    await wrapper.findComponent({ name: 'pivotUi' }).setValue({
       rows: ['item'],
       cols: ['year'],
       colOrder: 'value_a_to_z',
@@ -265,7 +255,7 @@ describe('Pivot.vue', () => {
       attachTo: container
     })
 
-    const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
+    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
     sinon.stub(chartComponent, 'saveAsSvg')
 
     await wrapper.vm.saveAsSvg()
@@ -300,7 +290,7 @@ describe('Pivot.vue', () => {
       attachTo: container
     })
 
-    const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
+    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
     sinon.stub(chartComponent, 'saveAsHtml')
 
     await wrapper.vm.saveAsHtml()
@@ -335,7 +325,7 @@ describe('Pivot.vue', () => {
       attachTo: container
     })
 
-    const chartComponent = wrapper.vm.pivotOptions.rendererOptions.customChartComponent
+    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
     sinon.stub(chartComponent, 'saveAsPng')
 
     await wrapper.vm.saveAsPng()

tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js

@@ -4,18 +4,23 @@ import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi
 
 describe('PivotSortBtn.vue', () => {
   it('switches order', async () => {
-    const wrapper = shallowMount(PivotSortBtn, { props: { value: 'key_a_to_z' } })
+    const wrapper = shallowMount(PivotSortBtn, { 
+      props: {
+        modelValue: 'key_a_to_z',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
+    })
 
-    expect(wrapper.vm.value).to.equal('key_a_to_z')
+    expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
     await wrapper.find('.pivot-sort-btn').trigger('click')
-    expect(wrapper.emitted('input')[0]).to.eql(['value_a_to_z'])
+    expect(wrapper.props('modelValue')).to.equal('value_a_to_z')
 
-    await wrapper.setProps({ value: 'value_a_to_z' })
+    await wrapper.setValue('value_a_to_z')
     await wrapper.find('.pivot-sort-btn').trigger('click')
-    expect(wrapper.emitted('input')[1]).to.eql(['value_z_to_a'])
+    expect(wrapper.props('modelValue')).to.equal('value_z_to_a')
 
-    await wrapper.setProps({ value: 'value_z_to_a' })
+    await wrapper.setValue('value_z_to_a')
     await wrapper.find('.pivot-sort-btn').trigger('click')
-    expect(wrapper.emitted('input')[2]).to.eql(['key_a_to_z'])
+    expect(wrapper.props('modelValue')).to.equal('key_a_to_z')
   })
 })

tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js

@@ -6,7 +6,8 @@ describe('PivotUi.vue', () => {
   it('returns value when settings changed', async () => {
     const wrapper = mount(PivotUi, {
       props: {
-        keyNames: ['foo', 'bar']
+        keyNames: ['foo', 'bar'],
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
       }
     })
 
@@ -15,68 +16,74 @@ describe('PivotUi.vue', () => {
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(1)
-    expect(wrapper.emitted().input[0][0].rows).to.eql([])
+   
-    expect(wrapper.emitted().input[0][0].cols).to.eql(['foo'])
+    let value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[0][0].colOrder).to.equal('key_a_to_z')
+    expect(value.rows).to.eql([])
-    expect(wrapper.emitted().input[0][0].rowOrder).to.equal('key_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[0][0].aggregatorName).to.equal('Count')
+    expect(value.colOrder).to.equal('key_a_to_z')
-    expect(wrapper.emitted().input[0][0].rendererName).to.equal('Table')
+    expect(value.rowOrder).to.equal('key_a_to_z')
-    expect(wrapper.emitted().input[0][0].rendererOptions).to.equal(undefined)
+    expect(value.aggregatorName).to.equal('Count')
-    expect(wrapper.emitted().input[0][0].vals).to.eql([])
+    expect(value.rendererName).to.equal('Table')
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
 
     // choose rows
     await wrapper.findAll('.sqliteviz-select.rows .multiselect__element > span')[0]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(2)
-    expect(wrapper.emitted().input[1][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[1][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[1][0].colOrder).to.equal('key_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[1][0].rowOrder).to.equal('key_a_to_z')
+    expect(value.colOrder).to.equal('key_a_to_z')
-    expect(wrapper.emitted().input[1][0].aggregatorName).to.equal('Count')
+    expect(value.rowOrder).to.equal('key_a_to_z')
-    expect(wrapper.emitted().input[1][0].rendererName).to.equal('Table')
+    expect(value.aggregatorName).to.equal('Count')
-    expect(wrapper.emitted().input[1][0].rendererOptions).to.equal(undefined)
+    expect(value.rendererName).to.equal('Table')
-    expect(wrapper.emitted().input[1][0].vals).to.eql([])
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
 
     // change column order
     await wrapper.find('.pivot-sort-btn.col').trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(3)
-    expect(wrapper.emitted().input[2][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[2][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[2][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[2][0].rowOrder).to.equal('key_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[2][0].aggregatorName).to.equal('Count')
+    expect(value.rowOrder).to.equal('key_a_to_z')
-    expect(wrapper.emitted().input[2][0].rendererName).to.equal('Table')
+    expect(value.aggregatorName).to.equal('Count')
-    expect(wrapper.emitted().input[2][0].rendererOptions).to.equal(undefined)
+    expect(value.rendererName).to.equal('Table')
-    expect(wrapper.emitted().input[2][0].vals).to.eql([])
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
 
     // change row order
     await wrapper.find('.pivot-sort-btn.row').trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(4)
-    expect(wrapper.emitted().input[3][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[3][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[3][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[3][0].rowOrder).to.equal('value_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[3][0].aggregatorName).to.equal('Count')
+    expect(value.rowOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[3][0].rendererName).to.equal('Table')
+    expect(value.aggregatorName).to.equal('Count')
-    expect(wrapper.emitted().input[3][0].rendererOptions).to.equal(undefined)
+    expect(value.rendererName).to.equal('Table')
-    expect(wrapper.emitted().input[3][0].vals).to.eql([])
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql([])
 
     // change aggregator
     await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[12]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(5)
-    expect(wrapper.emitted().input[4][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[4][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[4][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[4][0].rowOrder).to.equal('value_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[4][0].aggregatorName).to.equal('Sum over Sum')
+    expect(value.rowOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[4][0].rendererName).to.equal('Table')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
-    expect(wrapper.emitted().input[4][0].rendererOptions).to.equal(undefined)
+    expect(value.rendererName).to.equal('Table')
-    expect(wrapper.emitted().input[4][0].vals).to.eql(['', ''])
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql(['', ''])
 
     // set first aggregator argument
     await wrapper
@@ -85,14 +92,15 @@ describe('PivotUi.vue', () => {
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(6)
-    expect(wrapper.emitted().input[5][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[5][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[5][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[5][0].rowOrder).to.equal('value_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[5][0].aggregatorName).to.equal('Sum over Sum')
+    expect(value.rowOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[5][0].rendererName).to.equal('Table')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
-    expect(wrapper.emitted().input[5][0].rendererOptions).to.equal(undefined)
+    expect(value.rendererName).to.equal('Table')
-    expect(wrapper.emitted().input[5][0].vals).to.eql(['foo', ''])
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql(['foo', ''])
 
     // set second aggregator argument
     await wrapper
@@ -101,43 +109,42 @@ describe('PivotUi.vue', () => {
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(7)
-    expect(wrapper.emitted().input[6][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[6][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[6][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[6][0].rowOrder).to.equal('value_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[6][0].aggregatorName).to.equal('Sum over Sum')
+    expect(value.rowOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[6][0].rendererName).to.equal('Table')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
-    expect(wrapper.emitted().input[6][0].rendererOptions).to.equal(undefined)
+    expect(value.rendererName).to.equal('Table')
-    expect(wrapper.emitted().input[6][0].vals).to.eql(['foo', 'bar'])
+    expect(value.rendererOptions).to.equal(undefined)
+    expect(value.vals).to.eql(['foo', 'bar'])
 
     // change renderer
     await wrapper.findAll('.sqliteviz-select.renderer .multiselect__element > span')[13]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(8)
-    expect(wrapper.emitted().input[7][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[7][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[7][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[7][0].rowOrder).to.equal('value_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[7][0].aggregatorName).to.equal('Sum over Sum')
+    expect(value.rowOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[7][0].rendererName).to.equal('Custom chart')
+    expect(value.aggregatorName).to.equal('Sum over Sum')
-    expect(wrapper.emitted().input[7][0].rendererOptions.customChartComponent)
+    expect(value.rendererName).to.equal('Custom chart')
-      .to.not.equal(undefined)
+    expect(value.vals).to.eql(['foo', 'bar'])
-    expect(wrapper.emitted().input[7][0].vals).to.eql(['foo', 'bar'])
 
     // change aggregator again
     await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[3]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(9)
-    expect(wrapper.emitted().input[8][0].rows).to.eql(['bar'])
+    value = wrapper.props('modelValue')
-    expect(wrapper.emitted().input[8][0].cols).to.eql(['foo'])
+    expect(value.rows).to.eql(['bar'])
-    expect(wrapper.emitted().input[8][0].colOrder).to.equal('value_a_to_z')
+    expect(value.cols).to.eql(['foo'])
-    expect(wrapper.emitted().input[8][0].rowOrder).to.equal('value_a_to_z')
+    expect(value.colOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[8][0].aggregatorName).to.equal('Sum')
+    expect(value.rowOrder).to.equal('value_a_to_z')
-    expect(wrapper.emitted().input[8][0].rendererName).to.equal('Custom chart')
+    expect(value.aggregatorName).to.equal('Sum')
-    expect(wrapper.emitted().input[8][0].rendererOptions.customChartComponent)
+    expect(value.rendererName).to.equal('Custom chart')
-      .to.not.equal(undefined)
+    expect(value.vals).to.eql(['foo'])
-    expect(wrapper.emitted().input[8][0].vals).to.eql(['foo'])
   })
 })

tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js

@@ -1,8 +1,11 @@
 import { expect } from 'chai'
-import { mount, DOMWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import RunResult from '@/views/Main/Workspace/Tabs/Tab/RunResult'
 import csv from '@/lib/csv'
 import sinon from 'sinon'
+import { nextTick } from 'vue'
+
+const $store = { state: { isWorkspaceVisible: true } }
 
 describe('RunResult.vue', () => {
   afterEach(() => {
@@ -23,10 +26,14 @@ describe('RunResult.vue', () => {
             name: ['foo']
           }
         }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
       }
     })
 
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     expect(
@@ -38,12 +45,14 @@ describe('RunResult.vue', () => {
     ).to.equal(true)
 
     window.ClipboardItem = ClipboardItem
+    wrapper.unmount()
   })
 
   it('copy to clipboard more than 1 sec', async () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const clock = sinon.useFakeTimers()
     const wrapper = mount(RunResult, {
+      attachTo: document.body,
       props: {
         tab: { id: 1 },
         result: {
@@ -53,6 +62,10 @@ describe('RunResult.vue', () => {
             name: ['foo']
           }
         }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
       }
     })
     sinon.stub(csv, 'serialize').callsFake(() => {
@@ -60,36 +73,43 @@ describe('RunResult.vue', () => {
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
+    await nextTick()
 
     // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text())
+      .to.contain('Copy to clipboard')
 
     // ... with Building message...
     expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
 
     // Switch to microtasks (let serialize run)
-    clock.tick(0)
+    await clock.tick(0)
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // ... with Ready message...
     expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
 
     // Click copy
     await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
+    await window.navigator.clipboard.writeText.returnValues[0]
 
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('copy to clipboard less than 1 sec', async () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const clock = sinon.useFakeTimers()
     const wrapper = mount(RunResult, {
+      attachTo: document.body,
       props: {
         tab: { id: 1 },
         result: {
@@ -99,31 +119,38 @@ describe('RunResult.vue', () => {
             name: ['foo']
           }
         }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
       }
     })
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(csv, 'serialize').callsFake(() => {
+    sinon.stub(csv, 'serialize').callsFake(async () => {
-      clock.tick(500)
+      await clock.tick(500)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let serialize run)
-    clock.tick(0)
+    await clock.tick(0)
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     // copyToClipboard is called
     expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
+    wrapper.unmount()
   })
 
   it('cancel long copy', async () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const clock = sinon.useFakeTimers()
     const wrapper = mount(RunResult, {
+      attachTo: document.body,
       props: {
         tab: { id: 1 },
         result: {
@@ -133,28 +160,33 @@ describe('RunResult.vue', () => {
             name: ['foo']
           }
         }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
       }
     })
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(csv, 'serialize').callsFake(() => {
+    sinon.stub(csv, 'serialize').callsFake(async () => {
-      clock.tick(5000)
+      await clock.tick(5000)
     })
 
     // Click copy to clipboard
-    const copyBtn = new DOMWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
     await copyBtn.trigger('click')
 
     // Switch to microtasks (let serialize run)
-    clock.tick(0)
+    await clock.tick(0)
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Click cancel
     await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
-
     // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     // copyToClipboard is not called
     expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
+    wrapper.unmount()
   })
 
   it('shows value of selected cell - result set', async () => {
@@ -168,14 +200,16 @@ describe('RunResult.vue', () => {
             name: ['foo', 'bar']
           }
         }
+      },
+      global: {
+        mocks: { $store },
+        stubs: { teleport: true, transition: false }
       }
     })
 
     // Open cell value panel
-    const viewValueBtn = new DOMWrapper(
+    const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
-      wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
+    await viewValueBtn.vm.$emit('click')
-    )
-    await viewValueBtn.trigger('click')
 
     /*
     Result set:
@@ -208,18 +242,18 @@ describe('RunResult.vue', () => {
 
     // Click on 'bar' cell
     await rows[1].findAll('td')[1].trigger('click')
-
     expect(wrapper.find('.value-body').text()).to.equals('bar')
 
     // Click on 'bar' cell again
     await rows[1].findAll('td')[1].trigger('click')
-
     expect(wrapper.find('.value-viewer-container .table-preview').text())
       .to.equals('No cell selected to view')
+    wrapper.unmount()
   })
 
   it('shows value of selected cell - record view', async () => {
     const wrapper = mount(RunResult, {
+      attachTo: document.body,
       props: {
         tab: { id: 1 },
         result: {
@@ -229,20 +263,19 @@ describe('RunResult.vue', () => {
             name: ['foo', 'bar']
           }
         }
+      },
+      global: {
+        mocks: { $store }
       }
     })
 
     // Open cell value panel
-    const viewValueBtn = new DOMWrapper(
+    const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
-      wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
+    await viewValueBtn.vm.$emit('click')
-    )
-    await viewValueBtn.trigger('click')
 
     // Go to record view
-    const vierRecordBtn = new DOMWrapper(
+    const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
-      wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
+    await vierRecordBtn.vm.$emit('click')
-    )
-    await vierRecordBtn.trigger('click')
 
     /*
     Record 1:
@@ -266,7 +299,7 @@ describe('RunResult.vue', () => {
 
     // Go to next record
     await wrapper.find('.icon-btn.next').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('.value-body').text()).to.equals('bar')
 
     // Go to '2' with up arrow key
@@ -275,7 +308,7 @@ describe('RunResult.vue', () => {
 
     // Go to prev record
     await wrapper.find('.icon-btn.prev').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('.value-body').text()).to.equals('1')
 
     // Click on 'foo' cell
@@ -287,10 +320,12 @@ describe('RunResult.vue', () => {
     await rows[1].find('td').trigger('click')
     expect(wrapper.find('.value-viewer-container .table-preview').text())
       .to.equals('No cell selected to view')
+    wrapper.unmount()
   })
 
   it('keeps selected cell when switch between record and regular view', async () => {
     const wrapper = mount(RunResult, {
+      attachTo: document.body,
       props: {
         tab: { id: 1 },
         result: {
@@ -300,14 +335,15 @@ describe('RunResult.vue', () => {
             name: [...Array(30)].map((x, i) => `name-${i}`)
           }
         }
+      },
+      global: {
+        mocks: { $store }
       }
     })
 
     // Open cell value panel
-    const viewValueBtn = new DOMWrapper(
+    const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
-      wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
+    await viewValueBtn.vm.$emit('click')
-    )
-    await viewValueBtn.trigger('click')
 
     // Click on 'name-1' cell
     const rows = wrapper.findAll('table tbody tr')
@@ -316,10 +352,8 @@ describe('RunResult.vue', () => {
     expect(wrapper.find('.value-body').text()).to.equals('name-1')
 
     // Go to record view
-    const vierRecordBtn = new DOMWrapper(
+    const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
-      wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
+    await vierRecordBtn.vm.$emit('click')
-    )
-    await vierRecordBtn.trigger('click')
 
     // 'name-1' is selected
     expect(wrapper.find('.value-body').text()).to.equals('name-1')
@@ -329,7 +363,7 @@ describe('RunResult.vue', () => {
 
     // Go to last record
     await wrapper.find('.icon-btn.last').trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('.value-body').text()).to.equals('name-29')
 
     // Go to '29' with up arrow key
@@ -337,12 +371,13 @@ describe('RunResult.vue', () => {
     expect(wrapper.find('.value-body').text()).to.equals('29')
 
     // Go to regular view
-    await vierRecordBtn.trigger('click')
+    await vierRecordBtn.vm.$emit('click')
 
     // '29' is selected
     expect(wrapper.find('.value-body').text()).to.equals('29')
     selectedCell = wrapper
       .find('.sqliteviz-table tbody td[aria-selected="true"]')
     expect(selectedCell.text()).to.equals('29')
+    wrapper.unmount()
   })
 })

tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js

@@ -1,44 +1,53 @@
 import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import SqlEditor from '@/views/Main/Workspace/Tabs/Tab/SqlEditor'
+import { nextTick } from 'vue'
 
 describe('SqlEditor.vue', () => {
-  it('Emits input event when a query is changed', async () => {
+  it('Emits update:modelValue event when a query is changed', async () => {
     // mock store state
     const state = {
       db: {}
     }
 
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
-    const wrapper = mount(SqlEditor, { store })
+    const wrapper = mount(SqlEditor, {
-    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+      global: {
-    expect(wrapper.emitted('input')[0]).to.eql(['SELECT * FROM foo'])
+        plugins: [store]
+      }
+    })
+    await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
+    expect(wrapper.emitted()['update:modelValue'][0]).to.eql(['SELECT * FROM foo'])
   })
 
   it('Run is disabled if there is no db or no query or is getting result set', async () => {
     const state = {
       db: null
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
-    const wrapper = mount(SqlEditor, { store, props: { isGettingResults: false } })
+    const wrapper = mount(SqlEditor, { 
-    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+      global: { plugins: [store] },
-    const runButton = wrapper.findComponent({ name: 'RunIcon' }).vm.$parent
+      props: { isGettingResults: false }
+    })
+    await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
+    const runButton = wrapper.findComponent({ ref: 'runBtn' })
 
-    expect(runButton.disabled).to.equal(true)
+    expect(runButton.props('disabled')).to.equal(true)
 
-    await wrapper.vm.$set(store.state, 'db', {})
+    store.state.db = {}
-    expect(runButton.disabled).to.equal(false)
+    await nextTick()
+    expect(runButton.props('disabled')).to.equal(false)
 
-    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', '')
+    await wrapper.findComponent({ ref: 'cm' }).setValue('', 'value')
-    expect(runButton.disabled).to.equal(true)
+    expect(runButton.props('disabled')).to.equal(true)
 
-    await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
+    await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
-    expect(runButton.disabled).to.equal(false)
+    expect(runButton.props('disabled')).to.equal(false)
 
     await wrapper.setProps({ isGettingResults: true })
-    expect(runButton.disabled).to.equal(true)
+    expect(runButton.props('disabled')).to.equal(true)
   })
 })

tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js

@@ -1,9 +1,10 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { mount, DOMWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import mutations from '@/store/mutations'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import Tab from '@/views/Main/Workspace/Tabs/Tab'
+import { nextTick } from 'vue'
 
 let place
 
@@ -18,19 +19,20 @@ describe('Tab.vue', () => {
     place.remove()
   })
 
-  it('Renders passed query', () => {
+  it('Renders passed query', async () => {
     // mock store state
     const state = {
-      currentTabId: 1
+      currentTabId: 1,
+      isWorkspaceVisible: true
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tab, {
       attachTo: place,
-      store,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true, 'icon-button': true },
+        plugins: [store]
       },
       props: {
         tab: {
@@ -52,26 +54,28 @@ describe('Tab.vue', () => {
         }
       }
     })
-
+    await nextTick()
     expect(wrapper.find('.tab-content-container').isVisible()).to.equal(true)
     expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
     expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(true)
     expect(wrapper.find('.above .sql-editor-panel .codemirror-container').text())
-      .to.equal('SELECT * FROM foo')
+      .to.contain('SELECT * FROM foo')
   })
 
-  it("Doesn't render tab when it's not active", () => {
+  it("Doesn't render tab when it's not active", async () => {
     // mock store state
     const state = {
-      currentTabId: 0
+      currentTabId: 0,
+      isWorkspaceVisible: true
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab: {
@@ -93,22 +97,25 @@ describe('Tab.vue', () => {
         }
       }
     })
+    await nextTick()
     expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
   })
 
   it('Is not visible when not active', async () => {
     // mock store state
     const state = {
-      currentTabId: 0
+      currentTabId: 0,
+      isWorkspaceVisible: true
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab: {
@@ -130,13 +137,14 @@ describe('Tab.vue', () => {
         }
       }
     })
-
+    await nextTick()
     expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
   })
 
-  it('Update tab state when a query is changed', async () => {
+  it('Updates tab state when a query is changed', async () => {
     // mock store state
     const state = {
+      isWorkspaceVisible: true,
       tabs: [
         {
           id: 1,
@@ -160,25 +168,28 @@ describe('Tab.vue', () => {
       currentTabId: 1
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
-        tab: state.tabs[0]
+        tab: store.state.tabs[0]
       }
     })
-    await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
+    await nextTick()
-    expect(state.tabs[0].isSaved).to.equal(false)
+    await wrapper.findComponent({ name: 'SqlEditor' }).setValue(' limit 100')
+    expect(store.state.tabs[0].isSaved).to.equal(false)
   })
 
-  it('Update tab state when data view settings are changed', async () => {
+  it('Updates tab state when data view settings are changed', async () => {
     // mock store state
     const state = {
+      isWorkspaceVisible: true,
       tabs: [
         {
           id: 1,
@@ -202,30 +213,25 @@ describe('Tab.vue', () => {
       currentTabId: 1
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
-        tab: state.tabs[0]
+        tab: store.state.tabs[0]
       }
     })
+    await nextTick()
     await wrapper.findComponent({ name: 'DataView' }).vm.$emit('update')
-    expect(state.tabs[0].isSaved).to.equal(false)
+    expect(store.state.tabs[0].isSaved).to.equal(false)
   })
 
   it('Shows .result-in-progress message when executing query', async () => {
-    // mock store state
-    const state = {
-      currentTabId: 1
-    }
-
-    const store = new Vuex.Store({ state, mutations })
-    // mount the component
     const tab = {
       id: 1,
       name: 'foo',
@@ -244,28 +250,34 @@ describe('Tab.vue', () => {
       time: 0,
       isSaved: true
     }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true,
+      tabs: [tab]
+    }
+
+    const store = createStore({ state, mutations })
+    // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true, 'icon-button': true },
+        plugins: [store]
       },
       props: {
         tab
       }
     })
+    await nextTick()
 
-    tab.isGettingResults = true
+    store.state.tabs[0].isGettingResults = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
-    expect(wrapper.find('.run-result-panel .result-in-progress').isVisible()).to.equal(true)
+    expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(true)
   })
 
   it('Shows error when executing query ends with error', async () => {
-    // mock store state
-    const state = {
-      currentTabId: 1
-    }
-
-    const store = new Vuex.Store({ state, mutations })
     const tab = {
       id: 1,
       name: 'foo',
@@ -284,22 +296,33 @@ describe('Tab.vue', () => {
       time: 0,
       isSaved: true
     }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true,
+      tabs: [tab]
+    }
+
+    const store = createStore({ state, mutations })
+
     // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true, 'icon-button': true, },
+        plugins: [store]
       },
       props: {
-        tab
+        tab: store.state.tabs[0]
       }
     })
-
+    await nextTick()
-    tab.error = {
+    store.state.tabs[0].error = {
       type: 'error',
       message: 'There is no table foo'
     }
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
     expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
     expect(wrapper.findComponent({ name: 'logs' }).isVisible()).to.equal(true)
@@ -314,11 +337,6 @@ describe('Tab.vue', () => {
         name: ['foo', 'bar']
       }
     }
-    // mock store state
-    const state = {
-      currentTabId: 1
-    }
-
     const tab = {
       id: 1,
       name: 'foo',
@@ -337,22 +355,29 @@ describe('Tab.vue', () => {
       time: 0,
       isSaved: true
     }
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      isWorkspaceVisible: true,
+      tabs: [tab]
+    }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tab, {
-      store,
+      attachTo: place,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab
       }
     })
-
+    await nextTick()
-    tab.result = result
+    store.state.tabs[0].result = result
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
     expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
     expect(wrapper.findComponent({ name: 'logs' }).exists()).to.equal(false)
@@ -361,10 +386,11 @@ describe('Tab.vue', () => {
 
   it('Switches views', async () => {
     const state = {
-      currentTabId: 1
+      currentTabId: 1,
+      isWorkspaceVisible: true
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     const tab = {
       id: 1,
@@ -387,49 +413,50 @@ describe('Tab.vue', () => {
 
     const wrapper = mount(Tab, {
       attachTo: place,
-      store,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab
       }
     })
 
-    let tableBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
+    let tableBtn = wrapper.find('.above .side-tool-bar')
-      .findComponent({ name: 'tableIcon' }).vm.$parent)
+      .findComponent({ ref: 'tableBtn' })
-    await tableBtn.trigger('click')
+    await tableBtn.vm.$emit('click')
 
     expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.above .run-result-panel').exists()).to.equal(true)
 
-    const dataViewBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
+    const dataViewBtn = wrapper.find('.above .side-tool-bar')
-      .findComponent({ name: 'dataViewIcon' }).vm.$parent)
+      .findComponent({ ref: 'dataViewBtn' })
-    await dataViewBtn.trigger('click')
+    await dataViewBtn.vm.$emit('click')
 
     expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.above .data-view-panel').exists()).to.equal(true)
 
-    const sqlEditorBtn = new DOMWrapper(wrapper.find('.above .side-tool-bar')
+    const sqlEditorBtn = wrapper.find('.above .side-tool-bar')
-      .findComponent({ name: 'sqlEditorIcon' }).vm.$parent)
+      .findComponent({ ref: 'sqlEditorBtn' })
-    await sqlEditorBtn.trigger('click')
+    await sqlEditorBtn.vm.$emit('click')
 
     expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
 
-    tableBtn = new DOMWrapper(wrapper.find('.bottomPane .side-tool-bar')
+    tableBtn = wrapper.find('.bottomPane .side-tool-bar')
-      .findComponent({ name: 'tableIcon' }).vm.$parent)
+      .findComponent({ ref: 'tableBtn' })
-    await tableBtn.trigger('click')
+    await tableBtn.vm.$emit('click')
 
     expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
   })
 
-  it('Maximize top panel if maximized panel is above', () => {
+  it('Maximize top panel if maximized panel is above', async () => {
     const state = {
-      currentTabId: 1
+      currentTabId: 1,
+      isWorkspaceVisible: true
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
     const tab = {
       id: 1,
       name: 'foo',
@@ -452,24 +479,26 @@ describe('Tab.vue', () => {
 
     const wrapper = mount(Tab, {
       attachTo: place,
-      store,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab
       }
     })
+    await nextTick()
 
     expect(wrapper.find('.above').element.parentElement.style.height)
       .to.equal('100%')
   })
 
-  it('Maximize bottom panel if maximized panel is below', () => {
+  it('Maximize bottom panel if maximized panel is below', async () => {
     const state = {
-      currentTabId: 1
+      currentTabId: 1,
+      isWorkspaceVisible: true
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
     const tab = {
       id: 1,
       name: 'foo',
@@ -492,24 +521,25 @@ describe('Tab.vue', () => {
 
     const wrapper = mount(Tab, {
       attachTo: place,
-      store,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab
       }
     })
-
+    await nextTick()
     expect(wrapper.find('.bottomPane').element.parentElement.style.height)
       .to.equal('100%')
   })
 
-  it('Panel size is 50 is nothing to maximize', () => {
+  it('Panel size is 50 if nothing to maximize', async () => {
     const state = {
-      currentTabId: 1
+      currentTabId: 1,
+      isWorkspaceVisible: true
     }
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
     const tab = {
       id: 1,
       name: 'foo',
@@ -531,15 +561,16 @@ describe('Tab.vue', () => {
 
     const wrapper = mount(Tab, {
       attachTo: place,
-      store,
       global: {
-        stubs: ['chart']
+        stubs: { 'chart': true },
+        plugins: [store]
       },
       props: {
         tab
       }
     })
 
+    await nextTick()
     expect(wrapper.find('.above').element.parentElement.style.height)
       .to.equal('50%')
     expect(wrapper.find('.bottomPane').element.parentElement.style.height)

tests/views/Main/Workspace/Tabs/Tabs.spec.js

@@ -1,11 +1,20 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { shallowMount, mount, DOMWrapper } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import mutations from '@/store/mutations'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import Tabs from '@/views/Main/Workspace/Tabs'
+import eventBus from '@/lib/eventBus'
+
 
 describe('Tabs.vue', () => {
+  let clock
+  
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+    sinon.spy(eventBus, '$emit')
+  })
+
   afterEach(() => {
     sinon.restore()
   })
@@ -15,18 +24,19 @@ describe('Tabs.vue', () => {
     const state = {
       tabs: []
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
     // mount the component
     const wrapper = shallowMount(Tabs, {
-      store,
       global: {
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
     // check start-guide visibility
     expect(wrapper.find('#start-guide').isVisible()).to.equal(true)
+    wrapper.unmount()
   })
 
   it('Renders tabs', () => {
@@ -38,13 +48,14 @@ describe('Tabs.vue', () => {
       ],
       currentTabId: 2
     }
-    const store = new Vuex.Store({ state })
+    const store = createStore({ state })
 
     // mount the component
     const wrapper = shallowMount(Tabs, {
-      store,
+      attachTo: document.body,
       global: {
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -63,6 +74,7 @@ describe('Tabs.vue', () => {
     expect(secondTab.text()).to.include('Untitled')
     expect(secondTab.find('.star').isVisible()).to.equal(true)
     expect(secondTab.classes()).to.include('tab-selected')
+    wrapper.unmount()
   })
 
   it('Selects the tab on click', async () => {
@@ -75,13 +87,13 @@ describe('Tabs.vue', () => {
       currentTabId: 2
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = shallowMount(Tabs, {
-      store,
       global: {
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -94,6 +106,7 @@ describe('Tabs.vue', () => {
     const secondTab = wrapper.findAll('.tab')[1]
     expect(secondTab.classes()).to.not.include('tab-selected')
     expect(state.currentTabId).to.equal(1)
+    wrapper.unmount()
   })
 
   it("Deletes the tab on close if it's saved", async () => {
@@ -131,13 +144,13 @@ describe('Tabs.vue', () => {
       currentTabId: 2
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tabs, {
-      store,
       global: {
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -152,6 +165,7 @@ describe('Tabs.vue', () => {
     expect(firstTab.text()).to.include('Untitled')
     expect(firstTab.find('.star').isVisible()).to.equal(true)
     expect(firstTab.classes()).to.include('tab-selected')
+    wrapper.unmount()
   })
 
   it("Doesn't delete tab on close if user cancel closing", async () => {
@@ -189,13 +203,16 @@ describe('Tabs.vue', () => {
       currentTabId: 2
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tabs, {
-      store,
+      attachTo: document.body,
       global: {
-        stubs: ['router-link']
+        stubs: {
+          'router-link': true, teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
@@ -204,13 +221,14 @@ describe('Tabs.vue', () => {
     await secondTabCloseIcon.trigger('click')
 
     // check that Close Tab dialog is visible
-    const modal = wrapper.find('[data-modal="close-warn"]')
+    const modal = wrapper.find('.dialog.vfm')
     expect(modal.exists()).to.equal(true)
+    expect(modal.find('.dialog-header').text()).to.contain('Close tab')
 
     // find Cancel in the dialog
     const cancelBtn = wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
-      .find(button => button.text() === 'Cancel')
+      .find(button => button.text() === "Don't close")
 
     // click Cancel in the dialog
     await cancelBtn.trigger('click')
@@ -219,7 +237,9 @@ describe('Tabs.vue', () => {
     expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
 
     // check that the dialog is closed
-    expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Closes without saving', async () => {
@@ -257,13 +277,16 @@ describe('Tabs.vue', () => {
       currentTabId: 2
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tabs, {
-      store,
+      attachTo: document.body,
       global: {
-        stubs: ['router-link']
+        stubs: {
+          'router-link': true, teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
@@ -273,7 +296,7 @@ describe('Tabs.vue', () => {
 
     // find 'Close without saving' in the dialog
     const closeBtn = wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Close without saving')
 
     // click 'Close without saving' in the dialog
@@ -287,11 +310,12 @@ describe('Tabs.vue', () => {
     expect(firstTab.classes()).to.include('tab-selected')
 
     // check that 'saveInquiry' event was not emited
-    const rootWrapper = new DOMWrapper(wrapper.vm.$root)
+    expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(false)
-    expect(rootWrapper.emitted('saveInquiry')).to.equal(undefined)
 
     // check that the dialog is closed
-    expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Closes with saving', async () => {
@@ -329,13 +353,16 @@ describe('Tabs.vue', () => {
       currentTabId: 2
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = mount(Tabs, {
-      store,
+      attachTo: document.body,
       global: {
-        stubs: ['router-link']
+        stubs: {
+          'router-link': true, teleport: true, transition: false
+        },
+        plugins: [store]
       }
     })
 
@@ -345,14 +372,14 @@ describe('Tabs.vue', () => {
 
     // find 'Save and close' in the dialog
     const closeBtn = wrapper
-      .findAll('.dialog-buttons-container button').wrappers
+      .findAll('.dialog-buttons-container button')
       .find(button => button.text() === 'Save and close')
 
     // click 'Save and close' in the dialog
     await closeBtn.trigger('click')
 
-    // pretend like saving is completed - trigger 'inquirySaved' on $root
+    // pretend like saving is completed - trigger 'inquirySaved' on eventBus
-    await wrapper.vm.$root.$emit('inquirySaved')
+    await eventBus.$emit('inquirySaved')
 
     // check that tab is closed
     expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
@@ -362,11 +389,12 @@ describe('Tabs.vue', () => {
     expect(firstTab.classes()).to.include('tab-selected')
 
     // check that 'saveInquiry' event was emited
-    const rootWrapper = new DOMWrapper(wrapper.vm.$root)
+    expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(true)
-    expect(rootWrapper.emitted('saveInquiry')).to.have.lengthOf(1)
 
     // check that the dialog is closed
-    expect(wrapper.find('[data-modal="close-warn"]').exists()).to.equal(false)
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
   })
 
   it('Prevents closing a tab of a browser if there is unsaved inquiry', () => {
@@ -379,13 +407,13 @@ describe('Tabs.vue', () => {
       currentTabId: 2
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = shallowMount(Tabs, {
-      store,
       global: {
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -394,6 +422,7 @@ describe('Tabs.vue', () => {
     wrapper.vm.leavingSqliteviz(event)
 
     expect(event.preventDefault.calledOnce).to.equal(true)
+    wrapper.unmount()
   })
 
   it("Doesn't prevent closing a tab of a browser if there is unsaved inquiry", () => {
@@ -405,13 +434,13 @@ describe('Tabs.vue', () => {
       currentTabId: 1
     }
 
-    const store = new Vuex.Store({ state, mutations })
+    const store = createStore({ state, mutations })
 
     // mount the component
     const wrapper = shallowMount(Tabs, {
-      store,
       global: {
-        stubs: ['router-link']
+        stubs: ['router-link'],
+        plugins: [store]
       }
     })
 
@@ -420,5 +449,6 @@ describe('Tabs.vue', () => {
     wrapper.vm.leavingSqliteviz(event)
 
     expect(event.preventDefault.calledOnce).to.equal(false)
+    wrapper.unmount()
   })
 })

tests/views/Main/Workspace/Workspace.spec.js

@@ -2,7 +2,7 @@ import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
 import actions from '@/store/actions'
 import mutations from '@/store/mutations'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import Workspace from '@/views/Main/Workspace'
 
 describe('Workspace.vue', () => {
@@ -11,13 +11,13 @@ describe('Workspace.vue', () => {
       db: {},
       tabs: []
     }
-    const store = new Vuex.Store({ state, actions, mutations })
+    const store = createStore({ state, actions, mutations })
     const $route = { path: '/workspace', query: {} }
     mount(Workspace, {
-      store,
       global: {
-        stubs: ['router-link'],
+        stubs: ['router-link', 'modal'],
-        mocks: { $route }
+        mocks: { $route },
+        plugins: [store]
       }
     })
 
@@ -34,13 +34,13 @@ describe('Workspace.vue', () => {
       db: {},
       tabs: []
     }
-    const store = new Vuex.Store({ state, actions, mutations })
+    const store = createStore({ state, actions, mutations })
     const $route = { path: '/workspace', query: { hide_schema: '1' } }
     const vm = mount(Workspace, {
-      store,
       global: {
-        stubs: ['router-link'],
+        stubs: ['router-link', 'modal'],
-        mocks: { $route }
+        mocks: { $route },
+        plugins: [store]
       }
     })
 

vite.config.js

@@ -6,7 +6,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '',
+  base: './',
   plugins: [
     vue(),
     nodePolyfills({
@@ -24,12 +24,12 @@ export default defineConfig({
 ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
 },
 optimizeDeps: {
-    include:['sql.js/dist/sql-wasm.js'],
+    include:['sql.js'],
     esbuildOptions: {
       define: {
         global: 'globalThis'

vue.config.js

@@ -3,6 +3,7 @@ const CopyPlugin = require('copy-webpack-plugin')
 const WorkboxPlugin = require('workbox-webpack-plugin')
 
 module.exports = defineConfig({
+  parallel: false,
   transpileDependencies: true,
   publicPath: '',
   // Workaround for https://github.com/vuejs/vue-cli/issues/5399 as described
@@ -42,13 +43,6 @@ module.exports = defineConfig({
         }
       })
 
-    config.module
-      .rule('worker')
-      .test(/worker\.js$/)
-      .use('worker-loader')
-      .loader('worker-loader')
-      .end()
-
     config.module.rule('js').exclude.add(/worker\.js$/)
 
     config