233 lines
8.8 KiB
Python
233 lines
8.8 KiB
Python
"""Phase 05 E2E (Playwright): onboarding suggestion chips, one-tap submit.
|
|
|
|
Story: ``.agent/user_stories/suggestion-chips.md``
|
|
Run in isolation (DB must be up: ``podman compose up -d db``):
|
|
|
|
uv run pytest tests/e2e/test_suggestion_chips.py -v --no-cov
|
|
|
|
The onboarding row in the empty state renders real ``<button>`` chips from
|
|
``GET /api/suggestions`` (settings defaults). Clicking — or Tab + Enter —
|
|
fills the composer AND submits: one tap produces a user bubble with the
|
|
chip's exact text and a streamed Brain reply. On mobile (375px) the row
|
|
becomes a single horizontally scrollable line.
|
|
"""
|
|
from __future__ import annotations
|
|
|
|
import asyncio
|
|
from pathlib import Path
|
|
from threading import Thread
|
|
from typing import Any
|
|
|
|
import httpx
|
|
import pytest
|
|
from playwright.sync_api import Browser, 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
|
|
|
|
REPO = Path(__file__).resolve().parents[2]
|
|
FIXTURES = REPO / "tests" / "fixtures" / "docs"
|
|
MOCK_ANSWER_MARKER = "Deterministic mock answer for E2E"
|
|
|
|
|
|
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_kb(mock_port: int) -> ImportSummary:
|
|
"""Deterministic KB: truncate everything, import the fixture docs."""
|
|
with SessionLocal() as db:
|
|
db.execute(text("TRUNCATE chunks, documents, query_log"))
|
|
db.commit()
|
|
summary = _run_in_thread(_import_fixtures(mock_port))
|
|
assert summary is not None and summary.added == 8 # A9 formats
|
|
return summary
|
|
|
|
|
|
def _api_suggestions(app_url: str) -> list[str]:
|
|
body = httpx.get(f"{app_url}/api/suggestions", timeout=10).json()
|
|
return body["suggestions"]
|
|
|
|
|
|
def _chip_locator(page: Page) -> Any:
|
|
return page.locator("#suggestions .suggestion-chip")
|
|
|
|
|
|
def test_onboarding_chips_render(
|
|
page: Page, app_url: str, mock_llm: int, db_ready: None
|
|
) -> None:
|
|
_seed_kb(mock_llm)
|
|
page.set_default_timeout(30_000)
|
|
page.goto(app_url)
|
|
|
|
# Accessible group: role=list + a name screen readers can announce.
|
|
group = page.locator("#suggestions")
|
|
expect(group).to_have_attribute("role", "list")
|
|
expect(group).to_have_attribute("aria-label", "Suggested questions")
|
|
|
|
# 3+ visible chips, real buttons, each with non-empty text — and the
|
|
# texts match what the API returned (chips are drawn from the endpoint).
|
|
chips = _chip_locator(page)
|
|
expect(chips.first).to_be_visible(timeout=30_000)
|
|
assert chips.count() >= 3
|
|
api_texts = _api_suggestions(app_url)
|
|
for i in range(chips.count()):
|
|
chip = chips.nth(i)
|
|
expect(chip).to_be_visible()
|
|
expect(chip).to_have_attribute("type", "button")
|
|
expect(chip).to_have_attribute("role", "listitem")
|
|
text = chip.inner_text().strip()
|
|
assert text, "every chip needs non-empty label text"
|
|
assert text in api_texts
|
|
assert len(set(api_texts)) >= 3
|
|
|
|
# Chips live in the empty state, which is visible before any message.
|
|
expect(page.locator("#empty-state")).to_be_visible()
|
|
# Chip component contract: brand pill, >=44px touch target.
|
|
style = chips.first.evaluate("el => getComputedStyle(el)")
|
|
assert style["backgroundColor"] == "rgb(35, 43, 82)" # --brand-soft #232b52 (dark theme)
|
|
assert style["color"] == "rgb(165, 180, 252)" # --brand-ink #a5b4fc
|
|
assert style["borderRadius"] == "999px"
|
|
box = chips.first.bounding_box()
|
|
assert box is not None and box["height"] >= 44
|
|
|
|
|
|
def test_chip_click_submits(
|
|
page: Page, app_url: str, mock_llm: int, db_ready: None
|
|
) -> None:
|
|
_seed_kb(mock_llm)
|
|
page.set_default_timeout(30_000)
|
|
page.goto(app_url)
|
|
|
|
first = _chip_locator(page).first
|
|
expect(first).to_be_visible(timeout=30_000)
|
|
chip_text = first.inner_text().strip()
|
|
assert chip_text
|
|
|
|
# One tap = one question: the click fills AND submits.
|
|
first.click()
|
|
expect(page.locator("#empty-state")).to_be_hidden()
|
|
expect(page.locator("#message-input")).to_have_value("") # submitted, not queued
|
|
expect(page.locator(".msg.user .bubble")).to_have_count(1, timeout=30_000)
|
|
expect(page.locator(".msg.user .bubble")).to_have_text(chip_text)
|
|
|
|
# A grounded mock reply follows (the seeded KB answers this topic).
|
|
brain = page.locator(".msg.brain .bubble").first
|
|
expect(brain).to_contain_text(MOCK_ANSWER_MARKER, timeout=30_000)
|
|
expect(brain).to_contain_text(chip_text)
|
|
expect(page.locator(".msg.brain.is-deflected")).to_have_count(0)
|
|
|
|
# Never stale: the send button recovers after the turn.
|
|
expect(page.locator("#send-btn")).to_be_enabled()
|
|
expect(page.locator("#send-label")).to_have_text("Send")
|
|
|
|
|
|
def test_chips_keyboard_accessible(
|
|
page: Page, app_url: str, mock_llm: int, db_ready: None
|
|
) -> None:
|
|
_seed_kb(mock_llm)
|
|
page.set_default_timeout(30_000)
|
|
page.goto(app_url)
|
|
first = _chip_locator(page).first
|
|
expect(first).to_be_visible(timeout=30_000)
|
|
chip_text = first.inner_text().strip()
|
|
assert chip_text
|
|
|
|
# Tab from the page start: the first chip must be reachable on the
|
|
# keyboard, and before the composer input (skip-link + 2 nav links come
|
|
# first). Track tab stops until we land on a chip.
|
|
reached_chip_at: int | None = None
|
|
for step in range(1, 11):
|
|
page.keyboard.press("Tab")
|
|
state = page.evaluate(
|
|
"""() => {
|
|
const el = document.activeElement;
|
|
return {
|
|
id: el ? el.id : "",
|
|
isChip: !!(el && el.classList && el.classList.contains("suggestion-chip")
|
|
&& el.closest("#suggestions")),
|
|
};
|
|
}"""
|
|
)
|
|
if state["id"] == "message-input":
|
|
pytest.fail("the composer input was reached before the suggestion chips")
|
|
if state["isChip"]:
|
|
reached_chip_at = step
|
|
break
|
|
assert reached_chip_at is not None, "no suggestion chip is keyboard-reachable"
|
|
expect(first).to_be_focused()
|
|
|
|
# Enter activates the focused chip button → it submits.
|
|
page.keyboard.press("Enter")
|
|
expect(page.locator("#empty-state")).to_be_hidden()
|
|
expect(page.locator("#message-input")).to_have_value("")
|
|
expect(page.locator(".msg.user .bubble")).to_have_count(1, timeout=30_000)
|
|
expect(page.locator(".msg.user .bubble")).to_have_text(chip_text)
|
|
expect(page.locator(".msg.brain .bubble").first).to_contain_text(
|
|
MOCK_ANSWER_MARKER, timeout=30_000
|
|
)
|
|
expect(page.locator("#send-btn")).to_be_enabled()
|
|
|
|
|
|
def test_chips_mobile_row(
|
|
browser: Browser, app_url: str, mock_llm: int, db_ready: None
|
|
) -> None:
|
|
_seed_kb(mock_llm)
|
|
page = browser.new_page(viewport={"width": 375, "height": 720})
|
|
try:
|
|
page.set_default_timeout(30_000)
|
|
page.goto(app_url)
|
|
row = page.locator("#suggestions")
|
|
expect(row).to_be_visible(timeout=30_000)
|
|
|
|
# The row is a single line that scrolls horizontally: content is
|
|
# wider than the viewport, the container scrolls, nothing wraps.
|
|
wrap = row.evaluate("el => getComputedStyle(el)")
|
|
assert wrap["flexWrap"] == "nowrap"
|
|
assert wrap["overflowX"] in {"auto", "scroll"}
|
|
dims = row.evaluate(
|
|
"el => ({ sw: el.scrollWidth, cw: el.clientWidth, h: el.clientHeight })"
|
|
)
|
|
assert dims["sw"] > dims["cw"], "chips must overflow into a scroll row"
|
|
assert row.evaluate("el => { el.scrollLeft = 24; return el.scrollLeft; }") > 0
|
|
|
|
# Exactly one line: every chip shares the same top edge, and the
|
|
# line height fits a single 44px-tall chip (no vertical clipping).
|
|
chips = _chip_locator(page)
|
|
assert chips.count() >= 3
|
|
tops: list[float] = []
|
|
for i in range(chips.count()):
|
|
box = chips.nth(i).bounding_box()
|
|
assert box is not None
|
|
assert box["height"] >= 44, "chips stay >=44px tall on mobile"
|
|
tops.append(box["y"])
|
|
assert max(tops) - min(tops) < 0.5, "all chips sit on one horizontal line"
|
|
row_box = row.bounding_box()
|
|
assert row_box is not None
|
|
assert row_box["height"] < 2 * 44, "the mobile row is a single line tall"
|
|
finally:
|
|
page.close()
|