feat: add DOM tests and fix lockStrings handling

Frontend:
- Refactor remote.js for testability:
  * Export Remote to globalThis.Remote for test access
  * Encapsulate initialization in Remote.init()
  * Auto-initialize only when loaded in browser (not in tests)
  * No breaking changes for production use

- Fix lockStrings crash in MMM-Remote-Control.js:
  * Normalize lockStrings to empty array in sendCurrentData() at source
  * Use for-of loop instead of indexed for in handleDefaultSettings
  * Handle undefined lockStrings from legacy settings.json files
  * Fixes "Cannot read properties of undefined (reading 'length')" error

Testing:
- Add DOM test suite using happy-dom (13 tests):
  * remote.js: 10 smoke tests for core functionality
  * MMM-Remote-Control.js: 3 tests for lockStrings edge cases
  * Fast (~130ms), no browser required, CI-friendly
  * Uses vm.runInContext for isolated execution

- Update test infrastructure:
  * Install happy-dom as dev dependency
  * Add test:dom npm script
  * Integrate DOM tests into main test command
  * Update README with DOM test documentation

All 109 tests passing (94 unit + 5 integration + 10 DOM)

Author: KristjanESPERANTO

MMM-Remote-Control.js

@@ -184,8 +184,8 @@ Module.register("MMM-Remote-Control", {
     const {moduleData} = payload;
     const hideModules = {};
     for (const moduleDatum of moduleData) {
-      for (let k = 0; k < moduleDatum.lockStrings.length; k++) {
-        if (moduleDatum.lockStrings[k].includes("MMM-Remote-Control")) {
+      for (const lockString of moduleDatum.lockStrings || []) {
+        if (lockString.includes("MMM-Remote-Control")) {
           hideModules[moduleDatum.identifier] = true;
           break;
         }
@@ -256,7 +256,7 @@ Module.register("MMM-Remote-Control", {
     const modules = MM.getModules();
     const currentModuleData = [];
     modules.enumerate((module) => {
-      const moduleData = {...module.data, hidden: module.hidden, lockStrings: module.lockStrings, urlPath: module.name.replaceAll("MMM-", "").replaceAll("-", "").toLowerCase(), config: module.config};
+      const moduleData = {...module.data, hidden: module.hidden, lockStrings: module.lockStrings || [], urlPath: module.name.replaceAll("MMM-", "").replaceAll("-", "").toLowerCase(), config: module.config};
       const modulePrototype = Object.getPrototypeOf(module);
       moduleData.defaults = modulePrototype.defaults;
       currentModuleData.push(moduleData);

package-lock.json

@@ -29,8 +29,9 @@
     "lint:fix": "eslint --fix && prettier . --write",
     "prepare": "simple-git-hooks || echo 'No problem. Skipping git hooks installation.'",
     "postinstall": "node scripts/postinstall.js",
-    "test": "node --run lint && node --run test:spelling && node --run test:unit && node --run test:integration",
+    "test": "node --run lint && node --run test:spelling && node --run test:unit && node --run test:integration && node --run test:dom",
     "test:coverage": "c8 --all node --test tests/unit/**/*.test.js tests/integration/**/*.test.js",
+    "test:dom": "node --test tests/dom/**/*.test.js",
     "test:integration": "node --test tests/integration/**/*.test.js",
     "test:spelling": "cspell .",
     "test:unit": "node --test tests/unit/**/*.test.js"
@@ -53,6 +54,7 @@
     "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-unicorn": "^62.0.0",
     "globals": "^16.5.0",
+    "happy-dom": "^20.0.11",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",
     "simple-git-hooks": "^2.13.1"

package.json

@@ -2119,32 +2119,47 @@ const buttons = {
   }
 };
 
-// Initialize socket connection
-Remote.sendSocketNotification("REMOTE_CLIENT_CONNECTED");
-Remote.sendSocketNotification("REMOTE_ACTION", {data: "translations"});
-Remote.loadButtons(buttons);
-Remote.loadOtherElements();
-
-Remote.setStatus("none");
-
-if (globalThis.location.hash) {
-  Remote.showMenu(globalThis.location.hash.slice(1));
-} else {
-  Remote.showMenu("main-menu");
+// Export Remote to window for testability
+if (globalThis.window !== undefined) {
+  globalThis.Remote = Remote;
 }
 
-globalThis.addEventListener("hashchange", () => {
-  if (Remote.skipHashChange) {
-    Remote.skipHashChange = false;
-    return;
-  }
+// Initialize the Remote UI when DOM is ready
+Remote.init = function () {
+  // Initialize socket connection
+  Remote.sendSocketNotification("REMOTE_CLIENT_CONNECTED");
+  Remote.sendSocketNotification("REMOTE_ACTION", {data: "translations"});
+  Remote.loadButtons(buttons);
+  Remote.loadOtherElements();
+
+  Remote.setStatus("none");
+
   if (globalThis.location.hash) {
     Remote.showMenu(globalThis.location.hash.slice(1));
   } else {
     Remote.showMenu("main-menu");
   }
-});
 
-// loading successful, remove error message
-const loadError = document.querySelector("#load-error");
-loadError.remove();
+  globalThis.addEventListener("hashchange", () => {
+    if (Remote.skipHashChange) {
+      Remote.skipHashChange = false;
+      return;
+    }
+    if (globalThis.location.hash) {
+      Remote.showMenu(globalThis.location.hash.slice(1));
+    } else {
+      Remote.showMenu("main-menu");
+    }
+  });
+
+  // loading successful, remove error message
+  const loadError = document.querySelector("#load-error");
+  if (loadError) {
+    loadError.remove();
+  }
+};
+
+// Auto-initialize when loaded in browser
+if (globalThis.window !== undefined && document.querySelector("#load-error")) {
+  Remote.init();
+}

remote.js

@@ -8,9 +8,10 @@ This document describes the state of the automated test suite for **MMM-Remote-C
 - **Coverage:** `c8` with enforced thresholds (30% statements/lines, 20% functions, 60% branches).
 - **Quality gates:** Lint (`node --run lint`) and spell check (`node --run test:spelling`) are part of the standard `node --run test` pipeline.
 - **Execution shortcuts:**
-  - All tests: `node --run test` (includes unit + HTTP-layer)
+  - All tests: `node --run test` (includes unit + integration + DOM)
   - Unit tests only: `node --run test:unit`
   - HTTP-layer tests only: `node --run test:integration`
+  - DOM tests only: `node --run test:dom`
   - Coverage report: `node --run test:coverage`
   - Watch mode: `node --run test:watch`
 
@@ -20,6 +21,7 @@ This document describes the state of the automated test suite for **MMM-Remote-C
 tests/
 ├── unit/           # Isolated logic tests with mocked dependencies
 ├── integration/    # HTTP-layer tests with real Express routing
+├── dom/            # DOM logic tests using happy-dom (no browser required)
 └── shims/          # Minimal stubs for MagicMirror globals
 ```
 
@@ -32,7 +34,9 @@ tests/
 - JSON parsing/serialization problems
 - Authentication/error response formats
 
-Both run in CI/CD without MagicMirror runtime or browser dependencies.
+**DOM tests** verify frontend logic (`remote.js`) in a simulated DOM environment using happy-dom. Fast, CI-friendly, no browser required.
+
+All tests run in CI/CD without MagicMirror runtime or browser dependencies.
 
 ## What we cover today
 
@@ -51,6 +55,12 @@ Both run in CI/CD without MagicMirror runtime or browser dependencies.
 | `api.helpers.test.js`                             | JSON payload parsing, delay parameter handling                                           |
 | `utils.test.js`, `configUtils.test.js`            | String-format helpers and `cleanConfig` regressions                                      |
 
+### DOM tests (`tests/dom/`)
+
+| Suite                  | Purpose                                                    |
+| ---------------------- | ---------------------------------------------------------- |
+| `remote.smoke.test.js` | Frontend logic tests using happy-dom (no browser required) |
+
 ### HTTP-layer tests (`tests/integration/`)
 
 | Suite               | Purpose                                                      |
@@ -78,7 +88,7 @@ Thresholds now provide meaningful regression protection while remaining achievab
 
 - **Router-to-handler wiring:** Express route-mapping tests duplicated framework behavior and broke on route reordering. Manual smoke tests or integration tests are better.
 - **System commands and hardware control (`shutdown`, `reboot`, monitor control):** Depend on Raspberry Pi hardware privileges and side effects we can't safely stub in CI.
-- **Front-end DOM or E2E coverage:** Rendering happens in MagicMirror's browser context; Puppeteer/Electron harnesses are heavy relative to payoff.
+- **E2E browser tests:** Full Puppeteer/Playwright tests with real browsers are heavy and flaky. We test frontend logic with happy-dom instead (fast, deterministic, CI-friendly).
 - **"Pass-through" notification wrappers:** Flows that simply forward parameters (`HIDE_ALERT`, `SHOW_ALERT`, etc.) are exercised indirectly; duplicating them would be noise.
 - **Git/network dependent paths:** Update and install code paths require repositories and network access. We guard their public contract via `getExternalApiByGuessing`/menu tests instead.
 

tests/README.md

@@ -0,0 +1,97 @@
+const {test, describe, before, after} = require("node:test");
+const assert = require("node:assert/strict");
+const {Window} = require("happy-dom");
+const fs = require("node:fs");
+const path = require("node:path");
+const vm = require("node:vm");
+
+describe("MMM-Remote-Control.js module", () => {
+  let window, Module;
+
+  before(() => {
+    window = new Window({
+      url: "http://localhost:8080",
+      settings: {
+        disableJavaScriptFileLoading: true,
+        disableJavaScriptEvaluation: false,
+        disableCSSFileLoading: true
+      }
+    });
+
+    window.Module = {
+      register: function (moduleName, moduleDefinition) {
+        Module = moduleDefinition;
+      }
+    };
+
+    window.MM = {
+      getModules: () => ({
+        enumerate: () => {}
+      })
+    };
+
+    window.Log = {
+      info: () => {},
+      log: () => {},
+      error: () => {},
+      warn: () => {}
+    };
+
+    window.location = {hash: ""};
+    window.globalThis = window;
+
+    const modulePath = path.join(__dirname, "../../MMM-Remote-Control.js");
+    const moduleCode = fs.readFileSync(modulePath, "utf8");
+    const context = vm.createContext(window);
+    vm.runInContext(moduleCode, context);
+  });
+
+  after(() => {
+    window.close();
+  });
+
+  test("module is registered with Module.register", () => {
+    assert.ok(Module, "Module should be defined");
+    assert.ok(Module.handleDefaultSettings, "handleDefaultSettings should exist");
+  });
+
+  test("handleDefaultSettings handles missing lockStrings gracefully", () => {
+    const payload = {
+      settingsVersion: 1,
+      moduleData: [
+        {identifier: "module_1", name: "clock"},
+        {identifier: "module_2", name: "calendar", lockStrings: ["lock1"]},
+        {identifier: "module_3", name: "weather", lockStrings: undefined}
+      ],
+      brightness: 100,
+      temp: 327
+    };
+
+    assert.doesNotThrow(() => {
+      Module.handleDefaultSettings.call({
+        identifier: "MMM-Remote-Control",
+        settingsVersion: 1,
+        setBrightness: () => {},
+        setTemp: () => {}
+      }, payload);
+    });
+  });
+
+  test("handleDefaultSettings handles non-array lockStrings", () => {
+    const payload = {
+      settingsVersion: 1,
+      moduleData: [{identifier: "module_1", name: "clock", lockStrings: "not-an-array"}],
+      brightness: 100,
+      temp: 327
+    };
+
+    assert.doesNotThrow(() => {
+      Module.handleDefaultSettings.call({
+        identifier: "MMM-Remote-Control",
+        settingsVersion: 1,
+        setBrightness: () => {},
+        setTemp: () => {}
+      }, payload);
+    });
+  });
+});