feat: implement bb.js browser tests (karma)

ts/karma.config.cjs

@@ -0,0 +1,19 @@
+module.exports = function (config) {
+  config.set({
+    frameworks: ['jasmine'],
+    files: [
+      './dest/browser-tests/tests.bundle.js',
+      { pattern: 'dest/**/*.wasm', watched: false, included: false, served: true, nocache: false },
+    ],
+    reporters: ['progress'],
+    port: 9876,
+    colors: true,
+    autoWatch: true,
+    browsers: ['ChromeHeadless'],
+    singleRun: false,
+    concurrency: Infinity,
+    mime: {
+      'application/wasm': ['wasm'],
+    },
+  });
+};

ts/package.json

@@ -23,27 +23,35 @@
     "build:dev": "tsc -b --watch",
     "build:wasm": "cd ../cpp && cmake --preset wasm-threads && cmake --build --preset wasm-threads && cmake --preset wasm && cmake --build --preset wasm",
     "build:ts:browser": "tsc -b tsconfig.browser.json && BUILD_TARGET=browser webpack && chmod +x ./dest/browser/main.js && BUILD_TARGET=browser node replace_imports.cjs",
+    "build:ts:browser:tests": "tsc -b tsconfig.browser.json && BUILD_TARGET=browser webpack --config webpack.tests.config.cjs",
     "build:ts:node": "tsc -b tsconfig.node.json && chmod +x ./dest/node/main.js && BUILD_TARGET=node node replace_imports.cjs",
     "build:bindings": "cd .. && ./scripts/bindgen.sh",
     "serve": "webpack serve",
     "formatting": "prettier --check ./src && eslint --max-warnings 0 ./src",
     "formatting:fix": "prettier -w ./src",
-    "test": "yarn build:ts:browser && yarn build:ts:node && yarn test:jest && yarn test:bin",
-    "test:jest": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --no-cache --passWithNoTests",
+    "test": "yarn clean && yarn build:wasm && yarn build:ts:browser:tests && yarn test:browser",
+    "test:node": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --no-cache --passWithNoTests",
+    "test:browser": "karma start karma.config.cjs",
     "test:bin": "cd ./bin-test && ./bin-test.sh",
     "test-debug": "NODE_NO_WARNINGS=1 node --inspect-brk=0.0.0.0 --experimental-vm-modules $(yarn bin jest) --no-cache --passWithNoTests --runInBand",
     "prepack": "yarn build",
     "deploy": "npm publish --access public"
   },
   "jest": {
-    "testRegex": "./dest/node/.*\\.test\\.js$",
+    "testRegex": "./dest/(node|browser)/.*\\.test\\.js$",
     "rootDir": "./dest"
   },
   "dependencies": {
     "comlink": "^4.4.1",
     "commander": "^10.0.1",
     "debug": "^4.3.4",
-    "idb-keyval": "^6.2.1"
+    "glob": "^10.3.3",
+    "idb-keyval": "^6.2.1",
+    "jasmine-core": "^5.1.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-jasmine": "^5.1.0",
+    "path-browserify": "^1.0.1"
   },
   "devDependencies": {
     "@jest/globals": "^29.4.3",

ts/src/index.browser.test.ts

@@ -0,0 +1,28 @@
+import * as bbjs from './index.js';
+
+const originalFetch = window.fetch;
+
+function transformURL(url) {
+  if (typeof url !== 'string' || !url.startsWith('http://localhost:9876/')) {
+    throw new Error('Invalid URL format');
+  }
+  const fileName = url.split('/').pop();
+  // karma serves the .wasm files on /base/dest/browser-tests
+  return `http://localhost:9876/base/dest/browser-tests/${fileName}`;
+}
+
+function mockFetch(input: RequestInfo) {
+  const url = transformURL(input);
+  console.log('input path:', url, input);
+  return originalFetch(url);
+}
+
+(window as any).fetch = mockFetch;
+
+describe('browser', () => {
+  it('should initialize Barretenberg API', async () => {
+    const api = await bbjs.newBarretenbergApiSync();
+    console.log(api);
+    expect(api).toBeDefined();
+  }, 5e3);
+});

ts/tsconfig.browser.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es2020",
-    "lib": [
-      "dom",
-      "esnext",
-      "es2017.object"
-    ],
+    "lib": ["dom", "esnext", "es2017.object"],
     "module": "NodeNext",
     "strict": false,
     "declaration": true,
@@ -22,19 +18,12 @@
     "rootDir": "src",
     "tsBuildInfoFile": ".tsbuildinfo.browser",
     "paths": {
-      "dynamic/barretenberg_wasm": [
-        "src/barretenberg_wasm/browser/index.ts"
-      ],
-      "dynamic/crs": [
-        "src/crs/browser/index.ts"
-      ],
-      "dynamic/random": [
-        "src/random/browser/index.ts"
-      ],
-      "dynamic/types": [
-        "src/types/browser/index.ts"
-      ]
+      "dynamic/barretenberg_wasm": ["src/barretenberg_wasm/browser/index.ts"],
+      "dynamic/crs": ["src/crs/browser/index.ts"],
+      "dynamic/random": ["src/random/browser/index.ts"],
+      "dynamic/types": ["src/types/browser/index.ts"]
     }
   },
-  "include": ["src/**/*"]
-}
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.node.test.ts", "**/*.node.test.ts"]
+}

ts/tsconfig.node.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es2020",
-    "lib": [
-      "dom",
-      "esnext",
-      "es2017.object"
-    ],
+    "lib": ["dom", "esnext", "es2017.object"],
     "module": "NodeNext",
     "strict": false,
     "declaration": true,
@@ -22,19 +18,12 @@
     "rootDir": "src",
     "tsBuildInfoFile": ".tsbuildinfo.node",
     "paths": {
-      "dynamic/barretenberg_wasm": [
-        "src/barretenberg_wasm/node/index.ts"
-      ],
-      "dynamic/crs": [
-        "src/crs/node/index.ts"
-      ],
-      "dynamic/random": [
-        "src/random/node/index.ts"
-      ],
-      "dynamic/types": [
-        "src/types/node/index.ts"
-      ]
+      "dynamic/barretenberg_wasm": ["src/barretenberg_wasm/node/index.ts"],
+      "dynamic/crs": ["src/crs/node/index.ts"],
+      "dynamic/random": ["src/random/node/index.ts"],
+      "dynamic/types": ["src/types/node/index.ts"]
     }
   },
-  "include": ["src/**/*"]
-}
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.browser.test.ts", "**/*.browser.test.ts"]
+}

ts/webpack.tests.config.cjs

@@ -0,0 +1,78 @@
+const path = require('path');
+const ResolveTypeScriptPlugin = require('resolve-typescript-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { resolve } = path;
+const glob = require('glob');
+
+// Dynamically get the list of test files
+const testFiles = glob.sync('./src/**/*.browser.test.ts');
+
+console.log(testFiles);
+
+const buildTarget = 'browser';
+const configFile = path.resolve(__dirname, `./tsconfig.${buildTarget}.json`);
+
+module.exports = {
+  mode: 'development',
+  entry: testFiles,
+  target: 'web',
+  output: {
+    path: resolve(__dirname, `./dest/${buildTarget}-tests`),
+    filename: 'tests.bundle.js',
+    publicPath: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              onlyCompileBundledFiles: true,
+              configFile,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    plugins: [new ResolveTypeScriptPlugin(), new TsconfigPathsPlugin({ configFile })],
+    fallback: {
+      path: require.resolve('path-browserify'),
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new webpack.DefinePlugin({ 'process.env.NODE_DEBUG': false }),
+    new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: `../cpp/build-wasm/bin/barretenberg.wasm`,
+          to: '../barretenberg.wasm',
+        },
+        {
+          from: `../cpp/build-wasm-threads/bin/barretenberg.wasm`,
+          to: '../barretenberg-threads.wasm',
+        },
+      ],
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+      inject: 'body',
+    }),
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, 'dest'),
+    compress: true,
+    port: 8080,
+  },
+};