add frontend unit testing and collect scripts in package.json

.eslintrc.json

@@ -1,7 +1,8 @@
 {
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
+        "jasmine": true
     },
     "extends": "eslint:recommended",
     "globals": {

frontend/src/services/html-helpers/html-helpers.spec.js

@@ -0,0 +1,60 @@
+import { HtmlHelpers } from "./html-helpers";
+
+describe('HtmlHelpers', () => {
+  let htmlHelpers;
+  beforeEach(() => {
+    htmlHelpers = new HtmlHelpers();
+  });
+
+  it('should create', () => {
+    expect(htmlHelpers).toBeTruthy();
+  });
+
+  describe('parseResponse', () => {
+    it('should return a promise with idPrefix and element', (done) => {
+      const response = {
+        text: () => Promise.resolve('<div>Test</div>'),
+      };
+
+      htmlHelpers.parseResponse(response).then(result => {
+        expect(result.idPrefix).toBeDefined();
+        expect(result.element).toBeDefined();
+        expect(result.element.textContent).toMatch('Test');
+        done();
+      });
+    });
+
+    it('should nudge IDs', (done) => {
+      const response = {
+        text: () => Promise.resolve('<div id="test-div">Test</div>'),
+      };
+
+      htmlHelpers.parseResponse(response).then(result => {
+        expect(result.idPrefix).toBeDefined();
+        expect(result.element).toBeDefined();
+        const origElement = result.element.querySelector('#test-div');
+        expect(origElement).toBeFalsy();
+        const nudgedElement = result.element.querySelector('#' + result.idPrefix + 'test-div');
+        expect(nudgedElement).toBeTruthy();
+        done();
+      });
+    });
+
+    it('should not nudge IDs with option "keepIds"', (done) => {
+      const response = {
+        text: () => Promise.resolve('<div id="test-div">Test</div>'),
+      };
+      const options = { keepIds: true };
+
+      htmlHelpers.parseResponse(response, options).then(result => {
+        expect(result.idPrefix).not.toBeDefined();
+        expect(result.element).toBeDefined();
+        const origElement = result.element.querySelector('#test-div');
+        expect(origElement).toBeTruthy();
+        const nudgedElement = result.element.querySelector('#' + result.idPrefix + 'test-div');
+        expect(nudgedElement).toBeFalsy();
+        done();
+      });
+    });
+  });
+});

frontend/src/utils/alerts/alerts.spec.js

@@ -0,0 +1,8 @@
+import alerts from "./alerts";
+
+describe('Alerts', () => {
+
+  it('should be called alerts', () => {
+    expect(alerts.name).toMatch('alerts');
+  });
+});

karma.conf.js

@@ -0,0 +1,80 @@
+/* eslint-disable */
+module.exports = function(config) {
+  config.set({
+    //root path location to resolve paths defined in files and exclude
+    basePath: '',
+    //files/patterns to load in the browser
+    files: ['frontend/src/**/*.spec.js'],
+
+    //executes the tests whenever one of watched files changes
+    autoWatch: true,
+    //if true, Karma will run tests and then exit browser
+    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 automatically
+    frameworks: ['jasmine'],
+    //list of browsers to launch and capture
+    browsers: ['ChromeHeadless'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
+    //list of reporters to use
+    reporters: ['mocha','kjhtml'/*,'dots','progress','spec'*/],
+
+    client: {
+      jasmine:{
+        //tells jasmine to run specs in semi random order, false is default
+        random: false
+      }
+    },
+
+    /* karma-webpack config
+       pass your webpack configuration for karma
+       add `babel-loader` to the webpack configuration to make the ES6+ code readable to the browser */
+    webpack: {
+      module: {
+        rules: [
+          {
+            test: /\.js$/i,
+            exclude:/(node_modules)/,
+            loader:'babel-loader',
+            options:{
+              presets:['@babel/preset-env']
+            }
+          },
+          {
+            test: /\.(css|scss)$/i,
+            loader:'null-loader',
+          }
+        ]
+      }
+    },
+    preprocessors: {
+      //add webpack as preprocessor to support require() in test-suits .js files
+      './frontend/src/**/*.js': ['webpack']
+    },
+    webpackMiddleware: {
+      //turn off webpack bash output when run the tests
+      noInfo: true,
+      stats: 'errors-only'
+    },
+    customLaunchers: {
+      ChromeHeadless: {
+        base: 'Chrome',
+        flags: [
+          '--headless',
+          '--disable-gpu',
+          '--no-sandbox',
+          // Without a remote debugging port, Google Chrome exits immediately.
+          '--remote-debugging-port=9222',
+        ],
+      }
+    },
+
+    /*karma-mocha-reporter config*/
+    mochaReporter: {
+      output: 'noFailures'  //full, autowatch, minimal
+    }
+  });
+};

package.json

@@ -6,8 +6,17 @@
   "author": "",
   "license": "ISC",
   "scripts": {
-    "lint": "eslint frontend/src",
-    "dev": "webpack --watch"
+    "start": "run-p frontend:build:watch yesod:start",
+    "test": "run-s frontend:test yesod:test",
+    "lint": "run-s frontend:lint yesod:lint",
+    "yesod:db": "./db.sh",
+    "yesod:start": "./start.sh",
+    "yesod:lint": "./hlint.sh",
+    "yesod:test": "./test.sh",
+    "frontend:lint": "eslint frontend/src",
+    "frontend:test": "karma start --conf karma.conf.js",
+    "frontend:build": "webpack",
+    "frontend:build:watch": "webpack --watch"
   },
   "husky": {
     "hooks": {
@@ -37,13 +46,16 @@
     "husky": "^2.3.0",
     "lint-staged": "^8.1.7",
     "node-sass": "^4.12.0",
+    "npm-run-all": "^4.1.5",
+    "null-loader": "^2.0.0",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "watch": "^1.0.2",
     "webpack": "^4.32.2",
-    "webpack-cli": "^3.3.2"
+    "webpack-cli": "^3.3.2",
+    "webpack-karma-jasmine": "^3.0.6"
   },
   "dependencies": {
     "flatpickr": "^4.5.7"