Add testing

.github/workflows/node-js.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

babel.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   presets: [
     // Used for Vue applications.
-    '@vue/app',
+    // '@vue/app',
+    '@babel/preset-env',
   ],
   plugins: [
     // Allows us to directly include modules that use CommonJS (like phyx.js).

package.json

@@ -5,12 +5,9 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "test": "jest"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/phyloref/curation-tool.git"
+    "test": "vue-cli-service test:unit"
   },
   "dependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.10.4",
@@ -20,7 +17,7 @@
     "@phyloref/phyx": "^1.0.1",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.15.0",
-    "filesaver.js-npm": "^1.0.1",
+    "file-saver": "^2.0.5",
     "jquery": "^3.5.1",
     "lodash": "^4.17.19",
     "newick-js": "^1.1.1",
@@ -36,19 +33,21 @@
     "@babel/preset-env": "^7.10.4",
     "@vue/cli-plugin-babel": "^3.12.1",
     "@vue/cli-plugin-eslint": "^3.12.1",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
     "@vue/cli-service": "^3.12.1",
-    "@vue/test-utils": "^1.0.3",
+    "@vue/test-utils": "^1.1.3",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^27.0.6",
+    "buffer": "^6.0.3",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-json": "^1.4.0",
     "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-vue": "^5.2.3",
-    "jest": "^24.9.0",
-    "vue-jest": "^3.0.6",
+    "jest": "^27.0.5",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
@@ -63,7 +62,18 @@
     "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "postcss": {
     "plugins": {
@@ -76,15 +86,22 @@
     "not ie <= 8"
   ],
   "jest": {
+    "preset": "@vue/cli-plugin-unit-jest",
     "moduleFileExtensions": [
       "js",
       "json",
       "vue"
     ],
     "transform": {
-      "^.*\\.vue$": "vue-jest",
+      "^.*\\.vue$": "@vue/vue2-jest",
       "^.+\\.js$": "babel-jest"
     },
+    "setupFiles": [
+      "<rootDir>/src/jest-setup.js"
+    ],
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/(?!ky-universal)"
+    ],
     "collectCoverage": true,
     "collectCoverageFrom": [
       "**/*.{js,vue}",
@@ -95,5 +112,9 @@
       "html",
       "text-summary"
     ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/phyloref/curation-tool.git"
   }
 }

src/components/cards/ModifiedCard.spec.js → src/__tests__/ModifiedCard.spec.js

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils';
-import ModifiedCard from './ModifiedCard';
+import ModifiedCard from '../components/cards/ModifiedCard.vue';
 
 describe('ModifiedCard', () => {
-  test('should be accessible as a Vue instance', () => {
-    const wrapper = mount(ModifiedCard);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
   test('is initially invisible', () => {
     const wrapper = mount(ModifiedCard);
-    expect(wrapper.contains('div')).toBeFalsy();
+    expect(wrapper.findComponent("div").exists()).toBeFalsy();
   });
   test('remains invisible if the comparison values provided are identical', () => {
     const wrapper = mount(ModifiedCard, {
@@ -17,7 +13,7 @@ describe('ModifiedCard', () => {
         compareTo: { key: 'test1' },
       },
     });
-    expect(wrapper.contains('div')).toBeFalsy();
+    expect(wrapper.findComponent("div").exists()).toBeFalsy();
   });
   test('becomes visible if the comparison values provided are different', () => {
     const wrapper = mount(ModifiedCard, {
@@ -26,7 +22,7 @@ describe('ModifiedCard', () => {
         compareTo: { key: 'test2' },
       },
     });
-    expect(wrapper.contains('div')).toBeTruthy();
+    expect(wrapper.findComponent("div").exists()).toBeTruthy();
   });
   test('becomes visible if one of the comparison value is undefined', () => {
     const wrapper = mount(ModifiedCard, {
@@ -35,6 +31,6 @@ describe('ModifiedCard', () => {
         compareTo: undefined,
       },
     });
-    expect(wrapper.contains('div')).toBeTruthy();
+    expect(wrapper.findComponent("div").exists()).toBeTruthy();
   });
 });

src/components/icons/ModifiedIcon.spec.js → src/__tests__/ModifiedIcon.spec.js

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils';
-import ModifiedIcon from './ModifiedIcon';
+import ModifiedIcon from '../components/icons/ModifiedIcon.vue';
 
 describe('ModifiedIcon', () => {
-  test('should be accessible as a Vue instance', () => {
-    const wrapper = mount(ModifiedIcon);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
   test('is initially invisible', () => {
     const wrapper = mount(ModifiedIcon);
-    expect(wrapper.contains('div')).toBeFalsy();
+    expect(wrapper.findComponent("div").exists()).toBeFalsy();
   });
   test('remains invisible if the comparison values provided are identical', () => {
     const wrapper = mount(ModifiedIcon, {
@@ -17,7 +13,7 @@ describe('ModifiedIcon', () => {
         compareTo: { key: 'test1' },
       },
     });
-    expect(wrapper.contains('div')).toBeFalsy();
+    expect(wrapper.findComponent("div").exists()).toBeFalsy();
   });
   test('becomes visible if the comparison values provided are different', () => {
     const wrapper = mount(ModifiedIcon, {
@@ -26,7 +22,7 @@ describe('ModifiedIcon', () => {
         compareTo: { key: 'test2' },
       },
     });
-    expect(wrapper.contains('div')).toBeTruthy();
+    expect(wrapper.findComponent("div").exists()).toBeTruthy();
   });
   test('becomes visible if one of the comparison values is undefined', () => {
     const wrapper = mount(ModifiedIcon, {
@@ -35,6 +31,6 @@ describe('ModifiedIcon', () => {
         compareTo: undefined,
       },
     });
-    expect(wrapper.contains('div')).toBeTruthy();
+    expect(wrapper.findComponent("div").exists()).toBeTruthy();
   });
 });

src/components/modals/AdvancedOptionsModal.vue

@@ -81,7 +81,7 @@
  */
 
 import { PhyxWrapper } from '@phyloref/phyx';
-import { saveAs } from 'filesaver.js-npm';
+import { saveAs } from 'file-saver';
 
 export default {
   name: 'AdvancedOptionsPanel',

src/components/sidebar/Sidebar.vue

@@ -238,7 +238,7 @@
 import Vue from 'vue';
 import { has } from 'lodash';
 import { mapState, mapGetters } from 'vuex';
-import { saveAs } from 'filesaver.js-npm';
+import { saveAs } from 'file-saver';
 import { signer } from 'x-hub-signature';
 import zlib from 'zlib';
 

src/jest-setup.js

@@ -0,0 +1 @@
+global.Buffer = require('buffer');