websitedev/TEST-REPORTING-SYSTEM.md

> **ELAVULT (deprecated)** — Linear-korszakbeli riportrendszer.

# Test Reporting System - Gherkin Format & Functional Analysis

## 🎯 **Cél: Átfogó Teszt Reporting Rendszer**

### **Funkciók:**
- ✅ **Gherkin formátum** tesztesetekhez
- ✅ **Funkcionális területek** szerinti csoportosítás
- ✅ **Lemaradás elemzés** területenként
- ✅ **TC issue frissítés** Gherkin formátummal
- ✅ **Automatizált reporting** GitHub Actions-ban

---

## 📊 **Funkcionális Területek Szerinti Csoportosítás**

### **1. 🏠 Weboldal Funkcionalitás**
- **Kezdőlap**: Hero, szolgáltatások, CTA gombok
- **Navigáció**: Menü, hamburger, linkek
- **Oldalak**: Rólunk, Szolgáltatások, Kapcsolat
- **Webmail**: Külső integráció

### **2. 📝 Kapcsolat Űrlap**
- **Validáció**: Frontend és backend
- **Spam védelem**: Tartalom ellenőrzés
- **Rate limiting**: Kérés korlátozás
- **GDPR**: Adatkezelési hozzájárulás

### **3. 🎨 Design és UX**
- **Responsive**: Mobil, tablet, desktop
- **Accessibility**: A11y, keyboard navigáció
- **Performance**: Betöltési idő, Lighthouse
- **Usability**: Intuitív használat

### **4. 🔒 Biztonság**
- **Input validáció**: XSS, injection védelem
- **Rate limiting**: API védelem
- **HTTPS**: Titkosított kommunikáció
- **Headers**: Security headers

### **5. ⚡ Teljesítmény**
- **Lighthouse**: Performance, SEO, A11y
- **Kép optimalizálás**: WebP, lazy loading
- **Code splitting**: JavaScript optimalizálás
- **Caching**: Browser és CDN

### **6. 🛠️ Technikai Stack**
- **Next.js**: App Router, API Routes
- **MongoDB**: Adatbázis kapcsolat
- **Docker**: Containerizáció
- **CI/CD**: GitHub Actions

---

## 🥒 **Gherkin Formátum Template**

### **Template Struktúra:**
```gherkin
Feature: [Funkcionális terület neve]
  As a [user type]
  I want to [functionality]
  So that [business value]

  Background:
    Given [common preconditions]

  Scenario: [Test case neve]
    Given [initial state]
    When [action performed]
    Then [expected outcome]
    And [additional verification]

  Scenario Outline: [Parametrized test]
    Given [initial state with <parameter>]
    When [action with <parameter>]
    Then [expected outcome with <parameter>]
    
    Examples:
      | parameter | expected_value |
      | value1    | result1        |
      | value2    | result2        |
```

---

## 📋 **Gherkin Test Cases - Jelenlegi Implementáció**

### **1. 🏠 Weboldal Funkcionalitás**

#### **Feature: Kezdőlap Funkcionalitás**
```gherkin
Feature: Kezdőlap Funkcionalitás
  As a weboldal látogató
  I want to megértsem a cég szolgáltatásait
  So that tudjam, hogy mire számíthatok

  Background:
    Given a weboldal betöltött állapotban van
    And a felhasználó a kezdőlapon van

  Scenario: Hero szekció megjelenítése
    Given a felhasználó megnyitja a kezdőlapot
    When a oldal betöltődik
    Then látom a főcímet "Megbízható web- és email-szolgáltatás személyre szabott támogatással"
    And látom az alcímet a cég bemutatkozásával
    And látom a Webmail ugrás gombot

  Scenario: Szolgáltatások megjelenítése
    Given a felhasználó a kezdőlapon van
    When görget le a szolgáltatások szekcióig
    Then látom a Web Hosting szolgáltatást
    And látom az Email szolgáltatást
    And látom a DNS Adminisztráció szolgáltatást
    And minden szolgáltatáshoz van leírás és feature lista

  Scenario: Webmail gomb működése
    Given a felhasználó a kezdőlapon van
    When rákattint a "Webmail Ugrás" gombra
    Then új ablakban megnyílik a webmail szolgáltatás
    And a webmail URL konfigurálható environment változóval
```

#### **Feature: Navigáció Rendszer**
```gherkin
Feature: Navigáció Rendszer
  As a weboldal látogató
  I want to könnyen navigálhassak az oldalak között
  So that gyorsan megtaláljam a kívánt információt

  Background:
    Given a weboldal betöltött állapotban van

  Scenario: Desktop navigáció
    Given a felhasználó desktop eszközön van
    When megnyitja a weboldalt
    Then látom a főmenüt a header-ben
    And a menü sticky (ragad a tetején görgetéskor)
    And minden menüpont kattintható

  Scenario: Mobil navigáció
    Given a felhasználó mobil eszközön van
    When megnyitja a weboldalt
    Then látom a hamburger menü gombot
    When rákattint a hamburger gombra
    Then megjelenik a mobil menü
    And a hamburger gomb ikonja változik (nyitott/bezárt)
    When rákattint egy menüpontra
    Then a mobil menü bezáródik

  Scenario: Menüpontok navigálása
    Given a felhasználó bármelyik oldalon van
    When rákattint a "Rólunk" menüpontra
    Then a /rolunk oldalra kerül
    When rákattint a "Szolgáltatások" menüpontra
    Then a /szolgaltatasok oldalra kerül
    When rákattint a "Kapcsolat" menüpontra
    Then a /kapcsolat oldalra kerül
```

### **2. 📝 Kapcsolat Űrlap**

#### **Feature: Kapcsolat Űrlap Validáció**
```gherkin
Feature: Kapcsolat Űrlap Validáció
  As a weboldal látogató
  I want to kapcsolatot felvenni a céggel
  So that kérdéseimet feltehessem

  Background:
    Given a felhasználó a /kapcsolat oldalon van
    And a kapcsolat űrlap betöltött állapotban van

  Scenario: Kötelező mezők validálása
    Given a felhasználó üres űrlappal próbál küldeni
    When rákattint a "Üzenet küldése" gombra
    Then hibaüzenet jelenik meg a név mezőnél
    And hibaüzenet jelenik meg az email mezőnél
    And hibaüzenet jelenik meg az üzenet mezőnél
    And hibaüzenet jelenik meg a GDPR checkbox-nál
    And az űrlap nem kerül elküldésre

  Scenario: Email formátum validálása
    Given a felhasználó kitölti a név mezőt "Teszt Felhasználó"-val
    And kitölti az email mezőt "rossz-email-formátum"-mal
    And kitölti az üzenet mezőt "Teszt üzenet"-tel
    And bejelöli a GDPR checkbox-ot
    When rákattint a "Üzenet küldése" gombra
    Then hibaüzenet jelenik meg "Érvénytelen email formátum" szöveggel
    And az űrlap nem kerül elküldésre

  Scenario: Sikeres űrlap küldés
    Given a felhasználó kitölti a név mezőt "Teszt Felhasználó"-val
    And kitölti az email mezőt "teszt@example.com"-mal
    And kitölti az üzenet mezőt "Teszt üzenet"-tel
    And bejelöli a GDPR checkbox-ot
    When rákattint a "Üzenet küldése" gombra
    Then sikerüzenet jelenik meg "Üzenet sikeresen elküldve!" szöveggel
    And az űrlap mezői törlődnek
```

#### **Feature: Spam Védelem és Rate Limiting**
```gherkin
Feature: Spam Védelem és Rate Limiting
  As a weboldal rendszergazdája
  I want to megvédeni a rendszert spam-től
  So that csak legitim üzenetek érkezzenek

  Background:
    Given a kapcsolat API endpoint elérhető
    And a rate limiting 5 kérés/perc limitre van beállítva

  Scenario: Spam tartalom észlelése
    Given a felhasználó spam tartalmat küld
    When POST kérést küld a /api/contact endpoint-ra
    Then 400 Bad Request választ kap
    And a válasz tartalmazza "Spam gyanús tartalom észlelve" üzenetet
    And az üzenet nem kerül feldolgozásra

  Scenario: Rate limiting működése
    Given a felhasználó 5 érvényes kérést küld 1 percen belül
    When 6. kérést próbálja küldeni
    Then 429 Too Many Requests választ kap
    And a válasz tartalmazza "Túl sok kérés" üzenetet
    And a kérés nem kerül feldolgozásra

  Scenario: Rate limiting visszaállítása
    Given a felhasználó elérte a rate limitet
    When 1 perc eltelik
    And új érvényes kérést küld
    Then 200 OK választ kap
    And a kérés sikeresen feldolgozásra kerül
```

### **3. 🎨 Design és UX**

#### **Feature: Responsive Design**
```gherkin
Feature: Responsive Design
  As a weboldal látogató
  I want to minden eszközön jól működő weboldalt
  So that bárhonnan hozzáférhessem a szolgáltatásokhoz

  Background:
    Given a weboldal elérhető

  Scenario: Mobil nézet (360px+)
    Given a felhasználó 360px széles eszközön van
    When megnyitja a weboldalt
    Then a hamburger menü látható
    And a szövegek olvashatóak
    And a gombok kattinthatóak
    And nincs vízszintes görgetés

  Scenario: Tablet nézet (768px+)
    Given a felhasználó 768px széles eszközön van
    When megnyitja a weboldalt
    Then a főmenü látható
    And a szolgáltatások 2 oszlopban jelennek meg
    And a layout optimalizált

  Scenario: Desktop nézet (1024px+)
    Given a felhasználó 1024px széles eszközön van
    When megnyitja a weboldalt
    Then a teljes navigáció látható
    And a szolgáltatások 3 oszlopban jelennek meg
    And a layout teljes szélességben kihasznált
```

### **4. ⚡ Teljesítmény**

#### **Feature: Lighthouse Teljesítmény**
```gherkin
Feature: Lighthouse Teljesítmény
  As a weboldal látogató
  I want to gyorsan betöltődő weboldalt
  So that ne várjak a tartalom megjelenésére

  Background:
    Given a weboldal elérhető
    And a Lighthouse CI konfigurálva van

  Scenario: Performance Score ≥ 90
    Given a Lighthouse audit futtatásra kerül
    When a performance mérés befejeződik
    Then a Performance score ≥ 90
    And a First Contentful Paint < 1.5s
    And a Largest Contentful Paint < 2.5s
    And a Cumulative Layout Shift < 0.1

  Scenario: Accessibility Score ≥ 90
    Given a Lighthouse audit futtatásra kerül
    When az accessibility mérés befejeződik
    Then az Accessibility score ≥ 90
    And minden képnek van alt szövege
    And a heading struktúra logikus
    And a kontraszt arány ≥ 4.5:1

  Scenario: SEO Score ≥ 90
    Given a Lighthouse audit futtatásra kerül
    When az SEO mérés befejeződik
    Then az SEO score ≥ 90
    And minden oldalnak van unique title-je
    And minden oldalnak van meta description-je
    And a sitemap.xml elérhető
```

---

## 📊 **Test Reporting Dashboard**

### **Funkcionális Területek Lemaradás Elemzése**

```markdown
# Test Coverage Report - 2025-09-05

## 📊 Összefoglaló
- **Összes teszt**: 25
- **Sikeres**: 23 (92%)
- **Sikertelen**: 2 (8%)
- **Kihagyott**: 0 (0%)

## 🎯 Területenkénti Elemzés

### 1. 🏠 Weboldal Funkcionalitás
- **Tesztesetek**: 8
- **Sikeres**: 8 (100%)
- **Státusz**: ✅ Kiváló
- **Lemaradás**: Nincs

### 2. 📝 Kapcsolat Űrlap
- **Tesztesetek**: 6
- **Sikeres**: 5 (83%)
- **Sikertelen**: 1 (17%)
- **Státusz**: ⚠️ Figyelendő
- **Lemaradás**: Rate limiting edge case

### 3. 🎨 Design és UX
- **Tesztesetek**: 4
- **Sikeres**: 3 (75%)
- **Sikertelen**: 1 (25%)
- **Státusz**: ⚠️ Figyelendő
- **Lemaradás**: A11y keyboard navigáció

### 4. ⚡ Teljesítmény
- **Tesztesetek**: 3
- **Sikeres**: 2 (67%)
- **Sikertelen**: 1 (33%)
- **Státusz**: 🔴 Kritikus
- **Lemaradás**: Lighthouse Performance < 90

### 5. 🔒 Biztonság
- **Tesztesetek**: 4
- **Sikeres**: 4 (100%)
- **Státusz**: ✅ Kiváló
- **Lemaradás**: Nincs

## 🚨 Kritikus Lemaradások
1. **Lighthouse Performance** - < 90 score
2. **A11y Keyboard Navigation** - Nem működik
3. **Rate Limiting Edge Cases** - Hibás kezelés

## 📈 Javaslatok
1. Kép optimalizálás implementálása
2. A11y keyboard navigáció javítása
3. Rate limiting edge case kezelés
4. Performance monitoring beállítása
```

---

## 🔄 **TC Issue Frissítési Folyamat**

### **1. Gherkin Formátum Hozzáadása TC Issues-hoz**

```markdown
## 🥒 Gherkin Test Case

```gherkin
Feature: [Feature neve]
  As a [user type]
  I want to [functionality]
  So that [business value]

  Scenario: [Test case neve]
    Given [precondition]
    When [action]
    Then [expected result]
```

## 📊 Test Execution Results
- **Status**: ✅ Passed / ❌ Failed / ⏭️ Skipped
- **Duration**: 150ms
- **Last Run**: 2025-09-05T15:30:00Z
- **Environment**: GitHub Actions / Local

## 🔗 Automated Test Implementation
- **File**: `src/__tests__/integration.test.ts`
- **Function**: `should handle contact form validation`
- **Coverage**: 100%
```

### **2. Automatizált TC Issue Frissítés**

```javascript
// scripts/update-tc-issues.js
const updateTestCaseIssues = async (testResults) => {
  for (const test of testResults) {
    if (test.title.includes('TC-')) {
      const tcId = extractTestCaseId(test.title);
      const gherkin = generateGherkinFromTest(test);
      
      await linearClient.updateIssue(tcId, {
        description: addGherkinToDescription(test.description, gherkin),
        labels: ['test-case', 'gherkin', 'automated']
      });
    }
  }
};
```

---

## 🚀 **GitHub Actions Integration**

### **Test Reporting Workflow**

```yaml
name: Test Reporting & Analysis

on:
  push:
    branches: [main, develop]
  schedule:
    - cron: '0 9 * * *'  # Daily at 9 AM

jobs:
  test-execution:
    runs-on: ubuntu-latest
    steps:
      - name: Run Tests
        run: npm run test:all -- --json --outputFile=test-results.json
      
      - name: Generate Gherkin Reports
        run: node scripts/generate-gherkin-reports.js
      
      - name: Analyze Functional Areas
        run: node scripts/analyze-functional-coverage.js
      
      - name: Update TC Issues
        run: node scripts/update-tc-issues.js
      
      - name: Generate Coverage Dashboard
        run: node scripts/generate-coverage-dashboard.js
```

---

## 📋 **Következő Lépések**

### **1. Azonnali (1-2 nap)**
- [ ] Gherkin template-ek létrehozása
- [ ] TC issues frissítése Gherkin formátummal
- [ ] Funkcionális területek elemzési script

### **2. Rövid távú (1 hét)**
- [ ] Automatizált TC issue frissítés
- [ ] GitHub Actions reporting workflow
- [ ] Coverage dashboard generálás

### **3. Közép távú (1 hónap)**
- [ ] Teljes Gherkin test suite
- [ ] Lemaradás predikció algoritmus
- [ ] Real-time monitoring dashboard

---

**Ez a rendszer biztosítja, hogy mindig lássuk, mely funkcionális területeken vagyunk lemaradva, és a teszteseteink könnyen olvasható Gherkin formátumban legyenek dokumentálva!** 🎯✨