"""Phase 12 E2E (Playwright): one header, same size on every page. Story: ``.agents/user_stories/header-consistency.md`` Run in isolation (DB must be up: ``podman compose up -d db``): uv run pytest tests/e2e/test_header_consistency.py -v --no-cov The sticky top bar must be exactly ``--header-h`` tall on Chat, Sources, and the document viewer (whose back button says "Sources" — the page users compare against chat): 64px desktop, 58px at ≤640px. Test → story mapping (Playwright Mapping Rule): 1. ``test_header_height_identical_across_pages_desktop`` 2. ``test_header_height_identical_across_pages_mobile`` 3. ``test_viewer_header_content_still_fits`` (phase-10 regression guard) Phase 16 adaptation: the auth control (Sign in / Sign out) joins the chat header's ``.header-inner`` — the desktop test verifies its presence in both auth states without the bar's height moving (height assertions unchanged). Phase 34 adaptation (two-row viewer header, owner confirmation 2026-08-26): the viewer's ``
`` is now TWO rows — row 1 is the standard shared bar (``.doc-header .app-header``, the phase-12/19 ``--header-h`` contract) and row 2 is the ``.doc-titlebar`` (back + title + meta, content-sized). The height assertions are pointed at ROW 1 — the standard bar — which must equal the chat/sources bars exactly; the titlebar row is asserted present (height > 0), not height-pinned. """ from __future__ import annotations import asyncio from pathlib import Path from threading import Thread from typing import Any from playwright.sync_api import Page, expect from sqlalchemy import text from app.config import Settings from app.db import SessionLocal from app.rag.importer import ImportSummary, import_sources from app.rag.llm import LLMClient from e2e.auth_helpers import login REPO = Path(__file__).resolve().parents[2] FIXTURES = REPO / "tests" / "fixtures" / "docs" VIEWER_URL = "/document.html?source=docs&path=homelab%2Fkubernetes.md" SOURCES_URL = "/sources.html" #: The shared header-bar token values (frontend/assets/styles.css :root #: and the ≤640px media query). DESKTOP_HEADER_H = 64 MOBILE_HEADER_H = 58 async def _import_fixtures(mock_port: int) -> ImportSummary: kwargs: dict[str, Any] = {"_env_file": None, "llm_base_url": f"http://127.0.0.1:{mock_port}/v1"} settings = Settings(**kwargs) # pyright: ignore[reportCallIssue] return await import_sources([FIXTURES], LLMClient(settings)) def _run_in_thread(coro: Any) -> Any: """Run a coroutine on a worker thread (Playwright owns the test loop).""" box: dict[str, Any] = {} def runner() -> None: try: box["value"] = asyncio.run(coro) except BaseException as e: # noqa: BLE001 — re-raised on the test thread box["error"] = e t = Thread(target=runner) t.start() t.join() if "error" in box: raise box["error"] return box["value"] def _seed_db(mock_port: int) -> None: with SessionLocal() as db: db.execute(text("TRUNCATE chunks, documents, query_log")) db.commit() _run_in_thread(_import_fixtures(mock_port)) def _box_height(page: Page, selector: str) -> float: box = page.locator(selector).bounding_box() assert box is not None, f"{selector} not rendered" return box["height"] def _header_heights(page: Page, app_url: str) -> dict[str, float]: """Measured heights of the sticky top bar on the three pages.""" heights: dict[str, float] = {} page.goto(app_url + "/") heights["chat"] = _box_height(page, ".app-header") page.goto(app_url + SOURCES_URL) heights["sources"] = _box_height(page, ".app-header") page.goto(app_url + VIEWER_URL) expect(page.locator("#doc-title")).to_have_text("Kubernetes Homelab Cluster", timeout=15_000) # Phase 34: the viewer header is two rows — measure ROW 1 (the # standard bar), which must equal the other pages' bars exactly. heights["document"] = _box_height(page, ".doc-header .app-header") return heights # --------------------------------------------------------------------------- # 1. Desktop: all three pages, one identical 64px bar # --------------------------------------------------------------------------- def test_header_height_identical_across_pages_desktop( page: Page, app_url: str, mock_llm: int, db_ready: None ) -> None: page.set_viewport_size({"width": 1280, "height": 800}) _seed_db(mock_llm) heights = _header_heights(page, app_url) assert heights["chat"] == DESKTOP_HEADER_H, f"chat header {heights['chat']}px" assert heights["sources"] == DESKTOP_HEADER_H, f"sources header {heights['sources']}px" assert heights["document"] == DESKTOP_HEADER_H, ( f"document header {heights['document']}px (was content-sized)" ) # Phase 16: the auth control lives in the same bar — anonymous sees # "Sign in", signed-in sees "Sign out", and neither state moves the # height. page.goto(app_url + "/") expect(page.locator("#sign-in-link")).to_be_visible() expect(page.locator("#sign-out-btn")).to_be_hidden() assert _box_height(page, ".app-header") == DESKTOP_HEADER_H login(page, app_url, next="/") expect(page.locator("#sign-out-btn")).to_be_visible() expect(page.locator("#sign-in-link")).to_be_hidden() assert _box_height(page, ".app-header") == DESKTOP_HEADER_H # --------------------------------------------------------------------------- # 2. Mobile (≤640px): all three pages, one identical 58px bar # --------------------------------------------------------------------------- def test_header_height_identical_across_pages_mobile( page: Page, app_url: str, mock_llm: int, db_ready: None ) -> None: page.set_viewport_size({"width": 375, "height": 812}) _seed_db(mock_llm) heights = _header_heights(page, app_url) assert heights["chat"] == MOBILE_HEADER_H, f"chat header {heights['chat']}px" assert heights["sources"] == MOBILE_HEADER_H, f"sources header {heights['sources']}px" assert heights["document"] == MOBILE_HEADER_H, ( f"document header {heights['document']}px (meta row must clip, not wrap)" ) # --------------------------------------------------------------------------- # 3. Regression: the phase-10 viewer header still shows title, badges, # back link — single-line on both desktop and mobile # --------------------------------------------------------------------------- def test_viewer_header_content_still_fits( page: Page, app_url: str, mock_llm: int, db_ready: None ) -> None: """Phase 34: the phase-10 viewer content (title, badges, back link) survives in the titlebar ROW, and row 1 stays the pinned standard bar — single-line on both desktop and mobile.""" _seed_db(mock_llm) for width, expected_h in ((1280, DESKTOP_HEADER_H), (375, MOBILE_HEADER_H)): page.set_viewport_size({"width": width, "height": 800}) page.goto(app_url + VIEWER_URL) expect( page.locator("#doc-title") ).to_have_text("Kubernetes Homelab Cluster", timeout=15_000) # Title on a single line (ellipsis, no wrap growth). assert _box_height(page, "#doc-title") < 30 # one line at either size # Meta row: badges + path present and visible, single line. assert _box_height(page, ".doc-meta") < 26 expect(page.locator(".doc-source-badge", has_text="docs")).to_be_visible() expect(page.locator(".format-badge", has_text="md")).to_be_visible() expect(page.locator(".doc-path", has_text="homelab/kubernetes.md")).to_be_visible() # Back link still there, ≥44px touch target, in the titlebar row. back = page.locator("#doc-back") expect(back).to_be_visible() assert _box_height(page, "#doc-back") >= 44 # Phase 34 two-row contract: ROW 1 is the standard bar (the # pinned --header-h), and the titlebar row is present below it. expect(page.locator(".doc-header .app-header")).to_have_css( "height", f"{expected_h}px" ) assert _box_height(page, ".doc-titlebar") > 0, ("the titlebar row must render")