Switch to jest

Author: Frédéric Collonval

.github/workflows/build.yml

@@ -50,28 +50,30 @@ jobs:
         python -m pip install -U pip setuptools cookiecutter
 
     - name: Test the extension
-      # env:
-      #   CHROME_BIN: chromium-browser
       run: |
         cookiecutter . --config-file tests/testconfig.yaml --no-input
         pushd jupyter-widget-testwidgets
         python -m pip install --upgrade -v -e ".[test, examples, docs]"
         yarn run lint:check
 
         pytest
-        npm run test:ci
+        yarn run test
+        popd
 
-    # - name: Check docs can be build + links
-    #   run: |
-    #     pushd jupyter-widget-testwidgets/docs
-    #     make html
-    #     make linkcheck
-    #     popd
+    - name: Check docs can be build + links
+      run: |
+        python -m pip install jupyter_sphinx sphinx sphinx_rtd_theme nbsphinx nbsphinx-link pytest-check-links
+        pushd jupyter-widget-testwidgets/docs
+        make html
+        popd
+
+        python -m pytest --check-links
 
     - name: Make a non-local install so the data_files get populated
       run: |
         pip uninstall -y jupyter_widget_testwidgets
-        cd jupyter-widget-testwidgets
+        pushd jupyter-widget-testwidgets
+
         pip install .
 
         # Validate nbextension (enable does not use exit code):
@@ -84,3 +86,5 @@ jobs:
         jupyter labextension list 2>&1 | grep -ie "jupyter-widget-testwidgets.*OK"
         # Make sure our lab extension can be develop installed.
         jupyter labextension develop . --overwrite
+
+        popd

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.pythonPath": "/home/fcollonval/miniconda3/envs/widgets/bin/python"
+}

{{cookiecutter.github_project_name}}/.github/workflows/build.yml

@@ -50,13 +50,15 @@ jobs:
       run: |
         python -m pip install --upgrade -v -e ".[test, examples, docs]"
         yarn run lint:check
+
         pytest
-        yarn run test:ci
+        yarn run test
+
     - name: Check docs can be build + links
       run: |
+        python -m pip install jupyter_sphinx sphinx sphinx_rtd_theme nbsphinx nbsphinx-link pytest-check-links
         pushd docs
         make html
-        make linkcheck
         popd
-        python -m pytest_check_links --links-ext=.md -o testpaths=. -o addopts= 
+        python -m pytest --check-links
         

{{cookiecutter.github_project_name}}/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  sourceMap: 'inline',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};

{{cookiecutter.github_project_name}}/docs/environment.yml

@@ -3,9 +3,10 @@ name: {{cookiecutter.python_package_name}}_docs
 channels:
   - conda-forge
 dependencies:
-- python=3.5
-- nodejs
-- numpy
-- sphinx
-- nbsphinx
-- jupyter_sphinx
+  - python=3.*
+  - nodejs
+  - jupyter_sphinx
+  - sphinx
+  - sphinx_rtd_theme
+  - nbsphinx
+  - nbsphinx-link

{{cookiecutter.github_project_name}}/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  automock: false,
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+  },
+  preset: 'ts-jest/presets/js-with-babel',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testPathIgnorePatterns: ['/lib/', '/node_modules/'],
+  testRegex: '/__tests__/.*.spec.ts[x]?$',
+  transformIgnorePatterns: ['/node_modules/(?!(@jupyter(lab|-widgets)/.*)/)'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.json',
+    },
+  },
+};

{{cookiecutter.github_project_name}}/package.json

@@ -42,26 +42,21 @@
     "lint": "eslint . --ext .ts,.tsx --fix",
     "lint:check": "eslint . --ext .ts,.tsx",
     "prepack": "yarn run build:lib",
-    "test": "yarn run test:firefox",
-    "test:ci": "karma start --browsers=ChromeCI tests/karma.conf.js",
-    "test:chrome": "karma start --browsers=Chrome tests/karma.conf.js",
-    "test:debug": "karma start --browsers=Chrome --singleRun=false --debug=true tests/karma.conf.js",
-    "test:firefox": "karma start --browsers=Firefox tests/karma.conf.js",
-    "test:ie": "karma start --browsers=IE tests/karma.conf.js",
+    "test": "jest",
     "watch": "npm-run-all -p watch:*",
     "watch:lib": "tsc -w",
     "watch:nbextension": "webpack --watch"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4"
+    "@jupyter-widgets/base": "^1.1.10 || ^2.0.0 || ^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.5.0",
+    "@babel/preset-env": "^7.5.0",
     "@jupyterlab/builder": "^3.0.0",
     "@phosphor/application": "^1.6.0",
     "@phosphor/widgets": "^1.6.0",
-    "@types/expect.js": "^0.3.29",
-    "@types/mocha": "^8.2.0",
-    "@types/node": "^14.14.13",
+    "@types/jest": "^26.0.0",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",
@@ -70,23 +65,16 @@
     "eslint": "^7.4.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "expect.js": "^0.3.1",
     "fs-extra": "^7.0.0",
-    "karma": "^5.2.3",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.1",
-    "karma-firefox-launcher": "^2.1.0",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-typescript": "^5.2.0",
-    "karma-typescript-es6-transform": "^5.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.0.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^8.2.1",
     "npm-run-all": "^4.1.3",
     "prettier": "^2.0.5",
     "rimraf": "^2.6.2",
     "source-map-loader": "^1.1.3",
     "style-loader": "^1.0.0",
+    "ts-jest": "^26.0.0",
     "ts-loader": "^8.0.0",
     "typescript": "~4.1.3",
     "webpack": "^5.0.0",

{{cookiecutter.github_project_name}}/src/__tests__/index.spec.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// Add any needed widget imports here (or from controls)
+// import {} from '@jupyter-widgets/base';
+
+import { createTestModel } from './utils';
+
+import { ExampleModel } from '..';
+
+describe('Example', () => {
+  describe('ExampleModel', () => {
+    it('should be createable', () => {
+      const model = createTestModel(ExampleModel);
+      expect(model).toBeInstanceOf(ExampleModel);
+      expect(model.get('value')).toEqual('Hello World');
+    });
+
+    it('should be createable with a value', () => {
+      const state = { value: 'Foo Bar!' };
+      const model = createTestModel(ExampleModel, state);
+      expect(model).toBeInstanceOf(ExampleModel);
+      expect(model.get('value')).toEqual('Foo Bar!');
+    });
+  });
+});

{{cookiecutter.github_project_name}}/src/__tests__/utils.ts

@@ -0,0 +1,118 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as widgets from '@jupyter-widgets/base';
+import * as services from '@jupyterlab/services';
+
+let numComms = 0;
+
+export class MockComm implements widgets.IClassicComm {
+  constructor() {
+    this.comm_id = `mock-comm-id-${numComms}`;
+    numComms += 1;
+  }
+  on_close(fn: ((x?: any) => void) | null): void {
+    this._on_close = fn;
+  }
+  on_msg(fn: (x?: any) => void): void {
+    this._on_msg = fn;
+  }
+  _process_msg(msg: services.KernelMessage.ICommMsgMsg): void | Promise<void> {
+    if (this._on_msg) {
+      return this._on_msg(msg);
+    } else {
+      return Promise.resolve();
+    }
+  }
+  close(): string {
+    if (this._on_close) {
+      this._on_close();
+    }
+    return 'dummy';
+  }
+  send(): string {
+    return 'dummy';
+  }
+
+  open(): string {
+    return 'dummy';
+  }
+
+  comm_id: string;
+  target_name = 'dummy';
+  _on_msg: ((x?: any) => void) | null = null;
+  _on_close: ((x?: any) => void) | null = null;
+}
+
+export class DummyManager extends widgets.ManagerBase<HTMLElement> {
+  constructor() {
+    super();
+    this.el = window.document.createElement('div');
+  }
+
+  display_view(
+    msg: services.KernelMessage.IMessage,
+    view: widgets.DOMWidgetView,
+    options: any
+  ) {
+    // TODO: make this a spy
+    // TODO: return an html element
+    return Promise.resolve(view).then((view) => {
+      this.el.appendChild(view.el);
+      view.on('remove', () => console.log('view removed', view));
+      return view.el;
+    });
+  }
+
+  protected loadClass(
+    className: string,
+    moduleName: string,
+    moduleVersion: string
+  ): Promise<any> {
+    if (moduleName === '@jupyter-widgets/base') {
+      if ((widgets as any)[className]) {
+        return Promise.resolve((widgets as any)[className]);
+      } else {
+        return Promise.reject(`Cannot find class ${className}`);
+      }
+    } else if (moduleName === 'jupyter-datawidgets') {
+      if (this.testClasses[className]) {
+        return Promise.resolve(this.testClasses[className]);
+      } else {
+        return Promise.reject(`Cannot find class ${className}`);
+      }
+    } else {
+      return Promise.reject(`Cannot find module ${moduleName}`);
+    }
+  }
+
+  _get_comm_info() {
+    return Promise.resolve({});
+  }
+
+  _create_comm() {
+    return Promise.resolve(new MockComm());
+  }
+
+  el: HTMLElement;
+
+  testClasses: { [key: string]: any } = {};
+}
+
+export interface Constructor<T> {
+  new (attributes?: any, options?: any): T;
+}
+
+export function createTestModel<T extends widgets.WidgetModel>(
+  constructor: Constructor<T>,
+  attributes?: any
+): T {
+  let id = widgets.uuid();
+  let widget_manager = new DummyManager();
+  let modelOptions = {
+    widget_manager: widget_manager,
+    model_id: id,
+  };
+
+  return new constructor(attributes, modelOptions);
+}