Add testing infrastructure for anywidgets, plus test for layer_manager and layer_manager_row

js/layer_manager_row.ts

@@ -42,7 +42,7 @@ export class LayerManagerRow extends LitWidget<
                 text-overflow: ellipsis;
             }
 
-            .settings-delete-button {
+            .row-button {
                 font-size: 14px;
                 height: 26px;
                 width: 26px;
@@ -100,7 +100,7 @@ export class LayerManagerRow extends LitWidget<
                 flex-grow: 1;
             }
 
-            .confirm-deny-button {
+            .confirm-deletion-container button {
                 height: 26px;
                 width: 70px;
             }
@@ -150,15 +150,16 @@ export class LayerManagerRow extends LitWidget<
                     @input="${this.onLayerOpacityChanged}"
                 />
                 <button
-                    class="legacy-button settings-delete-button"
+                    class="legacy-button row-button settings-button"
                     @click="${this.onSettingsClicked}"
                 >
                     <span class="material-symbols-outlined">&#xe8b8;</span>
                 </button>
                 <button
                     class=${classMap({
                         "legacy-button": true,
-                        "settings-delete-button": true,
+                        "row-button": true,
+                        "delete-button": true,
                         loading: this.isLoading,
                         "done-loading": !this.isLoading,
                     })}
@@ -179,16 +180,16 @@ export class LayerManagerRow extends LitWidget<
             return nothing;
         }
         return html`
-            <div class="row">
+            <div class="row confirm-deletion-container">
                 <span class="legacy-text remove-layer-text">Remove layer?</span>
                 <button
-                    class="legacy-button primary confirm-deny-button"
+                    class="legacy-button primary confirm-deletion-button"
                     @click="${this.confirmDeletion}"
                 >
                     Yes
                 </button>
                 <button
-                    class="legacy-button primary confirm-deny-button"
+                    class="legacy-button primary"
                     @click="${this.cancelDeletion}"
                 >
                     No

js/utils.ts

@@ -1,3 +1,5 @@
+// TODO(sufyanAbbasi): Write tests for this file.
+
 import type { AnyModel } from "@anywidget/types";
 import { IWidgetManager, WidgetModel } from "@jupyter-widgets/base";
 

karma.conf.cjs

@@ -0,0 +1,62 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+// test/karma.conf.js
+module.exports = config => {
+  config.set({
+    frameworks: ['jasmine', 'webpack'],
+    basePath: '',
+    type: 'module',
+    files: [
+      {pattern: 'js/*.ts', type:'module'},
+      {pattern: 'tests/*.spec.ts', type:'module'},
+    ],
+    exclude: [],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    preprocessors: {
+      '**/*.ts': ['webpack'],
+    },
+    webpack: {
+      mode: 'development',
+      devtool: 'inline-source-map',
+      module: {
+        rules: [
+          {
+            test: /\.ts$/,
+            loader: "ts-loader",
+            exclude: /node_modules/,
+            options: {
+              configFile: "tsconfig.webpack.json"
+            }
+          },
+        ],
+      },
+      resolve: {
+        extensions: ['.ts'],
+      },
+      stats: {
+          colors: true,
+          modules: true,
+          reasons: true,
+          errorDetails: true
+      },
+    },
+    reporters: ['spec', 'progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+  });
+};