meal-order-manager/tests/test_generate_form.py

"""Structural and Playwright tests for the generated order form."""

from __future__ import annotations

import json
import re
import sys
from pathlib import Path

import pytest

REPO_ROOT = Path(__file__).resolve().parents[1]
SERVER_DIR = REPO_ROOT / "src" / "server"
FIXTURES = Path(__file__).resolve().parent / "fixtures"

sys.path.insert(0, str(SERVER_DIR))

from generate_form import generate_form  # noqa: E402

EXPECTED_CONFIG_KEYS = {
    "authMode",
    "meals",
    "roster",
    "week",
    "submitUrl",
    "statusUrl",
    "rosterUrl",
    "adminUrl",
    "adminPdfUrl",
    "apiKey",
    "bulkDiscount",
    "companySubsidy",
    "googleClientId",
    "deadline",
    "scrapedAt",
    "hasDiscount",
}


def _load_fixtures():
    menu = json.loads((FIXTURES / "menu.json").read_text())
    config = json.loads((FIXTURES / "config.json").read_text())
    return menu, config


def _extract_config(html: str) -> dict:
    match = re.search(
        r"window\.CONFIG\s*=\s*(\{.*?\});",
        html,
        flags=re.DOTALL,
    )
    assert match, "window.CONFIG blob not found"
    return json.loads(match.group(1))


def _render(*, google: bool = False, api_key: str = "test-key") -> str:
    menu, config = _load_fixtures()
    return generate_form(
        menu,
        config,
        api_url="https://api.example.com",
        api_key=api_key,
        bulk_discount=10,
        company_subsidy=50,
        google_client_id="google-client.apps.googleusercontent.com" if google else "",
    )


class TestGenerateFormStructural:
    def test_local_and_google_render(self):
        local = _render(google=False)
        google = _render(google=True)
        assert "FORM_HTML_MARKER" in local
        assert "FORM_HTML_MARKER" in google
        assert 'id="emp-name"' in local
        assert 'id="emp-name"' not in google
        assert "accounts.google.com/gsi/client" in google
        assert "accounts.google.com/gsi/client" not in local
        assert 'id="auth-overlay"' in google
        assert 'id="auth-overlay"' not in local

    def test_single_config_blob_and_keys(self):
        for google in (False, True):
            html = _render(google=google)
            assert html.count("window.CONFIG =") == 1
            cfg = _extract_config(html)
            assert EXPECTED_CONFIG_KEYS <= set(cfg.keys())
            assert cfg["authMode"] == ("google" if google else "local")
            if google:
                assert cfg["googleClientId"]
            else:
                assert cfg["googleClientId"] == ""
            assert cfg["bulkDiscount"] == 10
            assert cfg["companySubsidy"] == 50
            assert cfg["hasDiscount"] is True

    def test_no_legacy_const_injections(self):
        html = _render(google=True)
        for pattern in (
            r"\bconst MEALS\s*=",
            r"\bconst ROSTER\s*=",
            r"\bconst SUBMIT_URL\s*=",
            r"\bconst STATUS_URL\s*=",
            r"\bconst ROSTER_URL\s*=",
            r"\bconst ADMIN_URL\s*=",
            r"\bconst ADMIN_PDF_URL\s*=",
            r"\bconst API_KEY\s*=",
            r"\bconst GOOGLE_CLIENT_ID\s*=",
        ):
            # Locals derived from CONFIG inside form.js are fine; generator must not
            # inject the seven top-level const lines before the inlined scripts.
            pre_js = html.split("/* FORM_JS_MARKER */")[0]
            assert not re.search(pattern, pre_js), pattern

    def test_template_markers_inlined(self):
        html = _render()
        assert "FORM_CSS_MARKER" in html
        assert "--color-brand" in html
        assert "FORM_JS_MARKER" in html
        assert "ADMIN_JS_MARKER" in html
        assert "FORM_HTML_MARKER" in html
        assert '<link rel="stylesheet"' not in html
        # Only allowed external script is GSI in google mode
        local = _render(google=False)
        assert "<script src=" not in local

    def test_script_order_form_then_admin(self):
        html = _render()
        form_pos = html.index("FORM_JS_MARKER")
        admin_pos = html.index("ADMIN_JS_MARKER")
        assert form_pos < admin_pos

    def test_single_submit_order_definition(self):
        html = _render(google=True)
        # One async function submitOrder in the inlined form.js
        assert len(re.findall(r"async function submitOrder\s*\(", html)) == 1

    def test_no_onclick_admin_data_embedding(self):
        html = _render(google=True)
        assert 'onclick="admin' not in html
        assert 'onclick="admin' not in html
        # Static markup must not interpolate runtime data into onclick
        assert not re.search(r'onclick="[^"]*\$\{', html)

    def test_script_breakout_meal_escaped(self):
        html = _render()
        assert "</script><script>alert(1)</script>" not in html
        cfg_match = re.search(r"window\.CONFIG\s*=\s*(\{.*?\});", html, flags=re.DOTALL)
        assert cfg_match
        blob = cfg_match.group(1)
        # Literal </script> inside the CONFIG script would terminate early.
        assert "</script>" not in blob
        assert "<\\/script><script>alert(1)<\\/script>" in blob
        # Parsed JSON still contains the hostile meal name.
        cfg = json.loads(blob)
        assert any(
            m["name"] == "</script><script>alert(1)</script>" for m in cfg["meals"]
        )

    def test_hostile_names_present_in_config(self):
        cfg = _extract_config(_render())
        names = {m["name"] for m in cfg["meals"]}
        assert "Luis' Lomo Saltado" in names
        assert 'Meal with "quotes"' in names
        assert "</script><script>alert(1)</script>" in names

    def test_meal_card_template_and_qty_input(self):
        html = _render()
        assert 'id="meal-card-tpl"' in html
        assert 'type="number"' in html
        assert "data-meal-index" in html
        assert "data-qty-delta" in html

    def test_a11y_status_and_live_total_markup(self):
        html = _render()
        assert 'id="form-status-alert"' in html
        assert 'id="form-status-info"' in html
        assert 'id="admin-status-alert"' in html
        assert 'id="admin-status-info"' in html
        assert 'role="alert"' in html
        assert 'role="status"' in html
        assert 'aria-live="polite"' in html
        assert 'id="success-heading"' in html
        assert 'tabindex="-1"' in html

    def test_no_alert_dialogs_in_form_scripts(self):
        form_js = (SERVER_DIR / "templates" / "form.js").read_text()
        admin_js = (SERVER_DIR / "templates" / "admin.js").read_text()
        assert "alert(" not in form_js
        assert "alert(" not in admin_js
        # confirm() retained for destructive admin delete / zero-qty save.
        assert "confirm(" in admin_js

    def test_design_tokens_only_in_definitions(self):
        css = (SERVER_DIR / "templates" / "form.css").read_text()
        # Strip :root block, then assert brand/muted/border hexes are gone
        without_root = re.sub(r":root\s*\{[^}]*\}", "", css, count=1)
        assert "#1a1a2e" not in without_root
        assert "#6b7280" not in without_root
        assert "#d1d5db" not in without_root

    def test_python_has_no_html_js_fragments(self):
        src = (SERVER_DIR / "generate_form.py").read_text()
        assert "auth_section_html" not in src
        assert "google_auth_js" not in src
        assert "submit_order_js" not in src
        assert "origLoadWeekOrders" not in src


class TestGenerateFormPlaywright:
    @pytest.fixture(scope="class")
    def browser_page(self, tmp_path_factory):
        try:
            from playwright.sync_api import sync_playwright
        except ImportError as exc:  # pragma: no cover
            raise RuntimeError(
                "playwright package is required; install requirements.txt"
            ) from exc

        html = _render(google=False, api_key="")
        # Stub status/roster so the page does not hang on network; roster fallback
        # in loadRoster still applies if fetch fails — intercept to be deterministic.
        out = tmp_path_factory.mktemp("form") / "order-form.html"
        out.write_text(html)

        with sync_playwright() as p:
            try:
                browser = p.chromium.launch(headless=True)
            except Exception as exc:
                raise RuntimeError(
                    "Chromium is required for form Playwright tests. "
                    "Run: playwright install --with-deps chromium"
                ) from exc
            page = browser.new_page()
            page.route(
                "**/api/form-status/**",
                lambda route: route.fulfill(
                    status=200,
                    content_type="application/json",
                    body='{"status":"open"}',
                ),
            )
            page.route(
                "**/api/roster**",
                lambda route: route.fulfill(
                    status=200,
                    content_type="application/json",
                    body=json.dumps(
                        {
                            "employees": [
                                {"name": "Ada Lovelace", "email": "ada@example.com"}
                            ]
                        }
                    ),
                ),
            )
            page.goto(out.as_uri())
            page.wait_for_selector('[data-meal-index="0"]')
            yield page
            browser.close()

    def test_admin_bundle_loads(self, browser_page):
        assert browser_page.evaluate("typeof window.loadWeekOrders") == "function"

    def test_qty_plus_updates_total_without_list_teardown(self, browser_page):
        page = browser_page
        card = page.locator('[data-meal-index="0"]')
        card_handle = card.element_handle()
        assert card_handle is not None

        page.locator('[data-meal-index="0"] [data-qty-delta="1"]').click()
        page.wait_for_function(
            "() => document.getElementById('total-display').textContent !== '$0.00'"
        )

        assert page.locator("#total-display").inner_text() == "$5.40"
        assert page.locator("#count-display").inner_text() == "1 meal"
        assert page.locator('[data-meal-index="0"] .qty').input_value() == "1"
        assert "selected" in (card.get_attribute("class") or "")

        # Same DOM node — partial update, not full list teardown
        page.evaluate(
            """() => {
              const el = document.querySelector('[data-meal-index="0"]');
              el.dataset.teardownProbe = '1';
            }"""
        )
        page.locator('[data-meal-index="0"] [data-qty-delta="1"]').click()
        page.wait_for_function(
            "() => document.querySelector('[data-meal-index=\"0\"] .qty').value === '2'"
        )
        assert (
            page.locator('[data-meal-index="0"]').get_attribute("data-teardown-probe")
            == "1"
        )
        assert page.locator("#count-display").inner_text() == "2 meals"
        assert page.locator("#total-display").inner_text() == "$10.80"

    def test_qty_labels_present_after_init(self, browser_page):
        page = browser_page
        card = page.locator('[data-meal-index="0"]')
        assert (
            card.locator('[data-qty-delta="-1"]').get_attribute("aria-label")
            == "Remove one Chicken Bowl"
        )
        assert (
            card.locator('[data-qty-delta="1"]').get_attribute("aria-label")
            == "Add one Chicken Bowl"
        )
        assert (
            card.locator(".qty").get_attribute("aria-label")
            == "Quantity of Chicken Bowl"
        )

    def test_filter_chip_aria_pressed(self, browser_page):
        page = browser_page
        all_btn = page.locator("#filters button", has_text="All Meals")
        assert all_btn.get_attribute("aria-pressed") == "true"
        other = page.locator("#filters button").nth(1)
        other_label = other.inner_text()
        other.click()
        page.wait_for_function(
            """(label) => {
              const active = document.querySelector('#filters button.active');
              return active && active.textContent === label
                && active.getAttribute('aria-pressed') === 'true';
            }""",
            arg=other_label,
        )
        assert all_btn.get_attribute("aria-pressed") == "false"
        assert other.get_attribute("aria-pressed") == "true"
        all_btn.click()
        page.wait_for_function(
            """() => {
              const active = document.querySelector('#filters button.active');
              return active && active.textContent === 'All Meals'
                && active.getAttribute('aria-pressed') === 'true';
            }"""
        )

    def test_desc_more_only_when_overflow(self, browser_page):
        page = browser_page
        # Ensure All Meals filter so both short and long cards are visible.
        page.locator("#filters button", has_text="All Meals").click()
        page.wait_for_selector('[data-meal-index="0"]')
        page.wait_for_selector('[data-meal-index="1"]')
        short_card = page.locator('[data-meal-index="0"]')
        long_card = page.locator('[data-meal-index="1"]')
        page.wait_for_function(
            """() => {
              const long = document.querySelector('[data-meal-index="1"] .meal-desc-toggle');
              return !!long;
            }"""
        )
        assert short_card.locator(".meal-desc-toggle").count() == 0
        toggle = long_card.locator(".meal-desc-toggle")
        assert toggle.inner_text() == "More"
        assert toggle.get_attribute("aria-expanded") == "false"
        toggle.click()
        assert toggle.inner_text() == "Less"
        assert toggle.get_attribute("aria-expanded") == "true"
        assert "is-expanded" in (
            long_card.locator(".meal-desc").get_attribute("class") or ""
        )

    def test_submit_failure_lands_in_alert_region(self, browser_page):
        page = browser_page
        page.route(
            "**/api/submit-order**",
            lambda route: route.fulfill(
                status=500,
                content_type="application/json",
                body='{"error":"Simulated submit failure"}',
            ),
        )
        page.locator("#emp-name").select_option(label="Ada Lovelace")
        page.evaluate(
            """() => {
              document.querySelectorAll('[data-meal-index] .qty').forEach((input) => {
                input.value = '0';
                input.dispatchEvent(new Event('change', { bubbles: true }));
              });
            }"""
        )
        page.wait_for_function(
            "() => document.getElementById('count-display').textContent === '0 meals'"
        )
        page.locator('[data-meal-index="0"] [data-qty-delta="1"]').click()
        page.wait_for_function(
            "() => document.getElementById('count-display').textContent === '1 meal'"
        )
        page.locator("#submit-btn").click()
        page.wait_for_function(
            """() => document.getElementById('form-status-alert').textContent
              === 'Simulated submit failure'"""
        )
        assert (
            page.locator("#form-status-alert").inner_text()
            == "Simulated submit failure"
        )
        assert page.locator("#form-status-info").inner_text() == ""
        page.unroute("**/api/submit-order**")

    def test_qty_typein_clamps_negative(self, browser_page):
        page = browser_page
        # Reset first card via type-in
        qty = page.locator('[data-meal-index="0"] .qty')
        qty.fill("-3")
        qty.dispatch_event("change")
        page.wait_for_function(
            "() => document.querySelector('[data-meal-index=\"0\"] .qty').value === '0'"
        )
        assert qty.input_value() == "0"
        # Total may still include other meals from prior test if class-scoped page
        # is shared — set all known cards to 0 then set one meal to 2 via type-in.
        page.evaluate(
            """() => {
              document.querySelectorAll('[data-meal-index] .qty').forEach((input) => {
                input.value = '0';
                input.dispatchEvent(new Event('change', { bubbles: true }));
              });
            }"""
        )
        page.wait_for_function(
            "() => document.getElementById('count-display').textContent === '0 meals'"
        )
        qty.fill("2")
        qty.dispatch_event("change")
        page.wait_for_function(
            "() => document.getElementById('count-display').textContent === '2 meals'"
        )
        assert page.locator("#total-display").inner_text() == "$10.80"