From aea2b5fa2513a141c4636998f9a6dba5f77cf35b Mon Sep 17 00:00:00 2001
From: Allan Leary <alleria173@proton.me>
Date: Wed, 15 Jul 2026 09:22:49 +0100
Subject: [PATCH] Fix UI test failures for operation category popover

- Click the option checkbox's label instead of the input, as Bootstrap
  Material Design restyles checkboxes making the input itself not
  interactable in headless Chrome
- Wait for any in-progress accordion transition before opening the target
  category in categoryLinkClick. When the search box collapses an open
  category and a category link is clicked during that transition,
  Bootstrap silently ignores the collapse('show') call
---
 src/web/waiters/OperationsWaiter.mjs | 20 +++++++++++++++-----
 tests/browser/00_nightwatch.js       |  7 ++++---
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs
index 39862ec9..3a92fc16 100755
--- a/src/web/waiters/OperationsWaiter.mjs
+++ b/src/web/waiters/OperationsWaiter.mjs
@@ -385,13 +385,23 @@ class OperationsWaiter {
         // any other open category automatically. Calling "show" on an already
         // open category would toggle-close it mid-transition, so skip it.
         const categoryElement = document.getElementById(categoryId);
-        if (categoryElement && !categoryElement.classList.contains("show")) {
-            $(categoryElement).collapse("show");
-        }
+        if (!categoryElement) return;
 
-        // Scroll the category into view
-        if (categoryElement) {
+        const showCategory = function() {
+            if (!categoryElement.classList.contains("show")) {
+                $(categoryElement).collapse("show");
+            }
             categoryElement.scrollIntoView({behavior: "smooth", block: "nearest"});
+        };
+
+        // Bootstrap ignores "show" while another panel in the accordion is still
+        // mid-transition (e.g. a category collapsed by the search box a moment
+        // earlier), so wait for any in-progress transition to finish first.
+        const transitioning = document.querySelector("#categories .collapsing");
+        if (transitioning) {
+            $(transitioning).one("hidden.bs.collapse shown.bs.collapse", showCategory);
+        } else {
+            showCategory();
         }
     }
 
diff --git a/tests/browser/00_nightwatch.js b/tests/browser/00_nightwatch.js
index 545e7e50..270f694c 100644
--- a/tests/browser/00_nightwatch.js
+++ b/tests/browser/00_nightwatch.js
@@ -286,13 +286,14 @@ module.exports = {
         browser
             .expect.element("#catHashing").to.be.visible;
 
-        // Toggle the option off
+        // Toggle the option off. The checkbox input is restyled by Bootstrap
+        // Material Design and is not directly interactable, so click its label.
         browser
             .click("#options");
 
         browser
             .waitForElementVisible("#options-modal", 1000)
-            .click("#showOpCategories")
+            .click("label[for='showOpCategories']")
             .pause(500)
             .click("#options-modal .modal-footer .btn-secondary[data-dismiss='modal']")
             .waitForElementNotVisible("#options-modal", 1000);
@@ -315,7 +316,7 @@ module.exports = {
         browser
             .click("#options")
             .waitForElementVisible("#options-modal", 1000)
-            .click("#showOpCategories")
+            .click("label[for='showOpCategories']")
             .pause(500)
             .click("#options-modal .modal-footer .btn-secondary[data-dismiss='modal']")
             .waitForElementNotVisible("#options-modal", 1000);