Testing infra for Vue components

Former-commit-id: f06e5852

fda-ui/.babelrc

-{
-  "plugins": [
-    "@babel/plugin-transform-runtime"
-  ]
-}

fda-ui/.nycrc

+{
+  "per-file": true,
+  "lines": 25,
+  "statements": 25,
+  "functions": 10,
+  "branches": 35,
+  "check-coverage": true,
+  "include": [ "components/**/*.vue", "layouts/**/*.vue", "pages/**/*.vue"],
+  "exclude": ["node_modules"],
+  "extension": [".js", ".vue"],
+  "reporter": [
+    "lcov",
+    "text",
+    "cobertura"
+  ],
+  "cache": true,
+  "all": true
+}

fda-ui/ava.config.cjs

+module.exports = () => {
+  return {
+    require: [
+      './test/_setup.js',
+      '@babel/polyfill'
+    ],
+    timeout: '20s',
+    ignoredByWatcher: ['!**/*.{js,vue}'],
+    verbose: true,
+    color: true,
+    babel: true
+  }
+}

fda-ui/babel.config.js

+module.exports = {
+  sourceMaps: 'both',
+  env: {
+    test: {
+      plugins: [
+        '@babel/plugin-transform-runtime',
+        [
+          'module-resolver',
+          {
+            root: ['.'],
+            alias: {
+              '@': '.',
+              '~': '.'
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

fda-ui/components/query/QBFilters.vue

@@ -30,7 +30,7 @@
         <v-col class="acitons mt-1" cols="3">
           <v-btn :disabled="!canAdd(idx)" class="mr-1" depressed tile @click="addAnd">AND</v-btn>
           <v-btn :disabled="!canAdd(idx)" class="mr-1" depressed tile @click="addOr">OR</v-btn>
-          <v-btn depressed @click="remove"><v-icon>mdi-delete</v-icon></v-btn>
+          <v-btn depressed tile @click="remove(idx)"><v-icon>mdi-delete</v-icon></v-btn>
         </v-col>
       </v-row>
     </div>
@@ -74,7 +74,17 @@ export default {
       this.value.push({ type: 'or' })
       this.addFirst()
     },
-    remove () {
+    remove (idx) {
+      if (idx === 0) {
+        if (this.value.length === 1) {
+          this.value.splice(idx, 1)
+        } else {
+          this.value.splice(idx, 2)
+        }
+      } else {
+        // remove current and previous
+        this.value.splice(idx - 1, 2)
+      }
     },
     getPrefix (clause) {
       return 'FOO'

fda-ui/components/query/QueryBuilder.vue

@@ -4,6 +4,7 @@
       <v-col cols="6">
         <v-select
           v-model="table"
+          autofocus
           :items="tables"
           item-text="name"
           return-object

fda-ui/package.json

@@ -11,19 +11,10 @@
     "ver": "nuxt --version",
     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lint": "yarn lint:js",
-    "test": "ava --verbose",
-    "test:watch": "ava --watch"
-  },
-  "ava": {
-    "require": [
-      "./test/setup.js",
-      "@babel/polyfill"
-    ],
-    "timeout": "20s",
-    "files": [
-      "test/unit/**/*",
-      "test/e2e/**/*"
-    ]
+    "test:unit": "cross-env TEST=unit ava --config ava.config.cjs ./test/unit/**/* ./test/specs/**/*",
+    "test:watch": "cross-env TEST=unit ava --config ava.config.cjs --watch",
+    "test:e2e": "cross-env TEST=e2e ava --config ava.config.cjs ./test/e2e/**/*",
+    "test": "yarn test:unit & yarn test:e2e"
   },
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.13.9",
@@ -43,6 +34,7 @@
     "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
+    "@ava/babel": "^1.0.1",
     "@babel/core": "^7.14.3",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.14.2",
@@ -51,10 +43,18 @@
     "@nuxtjs/eslint-config": "^3.1.0",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@nuxtjs/vuetify": "^1.11.2",
+    "@vue/test-utils": "^1.2.0",
     "ava": "^3.15.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.10.0",
     "eslint-plugin-nuxt": "^1.0.0",
-    "nyc": "^15.1.0"
+    "jsdom": "^16.6.0",
+    "jsdom-global": "^3.0.2",
+    "nyc": "^15.1.0",
+    "require-extension-hooks": "^0.3.3",
+    "require-extension-hooks-babel": "^1.0.0-beta.1",
+    "require-extension-hooks-vue": "^3.0.0"
   }
 }

fda-ui/test/_setup.js

+// Set up JSDom.
+require('jsdom-global')()
+
+// Setup browser environment
+const hooks = require('require-extension-hooks')
+const Vue = require('vue')
+
+const Vuetify = require('vuetify')
+
+// Fix the Date object, see <https://github.com/vuejs/vue-test-utils/issues/936#issuecomment-415386167>.
+window.Date = Date
+
+// prevent unknown components: <v-btn>, etc.
+Vue.use(Vuetify)
+
+// remove dev tip
+Vue.config.devtools = false
+// remove production tip
+Vue.config.productionTip = false
+
+// Setup vue files to be processed by `require-extension-hooks-vue`
+hooks('vue').plugin('vue').push()
+
+// Setup vue and js files to be processed by `require-extension-hooks-babel`
+hooks(['vue', 'js'])
+  .exclude(({ filename }) => filename.match(/\/node_modules\//))
+  .plugin('babel')
+  .push()

fda-ui/test/setup.js

-require('@babel/register')({
-  babelrc: false,
-  presets: ['@babel/preset-env']
-})

fda-ui/test/specs/QBFilters.spec.js

+import test from 'ava'
+import { mount, shallowMount } from '@vue/test-utils'
+import QBFilters from '@/components/query/QBFilters'
+
+test('is a Vue instance', (t) => {
+  const wrapper = mount(QBFilters)
+  t.truthy(wrapper.vm)
+})
+
+test('deleting not-first', (t) => {
+  const { vm } = shallowMount(QBFilters, {
+    propsData: {
+      columns: ['username', 'id']
+    }
+  })
+  t.deepEqual(vm.value, [])
+
+  // add First, we have one where element
+  vm.addFirst()
+  t.is(vm.value[0].type, 'where')
+  t.is(vm.value.length, 1)
+
+  // add another "and" element
+  vm.addAnd()
+  t.is(vm.value.length, 3)
+
+  // remove the third (2), we have removed the (1 and 2)
+  vm.remove(2)
+  t.deepEqual(vm.value.map(x => x.type), ['where'])
+})
+
+test('deleting first without others', (t) => {
+  const { vm } = shallowMount(QBFilters, {
+    propsData: {
+      columns: ['username', 'id']
+    }
+  })
+  vm.addFirst()
+  vm.remove(0)
+  t.deepEqual(vm.value.map(x => x.type), [])
+})
+
+test('deleting first with others', (t) => {
+  const { vm } = shallowMount(QBFilters, {
+    propsData: {
+      columns: ['username', 'id']
+    }
+  })
+  vm.addFirst()
+  vm.addAnd()
+  t.is(vm.value.length, 3)
+  vm.remove(0)
+  t.deepEqual(vm.value.map(x => x.type), ['where'])
+})