Add testing infrastructure for anywidgets, plus test for layer_manage…

…r and layer_manager_row (gee-community#2168) * Implement LayerManager using LitElement + anywidget * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update static files * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Use non-minified JS files to work around property renaming issue * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Set up tests for layer_manager_row * Set up layer_manager_row test * Implement LayerManager using LitElement + anywidget * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update static files * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Use non-minified JS files to work around property renaming issue * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Clean up setuptools references in pyproject.toml * Clean up setuptools references in pyproject.toml * Fix dark mode and drop shadow issues in Colab * Remove common.css, load fonts using JS instead. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Rebuild * Remove extraneous files * Address comments from initial review * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Ignore static files * Fix TS errors * Convert tsconfig.json to spaces and export model interfaces * Add TS tests for anywidgets * clean up styles * Add css classes for better testability * Add better css classes (p2), build before test * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Address review comments * Added a TODO for writing tests for utils. * Change single to double quote --------- Co-authored-by: Nathaniel Schmitz <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Qiusheng Wu <[email protected]>
naschmitz · Nov 14, 2024 · 53078c9 · 53078c9
1 parent a52f468
commit 53078c9
Show file tree

Hide file tree

Showing 9 changed files with 5,558 additions and 217 deletions.
diff --git a/js/layer_manager_row.ts b/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

diff --git a/js/utils.ts b/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";
 

diff --git a/karma.conf.cjs b/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'],
+      },
+    },
+  });
+};