fix tests

src/components/CheckBox.vue

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

src/components/CsvJsonImport/DelimiterSelector/index.vue

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

src/components/CsvJsonImport/index.vue

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

src/components/LoadingDialog.vue

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