setup unit tests for admin interface

admin/babel.config.js

@@ -1,5 +1,12 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+    "presets": [
+        ["env", { "modules": false }]
+    ],
+    "env": {
+        "test": {
+        "presets": [
+                ["env", { "targets": { "node": "current" }}]
+            ]
+        }
+    }
 }

admin/jest.config.js

@@ -0,0 +1,25 @@
+require('jsdom-global')
+module.exports = {
+  verbose: true,
+  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'],
+  moduleFileExtensions: [
+    'js',
+    // 'jsx',
+    'json',
+    'vue',
+  ],
+  // coverageReporters: ['lcov', 'text'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.(js|jsx)?$': 'babel-jest',
+    '<rootDir>/node_modules/vee-validate/dist/rules': 'babel-jest',
+  },
+  setupFiles: ['<rootDir>/test/testSetup.js'],
+  testMatch: ['**/?(*.)+(spec|test).js?(x)'],
+  // snapshotSerializers: ['jest-serializer-vue'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
+}

admin/package.json

@@ -11,11 +11,25 @@
     "serve": "vue-cli-service serve --open",
     "dev": "yarn run serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "test": "jest --coverage"
   },
   "dependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/node": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@vue/cli-plugin-unit-jest": "^4.5.14",
+    "@vue/test-utils": "^1.2.2",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^27.3.1",
+    "babel-plugin-component": "^1.1.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-vue": "^2.0.2",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "jest": "^27.3.1",
+    "jsdom-global": "^3.0.2",
+    "vue": "^2.6.11",
+    "vue-jest": "^3.0.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -43,6 +57,6 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not dead"
+    "not ie <= 10"
   ]
 }

admin/src/App.vue

@@ -6,9 +6,7 @@
 <script>
 
 export default {
-  name: 'App',
-  components: {
-  }
+   name: 'App',
 }
 </script>
 

admin/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

admin/src/main.test.js

@@ -0,0 +1,7 @@
+import './main'
+
+describe('main', () => {
+  it('is there', () => {
+    expect(true).toBeTruthy()
+  })
+})

admin/test/testSetup.js

@@ -0,0 +1,11 @@
+import { createLocalVue } from '@vue/test-utils'
+import Vue from 'vue'
+
+require('jsdom-global')()
+
+global.localVue = createLocalVue()
+
+// throw errors for vue warnings to force the programmers to take care about warnings
+Vue.config.warnHandler = (w) => {
+  throw new Error(w)
+}