45f6fbb726
- base.html: conventie breakpoint unic 767px documentata + bloc @media mobil extins - modal full-screen pe mobil (100vw/100vh, fara backdrop lateral, x >=44px, scroll intern) - header/nav colapsat sub 768px + tinte touch >=44px (.icon-btn/.tab-link/.cont-menu) - tests/test_web_responsive.py NOU (3 teste) + prd.json/progress.txt US-006 passes Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
113 lines
4.2 KiB
Python
113 lines
4.2 KiB
Python
"""Teste PRD 5.9 US-006: fundatie responsive — viewport, header/nav colapsabil,
|
|
modal full-screen pe mobil, breakpoint-uri consistente.
|
|
|
|
Verificam markup-ul + CSS server-side randat (TestClient): prezenta meta viewport,
|
|
existenta unei reguli `@media (max-width:767px)` care trece modalul pe full-screen
|
|
(`.modal-dialog`) cu buton `x` >=44px, si structura de nav colapsabil (meniul de cont
|
|
hamburger + tinte touch >=44px). Verificarile vizuale efective (375px, fara scroll
|
|
orizontal) sunt deferate la VERIFY (gstack browser).
|
|
"""
|
|
|
|
from __future__ import annotations
|
|
|
|
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
|
|
|
|
|
|
@pytest.fixture()
|
|
def client(monkeypatch):
|
|
tmp = tempfile.mkdtemp()
|
|
monkeypatch.setenv("AUTOPASS_DB_PATH", os.path.join(tmp, "responsive.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_viewport_meta_prezent(client):
|
|
"""`<meta name=viewport>` cu width=device-width prezent in base.html."""
|
|
_create_account_user("vp@test.com")
|
|
_login(client, "vp@test.com")
|
|
html = client.get("/?tab=acasa").text
|
|
assert 'name="viewport"' in html
|
|
assert "width=device-width" in html
|
|
assert "initial-scale=1" in html
|
|
|
|
|
|
def test_modal_fullscreen_clasa_mobil(client):
|
|
"""Sub 768px modalul devine full-screen: o regula `@media (max-width:767px)`
|
|
pune `.modal-dialog` la latime/inaltime pline (fara latimea marginita de desktop)
|
|
si butonul `x` la >=44px. Desktop pastreaza regula centrata (`max-width:680px`)."""
|
|
_create_account_user("mf@test.com")
|
|
_login(client, "mf@test.com")
|
|
html = client.get("/?tab=acasa").text
|
|
|
|
# Regula de baza (desktop) ramane: dialog centrat cu latime marginita.
|
|
assert "max-width:680px" in html
|
|
|
|
# Exista un bloc media mobil care vizeaza modalul.
|
|
assert "@media (max-width:767px)" in html
|
|
# Markerul US-006 pentru modalul full-screen pe mobil.
|
|
assert "US-006" in html
|
|
# Dialogul ocupa tot ecranul pe mobil (latime/inaltime pline, fara border-radius lateral).
|
|
mobil = html[html.find("@media (max-width:767px)"):]
|
|
assert "100vw" in mobil or "width:100%" in mobil
|
|
assert "100vh" in mobil
|
|
# Butonul de inchidere >=44px pe mobil (tinta touch).
|
|
assert "44px" in mobil
|
|
|
|
|
|
def test_nav_colapsabil_sub_breakpoint(client):
|
|
"""Nav colapsabil: meniul de cont e un buton hamburger (☰) ascuns intr-un dropdown,
|
|
iar tintele touch (icon-btn, tab-link, itemi meniu) ajung la >=44px sub breakpoint."""
|
|
_create_account_user("nav@test.com")
|
|
_login(client, "nav@test.com")
|
|
html = client.get("/?tab=acasa").text
|
|
|
|
# Hamburger-ul de cont exista si dropdown-ul e colapsat (hidden) implicit.
|
|
assert 'id="cont-menu-toggle"' in html
|
|
assert "☰" in html # pictograma hamburger
|
|
assert 'id="cont-menu"' in html
|
|
assert 'class="cont-menu"' in html
|
|
|
|
# Tab-bar-ul (nav principal) exista si e scrollabil orizontal (nu deborda pagina).
|
|
assert "tab-bar" in html
|
|
assert "overflow-x:auto" in html
|
|
|
|
# Sub breakpoint, tintele touch din header/nav cresc la >=44px.
|
|
mobil = html[html.find("@media (max-width:767px)"):]
|
|
assert "44px" in mobil
|