feat(5.9): US-003 - modal reutilizabil (overlay, focus-trap, a11y) + cleanup inline-expand 5.8
- base.html: #modal-detaliu (role=dialog, aria-modal) + #detaliu-modal-body swap target; focus-trap, inert+aria-hidden pe <main>, Esc/backdrop/x inchid, listener trimiteriChanged (R5/R7) - _coada.html: ancora modal in afara #submissions-wrap; sters #trimitere-detaliu inert vechi - _submissions.html: randul declanseaza modalul; sters tr.detaliu-rand sibling (R3) - _trimitere_detaliu.html: script rescris pentru modal, fara marcheazaDetaliuDeschis/scrollIntoView (R4) - teste: test_web_modal.py nou (3); test_web_detaliu_inline.py sters; test_acasa_trimiteri.py curatat (R3) - gates: pytest PASS (suita completa 819). Browser E2E + design-review deferate la VERIFY. Salvat manual: iteratiile Ralph 2-12 au ramas fara turns (30) inainte de commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -68,7 +68,10 @@ def test_acasa_contine_sectiunea_trimiteri(client):
|
||||
html = r.text
|
||||
assert 'id="filtre-trimiteri"' in html
|
||||
assert "/_fragments/submissions" in html
|
||||
assert 'id="trimitere-detaliu"' in html
|
||||
# PRD 5.9 US-003: detaliul s-a mutat in modalul global (#modal-detaliu); vechiul
|
||||
# panou inert #trimitere-detaliu a fost eliminat.
|
||||
assert 'id="modal-detaliu"' in html
|
||||
assert 'id="trimitere-detaliu"' not in html
|
||||
|
||||
|
||||
def test_sectiune_trimiteri_are_heading(client):
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
"""Teste PRD 5.8 US-008: detaliul trimiterii apare ca rand expandabil SUB randul
|
||||
selectat (nu in panoul global de la baza tabelului).
|
||||
|
||||
Verificam markup-ul server-side: fiecare rand de date are un rand-sibling de detaliu
|
||||
`<tr class="detaliu-rand">` cu container per-rand `#detaliu-{id}`, randul clickabil
|
||||
tinteste acel container, iar fragmentul de detaliu (Inchide + forme) tinteste tot
|
||||
containerul per-rand — NU `#trimitere-detaliu` global. Single-open + pauza poll sunt
|
||||
logica JS in base.html (verificam prezenta hook-urilor).
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import tempfile
|
||||
|
||||
import pytest
|
||||
from starlette.testclient import TestClient
|
||||
|
||||
|
||||
def _create_account_user(email: str, name: str = "Service", password: str = "parolasecreta10"):
|
||||
from app.accounts import create_account
|
||||
from app.users import create_user
|
||||
from app.db import get_connection
|
||||
|
||||
conn = get_connection()
|
||||
try:
|
||||
acct_id = create_account(conn, name, active=True)
|
||||
create_user(conn, acct_id, email, password)
|
||||
return acct_id
|
||||
finally:
|
||||
conn.close()
|
||||
|
||||
|
||||
def _login(client, email: str, password: str = "parolasecreta10") -> None:
|
||||
resp = client.get("/login")
|
||||
m = re.search(r'name="csrf_token"\s+value="([^"]+)"', resp.text) or \
|
||||
re.search(r'value="([^"]+)"\s+name="csrf_token"', resp.text)
|
||||
assert m
|
||||
resp = client.post("/login", data={"email": email, "parola": password, "csrf_token": m.group(1)})
|
||||
assert resp.status_code == 303
|
||||
|
||||
|
||||
def _insert_submission(acct: int, status: str = "sent", *, payload: dict | None = None) -> int:
|
||||
from app.db import get_connection
|
||||
conn = get_connection()
|
||||
try:
|
||||
p = payload if payload is not None else {
|
||||
"vin": "WVWZZZ1JZXW000777",
|
||||
"nr_inmatriculare": "B777ZZZ",
|
||||
"data_prestatie": "2026-06-18",
|
||||
"odometru_final": "55000",
|
||||
"prestatii": [{"cod_prestatie": "R-FRANE", "denumire": "Reparatie frane"}],
|
||||
}
|
||||
cur = conn.execute(
|
||||
"INSERT INTO submissions (idempotency_key, account_id, status, payload_json) "
|
||||
"VALUES (?, ?, ?, ?)",
|
||||
(f"k-{status}-{os.urandom(4).hex()}", acct, status, json.dumps(p)),
|
||||
)
|
||||
conn.commit()
|
||||
return int(cur.lastrowid)
|
||||
finally:
|
||||
conn.close()
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def client(monkeypatch):
|
||||
tmp = tempfile.mkdtemp()
|
||||
monkeypatch.setenv("AUTOPASS_DB_PATH", os.path.join(tmp, "subm.db"))
|
||||
monkeypatch.setenv("AUTOPASS_WEB_AUTH_REQUIRED", "true")
|
||||
from app.config import get_settings
|
||||
get_settings.cache_clear()
|
||||
from app.web import ratelimit
|
||||
ratelimit._hits.clear()
|
||||
from app.main import app
|
||||
with TestClient(app, follow_redirects=False) as c:
|
||||
yield c
|
||||
ratelimit._hits.clear()
|
||||
get_settings.cache_clear()
|
||||
|
||||
|
||||
def test_fragment_detaliu_se_randeaza_in_container_pe_rand(client):
|
||||
"""Tabelul are un rand-sibling de detaliu per rand (#detaliu-{id}), iar fragmentul
|
||||
de detaliu tinteste acel container, nu panoul global #trimitere-detaliu."""
|
||||
acct = _create_account_user("inl@test.com")
|
||||
sid = _insert_submission(acct, "needs_data")
|
||||
_login(client, "inl@test.com")
|
||||
|
||||
# 1. Tabelul: rand-sibling de detaliu + retargeting pe randul clickabil
|
||||
lista = client.get("/_fragments/submissions")
|
||||
assert lista.status_code == 200
|
||||
h = lista.text
|
||||
assert 'class="detaliu-rand"' in h, "lipseste randul-sibling de detaliu"
|
||||
assert f'id="detaliu-{sid}"' in h, "lipseste containerul per-rand"
|
||||
assert 'colspan="8"' in h, "td-ul de detaliu trebuie sa acopere cele 8 coloane"
|
||||
assert f'hx-target="#detaliu-{sid}"' in h, "randul de date trebuie sa tinteasca containerul per-rand"
|
||||
# randul de date NU mai tinteste panoul global
|
||||
assert 'hx-target="#trimitere-detaliu"' not in h
|
||||
|
||||
# 2. Fragmentul de detaliu: Inchide + forme tintesc containerul per-rand
|
||||
det = client.get(f"/_fragments/trimitere/{sid}")
|
||||
assert det.status_code == 200
|
||||
d = det.text
|
||||
# butonul Inchide opereaza pe containerul randului curent (nu pe panoul global)
|
||||
assert f"detaliu-{sid}" in d
|
||||
assert "getElementById('trimitere-detaliu')" not in d
|
||||
# formele de corectie/mapare tintesc containerul per-rand
|
||||
assert f'hx-target="#detaliu-{sid}"' in d
|
||||
assert 'hx-target="#trimitere-detaliu"' not in d
|
||||
|
||||
|
||||
def test_un_singur_detaliu_deschis(client):
|
||||
"""Logica JS din base.html asigura un singur detaliu deschis (inchide celelalte la
|
||||
deschidere) si pune poll-ul pe pauza cat un rand e expandat (D-eng-2)."""
|
||||
_create_account_user("one@test.com")
|
||||
_login(client, "one@test.com")
|
||||
|
||||
pagina = client.get("/")
|
||||
assert pagina.status_code == 200
|
||||
js = pagina.text
|
||||
# randul clickabil e accesibil (role/aria pentru toggle)
|
||||
assert 'class="trimitere-row"' not in js or True # markup-ul randului traieste in fragment
|
||||
# hook-uri de single-open: inchiderea altor detalii + sincronizarea starii aria
|
||||
assert "closeAllDetalii" in js, "lipseste logica de inchidere a celorlalte detalii"
|
||||
assert "detaliu-rand" in js, "logica trebuie sa opereze pe randurile de detaliu"
|
||||
assert "aria-expanded" in js, "starea expandata trebuie sincronizata"
|
||||
# pauza poll cat un rand e deschis: anuleaza request-ul periodic pe #submissions-wrap
|
||||
assert "submissions-wrap" in js
|
||||
assert "preventDefault" in js
|
||||
|
||||
|
||||
def test_rand_clickabil_accesibil(client):
|
||||
"""Randul de date e focusabil la tastatura (role=button, tabindex, aria-expanded)."""
|
||||
acct = _create_account_user("a11y@test.com")
|
||||
sid = _insert_submission(acct, "sent")
|
||||
_login(client, "a11y@test.com")
|
||||
h = client.get("/_fragments/submissions").text
|
||||
# randul de date
|
||||
m = re.search(r'<tr id="trimitere-row-%d".*?>' % sid, h, re.S)
|
||||
assert m, "lipseste randul de date"
|
||||
rand = m.group(0)
|
||||
assert 'role="button"' in rand
|
||||
assert 'tabindex="0"' in rand
|
||||
assert 'aria-expanded="false"' in rand
|
||||
161
tests/test_web_modal.py
Normal file
161
tests/test_web_modal.py
Normal file
@@ -0,0 +1,161 @@
|
||||
"""Teste PRD 5.9 US-003: detaliul trimiterii se deschide intr-un MODAL global
|
||||
(#modal-detaliu), in afara zonei de poll (#submissions-wrap).
|
||||
|
||||
Verificam markup-ul server-side: containerul modal e global si plasat IN AFARA
|
||||
#submissions-wrap (de fapt sibling al <main>, ca `inert` pe <main> sa nu-l prinda),
|
||||
corpul #detaliu-modal-body e tinta de swap, iar fragmentul de detaliu (forme corectie/
|
||||
mapare/lifecycle) tinteste corpul modalului — NU vechiul #detaliu-{id} / #trimitere-detaliu.
|
||||
Focus-trap / scroll-lock / inert sunt logica JS in base.html (verificam hook-urile).
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import tempfile
|
||||
|
||||
import pytest
|
||||
from starlette.testclient import TestClient
|
||||
|
||||
|
||||
def _create_account_user(email: str, name: str = "Service", password: str = "parolasecreta10"):
|
||||
from app.accounts import create_account
|
||||
from app.users import create_user
|
||||
from app.db import get_connection
|
||||
|
||||
conn = get_connection()
|
||||
try:
|
||||
acct_id = create_account(conn, name, active=True)
|
||||
create_user(conn, acct_id, email, password)
|
||||
return acct_id
|
||||
finally:
|
||||
conn.close()
|
||||
|
||||
|
||||
def _login(client, email: str, password: str = "parolasecreta10") -> None:
|
||||
resp = client.get("/login")
|
||||
m = re.search(r'name="csrf_token"\s+value="([^"]+)"', resp.text) or \
|
||||
re.search(r'value="([^"]+)"\s+name="csrf_token"', resp.text)
|
||||
assert m
|
||||
resp = client.post("/login", data={"email": email, "parola": password, "csrf_token": m.group(1)})
|
||||
assert resp.status_code == 303
|
||||
|
||||
|
||||
def _insert_submission(acct: int, status: str = "needs_data") -> int:
|
||||
from app.db import get_connection
|
||||
conn = get_connection()
|
||||
try:
|
||||
p = {
|
||||
"vin": "WVWZZZ1JZXW000777",
|
||||
"nr_inmatriculare": "B777ZZZ",
|
||||
"data_prestatie": "2026-06-18",
|
||||
"odometru_final": "55000",
|
||||
"prestatii": [{"cod_prestatie": "R-FRANE", "denumire": "Reparatie frane"}],
|
||||
}
|
||||
cur = conn.execute(
|
||||
"INSERT INTO submissions (idempotency_key, account_id, status, payload_json) "
|
||||
"VALUES (?, ?, ?, ?)",
|
||||
(f"k-{status}-{os.urandom(4).hex()}", acct, status, json.dumps(p)),
|
||||
)
|
||||
conn.commit()
|
||||
return int(cur.lastrowid)
|
||||
finally:
|
||||
conn.close()
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def client(monkeypatch):
|
||||
tmp = tempfile.mkdtemp()
|
||||
monkeypatch.setenv("AUTOPASS_DB_PATH", os.path.join(tmp, "modal.db"))
|
||||
monkeypatch.setenv("AUTOPASS_WEB_AUTH_REQUIRED", "true")
|
||||
from app.config import get_settings
|
||||
get_settings.cache_clear()
|
||||
from app.web import ratelimit
|
||||
ratelimit._hits.clear()
|
||||
from app.main import app
|
||||
with TestClient(app, follow_redirects=False) as c:
|
||||
yield c
|
||||
ratelimit._hits.clear()
|
||||
get_settings.cache_clear()
|
||||
|
||||
|
||||
def test_modal_container_in_afara_submissions_wrap(client):
|
||||
"""Containerul modal global exista, e dialog a11y si e plasat IN AFARA
|
||||
#submissions-wrap (sibling al <main>, dupa </main>)."""
|
||||
acct = _create_account_user("modal@test.com")
|
||||
_insert_submission(acct, "needs_data") # sectiunea Trimiteri (wrap) apare doar cu randuri
|
||||
_login(client, "modal@test.com")
|
||||
|
||||
html = client.get("/?tab=acasa").text
|
||||
# containerul modal + corpul de swap
|
||||
assert 'id="modal-detaliu"' in html, "lipseste containerul modal global"
|
||||
assert 'id="detaliu-modal-body"' in html, "lipseste corpul de swap al modalului"
|
||||
# rol de dialog modal + heading legat prin aria-labelledby
|
||||
assert 'role="dialog"' in html
|
||||
assert 'aria-modal="true"' in html
|
||||
assert 'aria-labelledby="detaliu-modal-titlu"' in html
|
||||
# buton de inchidere cu aria-label (R7)
|
||||
assert "modal-close" in html
|
||||
assert 'aria-label="Inchide detaliul"' in html
|
||||
|
||||
# Plasament: modalul e DUPA </main>, deci in afara <main> si a #submissions-wrap
|
||||
# (care traieste in panoul din <main>). inert pe <main> nu-l prinde (R7).
|
||||
idx_wrap = html.find('id="submissions-wrap"')
|
||||
idx_main_close = html.find("</main>")
|
||||
idx_modal = html.find('id="modal-detaliu"')
|
||||
assert idx_wrap != -1 and idx_main_close != -1 and idx_modal != -1
|
||||
assert idx_wrap < idx_main_close < idx_modal, "modalul trebuie sa fie in afara <main>/#submissions-wrap"
|
||||
|
||||
# Vechiul panou inert eliminat; fara mecanismul inline 5.8 in pagina.
|
||||
assert 'id="trimitere-detaliu"' not in html
|
||||
assert 'class="detaliu-rand"' not in html
|
||||
assert "marcheazaDetaliuDeschis" not in html
|
||||
|
||||
|
||||
def test_fragment_detaliu_tinteste_modalul(client):
|
||||
"""Randul declanseaza modalul (hx-target=#detaliu-modal-body) si fragmentul de
|
||||
detaliu (forme corectie/mapare/lifecycle) tinteste tot corpul modalului — NU
|
||||
vechiul container per-rand #detaliu-{id} sau #trimitere-detaliu."""
|
||||
acct = _create_account_user("frag@test.com")
|
||||
sid = _insert_submission(acct, "needs_data")
|
||||
_login(client, "frag@test.com")
|
||||
|
||||
# 1. Randul din tabel tinteste corpul modalului; fara rand-sibling / chevron / aria-expanded.
|
||||
lista = client.get("/_fragments/submissions")
|
||||
assert lista.status_code == 200
|
||||
h = lista.text
|
||||
assert 'hx-target="#detaliu-modal-body"' in h, "randul trebuie sa tinteasca corpul modalului"
|
||||
assert 'hx-target="#detaliu-%d"' % sid not in h
|
||||
assert 'class="detaliu-rand"' not in h
|
||||
assert 'aria-expanded' not in h
|
||||
assert "chevron" not in h
|
||||
assert 'aria-haspopup="dialog"' in h
|
||||
assert 'role="button"' in h and 'tabindex="0"' in h
|
||||
|
||||
# 2. Fragmentul de detaliu: formele tintesc corpul modalului, nu containerul vechi.
|
||||
det = client.get(f"/_fragments/trimitere/{sid}")
|
||||
assert det.status_code == 200
|
||||
d = det.text
|
||||
assert 'hx-target="#detaliu-modal-body"' in d
|
||||
assert 'hx-target="#detaliu-%d"' % sid not in d
|
||||
assert 'hx-target="#trimitere-detaliu"' not in d
|
||||
# heading legat de aria-labelledby al dialogului
|
||||
assert 'id="detaliu-modal-titlu"' in d
|
||||
|
||||
|
||||
def test_modal_hookuri_js_prezente(client):
|
||||
"""Logica de modal (focus-trap, scroll-lock, inert pe <main>, inchidere pe succes)
|
||||
e prezenta in base.html — hook-urile cheie exista."""
|
||||
_create_account_user("hook@test.com")
|
||||
_login(client, "hook@test.com")
|
||||
js = client.get("/?tab=acasa").text
|
||||
assert "modal-detaliu" in js
|
||||
# focus-trap + scroll-lock + inert pe ancestor stabil
|
||||
assert "trapFocus" in js or "Tab" in js
|
||||
assert "modal-open" in js
|
||||
assert "inert" in js
|
||||
# inchidere pe succes corectie/sterge (listener pe evenimentul HX-Trigger)
|
||||
assert "inchideModal" in js
|
||||
# API public pastrat (butoanele/rutele pot inchide modalul)
|
||||
assert "window.inchideDetaliu" in js
|
||||
Reference in New Issue
Block a user