203 lines
8.0 KiB
Python
203 lines
8.0 KiB
Python
"""Phase 12 E2E (Playwright): one header, same size on every page.
|
|
|
|
Story: ``.agent/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 ``<header>`` 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")
|