feat(5.13): carduri compacte mobil/tableta + fix editare preview (OOB tr) + toast

Dogfood pe import + Trimiteri (mobil/tableta <1024px), pur CSS + markup, backend trimitere neatins: - Card compact real pentru .tabel-trimiteri (preview + Trimiteri): vehicul=titlu, stare=pill dreapta-sus, operatie+cod, meta data/km muted, nota mica. Inlocuieste stiva generica eticheta+valoare (carduri de ~450px -> ~135px). Anuleaza regula desktop tr.trimitere-row > td{padding:11px} in blocul compact. - FIX editare preview: OOB swap pe <tr> esua tacit in htmx 1.9 (un <tr> brut se pierde la parsarea unui fragment fara context de tabel) -> randul ramanea cu starea veche dupa salvare. Inlocuit cu reload complet al preview-ului prin HX-Trigger:reincarcaPreview + detalii randSalvat. /editeaza si /confirma-review folosesc helper-ul _raspuns_rand_salvat. - Feedback post-salvare: toast global "Randul N actualizat · <stare>" + scroll + flash pe randul actualizat (base.html window.arataToast + listener randSalvat). - Modal editare: Salveaza + Anuleaza pe acelasi rand (sistem .act): desktop text, mobil doua iconite Lucide 44px alaturate (save/x). Macro icon('x') + .act-primary. - Randuri deja-trimise/duplicate colapsate implicit in preview + toggle "Arata N". - Select "Operatii de mapat" full-width pe mobil (nu mai iese din viewport). - Bara de filtre Trimiteri adaptata mobil: pills pe banda cu scroll orizontal, cautare vehicul proeminenta (nu 8 butoane full-width stivuite). - Nota preview = culoarea camp-fix (accent) ca sa atraga atentia; hint-urile camp-fix per-camp scoase (campul Note e self-explanatory). - Confirmare trimitere: scos campul email (Declarant); text mai clar ("Confirma numarul din N gata de trimis"). Backend confirmed_by ramane optional. Teste: contractul OOB (rupt in browser) inlocuit cu noul contract (reincarcaPreview + randSalvat) in test_web_preview_edit / test_preview_edit_ui / test_import_review. Suita: 992 passed (exclus live). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-27 23:34:33 +00:00
parent bafaf05e83
commit 8d4ff3400e
18 changed files with 633 additions and 303 deletions
--- a/tests/test_web_responsive.py
+++ b/tests/test_web_responsive.py
@@ -65,6 +65,14 @@ def _login(client, email: str, password: str = "parolasecreta10") -> None:
    assert resp.status_code == 303


+def _bloc_mobil_principal(html: str) -> str:
+    """Felie din CSS de la sentinel-ul blocului mobil principal pana la `</style>`."""
+    i = html.find("SENTINEL-TESTE-MOBIL")
+    assert i != -1, "Lipseste SENTINEL-TESTE-MOBIL in base.html (vezi PRD 5.13 Wave 0)"
+    j = html.find("</style>", i)
+    return html[i:(j if j != -1 else len(html))]
+
+
@pytest.fixture()
 def client(monkeypatch):
    tmp = tempfile.mkdtemp()
@@ -332,10 +340,7 @@ def test_header_elemente_nu_au_min_height_fix_pe_mobil(client):
        "Blocul tableta nu reseteaza min-height pentru header"

    # Blocul mobil (<768px) reseteaza si el min-height (regresie: nu a disparut).
-    # Folosim `{` ca sa nu potrivim mentionarile din comentarii CSS.
-    mobil_idx = html.find("@media (max-width:767px) {")
-    assert mobil_idx != -1
-    mobil = html[mobil_idx:mobil_idx + 5000]
+    mobil = _bloc_mobil_principal(html)
    assert "min-height:0" in mobil, "Blocul mobil a pierdut resetarea min-height pe header"


@@ -348,10 +353,7 @@ def test_modal_full_screen_pe_mobil(client):
    html = client.get("/?tab=acasa").text

    # Regula CSS full-screen exista in blocul @media (max-width:767px) {.
-    # Folosim varianta cu `{` ca sa NU potrivim mentionarile din comentarii CSS.
-    mobil_idx = html.find("@media (max-width:767px) {")
-    assert mobil_idx != -1, "Nu exista bloc @media (max-width:767px) { in CSS"
-    mobil = html[mobil_idx:mobil_idx + 5000]
+    mobil = _bloc_mobil_principal(html)
    assert "100vw" in mobil, "Dialogul nu are latime 100vw pe mobil"
    assert "100vh" in mobil, "Dialogul nu are inaltime 100vh pe mobil"
    # Butonul de inchidere >=44px (tinta touch) pe mobil.
@@ -363,3 +365,138 @@ def test_modal_full_screen_pe_mobil(client):
    # Target swap pentru editare preview (US-006) exista in DOM.
    assert 'id="detaliu-modal-body"' in html, \
        "Target #detaliu-modal-body lipseste din base.html"
+
+
+# ============================================================
+# PRD 5.13: guard-uri responsive card mobil + sistem actiuni + stepper compact
+# ============================================================
+
+
+def test_card_mobil_fara_break_vertical_120px(client):
+    """P0: blocul mobil principal NU mai forteaza min-width:120px pe eticheta
+    (cauza break-ului vertical caracter-cu-caracter). Eticheta stivuita deasupra
+    valorii: td::before cu display:block. Checkbox + # ascunse pe card."""
+    _create_account_user("card120@test.com")
+    _login(client, "card120@test.com")
+    html = client.get("/?tab=acasa").text
+    bloc = _bloc_mobil_principal(html)
+
+    # min-width:120px nu mai exista in blocul mobil.
+    assert "min-width:120px" not in bloc, \
+        "min-width:120px inca prezent in blocul mobil — cauzeaza break vertical"
+
+    # td::before stivuieste eticheta deasupra valorii (display:block).
+    assert ".tabel-trimiteri td::before" in bloc, \
+        ".tabel-trimiteri td::before lipseste din blocul mobil"
+    assert "display:block" in bloc, \
+        "display:block lipseste din blocul mobil (eticheta nu e stivuita)"
+
+    # col-chk si col-id ascunse pe card (nu ocupa spatiu).
+    assert ".tabel-trimiteri td.col-chk, .tabel-trimiteri td.col-id { display:none; }" in bloc, \
+        "col-chk/col-id nu sunt ascunse in blocul mobil"
+
+
+def test_sistem_act_desktop_text_mobil_icon(client):
+    """Sistemul .act: desktop = iconita ascunsa (text vizibil),
+    mobil = text ascuns, iconita vizibila 44px (tinta touch)."""
+    _create_account_user("act_sys@test.com")
+    _login(client, "act_sys@test.com")
+    html = client.get("/?tab=acasa").text
+    bloc = _bloc_mobil_principal(html)
+
+    # Desktop: act-ic ascunsa implicit (display:none in regula de baza).
+    assert ".act .act-ic { width:18px; height:18px; display:none; }" in html, \
+        "Regula desktop care ascunde .act-ic lipseste din CSS"
+
+    # Mobil: text ascuns, iconita vizibila.
+    assert ".act .act-tx { display:none; }" in bloc, \
+        ".act .act-tx nu e ascuns in blocul mobil"
+    assert ".act .act-ic { display:inline-block; }" in bloc, \
+        ".act .act-ic nu devine vizibila in blocul mobil"
+
+    # .act are tinta touch >=44px pe mobil.
+    assert ".act { min-width:44px" in bloc, \
+        ".act nu are min-width:44px in blocul mobil"
+
+
+def _seed_saved_mapping_responsive(acct_id: int) -> None:
+    """Insereaza o mapare salvata in operations_mapping (pentru test act aria-label)."""
+    from app.db import get_connection
+    conn = get_connection()
+    try:
+        conn.execute(
+            "INSERT INTO operations_mapping (account_id, cod_op_service, cod_prestatie, auto_send) "
+            "VALUES (?, ?, ?, ?)",
+            (acct_id, "OP-RESP-99", "OE-1", 1),
+        )
+        conn.commit()
+    finally:
+        conn.close()
+
+
+def test_act_btn_aria_label_invariant(client):
+    """Invariant a11y: butoanele .act din Mapari au mereu aria-label
+    (accesibil in modul icon-only pe mobil) si iconita .act-ic."""
+    acct = _create_account_user("actaria@test.com")
+    _seed_saved_mapping_responsive(acct)
+    _login(client, "actaria@test.com")
+
+    html = client.get("/_fragments/mapari").text
+
+    # Butoane cu clasa act exista in fragmentul de mapari.
+    act_btns = re.findall(r'<button[^>]+class="act[^"]*"[^>]*>', html)
+    assert act_btns, "Trebuie sa existe butoane cu clasa 'act' in fragmentul Mapari"
+
+    # Fiecare buton .act are aria-label (accesibil cand textul e ascuns pe mobil).
+    assert any("aria-label" in btn for btn in act_btns), \
+        "Niciun buton .act nu are aria-label — inaccessibil in modul icon-only"
+
+    # Iconita .act-ic prezenta in markup (afisata pe mobil).
+    assert 'class="act-ic"' in html, \
+        "Iconita .act-ic lipseste din fragmentul Mapari"
+
+
+def test_stepper_compact_clase(client):
+    """Stepper compact (5.13): clasele stepper-track, stepper-collapsed,
+    stepper-progress prezente; textul 'Pasul N din 4' randat; vechile clase
+    stepper-pas-- absente; comutarea la <1024px declarata in CSS."""
+    _create_account_user("stepper@test.com")
+    _login(client, "stepper@test.com")
+    html = client.get("/?tab=acasa").text
+
+    # Elementele de structura ale stepper-ului compact.
+    assert "stepper-track" in html, "stepper-track lipseste din markup"
+    assert "stepper-collapsed" in html, "stepper-collapsed lipseste din markup"
+    assert "stepper-progress" in html, "stepper-progress lipseste din markup"
+
+    # Textul de progres in forma colapsata (<1024px).
+    assert "Pasul 1 din 4" in html, "Textul 'Pasul 1 din 4' lipseste din markup"
+
+    # Vechile clase anti-pattern cu stepper-pas-- nu mai exista.
+    assert "stepper-pas--" not in html, \
+        "Clasa veche stepper-pas-- inca prezenta — curata markup-ul"
+
+    # CSS declara comutarea la <1024px (track ascuns, collapsed afisat).
+    assert "@media (max-width:1024px)" in html, \
+        "Lipseste regula @media (max-width:1024px) pentru comutarea stepper-ului"
+
+
+def test_liste_actionabile_o_coloana_pana_1024(client):
+    """Guard scope (decizie 5.13): listele actionabile raman O COLOANA
+    pana la 1024px — fara grila 2/rand (repeat(2)). Blocul tableta 768-1024px
+    cardifica (thead ascuns, card per rand)."""
+    _create_account_user("ocoloana@test.com")
+    _login(client, "ocoloana@test.com")
+    html = client.get("/?tab=acasa").text
+
+    # Nicaieri in CSS nu apare grila 2/rand (repeat(2, ...)).
+    assert "repeat(2" not in html, \
+        "CSS contine repeat(2 — listele actionabile NU trebuie sa fie 2/rand pana la 1024px"
+
+    # Exista blocul tableta (768-1024px).
+    assert "@media (min-width:768px) and (max-width:1024px)" in html, \
+        "Lipseste blocul @media tableta (min-width:768px) and (max-width:1024px)"
+
+    # Blocul tableta cardifica listele (thead ascuns = card per rand, o coloana).
+    assert ".tabel-trimiteri thead, .tabel-card thead { display:none; }" in html, \
+        "Blocul tableta nu ascunde thead-ul pentru cardificare (o coloana)"