Replace Karma + Jasmine with Jest

__mocks__/d3.js

@@ -0,0 +1,34 @@
+let NewD3 = function () {
+  return {
+    append: function () {
+      return NewD3()
+    },
+    attr: function () {
+      return this
+    },
+    style: function () {
+      return this
+    },
+    text: function () {
+      return this
+    },
+    0: {
+      0: {
+        getBBox: function () {
+          return {
+            height: 10,
+            width: 20
+          }
+        }
+      }
+    }
+  }
+}
+
+export const select = function () {
+  return new NewD3()
+}
+
+export const selectAll = function () {
+  return new NewD3()
+}

karma.conf.js

@@ -1,61 +0,0 @@
-import puppeteer from 'puppeteer'
-
-import { jsConfig } from './webpack.config.base'
-
-process.env.CHROME_BIN = puppeteer.executablePath()
-
-const webpackConfig = jsConfig()
-
-export default function (config) {
-  config.set({
-
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '.',
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
-
-    // list of files / patterns to load in the browser
-    files: [
-      './src/**/*.spec.js'
-    ],
-
-    preprocessors: {
-      'src/**/*.spec.js': ['webpack', 'sourcemap']
-    },
-
-    webpack: {
-      mode: 'development',
-      node: webpackConfig.node,
-      module: webpackConfig.module,
-      devtool: 'inline-source-map'
-    },
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['dots'],
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['ChromeHeadless'],
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true
-  })
-}

package.json

@@ -16,10 +16,9 @@
     "build": "webpack --progress --colors",
     "build:watch": "yarn build --watch",
     "release": "yarn build -p --config webpack.config.prod.babel.js",
-    "upgrade": "yarn-upgrade-all && yarn remove jasmine && yarn add --dev jasmine@2.99.0",
+    "upgrade": "yarn-upgrade-all",
     "lint": "standard",
-    "karma": "node -r babel-register node_modules/.bin/karma start karma.conf.js",
+    "test": "yarn lint && jest",
-    "test": "yarn lint && yarn karma",
     "jison": "node -r babel-register node_modules/.bin/gulp jison",
     "prepublishOnly": "yarn build && yarn release && yarn test",
     "prepush": "yarn test"
@@ -56,18 +55,11 @@
     "gulp-filelog": "^0.4.1",
     "gulp-jison": "^1.2.0",
     "husky": "^0.14.3",
+    "identity-obj-proxy": "^3.0.0",
     "inject-loader": "^3.0.1",
-    "jasmine": "2.99.0",
-    "jasmine-es6": "^0.4.3",
     "jest": "^22.4.2",
     "jison": "^0.4.18",
-    "karma": "^2.0.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-jasmine": "^1.1.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.13",
     "node-sass": "^4.7.2",
-    "puppeteer": "^1.1.1",
     "sass-loader": "^6.0.7",
     "standard": "^11.0.0",
     "style-loader": "^0.20.2",
@@ -79,5 +71,10 @@
   "files": [
     "dist",
     "src"
-  ]
+  ],
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
+  }
 }

src/diagrams/classDiagram/classRenderer.spec.js

@@ -1,24 +0,0 @@
-/* eslint-env jasmine */
-describe('class diagram, ', function () {
-  describe('when rendering a classDiagram', function () {
-    beforeEach(function () {
-      Object.defineProperties(window.HTMLElement.prototype, {
-        getBBox: {
-          get: function () { return { x: 10, y: 10, width: 100, height: 100 } }
-        },
-        offsetLeft: {
-          get: function () { return parseFloat(window.getComputedStyle(this).marginLeft) || 0 }
-        },
-        offsetTop: {
-          get: function () { return parseFloat(window.getComputedStyle(this).marginTop) || 0 }
-        },
-        offsetHeight: {
-          get: function () { return parseFloat(window.getComputedStyle(this).height) || 0 }
-        },
-        offsetWidth: {
-          get: function () { return parseFloat(window.getComputedStyle(this).width) || 0 }
-        }
-      })
-    })
-  })
-})

src/diagrams/sequenceDiagram/sequenceDiagram.spec.js

@@ -1,22 +1,7 @@
 /* eslint-env jasmine */
 import { parser } from './parser/sequenceDiagram'
 import sequenceDb from './sequenceDb'
-import MyModuleInjector from 'inject-loader!./sequenceRenderer' // eslint-disable-line import/no-webpack-loader-syntax
+import renderer from './sequenceRenderer'
-
-let NewD3
-
-const d3 = {
-  select: function () {
-    return new NewD3()
-  },
-  selectAll: function () {
-    return new NewD3()
-  }
-}
-
-const renderer = MyModuleInjector({
-  'd3': d3
-})
 
 function addConf (conf, key, value) {
   if (value !== undefined) {
@@ -730,36 +715,6 @@ describe('when rendering a sequenceDiagram', function () {
     parser.yy = sequenceDb
     parser.yy.clear()
 
-    NewD3 = function () {
-      const o = {
-        append: function () {
-          return NewD3()
-        },
-        attr: function () {
-          return this
-        },
-        style: function () {
-          return this
-        },
-        text: function () {
-          return this
-        },
-        0: {
-          0: {
-            getBBox: function () {
-              return {
-                height: 10,
-                width: 20
-              }
-            }
-          }
-
-        }
-      }
-
-      return o
-    }
-
     conf = {
       diagramMarginX: 50,
       diagramMarginY: 10,
@@ -945,36 +900,6 @@ describe('when rendering a sequenceDiagram with actor mirror activated', functio
     parser.yy = sequenceDb
     parser.yy.clear()
 
-    NewD3 = function () {
-      const o = {
-        append: function () {
-          return NewD3()
-        },
-        attr: function () {
-          return this
-        },
-        style: function () {
-          return this
-        },
-        text: function () {
-          return this
-        },
-        0: {
-          0: {
-            getBBox: function () {
-              return {
-                height: 10,
-                width: 20
-              }
-            }
-          }
-
-        }
-      }
-
-      return o
-    }
-
     conf = {
       diagramMarginX: 50,
       diagramMarginY: 10,

todo.md

@@ -5,8 +5,6 @@
 - Support customization of gantt diagram xAxis format
     - https://github.com/d3/d3-time-format#api-reference
     - https://bl.ocks.org/wboykinm/34627426d84f3242e0e6ecb2339e9065
-- Upgrade jasmine to latest version or replace it
-    - Replace it with Jest
 - Flowchart interpolate is useless because there is no rendering code using it
 - Rewrite SCSS code to reduce duplication
     - No global CSS. Should limit the CSS to mermaid charts only