Integrated karma for unit tests

.eslintrc

@@ -29,10 +29,6 @@
     "node": true
   },
   "globals": {
-    "before": true,
-    "describe": true,
-    "expect": true,
-    "it": true,
     "Modernizr": true,
     "navigator": true
   },
@@ -198,5 +194,6 @@
       "requireReturnDescription": true
     }],
     "yield-star-spacing": 2
-  }
+  },
+  "root": true
 }

Gulpfile.babel.js

@@ -43,6 +43,7 @@ const config = {
 
 const args = yargs
   .default("clean",      false)        /* Clean before build */
+  .default("karma",      false)        /* Karma watchdog */
   .default("lint",       true)         /* Lint sources */
   .default("mkdocs",     false)        /* MkDocs watchdog */
   .default("optimize",   true)         /* Optimize sources */
@@ -272,6 +273,16 @@ gulp.task("mkdocs:clean",
 gulp.task("mkdocs:serve",
   load("mkdocs/serve"))
 
+/* ----------------------------------------------------------------------------
+ * Tests
+ * ------------------------------------------------------------------------- */
+
+/*
+ * Start karma test runner
+ */
+gulp.task("tests:unit:watch",
+  load("tests/unit/watch"))
+
 /* ----------------------------------------------------------------------------
  * Interface
  * ------------------------------------------------------------------------- */
@@ -306,9 +317,15 @@ gulp.task("watch", [
   "assets:build",
   "views:build"
 ], () => {
+
+  /* Start MkDocs server */
   if (args.mkdocs)
     gulp.start("mkdocs:serve")
 
+  /* Start karma test runner */
+  if (args.karma)
+    gulp.start("tests:unit:watch")
+
   /* Rebuild stylesheets */
   gulp.watch([
     `${config.assets.src}/stylesheets/**/*.scss`

package.json

@@ -11,8 +11,9 @@
   "scripts": {
     "build": "./node_modules/.bin/gulp build --clean",
     "clean": "./node_modules/.bin/gulp clean",
+    "pre-commit": "./node_modules/.bin/gulp assets:lint",
     "start": "./node_modules/.bin/gulp watch --mkdocs --no-lint --no-revision",
-    "pre-commit": "./node_modules/.bin/gulp assets:lint"
+    "test": "./node_modules/.bin/karma start ./tests/karma.conf.js"
   },
   "repository": {
     "type": "git",
@@ -32,11 +33,15 @@
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-react-jsx": "^6.8.0",
+    "babel-polyfill": "^6.16.0",
     "babel-preset-es2015": "^6.13.2",
     "babel-register": "^6.16.3",
+    "chai": "^3.5.0",
     "css-mqpacker": "^4.0.0",
     "del": "^2.2.0",
     "eslint": "^3.6.1",
+    "eslint-plugin-mocha": "^4.6.0",
     "git-hooks": "^1.1.6",
     "gulp": "^3.9.1",
     "gulp-changed": "^1.3.2",
@@ -57,6 +62,15 @@
     "gulp-svgmin": "^1.2.2",
     "gulp-uglify": "^1.5.2",
     "gulp-util": "^3.0.7",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.2.0",
+    "karma-notify-reporter": "^1.0.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.8.0",
+    "mocha": "^3.1.0",
     "node-notifier": "^4.5.0",
     "sass-lint": "^1.9.1",
     "through2": "^2.0.1",

tasks/tests/unit/watch.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import path from "path"
+import { Server } from "karma"
+
+/* ----------------------------------------------------------------------------
+ * Task: start karma test runner
+ * ------------------------------------------------------------------------- */
+
+export default () => {
+  return cb => {
+    process.env.GULP = true
+    new Server({
+      configFile: path.join(process.cwd(), "tests/karma.conf.js")
+    }, cb).start()
+  }
+}

tests/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": ["es2015"],
+  "plugins": [
+    "add-module-exports",
+    ["transform-react-jsx", {
+      "pragma": "createElement"
+    }]
+  ]
+}

tests/.eslintrc

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "mocha"
+  ],
+  "rules": {
+    "mocha/no-exclusive-tests": 2,
+    "mocha/no-global-tests": 2,
+    "mocha/no-identical-title": 2,
+    "mocha/no-mocha-arrows": 2,
+    "mocha/no-pending-tests": 1,
+    "mocha/no-skipped-tests": 1,
+    "no-use-before-define": 0,
+    "prefer-arrow-callback": 0
+  }
+}

tests/karma.conf.js

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+const webpack = require("webpack")
+
+/* ----------------------------------------------------------------------------
+ * Definition
+ * ------------------------------------------------------------------------- */
+
+module.exports = karma => {
+  const config = {
+    basePath: "../",
+    frameworks: ["mocha"],
+
+    /* Include babel polyfill to support older browsers */
+    files: [
+      "node_modules/babel-polyfill/dist/polyfill.js",
+      "tests/unit/*.spec.jsx"
+    ],
+
+    /* Test reporters */
+    reporters: ["spec", "coverage"],
+
+    /* Silence calls to console.log */
+    client: {
+      captureConsole: false
+    },
+
+    /* Preprocess test files */
+    preprocessors: {
+      "tests/unit/*.spec.jsx": ["webpack", "sourcemap"]
+    },
+
+    /* Configuration for webpack */
+    webpack: {
+      devtool: "inline-source-map",
+      plugins: [
+
+        /* Inject DOM node creation helper for JSX support */
+        new webpack.ProvidePlugin({
+          createElement: "./_lib/create-element.js"
+        })
+      ],
+      module: {
+        loaders: [
+          {
+            test: /\.jsx?$/,
+            loader: "babel-loader"
+          }
+        ]
+      }
+    },
+
+    /* Suppress messages by webpack */
+    webpackServer: {
+      noInfo: true
+    },
+
+    /* Code coverage */
+    coverageReporter: {
+      dir: "./coverage",
+      reporters: [
+        { type: "json" }
+      ]
+    }
+  }
+
+  /* Setup for continuous integration */
+  if (process.env.CONTINUOUS_INTEGRATION) {
+    // TODO TBD
+
+  /* Setup for local development environment */
+  } else if (process.env.GULP) {
+    delete config.reporters
+
+  /* Setup for local testing */
+  } else {
+    config.browsers = ["Chrome"]
+    config.singleRun = true
+  }
+
+  /* Persist configuration */
+  karma.set(config)
+}

tests/unit/Marker.spec.jsx

@@ -0,0 +1,24 @@
+
+import chai from "chai"
+
+describe("Karma test runner", function() {
+  chai.should()
+
+  let sandbox = null
+
+  beforeEach(function() {
+    sandbox = (
+      <ul class="list">
+        {[...Array(10)].map((x, i) => {
+          return <li class={`foo-${i + 1}`}>Element {i + 1}</li>
+        })}
+      </ul>
+    )
+  })
+
+  it("should compile JSX correctly", function() {
+    document.body.appendChild(sandbox)
+    return true
+  })
+})
+

tests/unit/_lib/create-element.js

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Definition
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Create a native DOM node
+ *
+ * @param {string} tag - Tag name
+ * @param {object} properties - Properties
+ * @param {string|number|Array} children - Child nodes
+ * @return {HTMLElement} Native DOM node
+ */
+const createElement = (tag, properties, ...children) => {
+  const el = document.createElement(tag)
+
+  /* Set all properties */
+  for (const attr of Object.keys(properties))
+    el.setAttribute(attr, properties[attr])
+
+  /* Iterate child nodes */
+  const iterateChildNodes = nodes => {
+    for (const node of nodes) {
+
+      /* Directly append content */
+      if (typeof node === "string" ||
+          typeof node === "number") {
+        el.textContent += node
+
+      /* Recurse, if we got an array */
+      } else if (Array.isArray(node)) {
+        iterateChildNodes(node)
+
+      /* Append regular nodes */
+      } else {
+        el.appendChild(node)
+      }
+    }
+  }
+
+  /* Iterate child nodes */
+  iterateChildNodes(children)
+
+  /* Return element */
+  return el
+}
+
+/* ----------------------------------------------------------------------------
+ * Exports
+ * ------------------------------------------------------------------------- */
+
+export default createElement