JavaScript tests

.github/workflows/build.yml

@@ -85,6 +85,9 @@ jobs:
     - name: JavaScript prettyfier
       run: yarn run prettier:check
 
+    - name: JavaScript tests
+      run: yarn run test
+
     - name: Install Galata
       run: yarn install
       working-directory: ui-tests
@@ -110,10 +113,6 @@ jobs:
         name: ui-test-output
         path: ui-tests/test-output
 
-    # - name: JavaScript tests
-    #   run: yarn run test
-    #   working-directory: js
-
     - name: Build Python package
       run: |
         python setup.py sdist bdist_wheel

karma.conf.js

@@ -0,0 +1,48 @@
+// Karma configuration
+// Generated on Wed Jun 20 2018 16:46:14 GMT+0200 (CEST)
+const webpackConfig = require('./webpack.config.js');
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['mocha', 'chai', 'sinon'],
+    files: [
+      // we use 1 bundle for testing
+      { pattern: 'lib/test/index.js' },
+    ],
+    exclude: ['**/embed.js'],
+    preprocessors: {
+      // the bundle goes through webpack, and will emit (inline) source maps, which karma needs to read again
+      'lib/test/index.js': ['webpack', 'sourcemap'],
+    },
+    webpack: {
+      module: {
+        rules: webpackConfig[0].module.rules,
+      },
+      // source mapping without inline does not seem to work
+      devtool: 'inline-source-map',
+      mode: 'development',
+      resolve: {
+        extensions: ['.js'],
+      },
+    },
+    reporters: ['progress', 'mocha'],
+    port: 9876,
+    colors: true,
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['ChromeHeadless'],
+    customLauncher: {
+      ChromeHeadless: {
+        base: 'ChromeHeadless',
+        flags: ['--headless', '--remote-debugging-port=9222'],
+      },
+    },
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+    // how many browser should be started simultaneous
+    concurrency: Infinity,
+  });
+};

package.json

@@ -40,6 +40,7 @@
     "clean:labextension": "rimraf bqplot-gl/labextension",
     "clean:nbextension": "rimraf bqplot-gl/nbextension/static/index.js",
     "prepack": "yarn run build:lib",
+    "test": "karma start --single-run",
     "watch": "npm-run-all -p watch:*",
     "watch:lib": "tsc -w",
     "watch:nbextension": "webpack --watch --mode=development",
@@ -59,28 +60,47 @@
     "three": "^0.91.0"
   },
   "devDependencies": {
+    "@jupyter-widgets/controls": "^1.5.0 || ^2 || ^3",
     "@babel/core": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-typescript": "^7.15.0",
     "@jupyterlab/builder": "^3.0.0",
     "@phosphor/application": "^1.6.0",
     "@phosphor/widgets": "^1.6.0",
+    "@types/chai": "^4.1.7",
     "@types/d3": "^5.7.2",
+    "@types/expect.js": "^0.3.29",
+    "@types/mocha": "^7.0.2",
+    "@types/sinon": "^9.0.0",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
+    "chai": "^4.1.2",
     "acorn": "^7.2.0",
     "css-loader": "^3.2.0",
     "eslint": "^7.4.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.1",
+    "karma": "^5.0.2",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-mocha": "^2.0.0",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sinon": "^1.0.5",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-typescript": "^5.0.2",
+    "karma-typescript-es6-transform": "^5.0.2",
+    "karma-webpack": "^5.0.0",
+    "mocha": "^7.1.1",
     "fs-extra": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.3",
     "prettier": "^2.0.5",
     "raw-loader": "~4.0.1",
     "rimraf": "^2.6.2",
+    "sinon": "^9.0.2",
+    "sinon-chai": "^3.3.0",
     "source-map-loader": "^1.1.3",
     "style-loader": "^1.0.0",
     "ts-loader": "^8.0.0",

src/LinesGLModel.ts

@@ -20,7 +20,7 @@ import { LinesModel } from 'bqplot';
 export class LinesGLModel extends LinesModel {
   defaults() {
     return {
-      ...LinesModel.prototype.defaults(),
+      ...super.defaults(),
       _model_name: LinesGLModel.model_name,
       _model_module: LinesGLModel.model_module,
       _model_module_version: LinesGLModel.model_module_version,

src/ScatterGLModel.ts

@@ -20,7 +20,7 @@ import { MODULE_NAME, MODULE_VERSION } from './version';
 export class ScatterGLModel extends ScatterModel {
   defaults() {
     return {
-      ...ScatterModel.prototype.defaults(),
+      ...super.defaults(),
       _model_name: ScatterGLModel.model_name,
       _model_module: ScatterGLModel.model_module,
       _model_module_version: ScatterGLModel.model_module_version,

src/test/dummy-manager.ts

@@ -0,0 +1,125 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as services from '@jupyterlab/services';
+import * as Backbone from 'backbone';
+import * as widgets from '@jupyter-widgets/controls';
+import * as base from '@jupyter-widgets/base';
+import * as bqscales from 'bqscales';
+import * as bqplot from 'bqplot';
+
+let numComms = 0;
+
+export class MockComm {
+  constructor() {
+    this.comm_id = `mock-comm-id-${numComms}`;
+    numComms += 1;
+  }
+  on_open(fn) {
+    this._on_open = fn;
+  }
+  on_close(fn) {
+    this._on_close = fn;
+  }
+  on_msg(fn) {
+    this._on_msg = fn;
+  }
+  _process_msg(msg) {
+    if (this._on_msg) {
+      return this._on_msg(msg);
+    } else {
+      return Promise.resolve();
+    }
+  }
+  open() {
+    if (this._on_open) {
+      this._on_open();
+    }
+    return '';
+  }
+  close() {
+    if (this._on_close) {
+      this._on_close();
+    }
+    return '';
+  }
+  send() {
+    return '';
+  }
+  comm_id: string;
+  target_name: string;
+  _on_msg: Function = null;
+  _on_open: Function = null;
+  _on_close: Function = null;
+}
+
+export class DummyManager extends base.ManagerBase<HTMLElement> {
+  constructor(library: any) {
+    super();
+    this.el = window.document.createElement('div');
+    window.document.body.appendChild(this.el);
+    this.library = library;
+  }
+
+  // @ts-ignore
+  display_view(
+    msg: services.KernelMessage.IMessage,
+    view: Backbone.View<Backbone.Model>,
+    options: any
+  ) {
+    return Promise.resolve(view).then((view) => {
+      this.el.appendChild(view.el);
+      view.on('remove', () => console.log('view removed', view));
+      (<any>window).last_view = view;
+      view.trigger('displayed');
+      return view.el;
+    });
+  }
+
+  protected loadClass(
+    className: string,
+    moduleName: string,
+    moduleVersion: string
+  ): Promise<any> {
+    if (moduleName === '@jupyter-widgets/base') {
+      if (base[className]) {
+        return Promise.resolve(base[className]);
+      } else {
+        return Promise.reject(`Cannot find class ${className}`);
+      }
+    } else if (moduleName === '@jupyter-widgets/controls') {
+      if (widgets[className]) {
+        return Promise.resolve(widgets[className]);
+      } else {
+        return Promise.reject(`Cannot find class ${className}`);
+      }
+    } else if (moduleName === 'bqscales') {
+      if (bqscales[className]) {
+        return Promise.resolve(bqscales[className]);
+      } else {
+        return Promise.reject(`Cannot find class ${className}`);
+      }
+    } else if (moduleName === 'bqplot') {
+      if (bqplot[className]) {
+        return Promise.resolve(bqplot[className]);
+      } else {
+        return Promise.reject(`Cannot find class ${className}`);
+      }
+    } else if (moduleName in this.library) {
+      return Promise.resolve(this.library[moduleName][className]);
+    } else {
+      return Promise.reject(`Cannot find module ${moduleName}`);
+    }
+  }
+
+  _get_comm_info() {
+    return Promise.resolve({});
+  }
+
+  _create_comm() {
+    return Promise.resolve(new MockComm());
+  }
+
+  el: HTMLElement;
+  library: any;
+}

src/test/index.ts

@@ -0,0 +1,4 @@
+import './scatter-gl';
+
+require('@jupyter-widgets/controls/css/widgets.css');
+require('bqplot/css/bqplot.css');