9ba420fa91
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 42s
CI / test-go-edu-search (push) Successful in 34s
CI / test-python-klausur (push) Failing after 2m51s
CI / test-python-agent-core (push) Successful in 21s
CI / test-nodejs-website (push) Successful in 29s
sed replacement left orphaned hostname references in story page and empty lines in getApiBase functions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
225 lines
11 KiB
TypeScript
225 lines
11 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export function GuideTab() {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border border-orange-200 p-6">
|
|
<h2 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
|
|
<svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
Was ist das Test Dashboard?
|
|
</h2>
|
|
<p className="text-slate-700 leading-relaxed">
|
|
Das <strong>Test Dashboard</strong> ist die zentrale Uebersicht fuer alle 260+ Tests im Breakpilot-System.
|
|
Es aggregiert Tests aus verschiedenen Services (Go, Python, TypeScript) ohne diese physisch zu migrieren.
|
|
Tests bleiben an ihren konventionellen Orten, werden aber hier zentral ueberwacht und ausgefuehrt.
|
|
Seit 2026-02 inklusive AI Compliance SDK Unit Tests (Vitest) und E2E Tests (Playwright).
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Test-Kategorien</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<TestCategoryCard
|
|
icon="🐹" title="Go Unit Tests (~57)" color="cyan"
|
|
description="consent-service, billing-service, school-service, edu-search-service, ai-compliance-sdk"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="🐍" title="Python Tests (~50)" color="yellow"
|
|
description="backend, voice-service, klausur-service, geo-service"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="🎯" title="BQAS Golden (97)" color="emerald"
|
|
description="Validierte Referenz-Tests mit LLM-Judge fuer Intent-Erkennung"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="📚" title="BQAS RAG (~20)" color="teal"
|
|
description="RAG-Judge Tests fuer Retrieval, Citations, Hallucination-Control"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="📘" title="TypeScript Jest (~8)" color="blue"
|
|
description="Website Unit Tests fuer React-Komponenten"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="⚡" title="SDK Vitest (~43)" color="orange"
|
|
description="AI Compliance SDK Unit Tests: Types, Export, Components, Reducer"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="🎭" title="SDK Playwright (~25)" color="purple"
|
|
description="SDK E2E Tests: Navigation, Workflow, Command Bar, Export"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="🌐" title="Website E2E (~5)" color="slate"
|
|
description="End-to-End Tests fuer kritische User Flows"
|
|
/>
|
|
<TestCategoryCard
|
|
icon="🔗" title="Integration Tests (~15)" color="indigo"
|
|
description="Docker Compose basierte E2E-Tests mit Backend, Consent-Service, DB"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Architektur</h3>
|
|
<pre className="bg-slate-50 p-4 rounded-lg text-xs overflow-x-auto">
|
|
{`┌────────────────────────────────────────────────────────────────────┐
|
|
│ Admin-v2 Test Dashboard │
|
|
│ /infrastructure/tests │
|
|
├────────────────────────────────────────────────────────────────────┤
|
|
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────────┐ │
|
|
│ │ Unit Tests │ │ SDK Tests │ │ BQAS │ │ E2E Tests │ │
|
|
│ │ (Go, Py) │ │ (Vitest) │ │ (LLM/RAG) │ │ (Playwright)│ │
|
|
│ └────────────┘ └────────────┘ └────────────┘ └─────────────┘ │
|
|
│ │ │ │ │ │
|
|
│ ▼ ▼ ▼ ▼ │
|
|
│ ┌──────────────────────────────────────────────────────────────┐ │
|
|
│ │ Test Registry API │ │
|
|
│ │ /backend/api/tests/registry.py │ │
|
|
│ └──────────────────────────────────────────────────────────────┘ │
|
|
└────────────────────────────────────────────────────────────────────┘
|
|
|
|
Tests bleiben wo sie sind:
|
|
- /consent-service/internal/**/*_test.go
|
|
- /backend/tests/test_*.py
|
|
- /voice-service/tests/bqas/
|
|
- /admin-v2/components/sdk/__tests__/*.test.ts (Vitest)
|
|
- /admin-v2/e2e/specs/*.spec.ts (Playwright)`}
|
|
</pre>
|
|
</div>
|
|
|
|
{/* CI/CD Workflow Anleitung */}
|
|
<div className="bg-blue-50 rounded-xl border border-blue-200 p-6">
|
|
<h3 className="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
CI/CD Integration
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 className="font-medium text-blue-800 mb-2">Automatisch (bei jedem Push/PR)</h4>
|
|
<ul className="space-y-2 text-sm text-blue-700">
|
|
<CIItem icon="✓" color="green" label="Unit Tests" detail="Go & Python Tests laufen automatisch" />
|
|
<CIItem icon="✓" color="green" label="Test-Ergebnisse" detail="Werden ans Dashboard gesendet" />
|
|
<CIItem icon="✓" color="green" label="Backlog" detail="Fehlgeschlagene Tests erscheinen hier" />
|
|
<CIItem icon="✓" color="green" label="Linting" detail="Code-Qualitaet bei PRs pruefen" />
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-medium text-blue-800 mb-2">Manuell (Button oder Tag)</h4>
|
|
<ul className="space-y-2 text-sm text-blue-700">
|
|
<CIItem icon="▶" color="orange" label="Docker Builds" detail="Container erstellen" />
|
|
<CIItem icon="▶" color="orange" label="SBOM/Scans" detail="Sicherheitsanalyse ausfuehren" />
|
|
<CIItem icon="▶" color="orange" label="Deployment" detail="In Produktion deployen" />
|
|
<CIItem icon="▶" color="orange" label="Pipeline starten" detail="Im CI/CD Dashboard" />
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-blue-200">
|
|
<p className="text-sm text-blue-600">
|
|
<strong>Daten-Fluss:</strong> Woodpecker CI → POST /api/tests/ci-result → PostgreSQL → Test Dashboard
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Link
|
|
href="/ai/test-quality"
|
|
className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-orange-300 hover:bg-orange-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div>
|
|
<p className="font-medium text-slate-900">BQAS Dashboard</p>
|
|
<p className="text-xs text-slate-500">Detaillierte BQAS-Metriken und Trend-Analyse</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="/infrastructure/ci-cd"
|
|
className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-orange-300 hover:bg-orange-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div>
|
|
<p className="font-medium text-slate-900">CI/CD Pipelines</p>
|
|
<p className="text-xs text-slate-500">Gitea Actions und automatische Test-Planung</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Internal helper components
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function TestCategoryCard({
|
|
icon,
|
|
title,
|
|
color,
|
|
description,
|
|
}: {
|
|
icon: string
|
|
title: string
|
|
color: string
|
|
description: string
|
|
}) {
|
|
const colorMap: Record<string, string> = {
|
|
cyan: 'bg-cyan-50 border-cyan-200 text-cyan-800 text-cyan-700',
|
|
yellow: 'bg-yellow-50 border-yellow-200 text-yellow-800 text-yellow-700',
|
|
emerald: 'bg-emerald-50 border-emerald-200 text-emerald-800 text-emerald-700',
|
|
teal: 'bg-teal-50 border-teal-200 text-teal-800 text-teal-700',
|
|
blue: 'bg-blue-50 border-blue-200 text-blue-800 text-blue-700',
|
|
orange: 'bg-orange-50 border-orange-200 text-orange-800 text-orange-700',
|
|
purple: 'bg-purple-50 border-purple-200 text-purple-800 text-purple-700',
|
|
slate: 'bg-slate-50 border-slate-200 text-slate-800 text-slate-700',
|
|
indigo: 'bg-indigo-50 border-indigo-200 text-indigo-800 text-indigo-700',
|
|
}
|
|
|
|
// Build explicit class strings for Tailwind to detect
|
|
const bgBorder = `bg-${color}-50 border-${color}-200`
|
|
const titleColor = `text-${color}-800`
|
|
const descColor = `text-${color}-700`
|
|
|
|
return (
|
|
<div className={`p-4 rounded-lg border ${bgBorder}`}>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-xl">{icon}</span>
|
|
<h4 className={`font-medium ${titleColor}`}>{title}</h4>
|
|
</div>
|
|
<p className={`text-sm ${descColor}`}>{description}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CIItem({
|
|
icon,
|
|
color,
|
|
label,
|
|
detail,
|
|
}: {
|
|
icon: string
|
|
color: 'green' | 'orange'
|
|
label: string
|
|
detail: string
|
|
}) {
|
|
const iconColor = color === 'green' ? 'text-green-500' : 'text-orange-500'
|
|
return (
|
|
<li className="flex items-start gap-2">
|
|
<span className={`${iconColor} mt-1`}>{icon}</span>
|
|
<span><strong>{label}</strong> - {detail}</span>
|
|
</li>
|
|
)
|
|
}
|