hermes-webui/tests/test_project_chip_ui.py

"""Regression tests for the project chip UI fixes (issue #1085).

Two bugs:

1. The right-click context menu opened by `_showProjectContextMenu` was styled
   with `background: var(--panel)`, but `--panel` is NOT defined anywhere in
   style.css.  CSS falls back to `transparent` for undefined variables, so the
   menu appeared see-through and the session list bled through.  The fix
   replaces `var(--panel)` with `var(--surface)` — the same opaque variable
   used by `.session-action-menu` and other floating popovers.

2. The `.project-create-input` (used for both rename and new-project creation)
   had `width: 100px` hard-coded, so the field was always exactly 100px wide
   regardless of the project name being edited.  Fix: bound the field with
   `min-width: 40px` / `max-width: 180px` and `width: auto`, plus a
   `_resizeProjectInput()` JS helper that measures the current value with a
   hidden span and sets the pixel width accordingly.

These are static-source tests — CSS/JS behaviour of a popover and an input
sizer can't be exercised faithfully without a browser, but the patterns
worth pinning are the variable names, the absence of the bad ones, and the
presence of the resize helper at both call sites.
"""

import pathlib

REPO = pathlib.Path(__file__).parent.parent
SESSIONS_JS = (REPO / "static" / "sessions.js").read_text(encoding="utf-8")
STYLE_CSS = (REPO / "static" / "style.css").read_text(encoding="utf-8")


# ── Bug 1: context menu background ────────────────────────────────────────────


class TestContextMenuBackground:

    def test_panel_variable_not_defined_in_stylesheet(self):
        """`--panel` is not defined as a CSS custom property anywhere — so
        any rule using `var(--panel)` falls back to `transparent`, which is
        the actual root cause of the menu bleed-through.  This test
        documents that fact: if `--panel` is ever defined, the test will
        need updating but the fix is still safer using `--surface`."""
        # Match either ":root --panel:" or "--panel:" assignments; absence
        # confirms the fallback-to-transparent failure mode.
        assert "--panel:" not in STYLE_CSS, (
            "If --panel is now defined, update this test, but the menu "
            "should still use --surface for consistency with other popovers."
        )

    def test_context_menu_uses_surface_not_panel(self):
        """`_showProjectContextMenu` must set the menu background to
        `var(--surface)`, not `var(--panel)`."""
        # Locate the menu construction
        idx = SESSIONS_JS.find("project-ctx-menu")
        assert idx >= 0, "project-ctx-menu className not found in sessions.js"
        # Look at the surrounding 800 chars where the cssText is set
        window = SESSIONS_JS[idx: idx + 1200]
        assert "background:var(--surface)" in window, (
            "Project context menu must use background:var(--surface) for an "
            "opaque surface — var(--panel) is undefined and falls back to "
            "transparent."
        )
        assert "background:var(--panel)" not in window, (
            "Project context menu still uses background:var(--panel) — "
            "this CSS variable is not defined and renders transparent."
        )

    def test_session_action_menu_also_uses_surface_for_consistency(self):
        """Sanity check: the existing .session-action-menu (the analogous
        right-click menu for session items) uses `var(--surface)` — so the
        fix is consistent with the rest of the codebase."""
        assert "session-action-menu" in STYLE_CSS
        # Find the rule and confirm it uses --surface
        idx = STYLE_CSS.find(".session-action-menu")
        assert idx >= 0
        rule = STYLE_CSS[idx: idx + 400]
        assert "var(--surface)" in rule, (
            ".session-action-menu should use var(--surface) — kept here as "
            "the canonical reference for opaque popover surfaces."
        )


# ── Bug 2: project-create-input width ─────────────────────────────────────────


class TestProjectCreateInputWidth:

    def test_no_hardcoded_100px_width(self):
        """The fixed `width: 100px` on .project-create-input is gone."""
        idx = STYLE_CSS.find(".project-create-input{")
        assert idx >= 0, ".project-create-input rule not found in style.css"
        rule = STYLE_CSS[idx: idx + 400]
        assert "width:100px" not in rule and "width: 100px" not in rule, (
            "Fixed 100px width must be replaced with min-width/max-width/"
            "width:auto so the input grows with its content."
        )

    def test_min_and_max_width_present(self):
        """Both min-width and max-width must be set on .project-create-input."""
        idx = STYLE_CSS.find(".project-create-input{")
        rule = STYLE_CSS[idx: idx + 400]
        assert "min-width:40px" in rule, (
            f"min-width:40px not found in .project-create-input rule: {rule}"
        )
        assert "max-width:180px" in rule, (
            f"max-width:180px not found in .project-create-input rule: {rule}"
        )
        assert "width:auto" in rule, (
            f"width:auto not found in .project-create-input rule: {rule}"
        )


class TestResizeProjectInputHelper:
    """The `_resizeProjectInput` helper must exist and be wired into both
    rename and create call sites."""

    def test_resize_helper_defined(self):
        assert "function _resizeProjectInput(" in SESSIONS_JS, (
            "_resizeProjectInput helper not found in sessions.js"
        )

    def test_resize_helper_uses_hidden_span(self):
        """The standard pattern is to measure with a hidden absolute span
        sharing the same font/padding as the input. Font and family are read
        via getComputedStyle so the sizer stays calibrated if CSS changes."""
        idx = SESSIONS_JS.find("function _resizeProjectInput(")
        assert idx >= 0
        body = SESSIONS_JS[idx: idx + 900]
        assert "position:absolute" in body and "visibility:hidden" in body, (
            "_resizeProjectInput should use a hidden absolute span to "
            "measure the value's rendered width."
        )
        assert "getComputedStyle(inp)" in body, (
            "_resizeProjectInput should use getComputedStyle to read font "            "properties so the sizer stays calibrated if CSS changes."
        )
        assert "Math.min(180" in body, (
            "max bound (180) not applied in _resizeProjectInput"
        )
        assert "Math.max(40" in body, (
            "min bound (40) not applied in _resizeProjectInput"
        )

    def test_rename_calls_resize_helper(self):
        """`_startProjectRename` must call `_resizeProjectInput` once on
        creation and again on every input event."""
        idx = SESSIONS_JS.find("function _startProjectRename(")
        assert idx >= 0
        body = SESSIONS_JS[idx: idx + 1200]
        assert "_resizeProjectInput(inp)" in body, (
            "_startProjectRename must call _resizeProjectInput so the "
            "input width matches the existing project name."
        )
        # Wired into the input event so it grows as the user types
        assert "addEventListener('input'" in body and "_resizeProjectInput" in body, (
            "_startProjectRename must wire input events to _resizeProjectInput"
        )

    def test_create_calls_resize_helper(self):
        """Same for `_startProjectCreate` (new-project entry field)."""
        idx = SESSIONS_JS.find("function _startProjectCreate(")
        assert idx >= 0
        body = SESSIONS_JS[idx: idx + 1200]
        assert "_resizeProjectInput(inp)" in body, (
            "_startProjectCreate must call _resizeProjectInput on focus"
        )
        assert "addEventListener('input'" in body, (
            "_startProjectCreate must wire input events to _resizeProjectInput"
        )


class TestProjectChipLongPressTouch:
    """Mobile long-press to open the project context menu (#3760).

    Project chips were deletable only via the right-click context menu, which has
    no touch equivalent — so mobile users could never remove a project. A 500ms
    long-press now opens the same menu.
    """

    def _chip_touch_block(self):
        # The chip touch handlers live just after the oncontextmenu wiring in the
        # project-chip render loop.
        idx = SESSIONS_JS.find("Touch long-press")
        assert idx != -1, "project-chip long-press touch block not found"
        return SESSIONS_JS[idx: idx + 2300]

    def test_long_press_opens_project_context_menu(self):
        block = self._chip_touch_block()
        assert "addEventListener('touchstart'" in block
        assert "setTimeout(" in block and "},500);" in block
        assert "_showProjectContextMenu(" in block
        # visual feedback + scroll-drift cancel, mirroring the session-item pattern
        assert "long-pressing" in block
        assert "addEventListener('touchmove'" in block
        assert ">10" in block  # >10px drift cancels the press

    def test_long_press_suppresses_synthetic_click_and_filter_tap(self):
        block = self._chip_touch_block()
        # touchend must be non-passive so it can preventDefault the synthetic click
        assert "addEventListener('touchend'" in block
        assert "{passive:false}" in block
        assert "e.preventDefault();e.stopPropagation();" in block
        # the long-press handler cancels the pending single-tap filter timer
        assert "clearTimeout(_pClickTimer)" in block

    def test_touchstart_clears_inflight_timer_before_scheduling(self):
        """Regression: a second finger / stray touchstart must not orphan the
        prior timer (which would then fire the menu after the gesture was
        cancelled). touchstart clears any in-flight _lpTimer before scheduling,
        and the timer body bails if the gesture was already consumed.
        """
        block = self._chip_touch_block()
        # clear-before-schedule at the top of touchstart
        assert "if(_lpTimer){clearTimeout(_lpTimer);_lpTimer=null;}" in block, (
            "touchstart must clear any in-flight long-press timer before scheduling "
            "a new one (orphaned-timer fix)"
        )
        # stale-fire guard inside the timer body
        assert "if(_lpHandled) return;" in block, (
            "the long-press timer body must no-op if the gesture was already consumed"
        )

    def test_long_pressing_style_feedback_present(self):
        assert ".project-chip.long-pressing" in STYLE_CSS
        # Target the base .project-chip rule (the one carrying the layout props),
        # not an unrelated theme override of the same selector.
        base_idx = STYLE_CSS.find(".project-chip{font-size")
        assert base_idx != -1, "base .project-chip rule not found"
        chip_rule = STYLE_CSS[base_idx: STYLE_CSS.find("}", base_idx) + 1]
        # touch tuning so the native callout/selection doesn't compete with the gesture
        assert "touch-action:manipulation" in chip_rule
        assert "user-select:none" in chip_rule


class TestQuickCreateMobileDrawer:
    """The project-chip "+" (quick-create) must close the mobile sidebar drawer.

    On phones the sidebar is a full-screen drawer (`.sidebar.mobile-open`,
    z-index 200) covering the main chat view. The quick-create button creates
    the new project conversation but never closed the drawer, so on mobile the
    tap *looked* like a no-op — the session was created, just hidden underneath.
    Mirrors `$('btnNewChat').onclick` in boot.js and the #5409 close in
    `_openSidebarSession`.
    """

    def _quick_create_block(self):
        idx = SESSIONS_JS.find("function _attachProjectQuickCreateButton(")
        assert idx != -1, "project quick-create helper not found in sessions.js"
        # Function body incl. the full onclick success path (~3K covers it).
        return SESSIONS_JS[idx: idx + 3000]

    def test_quick_create_success_path_closes_mobile_drawer(self):
        block = self._quick_create_block()
        assert "closeMobileSidebar" in block, (
            "project quick-create + must close the mobile sidebar after "
            "newSession so the new conversation is visible on phones"
        )
        # Guarded call, matching the _openSidebarSession (#5409) convention.
        assert "typeof closeMobileSidebar==='function'" in block

    def test_quick_create_close_runs_after_sidebar_repaint(self):
        """The close must sit in the success path after the sidebar repaint —
        not before newSession (the drawer would reopen over the pending load)
        and not in the catch branch (failure should keep the drawer open so the
        user can see the toast and retry)."""
        block = self._quick_create_block()
        render_idx = block.find("renderSessionList({deferWhileInteracting:false})")
        close_idx = block.find("closeMobileSidebar")
        catch_idx = block.find("catch(err)")
        assert render_idx != -1, "sidebar repaint call not found in quick-create handler"
        assert close_idx != -1, "closeMobileSidebar not found in quick-create handler"
        assert catch_idx != -1, "success-path try/catch not found in quick-create handler"
        assert close_idx > render_idx, (
            "closeMobileSidebar must run after the sidebar repaint in the success path"
        )
        assert close_idx < catch_idx, (
            "closeMobileSidebar must stay in the success path (try block) — moving it "
            "into the catch branch would keep the drawer open over the error toast"
        )