Add testing

.eslintrc.js

@@ -1,8 +1,10 @@
 module.exports = {
   root: true,
+
   env: {
     node: true,
   },
+
   extends: [
     // vue/recommended includes all higher levels (vue/strongly-recommended, vue/essential)
     'plugin:vue/recommended',
@@ -11,12 +13,15 @@ module.exports = {
     '@vue/prettier',
     '@vue/prettier/@typescript-eslint',
   ],
+
   parser: 'vue-eslint-parser',
+
   parserOptions: {
     parser: '@typescript-eslint/parser',
     sourceType: 'module',
     ecmaVersion: 2020,
   },
+
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
@@ -24,4 +29,13 @@ module.exports = {
     // disable eslint no-shadow as it's causing false positives on typescript enums
     'no-shadow': 'off',
   },
+
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
 };

.github/workflows/ci.yml

@@ -25,3 +25,7 @@ jobs:
     - name: Run Lint
       run: |
         yarn lint-ci
+
+    - name: Run Tests
+      run: |
+        yarn test:unit

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+};

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "lint-ci": "vue-cli-service lint --no-fix"
   },
@@ -27,17 +28,20 @@
   },
   "devDependencies": {
     "@types/echarts": "^4.9.0",
+    "@types/jest": "^24.0.19",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^4.6.1",
     "@vue/cli-plugin-babel": "~4.5.8",
     "@vue/cli-plugin-eslint": "~4.5.8",
     "@vue/cli-plugin-router": "^4.5.7",
     "@vue/cli-plugin-typescript": "~4.5.8",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.8",
     "@vue/cli-service": "~4.5.8",
     "@vue/eslint-config-airbnb": "^5.1.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.1.0",
+    "@vue/test-utils": "^1.0.3",
     "eslint": "^6.7.2",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-prettier": "^3.1.4",

tests/unit/example.spec.ts

@@ -0,0 +1,12 @@
+import { mount } from '@vue/test-utils';
+import ValuePair from '@/components/ftbot/ValuePair.vue';
+
+describe('ValuePair.vue', () => {
+  it('renders description when passed', () => {
+    const msg = 'Test description';
+    const wrapper = mount(ValuePair, {
+      propsData: { description: msg },
+    });
+    expect(wrapper.text()).toMatch(msg);
+  });
+});

tsconfig.json

@@ -1,30 +1,29 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        "target": "es2020",
+    "target": "es2020",
-        "module": "es2020",
+    "module": "es2020",
-        // this enables stricter inference for data properties on `this`
+    "strict": true,
-        "strict": true,
+    "moduleResolution": "node",
-        // if using webpack 2+ or rollup, to leverage tree shaking:
+    "experimentalDecorators": true,
-        "moduleResolution": "node",
+    "noImplicitAny": false,
-        "experimentalDecorators": true,
+    "allowJs": true,
-        "noImplicitAny": false,
+    "sourceMap": true,
-        "allowJs": true,
+    "baseUrl": "src",
-        "sourceMap": true,
+    "types": [
-        "baseUrl": "src",
+      "webpack-env",
-        "types": [
+      "jest"
-            "webpack-env"
+    ],
-        ],
+    "paths": {
-        "paths": {
+      "@/*": [
-            "@/*": [
+        "./*"
-                "./*"
+      ]
-            ]
+    }
-        }
+  },
-    },
+  "include": [
-    "include": [
+    "src/**/*.ts",
-        "src/**/*.ts",
+    "src/**/*.tsx",
-        "src/**/*.tsx",
+    "src/**/*.vue",
-        "src/**/*.vue",
+    "tests/**/*.ts",
-        "tests/**/*.ts",
+    "tests/**/*.tsx"
-        "tests/**/*.tsx"
+  ]
-    ]
 }