Add basic Electron tests and pump its version for demos (#1379)

This pull request adds Electron version display to demo applications and updates Electron from version 31.x to 40.0.0. It also fixes timer parameter types in the turtle_tf2 demo by converting numeric literals to BigInt.

**Changes:**
- Updated the test command to include Electron tests via `test/electron/run_test.js`
- Bumped Electron version from ^31.x to ^40.0.0 across all demo package.json files
- Added Electron version display overlays to all demo renderer files
- Fixed timer periods in turtle_tf2/main.js to use BigInt literals (100n, 1000n)

Fix: #1378

Author: minggangw

.github/workflows/linux-arm64-build-and-test.yml

@@ -52,6 +52,12 @@ jobs:
     - name: Install test-msgs on Linux
       run: |
         sudo apt install ros-${{ matrix.ros_distribution }}-test-msgs
+        # Adjust dependencies based on Ubuntu version
+        LIBASOUND_PKG="libasound2"
+        if grep -q "24.04" /etc/os-release; then
+          LIBASOUND_PKG="libasound2t64"
+        fi
+        sudo apt install -y xvfb libgtk-3-0 libnss3 $LIBASOUND_PKG libgbm-dev
 
     - uses: actions/checkout@v6
 

.github/workflows/linux-x64-build-and-test.yml

@@ -56,6 +56,12 @@ jobs:
     - name: Install test-msgs on Linux
       run: |
         sudo apt install ros-${{ matrix.ros_distribution }}-test-msgs
+        # Adjust dependencies based on Ubuntu version
+        LIBASOUND_PKG="libasound2"
+        if grep -q "24.04" /etc/os-release; then
+          LIBASOUND_PKG="libasound2t64"
+        fi
+        sudo apt install -y xvfb libgtk-3-0 libnss3 $LIBASOUND_PKG libgbm-dev
 
     - uses: actions/checkout@v6
 

electron_demo/car/package.json

@@ -21,6 +21,6 @@
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
-    "electron": "^31.0.0"
+    "electron": "^40.0.0"
   }
 }

electron_demo/car/renderer.js

@@ -11,6 +11,7 @@
 // limitations under the License.
 
 const { ipcRenderer } = require('electron');
+const process = require('process');
 
 // DOM elements
 let currentCommandEl, linearXEl, angularZEl, topicNameEl;
@@ -27,6 +28,13 @@ document.addEventListener('DOMContentLoaded', function () {
   initializeElements();
   setupEventListeners();
   setupROSListeners();
+
+  const versionDiv = document.createElement('div');
+  versionDiv.style.textAlign = 'center';
+  versionDiv.style.padding = '10px';
+  versionDiv.style.marginTop = '20px';
+  versionDiv.innerText = 'Electron version: ' + process.versions.electron;
+  document.querySelector('.container').appendChild(versionDiv);
 });
 
 function initializeElements() {

electron_demo/manipulator/index.html

@@ -153,6 +153,11 @@ <h4>Two-Joint Manipulator Demo</h4>
                 <li><strong>JointState</strong> - ROS2 sensor_msgs</li>
             </ul>
             <p>Use the sliders to control joint angles or start automatic animation.</p>
+            <p>
+                We are using Node.js <span id="node-version"></span>,
+                Chromium <span id="chrome-version"></span>,
+                and Electron <span id="electron-version"></span>.
+            </p>
             <hr>
             <h5>🎯 What to Look For:</h5>
             <ul>

electron_demo/manipulator/package.json

@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@electron/rebuild": "^3.7.2",
-    "electron": "^31.7.7"
+    "electron": "^40.0.0"
   }
 }

electron_demo/manipulator/renderer.js

@@ -11,6 +11,7 @@
 // limitations under the License.
 
 const { ipcRenderer } = require('electron');
+const process = require('process');
 
 // Three.js scene components
 let scene, camera, renderer, controls;
@@ -28,6 +29,16 @@ let jointAngles = {
 
 // Initialize the 3D scene
 function initScene() {
+  const versionDiv = document.createElement('div');
+  versionDiv.style.position = 'absolute';
+  versionDiv.style.bottom = '10px';
+  versionDiv.style.right = '10px';
+  versionDiv.style.color = 'white';
+  versionDiv.style.fontFamily = 'Arial, sans-serif';
+  versionDiv.style.zIndex = '1000';
+  versionDiv.innerText = 'Electron version: ' + process.versions.electron;
+  document.body.appendChild(versionDiv);
+
   const container = document.getElementById('canvas-container');
 
   // Scene setup
@@ -358,6 +369,15 @@ window.addEventListener('resize', () => {
 
 // UI event handlers
 document.addEventListener('DOMContentLoaded', () => {
+  const replaceText = (selector, text) => {
+    const element = document.getElementById(selector);
+    if (element) element.innerText = text;
+  };
+
+  for (const type of ['chrome', 'node', 'electron']) {
+    replaceText(`${type}-version`, process.versions[type] || 'Unavailable');
+  }
+
   initScene();
   setupUIEventHandlers();
   startFrequencyMeasurement();

electron_demo/topics/package.json

@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
-    "electron": "^31.0.0"
+    "electron": "^40.0.0"
   }
 }

electron_demo/topics/renderer.js

@@ -11,6 +11,16 @@
 // limitations under the License.
 
 const { ipcRenderer } = require('electron');
+const process = require('process');
+
+document.addEventListener('DOMContentLoaded', () => {
+  const versionDiv = document.createElement('div');
+  versionDiv.style.position = 'fixed';
+  versionDiv.style.bottom = '10px';
+  versionDiv.style.left = '10px';
+  versionDiv.innerText = 'Electron version: ' + process.versions.electron;
+  document.body.appendChild(versionDiv);
+});
 
 ipcRenderer.on('topic-received', function (event, response) {
   document.getElementById('received-topic').innerText = response;

electron_demo/turtle_tf2/main.js

@@ -335,7 +335,7 @@ async function createTurtleTf2Listener() {
   );
 
   // Timer to check for transforms and control turtle2
-  const timer = node.createTimer(1000, () => {
+  node.createTimer(1000n, () => {
     // Wrap the async logic in a try-catch to handle promise rejections
     (async () => {
       try {
@@ -442,7 +442,7 @@ async function createDynamicFrameTf2Broadcaster() {
   const tfBroadcaster = node.createPublisher('tf2_msgs/msg/TFMessage', '/tf');
 
   // Timer to broadcast dynamic transform
-  const timer = node.createTimer(100, () => {
+  node.createTimer(100n, () => {
     const now = node.now();
 
     // Use a more stable time calculation to avoid NaN
@@ -535,7 +535,7 @@ async function createFixedFrameTf2Broadcaster() {
   const tfBroadcaster = node.createPublisher('tf2_msgs/msg/TFMessage', '/tf');
 
   // Timer to broadcast fixed transform
-  const timer = node.createTimer(100, () => {
+  node.createTimer(100n, () => {
     const now = node.now();
     const fixedTransform = {
       header: {