change code structure

karma.conf.js

@@ -141,7 +141,7 @@ module.exports = function (config) {
             ]
           },
           {
-            test: /\.worker\.js$/,
+            test: /worker\.js$/,
             loader: 'worker-loader'
           },
           {

src/components/DbUploader/DelimiterSelector/index.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import ascii from '@/ascii'
+import ascii from './ascii'
 import DropDownChevron from '@/components/svg/dropDownChevron'
 import ClearIcon from '@/components/svg/clear'
 

src/components/DbUploader/index.vue

@@ -127,17 +127,17 @@
 </template>
 
 <script>
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
-import csv from '@/csv'
+import csv from './csv'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
-import DelimiterSelector from '@/components/DelimiterSelector'
+import DelimiterSelector from './DelimiterSelector'
 import CheckBox from '@/components/CheckBox'
 import SqlTable from '@/components/SqlTable'
 import Logs from '@/components/Logs'
 import ChangeDbIcon from '@/components/svg/changeDb'
-import time from '@/time'
+import time from '@/lib/utils/time'
-import database from '@/database'
+import database from '@/lib/database'
 
 const csvMimeTypes = [
   'text/csv',

src/components/Splitpanes/index.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import splitter from '@/splitter'
+import splitter from './splitter'
 
 export default {
   name: 'Splitpanes',

src/components/SqlTable/index.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import Pager from '@/components/Pager'
+import Pager from './Pager'
 
 export default {
   name: 'SqlTable',

src/components/svg/changeDb.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'changeDbIcon',

src/components/svg/export.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'ExportIcon',

src/components/svg/hint.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'HintIcon',

src/lib/database/_sql.js

@@ -1,5 +1,5 @@
 import initSqlJs from 'sql.js/dist/sql-wasm.js'
-import dbUtils from '@/db.utils'
+import dbUtils from './_statements'
 
 let SQL = null
 const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule })

src/lib/database/_worker.js

@@ -1,5 +1,5 @@
 import registerPromiseWorker from 'promise-worker/register'
-import Sql from '@/sql'
+import Sql from './_sql'
 
 const sqlReady = Sql.build()
 

src/lib/database/index.js

@@ -1,8 +1,8 @@
 import sqliteParser from 'sqlite-parser'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 // We can import workers like so because of worker-loader:
 // https://webpack.js.org/loaders/worker-loader/
-import Worker from '@/db.worker.js'
+import Worker from './_worker.js'
 
 // Use promise-worker in order to turn worker into the promise based one:
 // https://github.com/nolanlawson/promise-worker

src/lib/storedQueries.js

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 
 export default {
   getStoredQueries () {

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import App from './App.vue'
+import App from '@/App.vue'
-import router from './router'
+import router from '@/router'
-import store from './store'
+import store from '@/store'
 import { VuePlugin } from 'vuera'
 import VModal from 'vue-js-modal'
 
@@ -13,7 +13,7 @@ import '@/assets/styles/tooltips.css'
 import '@/assets/styles/messages.css'
 
 if (!['localhost', '127.0.0.1'].includes(location.hostname)) {
-  import('../registerServiceWorker') // eslint-disable-line no-unused-expressions
+  import('./registerServiceWorker') // eslint-disable-line no-unused-expressions
 }
 
 Vue.use(VuePlugin)

src/router.js

@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Editor from '@/views/Editor'
+import Editor from '@/views/Main/Editor'
-import MyQueries from '@/views/MyQueries'
+import MyQueries from '@/views/Main/MyQueries'
-import Home from '@/views/Home'
+import Welcome from '@/views/Welcome'
-import MainView from '@/views/MainView'
+import Main from '@/views/Main'
 
 Vue.use(VueRouter)
 
@@ -11,12 +11,12 @@ const routes = [
   {
     path: '/',
     name: 'Welcome',
-    component: Home
+    component: Welcome
   },
   {
     path: '/',
-    name: 'MainView',
+    name: 'Main',
-    component: MainView,
+    component: Main,
     children: [
       {
         path: '/editor',

src/store/actions.js

@@ -0,0 +1,30 @@
+import { nanoid } from 'nanoid'
+
+export default {
+  async addTab ({ state }, data) {
+    const tab = data ? JSON.parse(JSON.stringify(data)) : {}
+    // If no data then create a new blank one...
+    // No data.id means to create new tab, but not blank,
+    // e.g. with 'select * from csv_import' query after csv import
+    if (!data || !data.id) {
+      tab.id = nanoid()
+      tab.name = null
+      tab.tempName = state.untitledLastIndex
+        ? `Untitled ${state.untitledLastIndex}`
+        : 'Untitled'
+      tab.isUnsaved = true
+    } else {
+      tab.isUnsaved = false
+    }
+
+    // add new tab only if was not already opened
+    if (!state.tabs.some(openedTab => openedTab.id === tab.id)) {
+      state.tabs.push(tab)
+      if (!tab.name) {
+        state.untitledLastIndex += 1
+      }
+    }
+
+    return tab.id
+  }
+}

src/store/index.js

@@ -1,112 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { nanoid } from 'nanoid'
+import state from '@/store/state'
+import mutations from '@/store/mutations'
+import actions from '@/store/actions'
 
 Vue.use(Vuex)
 
-export const state = {
-  schema: null,
-  dbFile: null,
-  dbName: null,
-  tabs: [],
-  currentTab: null,
-  currentTabId: null,
-  untitledLastIndex: 0,
-  predefinedQueries: [],
-  db: null
-}
-
-export const mutations = {
-  setDb (state, db) {
-    if (state.db) {
-      state.db.shutDown()
-    }
-    state.db = db
-  },
-  saveSchema (state, { dbName, schema }) {
-    state.dbName = dbName
-    state.schema = schema
-  },
-
-  updateTab (state, { index, name, id, query, chart, isUnsaved }) {
-    const tab = state.tabs[index]
-    const oldId = tab.id
-
-    if (id && state.currentTabId === oldId) {
-      state.currentTabId = id
-    }
-
-    if (id) { tab.id = id }
-    if (name) { tab.name = name }
-    if (query) { tab.query = query }
-    if (chart) { tab.chart = chart }
-    if (isUnsaved !== undefined) { tab.isUnsaved = isUnsaved }
-    if (!isUnsaved) {
-      // Saved query is not predefined
-      delete tab.isPredefined
-    }
-
-    Vue.set(state.tabs, index, tab)
-  },
-  deleteTab (state, index) {
-    // If closing tab is the current opened
-    if (state.tabs[index].id === state.currentTabId) {
-      if (index < state.tabs.length - 1) {
-        state.currentTabId = state.tabs[index + 1].id
-      } else if (index > 0) {
-        state.currentTabId = state.tabs[index - 1].id
-      } else {
-        state.currentTabId = null
-        state.currentTab = null
-        state.untitledLastIndex = 0
-      }
-    }
-    state.tabs.splice(index, 1)
-  },
-  setCurrentTabId (state, id) {
-    state.currentTabId = id
-  },
-  setCurrentTab (state, tab) {
-    state.currentTab = tab
-  },
-  updatePredefinedQueries (state, queries) {
-    if (Array.isArray(queries)) {
-      state.predefinedQueries = queries
-    } else {
-      state.predefinedQueries = [queries]
-    }
-  }
-}
-
-export const actions = {
-  async addTab ({ state }, data) {
-    const tab = data ? JSON.parse(JSON.stringify(data)) : {}
-    // If no data then create a new blank one...
-    // No data.id means to create new tab, but not blank,
-    // e.g. with 'select * from csv_import' query after csv import
-    if (!data || !data.id) {
-      tab.id = nanoid()
-      tab.name = null
-      tab.tempName = state.untitledLastIndex
-        ? `Untitled ${state.untitledLastIndex}`
-        : 'Untitled'
-      tab.isUnsaved = true
-    } else {
-      tab.isUnsaved = false
-    }
-
-    // add new tab only if was not already opened
-    if (!state.tabs.some(openedTab => openedTab.id === tab.id)) {
-      state.tabs.push(tab)
-      if (!tab.name) {
-        state.untitledLastIndex += 1
-      }
-    }
-
-    return tab.id
-  }
-}
-
 export default new Vuex.Store({
   state,
   mutations,

src/store/mutations.js

@@ -0,0 +1,63 @@
+import Vue from 'vue'
+
+export default {
+  setDb (state, db) {
+    if (state.db) {
+      state.db.shutDown()
+    }
+    state.db = db
+  },
+  saveSchema (state, { dbName, schema }) {
+    state.dbName = dbName
+    state.schema = schema
+  },
+
+  updateTab (state, { index, name, id, query, chart, isUnsaved }) {
+    const tab = state.tabs[index]
+    const oldId = tab.id
+
+    if (id && state.currentTabId === oldId) {
+      state.currentTabId = id
+    }
+
+    if (id) { tab.id = id }
+    if (name) { tab.name = name }
+    if (query) { tab.query = query }
+    if (chart) { tab.chart = chart }
+    if (isUnsaved !== undefined) { tab.isUnsaved = isUnsaved }
+    if (!isUnsaved) {
+      // Saved query is not predefined
+      delete tab.isPredefined
+    }
+
+    Vue.set(state.tabs, index, tab)
+  },
+  deleteTab (state, index) {
+    // If closing tab is the current opened
+    if (state.tabs[index].id === state.currentTabId) {
+      if (index < state.tabs.length - 1) {
+        state.currentTabId = state.tabs[index + 1].id
+      } else if (index > 0) {
+        state.currentTabId = state.tabs[index - 1].id
+      } else {
+        state.currentTabId = null
+        state.currentTab = null
+        state.untitledLastIndex = 0
+      }
+    }
+    state.tabs.splice(index, 1)
+  },
+  setCurrentTabId (state, id) {
+    state.currentTabId = id
+  },
+  setCurrentTab (state, tab) {
+    state.currentTab = tab
+  },
+  updatePredefinedQueries (state, queries) {
+    if (Array.isArray(queries)) {
+      state.predefinedQueries = queries
+    } else {
+      state.predefinedQueries = [queries]
+    }
+  }
+}

src/store/state.js

@@ -0,0 +1,11 @@
+export default {
+  schema: null,
+  dbFile: null,
+  dbName: null,
+  tabs: [],
+  currentTab: null,
+  currentTabId: null,
+  untitledLastIndex: 0,
+  predefinedQueries: [],
+  db: null
+}

src/views/Main/Editor/Schema/index.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import TableDescription from '@/components/TableDescription'
+import TableDescription from './TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
 import DbUploader from '@/components/DbUploader'

src/views/Main/Editor/Tabs/Tab/Chart/index.vue

@@ -28,7 +28,7 @@ import plotly from 'plotly.js/dist/plotly'
 import 'react-chart-editor/lib/react-chart-editor.min.css'
 
 import PlotlyEditor from 'react-chart-editor'
-import chart from '@/chart'
+import chartHelper from './chartHelper'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 
 export default {
@@ -49,10 +49,10 @@ export default {
   },
   computed: {
     dataSources () {
-      return chart.getDataSourcesFromSqlResult(this.sqlResult)
+      return chartHelper.getDataSourcesFromSqlResult(this.sqlResult)
     },
     dataSourceOptions () {
-      return chart.getOptionsFromDataSources(this.dataSources)
+      return chartHelper.getOptionsFromDataSources(this.dataSources)
     }
   },
   watch: {
@@ -71,7 +71,7 @@ export default {
       this.$emit('update')
     },
     getChartStateForSave () {
-      return chart.getChartStateForSave(this.state, this.dataSources)
+      return chartHelper.getChartStateForSave(this.state, this.dataSources)
     }
   }
 }

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

@@ -2,7 +2,6 @@ import CM from 'codemirror'
 import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/sql-hint.js'
 import store from '@/store'
-import { debounce } from 'debounce'
 
 export function getHints (cm, options) {
   const token = cm.getTokenAt(cm.getCursor()).string.toUpperCase()
@@ -27,23 +26,20 @@ const hintOptions = {
   },
   get defaultTable () {
     const schema = store.state.schema
-    return schema.length === 1 ? schema[0].name : null
+    return schema && schema.length === 1 ? schema[0].name : null
   },
   completeSingle: false,
   completeOnSingleClick: true,
   alignWithWord: false
 }
 
-export default {
+export default function showHint (editor) {
-  show: debounce(function (editor) {
+  // Don't show autocomplete after a space or semicolon or in string literals
-    // Don't show autocomplete after a space or semicolon or in string literals
+  const token = editor.getTokenAt(editor.getCursor())
-    const token = editor.getTokenAt(editor.getCursor())
+  const ch = token.string.slice(-1)
-    const ch = token.string.slice(-1)
+  const tokenType = token.type
-    const tokenType = token.type
+  if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
-    if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
+    return
-      return
+  }
-    }
+  CM.showHint(editor, getHints, hintOptions)
-
-    CM.showHint(editor, getHints, hintOptions)
-  }, 400)
 }

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

@@ -5,7 +5,8 @@
 </template>
 
 <script>
-import hint from '@/hint'
+import showHint from './hint'
+import { debounce } from 'debounce'
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/mode/sql/sql.js'
@@ -38,7 +39,7 @@ export default {
     }
   },
   methods: {
-    onChange: hint.show
+    onChange: debounce(showHint, 400)
   }
 }
 </script>

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

@@ -50,10 +50,10 @@
 
 <script>
 import SqlTable from '@/components/SqlTable'
-import SqlEditor from '@/components/SqlEditor'
 import Splitpanes from '@/components/Splitpanes'
-import ViewSwitcher from '@/components/ViewSwitcher'
+import SqlEditor from './SqlEditor'
-import Chart from '@/components/Chart'
+import ViewSwitcher from './ViewSwitcher'
+import Chart from './Chart'
 
 export default {
   name: 'Tab',

src/views/Main/Editor/Tabs/index.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import Tab from '@/components/Tab'
+import Tab from './Tab'
 import CloseIcon from '@/components/svg/close'
 
 export default {

src/views/Main/Editor/index.vue

@@ -23,8 +23,8 @@
 
 <script>
 import Splitpanes from '@/components/Splitpanes'
-import Schema from '@/components/Schema'
+import Schema from './Schema'
-import Tabs from '@/components/Tabs'
+import Tabs from './Tabs'
 import DbUploader from '@/components/DbUploader'
 
 export default {

src/views/Main/MainMenu.vue

@@ -62,7 +62,7 @@
 <script>
 import TextField from '@/components/TextField'
 import CloseIcon from '@/components/svg/close'
-import storedQueries from '@/storedQueries'
+import storedQueries from '@/lib/storedQueries'
 
 export default {
   name: 'MainMenu',

src/views/Main/MyQueries/index.vue

@@ -141,16 +141,16 @@
 </template>
 
 <script>
-import RenameIcon from '@/components/svg/rename'
+import RenameIcon from './svg/rename'
-import CopyIcon from '@/components/svg/copy'
+import CopyIcon from './svg/copy'
 import ExportIcon from '@/components/svg/export'
-import DeleteIcon from '@/components/svg/delete'
+import DeleteIcon from './svg/delete'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
-import storedQueries from '@/storedQueries'
+import storedQueries from '@/lib/storedQueries'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 
 export default {
   name: 'MyQueries',

src/views/Main/MyQueries/svg/copy.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'CopyIcon',

src/views/Main/MyQueries/svg/delete.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'DeleteIcon',

src/views/Main/MyQueries/svg/rename.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'RenameIcon',

src/views/Main/index.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import MainMenu from '@/components/MainMenu'
+import MainMenu from './MainMenu'
 import '@/assets/styles/scrollbars.css'
 
 export default {
-  name: 'MainView',
+  name: 'Main',
   components: { MainMenu }
 }
 </script>

src/views/Welcome.vue

@@ -14,7 +14,7 @@
 import DbUploader from '@/components/DbUploader'
 
 export default {
-  name: 'Home',
+  name: 'Welcome',
   components: { DbUploader }
 }
 </script>

tests/components/DbUploader/DbUploader.spec.js

@@ -2,10 +2,10 @@ 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 DbUploader from '@/components/DbUploader'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
-import database from '@/database'
+import database from '@/lib/database'
-import csv from '@/csv'
+import csv from '@/components/DbUploader/csv'
 
 describe('DbUploader.vue', () => {
   let state = {}

tests/components/DbUploader/DelimiterSelector/DelimiterSelector.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { mount, shallowMount } from '@vue/test-utils'
-import DelimiterSelector from '@/components/DelimiterSelector'
+import DelimiterSelector from '@/components/DbUploader/DelimiterSelector'
 
 describe('DelimiterSelector', async () => {
   it('shows the name of value', async () => {

tests/components/DbUploader/csv.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import csv from '@/csv'
+import csv from '@/components/DbUploader/csv'
 import Papa from 'papaparse'
 
 describe('csv.js', () => {

tests/components/LoadingIndicator.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import LoadingIndicator from '@/components/LoadingIndicator.vue'
+import LoadingIndicator from '@/components/LoadingIndicator'
 
 describe('LoadingIndicator.vue', () => {
   it('Calculates animation class', async () => {

tests/components/Logs.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import Logs from '@/components/Logs.vue'
+import Logs from '@/components/Logs'
 
 let place
 describe('Logs.vue', () => {

tests/components/Splitpanes/Splitpanes.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import Splitpanes from '@/components/Splitpanes.vue'
+import Splitpanes from '@/components/Splitpanes'
 
 describe('Splitpanes.vue', () => {
   it('renders correctly - vertical', () => {

tests/components/Splitpanes/splitter.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import splitter from '@/splitter'
+import splitter from '@/components/Splitpanes/splitter'
 
 describe('splitter.js', () => {
   afterEach(() => {

tests/components/SqlTable/Pager.spec.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount } from '@vue/test-utils'
-import Pager from '@/components/Pager.vue'
+import Pager from '@/components/SqlTable/Pager'
 
 describe('Pager.vue', () => {
   afterEach(() => {

tests/lib/database/_sql.spec.js

@@ -2,14 +2,14 @@ import chai from 'chai'
 import sinon from 'sinon'
 import chaiAsPromised from 'chai-as-promised'
 import initSqlJs from 'sql.js'
-import Sql from '@/sql'
+import Sql from '@/lib/database/_sql'
 chai.use(chaiAsPromised)
 const expect = chai.expect
 chai.should()
 
 const getSQL = initSqlJs()
 
-describe('sql.js', () => {
+describe('_sql.js', () => {
   afterEach(() => {
     sinon.restore()
   })

tests/lib/database/_statements.spec.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
-import dbUtils from '@/db.utils'
+import dbUtils from '@/lib/database/_statements'
 
-describe('db.utils.js', () => {
+describe('_statements.js', () => {
   it('generateChunks', () => {
     const arr = ['1', '2', '3', '4', '5']
     const size = 2

tests/lib/database/database.spec.js

@@ -2,8 +2,8 @@ import chai from 'chai'
 import sinon from 'sinon'
 import chaiAsPromised from 'chai-as-promised'
 import initSqlJs from 'sql.js'
-import database from '@/database'
+import database from '@/lib/database'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 
 chai.use(chaiAsPromised)
 const expect = chai.expect

tests/lib/storedQueries.spec.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import storedQueries from '@/storedQueries.js'
+import storedQueries from '@/lib/storedQueries'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 
 describe('storedQueries.js', () => {
   beforeEach(() => {

tests/lib/utils/fileIo.spec.js

@@ -1,8 +1,8 @@
 import { expect } from 'chai'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 import sinon from 'sinon'
 
-describe('file.utils.js', () => {
+describe('fileIo.js', () => {
   afterEach(() => {
     sinon.restore()
   })

tests/lib/utils/time.spec.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import time from '@/time'
+import time from '@/lib/utils/time'
 
 describe('time.js', () => {
   it('getPeriod', () => {

tests/store/actions.spec.js

@@ -0,0 +1,67 @@
+import { expect } from 'chai'
+import actions from '@/store/actions'
+
+const { addTab } = actions
+
+describe('actions', () => {
+  it('addTab adds new blank tab', async () => {
+    const state = {
+      tabs: [],
+      untitledLastIndex: 0
+    }
+
+    const id = await addTab({ state })
+    expect(state.tabs[0].id).to.eql(id)
+    expect(state.tabs[0].name).to.eql(null)
+    expect(state.tabs[0].tempName).to.eql('Untitled')
+    expect(state.tabs[0].isUnsaved).to.eql(true)
+    expect(state.untitledLastIndex).to.equal(1)
+  })
+
+  it('addTab adds tab from saved queries', async () => {
+    const state = {
+      tabs: [],
+      untitledLastIndex: 0
+    }
+    const tab = {
+      id: 1,
+      name: 'test',
+      tempName: null,
+      query: 'SELECT * from foo',
+      chart: {},
+      isUnsaved: false
+    }
+    await addTab({ state }, tab)
+    expect(state.tabs[0]).to.eql(tab)
+    expect(state.untitledLastIndex).to.equal(0)
+  })
+
+  it("addTab doesn't add anything when the query is already opened", async () => {
+    const tab1 = {
+      id: 1,
+      name: 'test',
+      tempName: null,
+      query: 'SELECT * from foo',
+      chart: {},
+      isUnsaved: false
+    }
+
+    const tab2 = {
+      id: 2,
+      name: 'bar',
+      tempName: null,
+      query: 'SELECT * from bar',
+      chart: {},
+      isUnsaved: false
+    }
+
+    const state = {
+      tabs: [tab1, tab2],
+      untitledLastIndex: 0
+    }
+
+    await addTab({ state }, tab1)
+    expect(state.tabs).to.have.lengthOf(2)
+    expect(state.untitledLastIndex).to.equal(0)
+  })
+})

tests/store/mutations.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { mutations, actions } from '@/store'
+import mutations from '@/store/mutations'
 const {
   saveSchema,
   updateTab,
@@ -11,8 +11,6 @@ const {
   setDb
 } = mutations
 
-const { addTab } = actions
-
 describe('mutations', () => {
   it('setDb', () => {
     const state = {
@@ -376,66 +374,3 @@ describe('mutations', () => {
     expect(state.predefinedQueries).to.eql(queries)
   })
 })
-
-describe('actions', () => {
-  it('addTab adds new blank tab', async () => {
-    const state = {
-      tabs: [],
-      untitledLastIndex: 0
-    }
-
-    const id = await addTab({ state })
-    expect(state.tabs[0].id).to.eql(id)
-    expect(state.tabs[0].name).to.eql(null)
-    expect(state.tabs[0].tempName).to.eql('Untitled')
-    expect(state.tabs[0].isUnsaved).to.eql(true)
-    expect(state.untitledLastIndex).to.equal(1)
-  })
-
-  it('addTab adds tab from saved queries', async () => {
-    const state = {
-      tabs: [],
-      untitledLastIndex: 0
-    }
-    const tab = {
-      id: 1,
-      name: 'test',
-      tempName: null,
-      query: 'SELECT * from foo',
-      chart: {},
-      isUnsaved: false
-    }
-    await addTab({ state }, tab)
-    expect(state.tabs[0]).to.eql(tab)
-    expect(state.untitledLastIndex).to.equal(0)
-  })
-
-  it("addTab doesn't add anything when the query is already opened", async () => {
-    const tab1 = {
-      id: 1,
-      name: 'test',
-      tempName: null,
-      query: 'SELECT * from foo',
-      chart: {},
-      isUnsaved: false
-    }
-
-    const tab2 = {
-      id: 2,
-      name: 'bar',
-      tempName: null,
-      query: 'SELECT * from bar',
-      chart: {},
-      isUnsaved: false
-    }
-
-    const state = {
-      tabs: [tab1, tab2],
-      untitledLastIndex: 0
-    }
-
-    await addTab({ state }, tab1)
-    expect(state.tabs).to.have.lengthOf(2)
-    expect(state.untitledLastIndex).to.equal(0)
-  })
-})

tests/tooltipMixin.spec.js

@@ -1,8 +1,8 @@
 import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
-import tooltipMixin from '@/mixins/tooltips.js'
+import tooltipMixin from '@/tooltipMixin'
 
-describe('tooltips.js', () => {
+describe('tooltipMixin.js', () => {
   it('tooltip is hidden in initial', () => {
     const component = {
       template: '<div :style="tooltipStyle"></div>',

tests/views/MainView/Editor/Schema/Schema.spec.js

@@ -2,8 +2,8 @@ import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
-import Schema from '@/components/Schema.vue'
+import Schema from '@/views/Main/Editor/Schema'
-import TableDescription from '@/components/TableDescription.vue'
+import TableDescription from '@/views/Main/Editor/Schema/TableDescription'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)

tests/views/MainView/Editor/Schema/TableDescription.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
-import TableDescription from '@/components/TableDescription.vue'
+import TableDescription from '@/views/Main/Editor/Schema/TableDescription'
 
 describe('TableDescription.vue', () => {
   it('Initially the columns are hidden and table name is rendered', () => {

tests/views/MainView/Editor/Tabs/Tab/Chart/Chart.spec.js

@@ -1,8 +1,8 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount, shallowMount } from '@vue/test-utils'
-import Chart from '@/components/Chart.vue'
+import Chart from '@/views/Main/Editor/Tabs/Tab/Chart'
-import chart from '@/chart.js'
+import chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
 import * as dereference from 'react-chart-editor/lib/lib/dereference'
 
 describe('Chart.vue', () => {
@@ -14,7 +14,7 @@ describe('Chart.vue', () => {
     // mount the component
     const wrapper = shallowMount(Chart)
     const vm = wrapper.vm
-    const stub = sinon.stub(chart, 'getChartStateForSave').returns('result')
+    const stub = sinon.stub(chartHelper, 'getChartStateForSave').returns('result')
     const chartData = vm.getChartStateForSave()
     expect(stub.calledOnceWith(vm.state, vm.dataSources)).to.equal(true)
     expect(chartData).to.equal('result')

tests/views/MainView/Editor/Tabs/Tab/Chart/chartHelper.spec.js

@@ -1,9 +1,9 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import * as chart from '@/chart'
+import * as chartHelper from '@/views/Main/Editor/Tabs/Tab/Chart/chartHelper'
 import * as dereference from 'react-chart-editor/lib/lib/dereference'
 
-describe('chart.js', () => {
+describe('chartHelper.js', () => {
   afterEach(() => {
     sinon.restore()
   })
@@ -17,7 +17,7 @@ describe('chart.js', () => {
       ]
     }
 
-    const ds = chart.getDataSourcesFromSqlResult(sqlResult)
+    const ds = chartHelper.getDataSourcesFromSqlResult(sqlResult)
     expect(ds).to.eql({
       id: [1, 2],
       name: ['foo', 'bar']
@@ -30,7 +30,7 @@ describe('chart.js', () => {
       name: ['foo', 'bar']
     }
 
-    const ds = chart.getOptionsFromDataSources(dataSources)
+    const ds = chartHelper.getOptionsFromDataSources(dataSources)
     expect(ds).to.eql([
       { value: 'id', label: 'id' },
       { value: 'name', label: 'name' }
@@ -53,7 +53,7 @@ describe('chart.js', () => {
     sinon.stub(dereference, 'default')
     sinon.spy(JSON, 'parse')
 
-    const ds = chart.getChartStateForSave(state, dataSources)
+    const ds = chartHelper.getChartStateForSave(state, dataSources)
 
     expect(dereference.default.calledOnce).to.equal(true)
 

tests/views/MainView/Editor/Tabs/Tab/SqlEditor/SqlEditor.spec.js

@@ -1,11 +1,12 @@
 import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
-import SqlEditor from '@/components/SqlEditor.vue'
+import SqlEditor from '@/views/Main/Editor/Tabs/Tab/SqlEditor'
 
 describe('SqlEditor.vue', () => {
   it('Emits input event when a query is changed', async () => {
     const wrapper = mount(SqlEditor)
     await wrapper.findComponent({ name: 'codemirror' }).vm.$emit('input', 'SELECT * FROM foo')
     expect(wrapper.emitted('input')[0]).to.eql(['SELECT * FROM foo'])
+    // Take a pause to keep proper state in debounced '@/views/Main/Editor/Tabs/Tab/SqlEditor/hint'
   })
 })

tests/views/MainView/Editor/Tabs/Tab/SqlEditor/hint.spec.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { state } from '@/store'
+import state from '@/store/state'
-import hint, { getHints } from '@/hint'
+import showHint, { getHints } from '@/views/Main/Editor/Tabs/Tab/SqlEditor/hint'
 import CM from 'codemirror'
 
 describe('hint.js', () => {
@@ -40,9 +40,7 @@ describe('hint.js', () => {
       getCursor: sinon.stub()
     }
 
-    const clock = sinon.useFakeTimers()
+    showHint(editor)
-    hint.show(editor)
-    clock.tick(500)
 
     expect(CM.showHint.called).to.equal(true)
     expect(CM.showHint.firstCall.args[2].tables).to.eql({
@@ -77,10 +75,7 @@ describe('hint.js', () => {
       getCursor: sinon.stub()
     }
 
-    const clock = sinon.useFakeTimers()
+    showHint(editor)
-    hint.show(editor)
-    clock.tick(500)
-
     expect(CM.showHint.firstCall.args[2].defaultTable).to.equal('foo')
   })
 
@@ -97,10 +92,7 @@ describe('hint.js', () => {
       getCursor: sinon.stub()
     }
 
-    const clock = sinon.useFakeTimers()
+    showHint(editor)
-    hint.show(editor)
-    clock.tick(500)
-
     expect(CM.showHint.called).to.equal(false)
   })
 
@@ -117,10 +109,7 @@ describe('hint.js', () => {
       getCursor: sinon.stub()
     }
 
-    const clock = sinon.useFakeTimers()
+    showHint(editor)
-    hint.show(editor)
-    clock.tick(500)
-
     expect(CM.showHint.called).to.equal(false)
   })
 
@@ -137,10 +126,7 @@ describe('hint.js', () => {
       getCursor: sinon.stub()
     }
 
-    const clock = sinon.useFakeTimers()
+    showHint(editor)
-    hint.show(editor)
-    clock.tick(500)
-
     expect(CM.showHint.called).to.equal(false)
   })
 
@@ -218,10 +204,7 @@ describe('hint.js', () => {
       getCursor: sinon.stub()
     }
 
-    const clock = sinon.useFakeTimers()
+    showHint(editor)
-    hint.show(editor)
-    clock.tick(500)
-
     expect(CM.showHint.called).to.equal(true)
     expect(CM.showHint.firstCall.args[2].tables).to.eql({})
   })

tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js

@@ -1,9 +1,9 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount } from '@vue/test-utils'
-import { mutations } from '@/store'
+import mutations from '@/store/mutations'
 import Vuex from 'vuex'
-import Tab from '@/components/Tab.vue'
+import Tab from '@/views/Main/Editor/Tabs/Tab'
 
 describe('Tab.vue', () => {
   afterEach(() => {

tests/views/MainView/Editor/Tabs/Tabs.spec.js

@@ -1,9 +1,9 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import { shallowMount, mount, createWrapper } from '@vue/test-utils'
-import { mutations } from '@/store'
+import mutations from '@/store/mutations'
 import Vuex from 'vuex'
-import Tabs from '@/components/Tabs.vue'
+import Tabs from '@/views/Main/Editor/Tabs'
 
 describe('Tabs.vue', () => {
   afterEach(() => {

tests/views/MainView/MainMenu.spec.js

@@ -2,8 +2,8 @@ import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount, shallowMount, createWrapper } from '@vue/test-utils'
 import Vuex from 'vuex'
-import MainMenu from '@/components/MainMenu.vue'
+import MainMenu from '@/views/Main/MainMenu'
-import storedQueries from '@/storedQueries.js'
+import storedQueries from '@/lib/storedQueries'
 
 let wrapper = null
 

tests/views/MainView/MyQueries/MyQueries.spec.js

@@ -2,10 +2,10 @@ import { expect } from 'chai'
 import sinon from 'sinon'
 import { mount, shallowMount } from '@vue/test-utils'
 import Vuex from 'vuex'
-import MyQueries from '@/views/MyQueries.vue'
+import MyQueries from '@/views/Main/MyQueries'
-import storedQueries from '@/storedQueries'
+import storedQueries from '@/lib/storedQueries'
-import { mutations } from '@/store'
+import mutations from '@/store/mutations'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 
 describe('MyQueries.vue', () => {
   afterEach(() => {

vue.config.js

@@ -31,11 +31,11 @@ module.exports = {
 
     config.module
       .rule('worker')
-      .test(/\.worker\.js$/)
+      .test(/worker\.js$/)
       .use('worker-loader')
       .loader('worker-loader')
       .end()
 
-    config.module.rule('js').exclude.add(/\.worker\.js$/)
+    config.module.rule('js').exclude.add(/worker\.js$/)
   }
 }