From 803622f18f3a1a906d117cb72a47b835544dd316 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Wed, 21 Apr 2021 11:05:56 +0200
Subject: [PATCH] move tests to tests folder rename util modules rename
 DbUpload to DbUploader add tests for DbUploader component #27

---
 .eslintrc.js                                  |   2 +-
 .github/workflows/test.yml                    |   2 +-
 karma.files.js                                |   2 +-
 package.json                                  |   2 +-
 src/components/CheckBox.vue                   |   2 +-
 .../{DbUpload.vue => DbUploader.vue}          |  16 +-
 src/components/Logs.vue                       |   6 +-
 src/components/Schema.vue                     |   6 +-
 src/database.js                               |   2 +-
 src/{dbUtils.js => db.utils.js}               |   0
 src/{fileUtils.js => file.utils.js}           |   0
 src/sql.js                                    |   2 +-
 src/storedQueries.js                          |   2 +-
 src/views/Editor.vue                          |   8 +-
 src/views/Home.vue                            |   6 +-
 src/views/MyQueries.vue                       |   2 +-
 tests/{unit => }/chart.spec.js                |   0
 tests/{unit => }/components/Chart.spec.js     |   0
 tests/{unit => }/components/CheckBox.spec.js  |   0
 tests/components/DbUploader.spec.js           | 293 ++++++++++++++++++
 .../components/DelimiterSelector.spec.js      |   0
 .../components/LoadingIndicator.spec.js       |   0
 tests/{unit => }/components/Logs.spec.js      |   0
 tests/{unit => }/components/MainMenu.spec.js  |   0
 tests/{unit => }/components/Pager.spec.js     |   0
 tests/{unit => }/components/Schema.spec.js    |   0
 .../{unit => }/components/Splitpanes.spec.js  |   0
 tests/{unit => }/components/SqlEditor.spec.js |   0
 tests/{unit => }/components/Tab.spec.js       |   0
 .../components/TableDescription.spec.js       |   0
 tests/{unit => }/components/Tabs.spec.js      |   0
 tests/{unit => }/csv.spec.js                  |   0
 tests/{unit => }/database.spec.js             |   0
 .../dbUtils.spec.js => db.utils.spec.js}      |   4 +-
 .../fileUtils.spec.js => file.utils.spec.js}  |   4 +-
 tests/{unit => }/hint.spec.js                 |   0
 tests/{unit => }/splitter.spec.js             |   0
 tests/{unit => }/sql.spec.js                  |   0
 tests/{unit => }/store.spec.js                |   0
 tests/{unit => }/storedQueries.spec.js        |   2 +-
 tests/{unit => }/time.spec.js                 |   0
 tests/{unit => }/tooltips.spec.js             |   0
 tests/unit/components/DbUpload.spec.js        | 123 --------
 tests/{unit => }/views/MyQueries.spec.js      |   4 +-
 44 files changed, 333 insertions(+), 157 deletions(-)
 rename src/components/{DbUpload.vue => DbUploader.vue} (97%)
 rename src/{dbUtils.js => db.utils.js} (100%)
 rename src/{fileUtils.js => file.utils.js} (100%)
 rename tests/{unit => }/chart.spec.js (100%)
 rename tests/{unit => }/components/Chart.spec.js (100%)
 rename tests/{unit => }/components/CheckBox.spec.js (100%)
 create mode 100644 tests/components/DbUploader.spec.js
 rename tests/{unit => }/components/DelimiterSelector.spec.js (100%)
 rename tests/{unit => }/components/LoadingIndicator.spec.js (100%)
 rename tests/{unit => }/components/Logs.spec.js (100%)
 rename tests/{unit => }/components/MainMenu.spec.js (100%)
 rename tests/{unit => }/components/Pager.spec.js (100%)
 rename tests/{unit => }/components/Schema.spec.js (100%)
 rename tests/{unit => }/components/Splitpanes.spec.js (100%)
 rename tests/{unit => }/components/SqlEditor.spec.js (100%)
 rename tests/{unit => }/components/Tab.spec.js (100%)
 rename tests/{unit => }/components/TableDescription.spec.js (100%)
 rename tests/{unit => }/components/Tabs.spec.js (100%)
 rename tests/{unit => }/csv.spec.js (100%)
 rename tests/{unit => }/database.spec.js (100%)
 rename tests/{unit/dbUtils.spec.js => db.utils.spec.js} (93%)
 rename tests/{unit/fileUtils.spec.js => file.utils.spec.js} (98%)
 rename tests/{unit => }/hint.spec.js (100%)
 rename tests/{unit => }/splitter.spec.js (100%)
 rename tests/{unit => }/sql.spec.js (100%)
 rename tests/{unit => }/store.spec.js (100%)
 rename tests/{unit => }/storedQueries.spec.js (99%)
 rename tests/{unit => }/time.spec.js (100%)
 rename tests/{unit => }/tooltips.spec.js (100%)
 delete mode 100644 tests/unit/components/DbUpload.spec.js
 rename tests/{unit => }/views/MyQueries.spec.js (99%)

diff --git a/.eslintrc.js b/.eslintrc.js
index cf516ef..0011c25 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,7 +19,7 @@ module.exports = {
     {
       files: [
         '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        '**/tests/**/*.spec.{j,t}s?(x)'
       ],
       env: {
         mocha: true
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 4945e48..85415b6 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -27,4 +27,4 @@ jobs:
       run: npm run lint
 
     - name: Run karma tests
-      run: npm run test:unit
+      run: npm run test
diff --git a/karma.files.js b/karma.files.js
index 1b89acd..23f5bc5 100644
--- a/karma.files.js
+++ b/karma.files.js
@@ -7,7 +7,7 @@ Vue.use(VModal)
 Vue.config.productionTip = false
 
 // require all test files (files that ends with .spec.js)
-const testsContext = require.context('./tests/unit', true, /\.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
diff --git a/package.json b/package.json
index 4497e6d..5a5a1d8 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build",
-    "test:unit": "vue-cli-service karma",
+    "test": "vue-cli-service karma",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
diff --git a/src/components/CheckBox.vue b/src/components/CheckBox.vue
index eedfc2e..a301c28 100644
--- a/src/components/CheckBox.vue
+++ b/src/components/CheckBox.vue
@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  name: 'checkBox',
+  name: 'CheckBox',
   props: {
     theme: {
       type: String,
diff --git a/src/components/DbUpload.vue b/src/components/DbUploader.vue
similarity index 97%
rename from src/components/DbUpload.vue
rename to src/components/DbUploader.vue
index 922d541..4f21b3e 100644
--- a/src/components/DbUpload.vue
+++ b/src/components/DbUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="db-upload-container">
+  <div class="db-uploader-container">
     <change-db-icon v-if="type === 'small'" @click.native="browse"/>
     <div v-if="['regular', 'illustrated'].includes(type)" class="drop-area-container">
       <div
@@ -62,6 +62,7 @@
             width="93px"
             :disabled="disableDialog"
             class="char-input"
+            id="quote-char"
           />
           <text-field
             label="Escape char"
@@ -71,6 +72,7 @@
             width="93px"
             :disabled="disableDialog"
             class="char-input"
+            id="escape-char"
           />
         </div>
         <check-box
@@ -122,7 +124,7 @@
 </template>
 
 <script>
-import fu from '@/fileUtils'
+import fu from '@/file.utils'
 import csv from '@/csv'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
@@ -135,7 +137,7 @@ import time from '@/time'
 import database from '@/database'
 
 export default {
-  name: 'DbUpload',
+  name: 'DbUploader',
   props: {
     type: {
       type: String,
@@ -164,7 +166,7 @@ export default {
       delimiter: '',
       quoteChar: '"',
       escapeChar: '"',
-      header: false,
+      header: true,
       previewData: null,
       importCsvMessages: [],
       disableDialog: false,
@@ -237,9 +239,9 @@ export default {
         this.delimiter = parseResult.delimiter
 
         // In parseResult.messages we can get parse errors
-        this.importCsvMessages = parseResult.messages
+        this.importCsvMessages = parseResult.messages || []
 
-        if (parseResult.messages.length === 0) {
+        if (!parseResult.hasErrors) {
           this.importCsvMessages.push({
             message: `Preview parsing is completed in ${time.getPeriod(start, end)}.`,
             type: 'success'
@@ -390,7 +392,7 @@ export default {
 </script>
 
 <style scoped>
-.db-upload-container {
+.db-uploader-container {
   position: relative;
 }
 .drop-area-container {
diff --git a/src/components/Logs.vue b/src/components/Logs.vue
index 20d4ee1..3b504e4 100644
--- a/src/components/Logs.vue
+++ b/src/components/Logs.vue
@@ -35,7 +35,11 @@ export default {
     serializeMessage (msg) {
       let result = ''
       if (msg.row !== null && msg.row !== undefined) {
-        result += `Error in row ${msg.row}. `
+        if (msg.type === 'error') {
+          result += `Error in row ${msg.row}. `
+        } else {
+          result += `Information about row ${msg.row}. `
+        }
       }
 
       result += msg.message
diff --git a/src/components/Schema.vue b/src/components/Schema.vue
index b9d0b92..1c76e2e 100644
--- a/src/components/Schema.vue
+++ b/src/components/Schema.vue
@@ -8,7 +8,7 @@
         <tree-chevron :expanded="schemaVisible"/>
         {{ dbName }}
       </div>
-        <db-upload id="db-edit" type="small" />
+        <db-uploader id="db-edit" type="small" />
     </div>
     <div v-show="schemaVisible" class="schema">
       <table-description
@@ -25,7 +25,7 @@
 import TableDescription from '@/components/TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
-import dbUpload from '@/components/DbUpload'
+import DbUploader from '@/components/DbUploader'
 
 export default {
   name: 'Schema',
@@ -33,7 +33,7 @@ export default {
     TableDescription,
     TextField,
     TreeChevron,
-    dbUpload
+    DbUploader
   },
   data () {
     return {
diff --git a/src/database.js b/src/database.js
index 66b642e..dfb94e4 100644
--- a/src/database.js
+++ b/src/database.js
@@ -1,5 +1,5 @@
 import sqliteParser from 'sqlite-parser'
-import fu from '@/fileUtils'
+import fu from '@/file.utils'
 // We can import workers like so because of worker-loader:
 // https://webpack.js.org/loaders/worker-loader/
 import Worker from '@/db.worker.js'
diff --git a/src/dbUtils.js b/src/db.utils.js
similarity index 100%
rename from src/dbUtils.js
rename to src/db.utils.js
diff --git a/src/fileUtils.js b/src/file.utils.js
similarity index 100%
rename from src/fileUtils.js
rename to src/file.utils.js
diff --git a/src/sql.js b/src/sql.js
index f1f42b8..5482833 100644
--- a/src/sql.js
+++ b/src/sql.js
@@ -1,5 +1,5 @@
 import initSqlJs from 'sql.js/dist/sql-wasm.js'
-import dbUtils from '@/dbUtils'
+import dbUtils from '@/db.utils'
 
 let SQL = null
 const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule })
diff --git a/src/storedQueries.js b/src/storedQueries.js
index 4221242..ad9dcce 100644
--- a/src/storedQueries.js
+++ b/src/storedQueries.js
@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid'
-import fu from '@/fileUtils'
+import fu from '@/file.utils'
 
 export default {
   getStoredQueries () {
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 90c8453..0e75ecd 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -11,7 +11,7 @@
           <div class="warning">
             Database is not loaded. Queries can’t be run without database.
           </div>
-          <db-upload id="db-uploader"/>
+          <db-uploader id="db-uploader"/>
         </div>
       </template>
       <template #right-pane>
@@ -25,7 +25,7 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from '@/components/Schema'
 import Tabs from '@/components/Tabs'
-import dbUpload from '@/components/DbUpload'
+import DbUploader from '@/components/DbUploader'
 
 export default {
   name: 'Editor',
@@ -33,7 +33,7 @@ export default {
     Schema,
     Splitpanes,
     Tabs,
-    dbUpload
+    DbUploader
   }
 }
 </script>
@@ -64,7 +64,7 @@ export default {
   box-sizing: border-box;
 }
 
->>> .db-upload-container {
+>>> .db-uploader-container {
   width: 100%;
 }
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 851ef38..2356fc3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="dbloader-container">
-    <db-upload type="illustrated" />
+    <db-uploader type="illustrated" />
     <div id="note">
       Sqliteviz is fully client-side. Your database never leaves your computer.
     </div>
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import dbUpload from '@/components/DbUpload'
+import DbUploader from '@/components/DbUploader'
 
 export default {
   name: 'Home',
-  components: { dbUpload }
+  components: { DbUploader }
 }
 </script>
 
diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue
index de8d7b9..249a7d9 100644
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -147,7 +147,7 @@ import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
 import tooltipMixin from '@/mixins/tooltips'
 import storedQueries from '@/storedQueries'
-import fu from '@/fileUtils'
+import fu from '@/file.utils'
 
 export default {
   name: 'MyQueries',
diff --git a/tests/unit/chart.spec.js b/tests/chart.spec.js
similarity index 100%
rename from tests/unit/chart.spec.js
rename to tests/chart.spec.js
diff --git a/tests/unit/components/Chart.spec.js b/tests/components/Chart.spec.js
similarity index 100%
rename from tests/unit/components/Chart.spec.js
rename to tests/components/Chart.spec.js
diff --git a/tests/unit/components/CheckBox.spec.js b/tests/components/CheckBox.spec.js
similarity index 100%
rename from tests/unit/components/CheckBox.spec.js
rename to tests/components/CheckBox.spec.js
diff --git a/tests/components/DbUploader.spec.js b/tests/components/DbUploader.spec.js
new file mode 100644
index 0000000..c003ca1
--- /dev/null
+++ b/tests/components/DbUploader.spec.js
@@ -0,0 +1,293 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Vuex from 'vuex'
+import { shallowMount, mount } from '@vue/test-utils'
+import DbUploader from '@/components/DbUploader.vue'
+import fu from '@/file.utils'
+import database from '@/database.js'
+import csv from '@/csv'
+
+let state = {}
+let mutations = {}
+let store = {}
+
+describe('DbUploader.vue', () => {
+  beforeEach(() => {
+    // mock store state and mutations
+    state = {}
+    mutations = {
+      saveSchema: sinon.stub()
+    }
+    store = new Vuex.Store({ state, mutations })
+  })
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('loads db on click and redirects to /editor', async () => {
+    // mock getting a file from user
+    const file = {}
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock db loading
+    const schema = {}
+    const db = {
+      loadDb: sinon.stub().resolves(schema)
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/' }
+
+    // mount the component
+    const wrapper = shallowMount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    expect(db.loadDb.calledOnceWith(file)).to.equal(true)
+    await db.loadDb.returnValues[0]
+    expect(mutations.saveSchema.calledOnceWith(state, schema)).to.equal(true)
+    expect($router.push.calledOnceWith('/editor')).to.equal(true)
+  })
+
+  it('loads db on drop and redirects to /editor', async () => {
+    // mock db loading
+    const schema = {}
+    const db = {
+      loadDb: sinon.stub().resolves(schema)
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/' }
+
+    // mount the component
+    const wrapper = shallowMount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    // mock a file dropped by a user
+    const file = {}
+    const dropData = { dataTransfer: new DataTransfer() }
+    Object.defineProperty(dropData.dataTransfer, 'files', {
+      value: [file],
+      writable: false
+    })
+
+    await wrapper.find('.drop-area').trigger('drop', dropData)
+    expect(db.loadDb.calledOnceWith(file)).to.equal(true)
+    await db.loadDb.returnValues[0]
+    expect(mutations.saveSchema.calledOnceWith(state, schema)).to.equal(true)
+    expect($router.push.calledOnceWith('/editor')).to.equal(true)
+  })
+
+  it("doesn't redirect if already on /editor", async () => {
+    // mock getting a file from user
+    const file = {}
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock db loading
+    const schema = {}
+    const db = {
+      loadDb: sinon.stub().resolves(schema)
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/editor' }
+
+    // mount the component
+    const wrapper = shallowMount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    await db.loadDb.returnValues[0]
+    expect($router.push.called).to.equal(false)
+  })
+
+  it('shows parse dialog if gets csv file', async () => {
+    // mock getting a file from user
+    const file = { type: 'text/csv' }
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/editor' }
+
+    sinon.stub(csv, 'parse').resolves({
+      delimiter: '|',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [1, 'foo'],
+          [2, 'bar']
+        ]
+      },
+      messages: [{
+        code: 'UndetectableDelimiter',
+        message: 'Comma was used as a standart delimiter',
+        row: 0,
+        type: 'info',
+        hint: undefined
+      }]
+    })
+
+    // mount the component
+    const wrapper = mount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    await csv.parse.returnValues[0]
+    await wrapper.vm.animationPromise
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('[data-modal="parse"]').exists()).to.equal(true)
+    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.value).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)
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(2)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('1')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('foo')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equal('2')
+    expect(rows.at(1).findAll('td').at(1).text()).to.equal('bar')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Information about row 0. Comma was used as a standart delimiter.')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Preview parsing is completed in')
+  })
+
+  it('reparses when parameters changes', async () => {
+    // mock getting a file from user
+    const file = { type: 'text/csv' }
+    sinon.stub(fu, 'getFileFromUser').resolves(file)
+
+    // mock router
+    const $router = { push: sinon.stub() }
+    const $route = { path: '/editor' }
+
+    const parse = sinon.stub(csv, 'parse')
+    parse.onCall(0).resolves({
+      delimiter: '|',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [1, 'foo']
+        ]
+      }
+    })
+
+    // mount the component
+    const wrapper = mount(DbUploader, {
+      store,
+      mocks: { $router, $route }
+    })
+
+    await wrapper.find('.drop-area').trigger('click')
+    await csv.parse.returnValues[0]
+    await wrapper.vm.animationPromise
+    await wrapper.vm.$nextTick()
+
+    parse.onCall(1).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [2, 'bar']
+        ]
+      },
+      hasErrors: false
+    })
+    await wrapper.find('.delimiter-selector-container input').setValue(',')
+    expect(parse.callCount).to.equal(2)
+    await csv.parse.returnValues[1]
+
+    let rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('2')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('bar')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Preview parsing is completed in')
+
+    parse.onCall(2).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [3, 'baz']
+        ]
+      },
+      hasErrors: true,
+      messages: [{
+        code: 'MissingQuotes',
+        message: 'Quote is missed',
+        row: 0,
+        type: 'error',
+        hint: 'Edit your CSV so that the field has a closing quote char.'
+      }]
+    })
+
+    await wrapper.find('#quote-char input').setValue("'")
+    expect(parse.callCount).to.equal(3)
+    await csv.parse.returnValues[2]
+    rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('3')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('baz')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.contain('Error in row 0. Quote is missed. Edit your CSV so that the field has a closing quote char.')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.not.contain('Preview parsing is completed in')
+
+    parse.onCall(3).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [4, 'qux']
+        ]
+      },
+      hasErrors: false
+    })
+    await wrapper.find('#escape-char input').setValue("'")
+    expect(parse.callCount).to.equal(4)
+    await csv.parse.returnValues[3]
+    rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('4')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('qux')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.contain('Preview parsing is completed in')
+
+    parse.onCall(4).resolves({
+      delimiter: ',',
+      data: {
+        columns: ['col1', 'col2'],
+        values: [
+          [5, 'corge']
+        ]
+      },
+      hasErrors: false
+    })
+    await wrapper.findComponent({ name: 'check-box' }).trigger('click')
+    expect(parse.callCount).to.equal(5)
+    await csv.parse.returnValues[4]
+    rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(1)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equal('5')
+    expect(rows.at(0).findAll('td').at(1).text()).to.equal('corge')
+    expect(wrapper.findComponent({ name: 'logs' }).text())
+      .to.include('Preview parsing is completed in')
+  })
+})
diff --git a/tests/unit/components/DelimiterSelector.spec.js b/tests/components/DelimiterSelector.spec.js
similarity index 100%
rename from tests/unit/components/DelimiterSelector.spec.js
rename to tests/components/DelimiterSelector.spec.js
diff --git a/tests/unit/components/LoadingIndicator.spec.js b/tests/components/LoadingIndicator.spec.js
similarity index 100%
rename from tests/unit/components/LoadingIndicator.spec.js
rename to tests/components/LoadingIndicator.spec.js
diff --git a/tests/unit/components/Logs.spec.js b/tests/components/Logs.spec.js
similarity index 100%
rename from tests/unit/components/Logs.spec.js
rename to tests/components/Logs.spec.js
diff --git a/tests/unit/components/MainMenu.spec.js b/tests/components/MainMenu.spec.js
similarity index 100%
rename from tests/unit/components/MainMenu.spec.js
rename to tests/components/MainMenu.spec.js
diff --git a/tests/unit/components/Pager.spec.js b/tests/components/Pager.spec.js
similarity index 100%
rename from tests/unit/components/Pager.spec.js
rename to tests/components/Pager.spec.js
diff --git a/tests/unit/components/Schema.spec.js b/tests/components/Schema.spec.js
similarity index 100%
rename from tests/unit/components/Schema.spec.js
rename to tests/components/Schema.spec.js
diff --git a/tests/unit/components/Splitpanes.spec.js b/tests/components/Splitpanes.spec.js
similarity index 100%
rename from tests/unit/components/Splitpanes.spec.js
rename to tests/components/Splitpanes.spec.js
diff --git a/tests/unit/components/SqlEditor.spec.js b/tests/components/SqlEditor.spec.js
similarity index 100%
rename from tests/unit/components/SqlEditor.spec.js
rename to tests/components/SqlEditor.spec.js
diff --git a/tests/unit/components/Tab.spec.js b/tests/components/Tab.spec.js
similarity index 100%
rename from tests/unit/components/Tab.spec.js
rename to tests/components/Tab.spec.js
diff --git a/tests/unit/components/TableDescription.spec.js b/tests/components/TableDescription.spec.js
similarity index 100%
rename from tests/unit/components/TableDescription.spec.js
rename to tests/components/TableDescription.spec.js
diff --git a/tests/unit/components/Tabs.spec.js b/tests/components/Tabs.spec.js
similarity index 100%
rename from tests/unit/components/Tabs.spec.js
rename to tests/components/Tabs.spec.js
diff --git a/tests/unit/csv.spec.js b/tests/csv.spec.js
similarity index 100%
rename from tests/unit/csv.spec.js
rename to tests/csv.spec.js
diff --git a/tests/unit/database.spec.js b/tests/database.spec.js
similarity index 100%
rename from tests/unit/database.spec.js
rename to tests/database.spec.js
diff --git a/tests/unit/dbUtils.spec.js b/tests/db.utils.spec.js
similarity index 93%
rename from tests/unit/dbUtils.spec.js
rename to tests/db.utils.spec.js
index 6b6ec36..63f81ad 100644
--- a/tests/unit/dbUtils.spec.js
+++ b/tests/db.utils.spec.js
@@ -1,7 +1,7 @@
 import { expect } from 'chai'
-import dbUtils from '@/dbUtils'
+import dbUtils from '@/db.utils'
 
-describe('dbUtils.js', () => {
+describe('db.utils.js', () => {
   it('generateChunks', () => {
     const arr = ['1', '2', '3', '4', '5']
     const size = 2
diff --git a/tests/unit/fileUtils.spec.js b/tests/file.utils.spec.js
similarity index 98%
rename from tests/unit/fileUtils.spec.js
rename to tests/file.utils.spec.js
index 0d1f166..879f155 100644
--- a/tests/unit/fileUtils.spec.js
+++ b/tests/file.utils.spec.js
@@ -1,8 +1,8 @@
 import { expect } from 'chai'
-import fu from '@/fileUtils.js'
+import fu from '@/file.utils'
 import sinon from 'sinon'
 
-describe('fileUtils.js', () => {
+describe('file.utils.js', () => {
   afterEach(() => {
     sinon.restore()
   })
diff --git a/tests/unit/hint.spec.js b/tests/hint.spec.js
similarity index 100%
rename from tests/unit/hint.spec.js
rename to tests/hint.spec.js
diff --git a/tests/unit/splitter.spec.js b/tests/splitter.spec.js
similarity index 100%
rename from tests/unit/splitter.spec.js
rename to tests/splitter.spec.js
diff --git a/tests/unit/sql.spec.js b/tests/sql.spec.js
similarity index 100%
rename from tests/unit/sql.spec.js
rename to tests/sql.spec.js
diff --git a/tests/unit/store.spec.js b/tests/store.spec.js
similarity index 100%
rename from tests/unit/store.spec.js
rename to tests/store.spec.js
diff --git a/tests/unit/storedQueries.spec.js b/tests/storedQueries.spec.js
similarity index 99%
rename from tests/unit/storedQueries.spec.js
rename to tests/storedQueries.spec.js
index d5595ce..e3d5fd7 100644
--- a/tests/unit/storedQueries.spec.js
+++ b/tests/storedQueries.spec.js
@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import storedQueries from '@/storedQueries.js'
-import fu from '@/fileUtils'
+import fu from '@/file.utils'
 
 describe('storedQueries.js', () => {
   beforeEach(() => {
diff --git a/tests/unit/time.spec.js b/tests/time.spec.js
similarity index 100%
rename from tests/unit/time.spec.js
rename to tests/time.spec.js
diff --git a/tests/unit/tooltips.spec.js b/tests/tooltips.spec.js
similarity index 100%
rename from tests/unit/tooltips.spec.js
rename to tests/tooltips.spec.js
diff --git a/tests/unit/components/DbUpload.spec.js b/tests/unit/components/DbUpload.spec.js
deleted file mode 100644
index 64011d2..0000000
--- a/tests/unit/components/DbUpload.spec.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import { expect } from 'chai'
-import sinon from 'sinon'
-import Vuex from 'vuex'
-import { shallowMount } from '@vue/test-utils'
-import DbUpload from '@/components/DbUpload.vue'
-import fu from '@/fileUtils'
-import database from '@/database.js'
-
-describe('DbUploader.vue', () => {
-  afterEach(() => {
-    sinon.restore()
-  })
-
-  it('loads db on click and redirects to /editor', async () => {
-    // mock store state and mutations
-    const state = {}
-    const mutations = {
-      saveSchema: sinon.stub()
-    }
-    const store = new Vuex.Store({ state, mutations })
-
-    // mock getting a file from user
-    const file = {}
-    sinon.stub(fu, 'getFileFromUser').resolves(file)
-
-    // mock db loading
-    const schema = {}
-    const db = {
-      loadDb: sinon.stub().resolves(schema)
-    }
-    sinon.stub(database, 'getNewDatabase').returns(db)
-
-    // mock router
-    const $router = { push: sinon.stub() }
-    const $route = { path: '/' }
-
-    // mount the component
-    const wrapper = shallowMount(DbUpload, {
-      store,
-      mocks: { $router, $route }
-    })
-
-    await wrapper.find('.drop-area').trigger('click')
-    expect(db.loadDb.calledOnceWith(file)).to.equal(true)
-    await db.loadDb.returnValues[0]
-    expect(mutations.saveSchema.calledOnceWith(state, schema)).to.equal(true)
-    expect($router.push.calledOnceWith('/editor')).to.equal(true)
-  })
-
-  it('loads db on drop and redirects to /editor', async () => {
-    // mock store state and mutations
-    const state = {}
-    const mutations = {
-      saveSchema: sinon.stub()
-    }
-    const store = new Vuex.Store({ state, mutations })
-
-    // mock db loading
-    const schema = {}
-    const db = {
-      loadDb: sinon.stub().resolves(schema)
-    }
-    sinon.stub(database, 'getNewDatabase').returns(db)
-
-    // mock router
-    const $router = { push: sinon.stub() }
-    const $route = { path: '/' }
-
-    // mount the component
-    const wrapper = shallowMount(DbUpload, {
-      store,
-      mocks: { $router, $route }
-    })
-
-    // mock a file dropped by a user
-    const file = {}
-    const dropData = { dataTransfer: new DataTransfer() }
-    Object.defineProperty(dropData.dataTransfer, 'files', {
-      value: [file],
-      writable: false
-    })
-
-    await wrapper.find('.drop-area').trigger('drop', dropData)
-    expect(db.loadDb.calledOnceWith(file)).to.equal(true)
-    await db.loadDb.returnValues[0]
-    expect(mutations.saveSchema.calledOnceWith(state, schema)).to.equal(true)
-    expect($router.push.calledOnceWith('/editor')).to.equal(true)
-  })
-
-  it("doesn't redirect if already on /editor", async () => {
-    // mock store state and mutations
-    const state = {}
-    const mutations = {
-      saveSchema: sinon.stub()
-    }
-    const store = new Vuex.Store({ state, mutations })
-
-    // mock getting a file from user
-    const file = {}
-    sinon.stub(fu, 'getFileFromUser').resolves(file)
-
-    // mock db loading
-    const schema = {}
-    const db = {
-      loadDb: sinon.stub().resolves(schema)
-    }
-    sinon.stub(database, 'getNewDatabase').returns(db)
-
-    // mock router
-    const $router = { push: sinon.stub() }
-    const $route = { path: '/editor' }
-
-    // mount the component
-    const wrapper = shallowMount(DbUpload, {
-      store,
-      mocks: { $router, $route }
-    })
-
-    await wrapper.find('.drop-area').trigger('click')
-    await db.loadDb.returnValues[0]
-    expect($router.push.called).to.equal(false)
-  })
-})
diff --git a/tests/unit/views/MyQueries.spec.js b/tests/views/MyQueries.spec.js
similarity index 99%
rename from tests/unit/views/MyQueries.spec.js
rename to tests/views/MyQueries.spec.js
index 0774ca0..1c364a3 100644
--- a/tests/unit/views/MyQueries.spec.js
+++ b/tests/views/MyQueries.spec.js
@@ -3,9 +3,9 @@ import sinon from 'sinon'
 import { mount, shallowMount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import MyQueries from '@/views/MyQueries.vue'
-import storedQueries from '@/storedQueries.js'
+import storedQueries from '@/storedQueries'
 import { mutations } from '@/store'
-import fu from '@/fileUtils.js'
+import fu from '@/file.utils'
 
 describe('MyQueries.vue', () => {
   afterEach(() => {