Enabling CI for this project

.eslintrc

@@ -3,5 +3,8 @@
   "env": {
     "jasmine": true
   },
-  "plugins": ["html"]
+  "plugins": ["html"],
+  "rules": {
+    "no-extra-semi": "warn"
+  }
 }
\ No newline at end of file

.gitlab-ci.yml

+image: centos:latest
+
+before_script:
+    # add epel-repo to centos
+    - yum install -y epel-release
+    - yum update -y
+
+    # install dependencies
+    - yum install -y npm
+    - npm install
+
+test:
+    script:
+        - npm test

karma.config.js

 const webpackConfig = require('./webpack.config.js')
 
+process.env.CHROME_BIN = require('puppeteer').executablePath()
+
 module.exports = config => {
   config.set({
     frameworks: ['jasmine'],
     files: [
       {pattern: 'test/**/*-test.js'}
     ],
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     preprocessors: {
       'test/**/*-test.js': ['webpack', 'sourcemap']
     },

package.json

@@ -20,15 +20,15 @@
   "main": "lib/fractal.min.js",
   "dependencies": {
     "axios": "^0.16.1",
-    "d3": "^4.10.0",
+    "d3": "^4.11.0",
     "deep-freeze-strict": "^1.1.1",
-    "gsap": "^1.20.2",
+    "gsap": "^1.20.3",
     "jquery": "^3.2.1",
-    "tippy.js": "^1.2.0",
+    "tippy.js": "^1.3.0",
     "uuid": "^3.1.0",
-    "vue": "^2.4.2",
-    "vue-template-compiler": "^2.4.2",
-    "vuex": "^2.4.0"
+    "vue": "^2.5.2",
+    "vue-template-compiler": "^2.5.2",
+    "vuex": "^2.5.0"
   },
   "devDependencies": {
     "babel-core": "7.0.0-alpha.3",
@@ -39,24 +39,25 @@
     "eslint": "^3.17.1",
     "eslint-config-standard": "^7.0.1",
     "eslint-plugin-html": "^2.0.1",
-    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^2.1.1",
     "file-loader": "^0.11.1",
     "jasmine-core": "^2.8.0",
-    "jsdoc": "^3.5.4",
-    "karma": "^1.5.0",
+    "jsdoc": "^3.5.5",
+    "puppeteer": "^0.12.0",
+    "devbridge-autocomplete": "^1.4.3",
+    "karma": "^1.7.1",
     "karma-chrome-launcher": "^2.2.0",
     "karma-jasmine": "^1.1.0",
-    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.4",
+    "karma-webpack": "^2.0.5",
     "node-sass": "^4.5.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.2.2",
     "webpack": "^2.7.0",
-    "webpack-dev-server": "^2.7.1",
+    "webpack-dev-server": "^2.9.2",
     "yargs": "^7.0.2"
   }
 }

src/vue/charts/Boxplot.vue

@@ -389,7 +389,7 @@
 </script>
 
 <style lang="sass" scoped>
-  @import './src/assets/base.sass'
+  @import './../../../src/assets/base.sass'
 
   svg
     .fjs-box

src/vue/charts/CorrelationAnalysis.vue

@@ -403,7 +403,7 @@
 
 
 <style lang="sass" scoped>
-  @import './src/assets/base.sass'
+  @import './../../../src/assets/base.sass'
 
   .fjs-control-panel
     .fjs-correlation-method

src/vue/charts/Heatmap.vue

@@ -470,8 +470,7 @@
 </script>
 
 <style lang="sass" scoped>
-  @import './src/assets/base.sass'
-
+  @import './../../../src/assets/base.sass'
   .fjs-control-panel
     .fjs-param-header
       text-align: center

src/vue/charts/PCA.vue

@@ -344,7 +344,8 @@
 </script>
 
 <style lang="sass" scoped>
-  @import './src/assets/base.sass'
+  @import './../../../src/assets/base.sass'
+
   svg
     .fjs-loadings
       stroke: #f00

src/vue/components/ControlPanel.vue

@@ -109,7 +109,7 @@
 </script>
 
 <style lang="sass" scoped>
-  @import './src/assets/base.sass'
+  @import './../../../src/assets/base.sass'
 
   .fjs-control-panel
     background: rgba(0, 0, 0, 0.5)

src/vue/components/DataBox.vue

@@ -7,7 +7,9 @@
            v-for="item in items">
 
         <div class="fjs-data-entry-header">
-          <input type="checkbox" :checked="!!~selectedIDs.indexOf(item.task_id)" />
+          <input type="checkbox"
+                 :data-id="item.task_id"
+                 :checked="!!~selectedIDs.indexOf(item.task_id)" />
           <span :data-id="item.task_id"
                 :data-state="item.etl_state"
                 class="fjs-data-label"

src/vue/components/TaskView.vue

@@ -40,7 +40,7 @@
 </script>
 
 <style lang="sass" scoped>
-  @import './src/assets/base.sass'
+  @import './../../../src/assets/base.sass'
 
   .fjs-task-view
     display: flex

test/charts/multi/multi-chart.html

 <!doctype html>
+<meta charset="UTF-8">
 
 <head>
   <script src="http://localhost:8080/credentials.js"></script>
@@ -35,7 +36,7 @@
     thisBaseURL: 'http://127.0.0.1:5000',
     fractalisBaseURL: 'http://127.0.0.1:5000',
     getAuth () {
-      return credentials1
+      return {user: '', passwd: ''}
     }
   })
   fjs.setSubsets([

test/data-box-test.js

@@ -44,7 +44,7 @@ describe('DataBox', () => {
     const data = {selectedIDs: ['A']}
     const vm = new Component({propsData, data}).$mount()
     expect(vm.$el.querySelectorAll('.fjs-data-entry-header').length).toBe(2)
-    expect(vm.$el.querySelector(`#fjs-checkbox-A-${vm._uid}`).checked).toBeTruthy()
-    expect(vm.$el.querySelector(`#fjs-checkbox-B-${vm._uid}`).checked).toBeFalsy()
+    expect(vm.$el.querySelector('.fjs-data-entry-header input[data-id="A"]').checked).toBeTruthy()
+    expect(vm.$el.querySelector('.fjs-data-entry-header input[data-id="B"]').checked).toBeFalsy()
   })
 })

test/request-handling-test.js

-import requestHandling from '../src/vue/mixins/run-analysis'
+import runAnalysis from '../src/vue/mixins/run-analysis'
 import RequestManager from '../src/services/request-manager'
 import store from '../src/store/store'
 
 describe('runAnalysis method', () => {
-  const runAnalysis = requestHandling.methods.runAnalysis
-
   beforeEach(() => {
     const requestManager = new RequestManager(
       {handler: '', thisBaseURL: '', fractalisBaseURL: '', getAuth: () => {}})

webpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
   devServer: {
     hot: true,
     inline: true,
-    publicPath: 'http://localhost:8080/',
+    publicPath: 'http://127.0.0.1:8080/',
     headers: { 'Access-Control-Allow-Origin': '*' }
   },
   plugins: plugins,
@@ -46,7 +46,7 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           loaders: {
-            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
+            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           }
         }
       },