RunestoneInteractive · bnmnetp · Jul 3, 2026 · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026
@@ -19,8 +19,11 @@ Coding Standards
 *   We use black to format all of our Python code.
 *   No Tabs in Javascript files (4 spaces = 1 indentation)
 *   We use Prettier to format our Javascript - please make sure you configure prettier to use 4 spaces as the tab size.
-*   Avoid proliferation of jQuery versions.  Make your stuff compatible with the version
-    of jQuery in the common folder.
+*   Do not use jQuery in new code, and do not add new jQuery plugins.  We are
+    actively migrating components to plain DOM APIs (activecode and
+    runestonebase are already jQuery-free).  The helpers in
+    ``runestone/common/js/domutil.js`` (``getDataValue``, ``toggleDisplay``)
+    cover the common jQuery idioms.
 *   Avoid proliferation of additional third party javascript modules.  We are already out of
     control in this regard and it would be nice to rein it in.
 *   To add JavaScript for a new component, follow the directions in `webpack.index.js` for dynamically-loaded components.
@@ -36,7 +39,12 @@ Coding Standards
 Unit Testing
 ------------
 
-We are using Selenium to create unit tests for each of the components.  Nearly every component has selenium tests now.  If you add a feature or a new component, please make sure to include a selenium test that verifies it works.
+JavaScript unit tests use `vitest <https://vitest.dev>`_ with a jsdom
+environment; run them with ``npm test`` from ``bases/rsptx/interactives``.
+Full instructions for running and writing tests are in the *Unit tests*
+section of ``docs/source/javascript_feature.rst``.  If you add a feature or
+a new component, please include tests that verify it works.  There are also
+older Selenium-based tests for many components; new tests should use vitest.
 
 Provide an example
 ------------------

@@ -3,7 +3,8 @@
     "version": "2.0.0",
     "description": "",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "vitest run",
+        "test:watch": "vitest",
         "check-env": "node -e 'console.log(process.env)' | grep npm",
         "build": "webpack --mode=development",
         "buildj": "webpack --mode=development --profile --json > stats.json",
@@ -26,11 +27,14 @@
         "css-minimizer-webpack-plugin": "^3.0.0",
         "html-loader": "^3.0.0",
         "html-webpack-plugin": "^5.0.0",
+        "jquery": "^3.7.1",
+        "jsdom": "^29.1.1",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
         "mini-css-extract-plugin": "^2.0.0",
         "ts-loader": "^9.5.7",
         "typescript": "^6.0.3",
+        "vitest": "^4.1.9",
         "webpack": "^5.97.1",
         "webpack-bundle-analyzer": "^4.0.0",
         "webpack-cli": "^4.10.0"

@@ -147,6 +147,15 @@
     height: auto;
 }
 
+/* Editors are user-resizable via the native CSS resize handle (a
+ * ResizeObserver in activecode.js refreshes CodeMirror on change).
+ * Once the user drags the handle the browser sets an explicit
+ * height, which overrides height: auto above. */
+.CodeMirror.ac-resizable {
+    resize: both;
+    overflow: hidden;
+}
+
 .CodeMirror-scroll {
     /* calculated height is designed so editor panel
      * will fit on screen (with space for navbar and

@@ -10,7 +10,6 @@ import {
     TimedHTMLActiveCode,
     TimedSQLActiveCode,
 } from "./timed_activecode";
-import "../../common/js/jquery.highlight.js";
 
 export default class ACFactory {
     constructor() {