feat: enhance README and TODO documentation, implement mobile menu functionality in Header component

- Updated README.md with project details, quick start instructions, and tech stack. - Expanded TODO.md to reflect current project status and backlog items, including Linear ticket synchronization. - Added mobile menu toggle functionality in Header component with corresponding tests for user interactions. - Configured Next.js for Docker deployment and optimized build settings.
2025-09-05 17:28:52 +02:00
parent 578a85ec1a
commit b0df8dd182
50 changed files with 7758 additions and 67 deletions
@@ -0,0 +1,476 @@
+# 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!** 🎯✨