test: add karma-jasmin-webpack test infrastructure

package.json

@@ -9,7 +9,8 @@
   "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
+    "jasmine": "nyc --reporter=lcov --reporter=text-summary babel-node test/run.js",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "integration": "nyc --reporter=lcov --reporter=text-summary babel-node test/integration/run.js",
@@ -18,6 +19,9 @@
     "commit": "git-cz",
     "release": "standard-version"
   },
+  "_moduleAliases": {
+    "@" : "src/"
+  },
   "dependencies": {
     "@babel/eslint-parser": "^7.11.3",
     "@popperjs/core": "^2.4.0",
@@ -33,6 +37,7 @@
     "leaflet-measure": "^3.1.0",
     "lodash": "^4.17.19",
     "lz-string": "^1.4.4",
+    "module-alias": "^2.2.2",
     "openrouteservice-js": "^0.1.27",
     "prismjs": "^1.15.0",
     "tinycolor2": "^1.4.1",

src/app-loader.js

@@ -4,11 +4,13 @@ import PreparedVue from '@/common/prepared-vue.js'
 import I18nBuilder from '@/i18n/i18n-builder'
 import constants from '@/resources/constants'
 import appConfig from '@/config/app-config'
+import AppHooks from '@/support/app-hooks'
 import {HttpClient} from 'vue-rest-client'
 import utils from '@/support/utils'
 import store from '@/store/store'
 import router from '@/router'
 import lodash from 'lodash'
+import Vue from 'vue'
 
 
 class AppLoader {
@@ -33,6 +35,12 @@ class AppLoader {
         if (!store.getters.apiDataRequested) {
           store.commit('apiDataRequested', true)
 
+          // eslint-disable-next-line no-undef
+          var ORSKEY = process.env.ORSKEY
+
+          if (ORSKEY && ORSKEY !== 'put-an-ors-key-here' && ORSKEY != '') {
+            appConfig.orsApiKey = ORSKEY
+          }
           // By default, the app must use an ors API key stored in config.js
           if (appConfig.useUserKey) {
             this.saveApiData(appConfig.orsApiKey, constants.endpoints)
@@ -51,6 +59,8 @@ class AppLoader {
               resolve()
             })
           }
+        } else {
+          resolve()
         }
       }
     })
@@ -250,7 +260,16 @@ class AppLoader {
    * @returns {Vue} instance
    */
   static getInstance () {
-    return store.getters.mainAppInstanceRef
+    if (store.getters.mainAppInstanceRef) {
+      return store.getters.mainAppInstanceRef
+    } else {
+      var vm = new Vue({ 
+        data: { appHooks: new AppHooks() },
+        i18n: I18nBuilder.build(),
+        store
+      })
+      return vm
+    }
   }
 }
 

test/e2e/specs/test.js

@@ -10,7 +10,7 @@ module.exports = {
 
     browser
       .url(devServer)
-      .waitForElementVisible('#app', 5000)
+      .waitForElementVisible('#app', 10000)
       .assert.elementPresent('.hello')
       .assert.containsText('h1', 'Welcome to Your Vue.js App')
       .assert.elementCount('img', 1)

test/unit/karma.conf.js

@@ -1,5 +1,4 @@
-/* eslint-disable no-undef */
-var webpackConfig = require('../../build/webpack.test.conf')
+const testWebpackConfig = require('../../build/webpack.test.conf')
 
 module.exports = function (config) {
   config.set({
@@ -9,7 +8,7 @@ module.exports = function (config) {
     exclude: [],
     //files/patterns to load in the browser
     files: [
-      { pattern: 'specs/*spec.js', watched: true, served: true, included: true }
+      { pattern: 'specs/*.js', watched: true, served: true, included: true }
       /*parameters:
           watched: if autoWatch is true all files that have set watched to true will be watched for changes
           served: should the files be served by Karma's webserver?
@@ -21,26 +20,21 @@ module.exports = function (config) {
     ],
 
     //executes the tests whenever one of watched files changes
-    autoWatch: true,
+    autoWatch: false,
     //if true, Karma will run tests and then exit browser
-    singleRun: false,
+    singleRun: true,
     //if true, Karma fails on running empty test-suites
     failOnEmptyTestSuite: false,
     //reduce the kind of information passed to the bash
     logLevel: config.LOG_WARN, //config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG
 
     //list of frameworks you want to use, only jasmine is installed with this boilerplate
-    frameworks: ['jasmine', 'browserify'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('karma-browserify'),
-      require('karma-webpack')
-    ],
+    frameworks: ['jasmine'],
     //list of browsers to launch and capture
     // browsers: ['Chrome'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
+
+    //list of browsers to launch and capture
+    //browsers: ['Chrome'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
     browsers: ['ChromeHeadlessNoSandbox'],
     customLaunchers: {
       ChromeHeadlessNoSandbox: {
@@ -52,15 +46,14 @@ module.exports = function (config) {
           '--user-data-dir=/tmp/chrome-test-profile',
           '--disable-web-security',
           '--remote-debugging-address=0.0.0.0',
-          '--remote-debugging-port=9222',
+          '--remote-debugging-port=9876',
         ],
         debug: true,
       },
     },
-    restartOnFileChange: true,
+
     //list of reporters to use
-    // reporters: ['mocha', /*'kjhtml','dots','progress','spec'*/],
-    reporters: ['coverage-istanbul'],
+    reporters: ['mocha', 'kjhtml','coverage' /*,'dots','progress','spec'*/],
 
     //address that the server will listen on, '0.0.0.0' is default
     listenAddress: '0.0.0.0',
@@ -71,9 +64,9 @@ module.exports = function (config) {
     //when a browser crashes, karma will try to relaunch, 2 is default
     retryLimit: 0,
     //how long does Karma wait for a browser to reconnect, 2000 is default
-    browserDisconnectTimeout: 5000,
+    browserDisconnectTimeout: 10000,
     //how long will Karma wait for a message from a browser before disconnecting from it, 10000 is default
-    browserNoActivityTimeout: 50000,
+    browserNoActivityTimeout: 10000,
     //timeout for capturing a browser, 60000 is default
     captureTimeout: 60000,
 
@@ -88,26 +81,23 @@ module.exports = function (config) {
       useIframe: true,
       jasmine: {
         //tells jasmine to run specs in semi random order, false is default
-        random: false
+        random: true,
+        timeoutInterval: 10000,
+        seed: '4321',
+        oneFailurePerSpec: true,
+        failFast: true
       }
     },
-    colors: true,
-
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true,
-    },
-
     /* karma-webpack config
-       pass your webpack configuration for karma
-       add `babel-loader` to the webpack configuration to make 
-       the ES6+ code in the test files readable to the browser  
-       eg. import, export keywords */
-    webpack: webpackConfig,
+    pass your webpack configuration for karma
+    add `babel-loader` to the webpack configuration to make 
+    the ES6+ code in the test files readable to the browser  
+    eg. import, export keywords */
+    webpack: testWebpackConfig,
     preprocessors: {
       //add webpack as preprocessor to support require() in test-suits .js files
-      './specs/*.spec.js': ['webpack']
+      './specs/*.js': ['webpack'],
+      '**/src/app/*.js': ['coverage']
     },
     webpackMiddleware: {
       //turn off webpack bash output when run the tests
@@ -118,6 +108,14 @@ module.exports = function (config) {
     /*karma-mocha-reporter config*/
     mochaReporter: {
       output: 'noFailures'  //full, autowatch, minimal
+    },
+    coverageReporter: {
+      includeAllSources: true,
+      dir: 'coverage',
+      reporters: [
+        { type: 'html', subdir: 'html' },
+        { type: 'text-summary' }
+      ]
     }
   })
 }