Issue #3 some testing using Karma and Jasmine

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
 
       - name: test
         run: |
-          npm run test
+          xvfb-run npm run test
           #npm run coverage
 
       - name: lint

karma.conf.js

@@ -0,0 +1,104 @@
+// Karma configuration
+// Generated on Tue May 03 2022 15:45:30 GMT+0100 (British Summer Time)
+const path = require('path');
+const webpack = require('webpack');
+const sourcePath = path.join(__dirname, './src');
+
+module.exports = function(config) {
+  config.set({
+
+    plugins: [
+      require('karma-webpack'),
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+    ],
+
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://www.npmjs.com/search?q=keywords:karma-adapter
+    frameworks: ['jasmine', 'webpack'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'src/**/*.js',
+      'src/test/**/*Spec.js'
+    ],
+
+
+    // list of files / patterns to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://www.npmjs.com/search?q=keywords:karma-preprocessor
+    preprocessors: {
+      'src/**/*.js': ['webpack'],
+      'src/**/*Spec.js': ['webpack'],
+    },
+
+    webpack: {
+      mode: 'development',
+      resolve: {
+        modules: [path.resolve(__dirname, 'node_modules'), sourcePath],
+        alias: {
+          'luminance_study': __dirname,
+          stream: 'stream-browserify',
+          buffer: 'buffer',
+        },
+        fallback: {
+          path: false,
+          fs: false,
+        },
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          __BASE_PATH__: "'/base'",
+        }),
+        new webpack.ProvidePlugin({ process: ['process/browser'] }),
+      ],
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://www.npmjs.com/search?q=keywords:karma-reporter
+    reporters: ['progress'],
+
+
+    // 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://www.npmjs.com/search?q=keywords:karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser instances should be started simultaneously
+    concurrency: Infinity
+  })
+}

package.json

@@ -4,7 +4,7 @@
   "description": "In-browser augmented reality",
   "main": "index.js",
   "scripts": {
-    "test": "nyc --reporter=html --reporter=text mocha --require esm",
+    "test": "karma start ./karma.conf.js",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "build": "webpack --progress --mode=development",
     "start": "webpack serve --progress --mode=development --static=dist"
@@ -17,13 +17,18 @@
   "devDependencies": {
     "coveralls": "^3.1.1",
     "esm": "^3.2.25",
+    "karma": "^6.3.19",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-firefox-launcher": "^2.1.2",
+    "karma-jasmine": "^5.0.0",
+    "karma-typescript-preprocessor": "^0.4.0",
+    "karma-webpack": "^5.0.0",
     "mocha": "^9.1.3",
     "nyc": "^15.1.0",
     "webpack": "^5.60.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   },
-  "type": "module",
   "directories": {
     "test": "test"
   },

src/index.js

@@ -59,7 +59,11 @@ openglRenderWindow.setContainer(container)
 // Capture size of the video window and set it to the renderWindow
 // ----------------------------------------------------------------------------
 const background = document.getElementById('background')
-const { width, height } = background.getBoundingClientRect()
+let width = 800
+let height = 600
+if (background !== null) {
+  [ width, height ] = background.getBoundingClientRect()
+}
 openglRenderWindow.setSize(width, height)
 
 // ----------------------------------------------------------------------------
@@ -69,7 +73,9 @@ openglRenderWindow.setSize(width, height)
 const interactor = vtkRenderWindowInteractor.newInstance()
 interactor.setView(openglRenderWindow)
 interactor.initialize()
-interactor.bindEvents(container)
+if (container !== null) {
+  interactor.bindEvents(container)
+}
 
 // ----------------------------------------------------------------------------
 // Setup interactor style to use

src/sksAnatomy.js

@@ -4,6 +4,7 @@ import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper.js'
 import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor.js'
 import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader.js'
 
+const path = `https://github.com/SciKit-Surgery/luminance_study/blob/master/dist/assets/vtp/`
 export function coneactor () {
   const coneSource = vtkConeSource.newInstance({ height: 1.0 })
 
@@ -31,7 +32,7 @@ export function veinactor (urlOptions, callback) {
   const reader = vtkXMLPolyDataReader.newInstance()
   const filename = 'vtp/hepatic veins.vtp'
   let error = false
-  reader.setUrl(`assets/${filename}`).then(() => {
+  reader.setUrl(path + filename).then(() => {
     const polydata = reader.getOutputData(0)
     const mapper = vtkMapper.newInstance()
 
@@ -59,7 +60,7 @@ export function tumouractor0 (urlOptions, callback) {
   const reader = vtkXMLPolyDataReader.newInstance()
   const filename = 'vtp/tumor.vtp'
   let error = false
-  reader.setUrl(`assets/${filename}`).then(() => {
+  reader.setUrl(path + filename).then(() => {
     const polydata = reader.getOutputData(0)
     const mapper = vtkMapper.newInstance()
 
@@ -86,7 +87,7 @@ export function tumouractor1 (urlOptions, callback) {
   const reader = vtkXMLPolyDataReader.newInstance()
   const filename = 'vtp/tumor.vtp'
   let error = false
-  reader.setUrl(`assets/${filename}`).then(() => {
+  reader.setUrl(path + filename).then(() => {
     const polydata = reader.getOutputData(0)
     const mapper = vtkMapper.newInstance()
 

test/example.test.js → src/test/example.test.Spec.js

@@ -1,12 +1,12 @@
 
-import { assert } from 'chai';
+//import { assert } from 'chai';
+import { setupLights } from '../lights.js';
 //const assert = require('assert');
-
 describe('Simple Math Test', () => {
  it('should return 2', () => {
-        assert.equal(1 + 1, 2);
+        expect(1 + 1).toBe(2);
     });
  it('should return 9', () => {
-        assert.equal(3 * 3, 9);
+        expect(3 * 3).toBe(9);
     });
 });