bugy#282 migrated tests to vue-cli

web-src/babel.config.js

@@ -1,5 +1,10 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+    presets: [
+        '@vue/cli-plugin-babel/preset'
+    ],
+    env: {
+        'test': {
+            'plugins': ['rewire']
+        }
+    }
 };

web-src/package.json

@@ -17,34 +17,41 @@
     "@stryker-mutator/babel-transpiler": "^1.3.1",
     "@stryker-mutator/core": "^1.3.1",
     "@stryker-mutator/javascript-mutator": "^1.3.1",
-    "@stryker-mutator/karma-runner": "^1.3.1",
-    "@stryker-mutator/mocha-framework": "^1.3.1",
+    "@stryker-mutator/karma-runner": "^3.1.0",
+    "@stryker-mutator/mocha-framework": "^3.1.0",
     "@stryker-mutator/webpack-transpiler": "^1.3.1",
     "@vue/cli-plugin-babel": "~4.2.0",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.2.0",
     "@vue/cli-plugin-router": "~4.2.0",
-    "@vue/cli-plugin-unit-mocha": "~4.2.0",
     "@vue/cli-plugin-vuex": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
     "@vue/test-utils": "1.0.0-beta.31",
     "axios-mock-adapter": "^1.18.1",
     "babel-plugin-rewire": "^1.2.0",
-    "chai": "^4.1.2",
-    "chromedriver": "80",
+    "chai": "^4.2.0",
+    "expect": "^25.3.0",
     "exports-loader": "^0.7.0",
-    "geckodriver": "^1.19.1",
     "http-proxy-middleware": "^1.0.3",
+    "jest-extended": "^0.11.5",
     "jquery": "^3.4.1",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-mocha": "^1.3.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-webpack": "^4.0.2",
+    "mocha": "^6.2.0",
     "mock-socket": "^9.0.2",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
     "sinon": "^7.5.0",
+    "vue-cli-plugin-unit-karmajs": "[email protected]:bugy/vue-cli-plugin-unit-karmajs.git",
     "vue-template-compiler": "^2.6.11"
   },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
+    "test:unit-ci": "vue-cli-service test:unit -b ChromeHeadless",
     "test:e2e": "vue-cli-service test:e2e",
     "stryker": "stryker run tests/stryker.conf.js"
   },

web-src/src/admin/store/script-config-module.js

@@ -1,6 +1,6 @@
 import {contains, forEachKeyValue, isEmptyArray, isEmptyValue} from '@/common/utils/common';
 import axios from 'axios';
-import clone from 'lodash.clone';
+import clone from 'lodash/clone';
 import router from '../router/router'
 
 const allowedEmptyValuesInParam = ['name'];

web-src/src/common/components/combobox.vue

@@ -141,9 +141,11 @@
                 if (this.config.multiselect) {
                     if (!Array.isArray(this.value)) {
                         if (contains(allowedValues, this.value)) {
-                            return false;
+                            newValue = [this.value];
+                        } else {
+                            newValue = [];
                         }
-                        newValue = [this.value];
+
                     } else {
                         newValue = [];
                         for (var i = 0; i < this.value.length; i++) {

web-src/src/common/components/file_dialog.vue

@@ -63,7 +63,7 @@
     } from '@/common/utils/common';
 
     export default {
-        name: "file_dialog",
+        name: 'file_dialog',
         props: {
             onClose: {
                 type: Function
@@ -156,7 +156,12 @@
                 }
 
                 this.$nextTick(() => {
-                    const activeElements = this.$refs.filesList.getElementsByClassName('active');
+                    const filesList = this.$refs.filesList;
+                    if (isNull(filesList)) {
+                        return;
+                    }
+
+                    const activeElements = filesList.getElementsByClassName('active');
                     if (activeElements.length === 0) {
                         return;
                     }

web-src/src/common/materializecss/imports/global.js

@@ -1,3 +1,6 @@
 import 'materialize-css/js/cash';
 import 'materialize-css/js/global';
-import 'materialize-css/js/waves'
+import 'materialize-css/js/waves'
+
+const Component = require('exports-loader?Component!materialize-css/js/component.js');
+global.Component = Component;

web-src/src/main-app/store/scriptExecutionManager.js

@@ -1,6 +1,6 @@
 import {deepCloneObject, forEachKeyValue, isEmptyArray, isEmptyString, isNull} from '@/common/utils/common';
 import axios from 'axios';
-import clone from 'lodash.clone';
+import clone from 'lodash/clone';
 import scriptExecutor, {STATUS_EXECUTING, STATUS_FINISHED, STATUS_INITIALIZING} from './scriptExecutor';
 
 export default {

web-src/tests/unit/admin/ParameterConfigForm_test.js

@@ -1,12 +1,12 @@
 'use strict';
 
+import ParameterConfigForm from '@/admin/components/scripts-config/ParameterConfigForm';
+import ChipsList from '@/common/components/ChipsList';
+import Combobox from '@/common/components/combobox';
+import TextArea from '@/common/components/TextArea';
+import {isBlankString, isNull, setInputValue} from '@/common/utils/common';
 import {mount} from '@vue/test-utils';
 import {assert, config as chaiConfig} from 'chai';
-import ParameterConfigForm from '../../js/admin/scripts-config/ParameterConfigForm';
-import {isBlankString, isNull, setInputValue} from '../../js/common';
-import ChipsList from '../../js/components/ChipsList';
-import Combobox from '../../js/components/combobox';
-import TextArea from '../../js/components/TextArea';
 import {setChipListValue, vueTicks} from '../test_utils';
 
 chaiConfig.truncateThreshold = 0;
@@ -423,15 +423,15 @@ describe('Test ParameterConfigForm', function () {
 
             await _setValueByUser('Min', 5);
 
-            assertOutputValue('min', "5");
+            assertOutputValue('min', '5');
         });
 
         it('Test update max', async function () {
             await _setValueByUser('Type', 'int');
 
             await _setValueByUser('Max', 5);
 
-            assertOutputValue('max', "5");
+            assertOutputValue('max', '5');
         });
 
         it('Test update constant', async function () {

web-src/tests/unit/admin/ParameterList_test.js

@@ -1,9 +1,9 @@
 'use strict';
 
+import ParamListItem from '@/admin/components/scripts-config/ParamListItem';
+import ScriptParamList from '@/admin/components/scripts-config/ScriptParamList';
+import {hasClass} from '@/common/utils/common';
 import {assert, config as chaiConfig} from 'chai';
-import ParamListItem from '../../js/admin/scripts-config/ParamListItem';
-import ScriptParamList from '../../js/admin/scripts-config/ScriptParamList';
-import {hasClass} from '../../js/common';
 import {createVue, timeout, triggerSingleClick, vueTicks} from '../test_utils';
 import {setValueByUser} from './ParameterConfigForm_test';
 

web-src/tests/unit/admin/ScriptConfig_test.js

@@ -1,10 +1,10 @@
 'use strict';
 
+import ScriptConfig from '@/admin/components/scripts-config/ScriptConfig';
+import ScriptConfigForm from '@/admin/components/scripts-config/ScriptConfigForm';
 import {createLocalVue, mount} from '@vue/test-utils';
 import {assert, config as chaiConfig} from 'chai';
 import Vuex from 'vuex';
-import ScriptConfig from '../../js/admin/scripts-config/ScriptConfig';
-import ScriptConfigForm from '../../js/admin/scripts-config/ScriptConfigForm';
 import {vueTicks} from '../test_utils';
 import {findField, setValueByUser} from './ParameterConfigForm_test';
 

web-src/tests/unit/admin/script-module_test.js

@@ -1,9 +1,9 @@
 'use strict';
+import scripts, {axiosInstance} from '@/admin/store/scripts-module'
 import {createLocalVue} from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import {assert, config as chaiConfig} from 'chai';
 import Vuex from 'vuex';
-import scripts, {axiosInstance} from '../../js/admin/scripts-config/scripts-module'
 
 chaiConfig.truncateThreshold = 0;