SF Permits MCP Server

"""Mobile viewport E2E tests using Playwright.

These tests are skipped unless the environment variable E2E_BASE_URL is set.
To run locally (requires a running dev server):

    E2E_BASE_URL=http://localhost:5001 pytest tests/e2e/test_mobile.py -v

To run against production:

    E2E_BASE_URL=https://sfpermits-ai-production.up.railway.app \
        pytest tests/e2e/test_mobile.py -v

Tests verify:
- No horizontal overflow (scrollWidth > clientWidth) at 375px viewport
- Touch targets >= 44px for interactive nav elements
- Font sizes >= 14px for body text elements
- Table overflow containers present on known data-table pages
- mobile.css is loaded on all full-page routes
- Viewport meta tag is present
"""

from __future__ import annotations

import os
import pytest

# ---------------------------------------------------------------------------
# Skip marker — skip entire module when E2E_BASE_URL is unset
# ---------------------------------------------------------------------------

E2E_BASE_URL = os.environ.get("E2E_BASE_URL", "").rstrip("/")
pytestmark = pytest.mark.skipif(
    not E2E_BASE_URL,
    reason="E2E_BASE_URL not set — skipping Playwright mobile tests",
)

# ---------------------------------------------------------------------------
# Viewport configurations to test
# ---------------------------------------------------------------------------

VIEWPORTS = [
    pytest.param(
        {"width": 375, "height": 812},
        id="iphone-se-375",
    ),
    pytest.param(
        {"width": 414, "height": 896},
        id="iphone-plus-414",
    ),
    pytest.param(
        {"width": 768, "height": 1024},
        id="tablet-768",
    ),
]

# ---------------------------------------------------------------------------
# Pages that should load without overflow
# ---------------------------------------------------------------------------

PUBLIC_PAGES = [
    pytest.param("/", id="landing"),
    pytest.param("/auth/login", id="login"),
]

# Pages that require auth are tested separately (no session cookie available
# in E2E context) but their static assets (mobile.css) are verified below.

# ---------------------------------------------------------------------------
# Helpers
# ---------------------------------------------------------------------------

def _check_overflow(page) -> dict:
    """Return {has_overflow: bool, body_scroll: int, viewport: int}."""
    result = page.evaluate("""() => {
        const body = document.body;
        const html = document.documentElement;
        const scrollW = Math.max(
            body.scrollWidth, body.offsetWidth,
            html.clientWidth, html.scrollWidth, html.offsetWidth
        );
        return {
            hasOverflow: scrollW > window.innerWidth,
            bodyScrollWidth: body.scrollWidth,
            viewportWidth: window.innerWidth,
        };
    }""")
    return result


def _get_font_sizes(page, selector: str = "p, td, th, li") -> list[float]:
    """Return computed font-size values (px) for matching elements."""
    return page.evaluate(f"""() => {{
        const els = document.querySelectorAll('{selector}');
        return Array.from(els).map(el => {{
            const sz = window.getComputedStyle(el).fontSize;
            return parseFloat(sz);
        }}).filter(sz => !isNaN(sz) && sz > 0);
    }}""")


def _get_touch_target_sizes(page, selector: str) -> list[dict]:
    """Return list of {{tag, height, width}} for elements matching selector."""
    return page.evaluate(f"""() => {{
        const els = document.querySelectorAll('{selector}');
        return Array.from(els).map(el => {{
            const r = el.getBoundingClientRect();
            return {{
                tag: el.tagName,
                text: (el.textContent || '').trim().slice(0, 30),
                height: r.height,
                width: r.width,
            }};
        }}).filter(el => el.height > 0);
    }}""")


# ---------------------------------------------------------------------------
# Tests
# ---------------------------------------------------------------------------


@pytest.fixture(scope="session")
def browser_instance():
    """Launch a single headless Chromium browser for the test session."""
    from playwright.sync_api import sync_playwright

    with sync_playwright() as pw:
        browser = pw.chromium.launch(headless=True)
        yield browser
        browser.close()


class TestNoHorizontalOverflow:
    """Verify no horizontal scroll at each viewport width."""

    @pytest.mark.parametrize("viewport", VIEWPORTS)
    @pytest.mark.parametrize("route", PUBLIC_PAGES)
    def test_no_overflow(self, browser_instance, viewport, route):
        context = browser_instance.new_context(viewport=viewport)
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}{route}"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            overflow = _check_overflow(page)
            assert not overflow["hasOverflow"], (
                f"Horizontal overflow detected at {viewport['width']}px on {route}: "
                f"scrollWidth={overflow['bodyScrollWidth']}px "
                f"(viewport={overflow['viewportWidth']}px)"
            )
        finally:
            context.close()


class TestMobileCssLoaded:
    """Verify mobile.css is referenced and loaded on public pages."""

    @pytest.mark.parametrize("viewport", [VIEWPORTS[0]])  # 375px only
    @pytest.mark.parametrize("route", PUBLIC_PAGES)
    def test_mobile_css_link_present(self, browser_instance, viewport, route):
        context = browser_instance.new_context(viewport=viewport)
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}{route}"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            # Check the HTML source references mobile.css
            links = page.evaluate("""() => {
                const links = document.querySelectorAll('link[rel="stylesheet"]');
                return Array.from(links).map(l => l.href);
            }""")
            mobile_links = [l for l in links if "mobile.css" in l]
            assert mobile_links, (
                f"mobile.css not found in stylesheet links on {route}. "
                f"Found: {links}"
            )
        finally:
            context.close()


class TestViewportMetaTag:
    """Verify viewport meta tag is present on all pages."""

    @pytest.mark.parametrize("route", PUBLIC_PAGES)
    def test_viewport_meta_present(self, browser_instance, route):
        context = browser_instance.new_context(
            viewport={"width": 375, "height": 812}
        )
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}{route}"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            viewport_meta = page.evaluate("""() => {
                const meta = document.querySelector('meta[name="viewport"]');
                return meta ? meta.getAttribute('content') : null;
            }""")
            assert viewport_meta is not None, (
                f"No viewport meta tag found on {route}"
            )
            assert "width=device-width" in viewport_meta, (
                f"viewport meta does not contain 'width=device-width' on {route}. "
                f"Got: {viewport_meta}"
            )
        finally:
            context.close()


class TestTouchTargetSizes:
    """Verify navigation badges meet 44px touch target minimum."""

    def test_nav_badge_touch_targets_375(self, browser_instance):
        context = browser_instance.new_context(
            viewport={"width": 375, "height": 812}
        )
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}/"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            targets = _get_touch_target_sizes(page, "header .badge, header .badge-btn")

            failures = [
                t for t in targets
                if t["height"] < 44
            ]
            assert not failures, (
                f"Nav badges below 44px touch target at 375px viewport: "
                + ", ".join(
                    f'"{t["text"]}" ({t["height"]:.0f}px)' for t in failures
                )
            )
        finally:
            context.close()


class TestFontSizes:
    """Verify body text font sizes are >= 14px at 375px viewport."""

    def test_min_font_size_375(self, browser_instance):
        context = browser_instance.new_context(
            viewport={"width": 375, "height": 812}
        )
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}/"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            sizes = _get_font_sizes(page, "p, li")
            tiny = [s for s in sizes if s < 12]  # 12px is below any reasonable floor
            pct_tiny = len(tiny) / len(sizes) if sizes else 0
            assert pct_tiny < 0.05, (
                f"{len(tiny)}/{len(sizes)} text elements have font-size < 12px "
                f"at 375px viewport. Tiny sizes: {sorted(set(tiny))}"
            )
        finally:
            context.close()


class TestTableOverflow:
    """
    Verify that tables on key pages do not cause body horizontal overflow.

    These tests run only if the pages are publicly accessible without login.
    Pages requiring auth are skipped with a note.
    """

    @pytest.mark.parametrize("route,description", [
        pytest.param("/", "landing/search page", id="index"),
        pytest.param("/auth/login", "auth login page", id="login"),
    ])
    def test_page_no_table_overflow(self, browser_instance, route, description):
        context = browser_instance.new_context(
            viewport={"width": 375, "height": 812}
        )
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}{route}"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            overflow = _check_overflow(page)
            assert not overflow["hasOverflow"], (
                f"Table overflow on {description} ({route}) at 375px: "
                f"scrollWidth={overflow['bodyScrollWidth']}px"
            )
        finally:
            context.close()


class TestInputFontSize:
    """Verify form inputs have font-size >= 16px to prevent iOS auto-zoom."""

    def test_input_font_size_prevents_ios_zoom(self, browser_instance):
        context = browser_instance.new_context(
            viewport={"width": 375, "height": 812}
        )
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}/"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)
            input_sizes = page.evaluate("""() => {
                const inputs = document.querySelectorAll(
                    'input[type="text"], input[type="email"], '
                    'input[type="search"], textarea, select'
                );
                return Array.from(inputs).map(el => {
                    const sz = window.getComputedStyle(el).fontSize;
                    return {
                        type: el.type || el.tagName,
                        fontSize: parseFloat(sz),
                        placeholder: el.placeholder || '',
                    };
                }).filter(el => el.fontSize > 0);
            }""")
            tiny_inputs = [i for i in input_sizes if i["fontSize"] < 16]
            assert not tiny_inputs, (
                f"Inputs with font-size < 16px (will trigger iOS zoom) at 375px: "
                + ", ".join(
                    f'{i["type"]} ({i["fontSize"]}px, placeholder="{i["placeholder"][:20]}")'
                    for i in tiny_inputs
                )
            )
        finally:
            context.close()


class TestScreenshots:
    """Capture mobile screenshots for visual review (always passes)."""

    @pytest.mark.parametrize("viewport,name", [
        ({"width": 375, "height": 812}, "iphone-se"),
        ({"width": 768, "height": 1024}, "tablet"),
    ])
    @pytest.mark.parametrize("route,slug", [
        pytest.param("/", "landing", id="landing"),
        pytest.param("/auth/login", "login", id="login"),
    ])
    def test_screenshot(self, browser_instance, viewport, name, route, slug, tmp_path):
        """Capture screenshots — informational only, always passes."""
        context = browser_instance.new_context(viewport=viewport)
        page = context.new_page()
        try:
            url = f"{E2E_BASE_URL}{route}"
            page.goto(url, wait_until="domcontentloaded", timeout=15000)

            # Save to qa-results/screenshots/ if it exists, else tmp_path
            import pathlib
            qa_dir = pathlib.Path(__file__).parents[2] / "qa-results" / "screenshots" / "mobile"
            qa_dir.mkdir(parents=True, exist_ok=True)
            screenshot_path = qa_dir / f"{slug}-{name}.png"

            page.screenshot(path=str(screenshot_path), full_page=True)
            # Test always passes — screenshots are for visual review
        finally:
            context.close()