brain-of-reese/tests/e2e/test_suggestion_chips.py

"""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 == 3
    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(238, 240, 254)"  # --brand-soft
    assert style["color"] == "rgb(55, 48, 163)"  # --brand-ink
    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()