From 393891173ff6b1b4c35764d317b276d37e72cf29 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Tue, 31 Mar 2026 00:26:12 -0700
Subject: [PATCH] fix: improve test assertion precision and add null guard in
 renderFilterBar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed imprecise pill count assertion in test_app.mjs by changing /filter-pill/g regex to /<button/g to accurately count button elements without double-counting when active pill has both classes
- Removed redundant OR fallback in active pill test, now relying only on specific regex for Laptop pill
- Added defensive null guard 'allSessions = allSessions || []' at entry of renderFilterBar in app.js to prevent TypeError

🤖 Generated with Amplifier

Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
---
 muxplex/frontend/app.js             | 1 +
 muxplex/frontend/tests/test_app.mjs | 9 ++++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index 82da23b..61d0efc 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -721,6 +721,7 @@ function renderGroupedGrid(sessions, mobile) {
  * @param {Array} allSessions - Full (unfiltered) session list used to derive device names.
  */
 function renderFilterBar(container, allSessions) {
+  allSessions = allSessions || [];
   // Collect unique device names preserving insertion order
   var devices = [];
   var seen = {};
diff --git a/muxplex/frontend/tests/test_app.mjs b/muxplex/frontend/tests/test_app.mjs
index f30ad30..ba770ba 100644
--- a/muxplex/frontend/tests/test_app.mjs
+++ b/muxplex/frontend/tests/test_app.mjs
@@ -2570,7 +2570,7 @@ test('renderFilterBar produces pill buttons for each device plus All', () => {
   assert.ok(html.includes('Server'), 'filter bar should include a pill for "Server"');
 
   // Should have exactly 3 buttons: All, Laptop, Server (Laptop appears only once despite two sessions)
-  const pillCount = (html.match(/filter-pill/g) || []).length;
+  const pillCount = (html.match(/<button/g) || []).length;
   assert.ok(pillCount >= 3, 'filter bar should have at least 3 filter-pill buttons (All + 2 devices)');
 });
 
@@ -2593,11 +2593,10 @@ test('renderFilterBar marks active device pill with filter-pill--active class',
   const html = mockContainer.innerHTML;
   // The 'Laptop' pill should have the active class
   assert.ok(html.includes('filter-pill--active'), 'filter bar should mark active device with filter-pill--active class');
-  // Verify the active pill corresponds to 'Laptop'
+  // Verify the active pill corresponds to 'Laptop' specifically
   assert.ok(
-    html.match(/filter-pill--active[^>]*>Laptop|Laptop[^<]*filter-pill--active/) ||
-    html.includes('filter-pill--active'),
-    'filter-pill--active should be present in the rendered HTML'
+    html.match(/filter-pill--active[^>]*>Laptop|Laptop[^<]*filter-pill--active/),
+    'filter-pill--active should be on the Laptop pill specifically'
   );
 
   // Reset