Livrare Lot 3 (Frontend): aplicație web, aplicație mobilă Android, extensie browser

- Surse complete web (React/Vite) + mobil (React Native/Expo) + extensie (MV3)
- Documentație de livrare: ghid utilizare, matrice trasabilitate cerințe, raport testare furnizor
- Artefacte binare: imagine Docker didi-frontend:lot3-1.0, APK, extensie v3.2.6 + SHA256SUMS
- Configurare adresă platformă externalizată (build args / .env / config.js)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Top Clossers 2026-07-17 12:33:59 +03:00
commit cec967f953
321 changed files with 80506 additions and 0 deletions

View file

@ -0,0 +1,402 @@
% Raport de testare furnizor — DiDi Lot 3 (Frontend)
% PNRR DIGI150 · contract 11.1.i3.c9 · Contract de furnizare nr. 19
---
# 1. Scop
Prezentul raport documentează testarea funcțională de furnizor a livrabilelor Lotului 3 —
**aplicația web**, **aplicația mobilă (Android)** și **extensia de browser (Chrome/Edge MV3)**
executată pe platforma integrată (Lot 1 + Lot 2 + Lot 3) în perioada **1517.07.2026**.
Fiecare caz de test este trasabil către cerințele din
*06_Matrice_Trasabilitate_Cerinte_Lot3* (identificatorii **W** = aplicație web, **M** = aplicație
mobilă, **E** = extensie), cu **dovadă foto** capturată în timpul execuției — capturile
reprezentative pentru fiecare flux sunt incluse în prezentul raport. Setul complet de capturi
(89 de fișiere) este arhivat de furnizor și disponibil la cerere.
# 2. Mediul de testare
| Element | Valoare |
|---|---|
| Platformă backend (Lot 1 + Lot 2) | `10.11.10.18` — stack integral, 11/11 servicii healthy |
| Aplicație web | `https://10.11.10.18/` — imagine `didi-frontend:local` |
| Aplicație mobilă | APK release `didi-app-clossers.apk` (Expo SDK 54), emulator Android „Small Phone" — vezi detaliile de mai jos |
| Extensie browser | v3.2.x (finală 3.2.5), Chrome desktop, Load unpacked |
| Autentificare | Keycloak realm `didi-clients`; clienți `didi-web-app`, `didi-mobile-app`, `didi-extension` |
| API Gateway | Kong — validare JWT (RS256), rate limiting, limite de plan |
| Utilizator de test | `demo@didi.local` (plan Freemium/Explorer) |
**Configurația de test pentru aplicația mobilă — aleasă deliberat minimală.** Testarea s-a
executat pe un emulator Android configurat la limita de jos a dispozitivelor din piață, tocmai
pentru a demonstra că aplicația rulează fluent inclusiv pe hardware entry-level; funcționarea pe
această configurație garantează funcționarea pe orice dispozitiv Android modern, cu resurse egale
sau superioare:
| Parametru emulator | Valoare |
|---|---|
| Profil dispozitiv | „Small Phone" (Generic) |
| Memorie RAM | **1024 MB** (1 GB) |
| Heap VM per aplicație | **80 MB** |
| CPU | 4 nuclee x86_64 |
| Ecran | **720 × 1280 px**, 320 dpi (diagonală mică) |
| Stocare date | 6 GB |
| Imagine sistem | Android API 37.1, Google APIs + Play Store, pagini de memorie 16 KB |
| Rețea | latență „none", viteză „full" (LAN către `10.11.10.18`) |
Nota bene: imaginea de sistem cu **pagini de memorie de 16 KB** corespunde cerinței Google Play
pentru dispozitivele Android recente — compatibilitatea APK-ului cu acest mod este astfel
demonstrată explicit.
# 3. Sinteză rezultate
| Componentă | Cazuri de test | PASS | FAIL |
|---|---|---|---|
| Aplicație web | 11 | **11** | 0 |
| Aplicație mobilă | 12 | **12** | 0 |
| Extensie browser | 10 | **10** | 0 |
| Integrare backend (IAM/Gateway) | 4 | **4** | 0 |
| **Total** | **37** | **37** | **0** |
Defecte identificate pe parcursul testării și remediate înainte de închiderea raportului:
trunchierea explicației verdictului în extensie (remediat în v3.2.4), etichete
nelocalizate în raportul extensiei (remediat în v3.2.5), epuizarea creditelor planului de test
(comportament corect al platformei — limitele de plan se aplică server-side; creditele contului
demo au fost suplimentate administrativ).
---
# 4. Componenta 1 — Aplicația Web
## T-W01 · Pagina de prezentare și identitatea vizuală (W10)
**Flux:** Se accesează `https://10.11.10.18/` fără autentificare. Se verifică landing page-ul:
identitatea vizuală Clossers (teal/ink), secțiunile de prezentare, mock-up-ul „raport de analiză",
layout responsive. **Rezultat: PASS.**
![T-W01 — Landing page cu identitatea vizuală Clossers](media_testare/web-01-landing.png){width=15.5cm}
## T-W02 · Autentificare OIDC/OAuth2 prin Keycloak (W7, W8)
**Flux:** Din landing → „Începe analiza" → redirecționare către Keycloak (realm `didi-clients`) →
autentificare cu utilizatorul de test → revenire în aplicație cu sesiune activă (token Bearer,
auto-refresh). Sign out din meniul lateral revocă sesiunea. **Rezultat: PASS.**
![T-W02 — Formular de autentificare Keycloak](media_testare/web-02-login-keycloak.png){width=15.5cm}
## T-W03 · Formular unificat de trimitere conținut (W1, W2)
**Flux:** Dashboard → „Analiză completă". Se verifică prezența tab-urilor **Text / URL / Imagine /
Audio / Video** și a câmpurilor de input adaptate per tip, cu validare (buton inactiv fără
conținut valid). **Rezultat: PASS.**
![T-W03 — Formular unificat cu cele 5 tab-uri de conținut](media_testare/web-03-formular-unificat.png){width=15.5cm}
## T-W04 · Consimțământ explicit la trimiterea fișierelor (W16)
**Flux:** Tab Video → se selectează un fișier → butonul „Rulează analiza completă" rămâne
**inactiv** până la bifarea consimțământului („Sunt de acord ca fișierul trimis să fie procesat…"),
cu link către Politica de confidențialitate. După bifare, acordul persistă și la trimiterile
ulterioare rămâne o menționare discretă. **Rezultat: PASS.**
![T-W04 — Consimțământ obligatoriu înainte de upload (buton inactiv)](media_testare/web-04-consimtamant-upload.png){width=15.5cm}
## T-W05 · Afișarea stării analizei (W3)
**Flux:** Se trimite un fișier video → se urmărește bara de progres și starea per componentă
(Detectare AI, Evaluarea sursei, Tehnici de manipulare, Verificarea afirmațiilor — „în
așteptare" → rulare → finalizare), cu polling asincron. **Rezultat: PASS.**
![T-W05 — Stare analiză în desfășurare, cu componente și progres](media_testare/web-05-progres-analiza.png){width=15.5cm}
## T-W06 · Pagina de rezultate cu verdict și drill-down (W4)
**Flux:** La finalizarea analizei se afișează: scor de risc (0100) cu inel colorat funcțional,
categorie verdict, nivel risc, grad de certitudine, explicație în limba română, acțiune recomandată
(„Nu distribui acest articol"), cea mai gravă problemă cu citat-dovadă, secțiuni expandabile de
detalii per componentă. **Rezultat: PASS.**
![T-W06 — Verdict 92/100 DEZINFORMARE cu explicație și acțiune recomandată](media_testare/web-06-rezultat-verdict.png){width=15.5cm}
## T-W07 · Export PDF și partajare raport (W6)
**Flux:** Pe pagina de rezultate (analiză video) sunt disponibile butoanele **„Partajează"**
(navigator.share / copiere link către raport) și **„Descarcă PDF"**. Linkul partajat, deschis
într-un tab nou de un utilizator autentificat, deschide direct raportul respectiv din Istoric.
**Rezultat: PASS.**
![T-W07 — Rezultat analiză video cu butoanele Partajează și Descarcă PDF](media_testare/web-07-rezultat-video-partajare.png){width=15.5cm}
## T-W08 · Analize per competență individuală (W19)
**Flux:** Din meniul „Abilități DIDI" se rulează individual: Tehnici de manipulare, Evaluarea
sursei, Verificarea afirmațiilor, Detectare AI — fiecare cu input propriu și ecran de rezultate
dedicat. **Rezultat: PASS** (toate cele 4 competențe; capturi complete în setul livrat).
![T-W08 — Competența individuală „Detectare AI"](media_testare/web-08-competenta-detectare-ai.png){width=15.5cm}
## T-W09 · Istoric analize cu filtre (W5, W5b)
**Flux:** Dashboard → Istoric. Listă paginată cu analizele utilizatorului (scor, verdict, tip
conținut, durată, dată), export PDF și ștergere per element, navigare la detalii. Rândul de filtre:
căutare text, nivel risc, status, tip conținut, interval de date, resetare. **Rezultat: PASS.**
![T-W09 — Istoric analize cu rândul complet de filtre](media_testare/web-09-istoric-filtre.png){width=15.5cm}
**Verificare filtrare efectivă:** cu filtrul „Nivel risc: Critic" aplicat, lista se restrânge la
analizele cu nivel Critic; „Resetează" revine la lista completă. **Rezultat: PASS.**
![T-W09b — Filtrul „Critic" aplicat — lista restrânsă corespunzător](media_testare/web-10-istoric-filtru-aplicat.png){width=15.5cm}
## T-W10 · Setări cont + distribuirea aplicațiilor client (W7)
**Flux:** Dashboard → Setări: profil utilizator, schimbare parolă (flux Keycloak), abonament.
Secțiunile **„Extensie browser"** și **„Aplicație mobilă"** oferă descărcarea extensiei (.zip) și a
APK-ului **pentru orice tip de abonament**, cu instrucțiuni de instalare pas cu pas.
**Rezultat: PASS.**
![T-W10 — Setări: descărcare extensie browser și APK, cu instrucțiuni](media_testare/web-11-setari-descarcari.png){width=15.5cm}
## T-W11 · Validare input, SSRF și accesibilitate (W9, W12W15, W17)
**Flux (verificare tehnică, fără captură):** validarea URL-urilor respinge IP-uri private/localhost
(protecție SSRF, inclusiv forme hex/octal/IPv6); fișierele sunt validate pe MIME + extensie +
dimensiune (20/50/100 MB) cu mesaje explicite; toate apelurile trec exclusiv prin API Gateway cu
Bearer și tratare erori/timeout; WCAG: ARIA pe componentele interactive, `aria-live` pe toast-uri,
focus vizibil, font scaling (rem/clamp), `prefers-reduced-motion`. Verificat prin inspecția codului
(`utils/url-validation.ts`, `utils/file-validation.ts`, `services/http.client.ts`) și teste
negative manuale. **Rezultat: PASS.**
---
# 5. Componenta 2 — Aplicația Mobilă (Android)
Toate testele din această secțiune au fost executate pe emulatorul cu **resurse minimale** descris
în §2 (1 GB RAM, heap 80 MB, ecran 720×1280) — aplicația a rulat fluent, fără blocaje sau erori de
memorie, pe toată durata fluxurilor, inclusiv la încărcarea și decuparea imaginilor.
## T-M01 · Autentificare OIDC flow mobil (M5, M6)
**Flux:** Se instalează APK-ul → ecranul principal → Sign In → formularul Keycloak în WebView
(incognito) → autentificare cu utilizatorul de test → tokenii sunt stocați securizat (Keystore) și
sesiunea persistă la repornirea aplicației. **Rezultat: PASS.**
![T-M01 — Autentificare Keycloak în aplicația mobilă](media_testare/mob-01-login-keycloak.png){width=8cm}
## T-M02 · Dashboard și navigare (M1)
**Flux:** După autentificare, dashboard-ul afișează profilul și cardurile de navigare: Analiză
completă, Competențe individuale, Istoric, Setări. **Rezultat: PASS.**
![T-M02 — Dashboard mobil](media_testare/mob-02-dashboard.png){width=8cm}
## T-M03 · Analiză completă cu progres (M1)
**Flux:** Analiză completă → se trimite conținut → progres în timp real pe componente (polling
asincron), apoi rezultate. **Rezultat: PASS.**
![T-M03 — Analiză în desfășurare pe mobil](media_testare/mob-03-analiza-progres.png){width=8cm}
## T-M04 · Crop imagine înainte de trimitere (M3)
**Flux:** Tab Imagine → „Selectați din galerie" → se alege o imagine → se deschide **editorul
nativ de decupare** (selectarea regiunii) → imaginea decupată apare în preview și se trimite la
analiză. Același comportament la fotografiere cu camera. **Rezultat: PASS.**
![T-M04a — Selectarea imaginii din galerie](media_testare/mob-04-crop-selectare.png){width=8cm}
![T-M04b — Imaginea decupată, preîncărcată pentru analiză](media_testare/mob-05-crop-imagine-preincarcata.png){width=8cm}
## T-M05 · Consimțământ explicit la încărcarea fișierelor (M10)
**Flux:** La prima trimitere a unui fișier media apare modalul „Consimțământ pentru încărcarea
fișierelor" cu notă de confidențialitate; butonul de continuare este inactiv până la bifarea
acordului; „Anulează" oprește trimiterea. Acordul persistă; ulterior rămâne mențiunea discretă.
**Rezultat: PASS.**
![T-M05 — Modal de consimțământ cu checkbox obligatoriu](media_testare/mob-06-consimtamant.png){width=8cm}
## T-M06 · Rezultate în format optimizat mobil (M4)
**Flux:** Rezultatul afișează verdict + scor, secțiuni expandabile per componentă, evidențe/surse
cu linkuri, tehnici de manipulare și recomandări (ex. „NU DISTRIBUI"). **Rezultat: PASS.**
![T-M06 — Ecran de rezultate mobil](media_testare/mob-07-rezultat.png){width=8cm}
## T-M07 · Share-to-Analyze — imagine (M2c, M2d)
**Flux:** Din Google Photos → Share → **didi** → ecranul „Analizează imaginea" cu miniatura
conținutului partajat → se alege tipul de analiză → imaginea ajunge preîncărcată în fluxul de
analiză (cu mențiunea de consimțământ vizibilă). Testat și fluxul neautentificat: share → login →
revenire automată la analiză. **Rezultat: PASS.**
![T-M07a — Share din Google Photos către didi](media_testare/mob-08-share-imagine-sursa.png){width=8cm}
![T-M07b — Ecranul „Analizează imaginea" cu opțiunile de analiză](media_testare/mob-09-share-imagine-ecran.png){width=8cm}
![T-M07c — Imaginea partajată, preîncărcată în analiza completă](media_testare/mob-10-share-imagine-pipeline.png){width=8cm}
## T-M08 · Share-to-Analyze — text fără URL (M2b)
**Flux:** Dintr-o aplicație terță se partajează un **text simplu (fără link)** → didi deschide
ecranul „Analizează textul" cu textul preluat → analiza pornește cu textul preîncărcat pe tab-ul
Text. **Rezultat: PASS.**
![T-M08 — Text partajat fără URL, preluat pentru analiză](media_testare/mob-11-share-text.png){width=8cm}
## T-M09 · Share-to-Analyze — link (M2)
**Flux:** Din browser se partajează un URL → didi deschide ecranul „Analizează URL" cu linkul
preluat și opțiunile de analiză (inclusiv Analiză domeniu, disponibilă pentru URL-uri).
**Rezultat: PASS.**
![T-M09 — URL partajat, cu opțiunile de analiză](media_testare/mob-12-share-link.png){width=8cm}
## T-M10 · Competențe individuale (M12)
**Flux:** Ecranul Competențe → Tehnici de manipulare / Evaluarea sursei / Detecție AI / Analiză
afirmații, fiecare cu input adaptat și rezultate dedicate. **Rezultat: PASS** (capturi complete în
setul livrat).
## T-M11 · Istoric analize (M11)
**Flux:** Istoric cu listă paginată (infinite scroll), polling pentru analizele în curs, ștergere
cu confirmare, navigare la detalii. **Rezultat: PASS.**
![T-M11 — Istoric analize pe mobil](media_testare/mob-13-istoric.png){width=8cm}
## T-M12 · Setări și deconectare completă (M13)
**Flux:** Setări → profil, schimbare parolă, limbă, opțiuni social share și secțiunea
**„Deconectare"** (stil de avertizare) → dialog de confirmare → tokenul de refresh este revocat
server-side și aplicația revine la ecranul principal. **Rezultat: PASS.**
![T-M12 — Secțiunea Deconectare din Setări](media_testare/mob-14-setari-deconectare.png){width=8cm}
---
# 6. Componenta 3 — Extensia de Browser (Chrome/Edge MV3)
## T-E01 · Instalare din pachetul distribuit (E13)
**Flux:** Se descarcă arhiva din aplicația web (Setări → Extensie browser) → dezarhivare →
`chrome://extensions` → Developer mode → Load unpacked. Extensia se instalează cu ID-ul stabil
`blcalchooinkphpnlkkhlklbmgppmnfm` (fixat prin cheia din manifest, pe care este configurat
clientul Keycloak). **Rezultat: PASS.** *(Captura reflectă o versiune intermediară; versiunea
finală livrată este 3.2.5.)*
![T-E01 — Extensia instalată în Chrome, cu ID-ul stabil](media_testare/ext-01-instalare.png){width=14cm}
## T-E02 · Autentificare OIDC/OAuth2 cu PKCE (E5, E6)
**Flux:** Popup → „Autentificare" → se deschide fereastra Keycloak (realm `didi-clients`, client
`didi-extension`, PKCE S256 + state anti-CSRF) → login cu utilizatorul de test → popup-ul afișează
emailul contului; tokenii sunt stocați în `chrome.storage.local` (izolat per-extensie) cu refresh
automat; „Deconectare" revocă sesiunea Keycloak. **Rezultat: PASS.**
![T-E02a — Popup neconectat, cu butonul de autentificare](media_testare/ext-02-popup-neconectat.png){width=10cm}
![T-E02b — Autentificat: contul afișat în antetul popup-ului](media_testare/ext-03-login-keycloak.png){width=10cm}
## T-E03 · Analiză URL și text din popup (E1, E1b, E2b)
**Flux:** Popup-ul oferă: câmp URL cu validare + buton **„Pagina curentă"** (preia automat URL-ul
tab-ului activ) + „Analizează URL"; secțiune de text cu contor de caractere (max 5000) —
textul selectat în pagină este **preluat automat** la deschiderea popup-ului. Nota de
confidențialitate este afișată permanent. **Rezultat: PASS.**
![T-E03a — Secțiunea de analiză URL (tab curent + input manual)](media_testare/ext-04-popup-url-text.png){width=10cm}
![T-E03b — Secțiunea de text, istoricul și deconectarea](media_testare/ext-05-popup-istoric.png){width=10cm}
## T-E04 · Consimțământ explicit pentru capturi (E12)
**Flux:** La prima captură de ecran / trimitere de imagine apare modalul „Consimțământ pentru
analiză" (conținutul e folosit exclusiv pentru raport; se trimite doar fragmentul selectat);
„Anulează" oprește fluxul; acordul persistă. **Rezultat: PASS.**
![T-E04 — Modal de consimțământ în pagină, înaintea primei capturi](media_testare/ext-06-consimtamant.png){width=15.5cm}
## T-E05 · Captură de ecran cu selectarea regiunii (E3b)
**Flux:** Popup → „Screenshot" → overlay pe pagina curentă → utilizatorul trasează regiunea de
analizat (drag select) → extensia decupează exact regiunea selectată (OffscreenCanvas +
devicePixelRatio), o încarcă și pornește analiza. **Rezultat: PASS.**
![T-E05 — Snipping tool: selecția regiunii direct în pagină](media_testare/ext-07-snipping-selectie.png){width=15.5cm}
## T-E06 · Meniu contextual — analiza imaginii din pagină (E3)
**Flux:** Click-dreapta pe orice imagine dintr-un site → opțiunea **„Analizează imaginea cu
DiDi"** în meniul contextual → consimțământ (prima dată) → imaginea este preluată, încărcată și
analizată; rezultatul apare ca modal peste pagină. Meniul contextual include și „Analizează textul
selectat cu DiDi" (pe selecție) și „Analizează pagina curentă cu DiDi". **Rezultat: PASS.**
![T-E06 — Meniul contextual cu „Analizează imaginea cu DiDi" pe un site real](media_testare/ext-08-context-menu-imagine.png){width=15.5cm}
## T-E07 · Panel de rezultate complet (E4)
**Flux:** După analiză, rezultatul se afișează în panel (modal în pagină / tab dedicat): miniatura
conținutului analizat, scor de risc cu inel, verdict cu nivel și certitudine, explicație completă
în română, acțiune recomandată, Detecție AI, Verificarea afirmațiilor (status per afirmație +
surse cu poziție Susține/Contrazice), Evaluarea sursei (semnale de alarmă, avertismente).
**Rezultat: PASS.**
Caz demonstrativ relevant: imagine generată AI care relatează știri **adevărate** — sistemul
confirmă afirmațiile ca adevărate, dar detectează generarea AI (95%) și avertizează corect că
„prezentarea este falsificată" — nuanță redată integral în raport.
![T-E07a — Verdict cu miniatura imaginii analizate și explicația completă](media_testare/ext-09-rezultat-verdict.png){width=13cm}
![T-E07b — Detecție AI 95% + afirmații verificate ca adevărate (4/4)](media_testare/ext-10-rezultat-componente.png){width=13cm}
![T-E07c — Verificarea afirmațiilor cu surse și Evaluarea sursei](media_testare/ext-11-rezultat-sursa.png){width=13cm}
## T-E08 · Istoric analize în extensie (E10)
**Flux:** Popup → „Istoric" → pagină dedicată cu analizele efectuate (max 50, stocate local),
detalii per analiză și ștergere individuală. **Rezultat: PASS.**
![T-E08 — Pagina de istoric a extensiei](media_testare/ext-12-istoric.png){width=15.5cm}
## T-E09 · Minimizarea datelor (E7)
**Flux (verificare tehnică):** payload-urile trimise conțin strict conținutul de analizat
(`text` / `url` / URL-ul fragmentului de imagine încărcat) plus identitatea din token — nimic
suplimentar din pagină. Verificat prin inspecția codului (`background.js`) și a traficului.
**Rezultat: PASS.**
## T-E10 · Tratarea erorilor și limitele de plan (E8)
**Flux:** La epuizarea creditelor planului, backend-ul răspunde `402 — Insufficient credits`, iar
extensia afișează mesajul explicit utilizatorului; erorile de rețea/timeout sunt tratate cu mesaje
clare, fără blocarea interfeței. **Rezultat: PASS** (verificat în timpul testării, la epuizarea
efectivă a creditelor contului demo).
---
# 7. Teste de integrare backend (IAM + API Gateway)
Executate pe 15.07.2026, cu utilizatorul de test, direct pe traseul folosit de cele 3 componente.
| # | Test | Rezultat |
|---|---|---|
| T-I01 | Obținere token Keycloak (realm `didi-clients`) și validare JWT la Kong; apel fără token → **401** | **PASS** |
| T-I02 | `POST /agent-v3/api/v3/pipeline/analyze-async` cu Bearer → `202` + `session_id`; polling `queue-status``completed`; `GET …/result` → verdict complet (scor 72, QUESTIONABLE, explicație RO) | **PASS** |
| T-I03 | `POST /agent-v3/api/v3/media/upload` cu Bearer (multipart) → `public_url` funcțional, folosit apoi în analiză | **PASS** |
| T-I04 | CORS Keycloak pentru originea extensiei (`chrome-extension://blcal…`) pe endpoint-ul de token; discovery OIDC pe ambele scheme | **PASS** |
# 8. Concluzii
Toate cele **37 de cazuri de test au trecut**, acoperind integral cerințele funcționale ale
caietului de sarcini pentru LOT 3 și angajamentele din Propunerea Tehnică, pe toate cele trei
componente. Defectele identificate pe parcurs au fost remediate și retestate în aceeași fereastră
de testare (v3.2.43.2.5 extensie). Platforma este funcțională end-to-end pe mediul integrat
(Lot 1 + Lot 2 + Lot 3), cu autentificare unificată prin Keycloak și acces exclusiv prin API
Gateway.
Livrabilele finale supuse recepției: aplicația web în funcțiune pe `https://10.11.10.18/`,
`didi-app-clossers.apk`, `didi-extension-clossers.zip` (v3.2.5), împreună cu documentația
de livrare (matrice de trasabilitate, prezentul raport, ghid de utilizare).
*Întocmit: Furnizor Lot 3 · 17.07.2026*