3e33359285
FE-3:
- Error-System: ErrorBannerStore + ErrorBanner (stapelbar, auto-hide, 5 categories)
- ContradictionBanner: Visuelle Widerspruchserkennung
- StatusTab: Zeitleiste, Fortschrittsbalken, Details
- ShareButton: Inline-Share mit Geteilt-Badge
- ShareModal: Ablaufzeit (24h-30Tage/Nie), Max-Views, Copy/Revoke
- research/{id}/+page.svelte: 6 Tabs mit Polling (5s), onDestroy cleanup
- share/[token]/+page.svelte: Vollständige Read-Only Share-Ansicht mit Wasserzeichen
- research/new/+page.svelte: Char-Counter, Language/Depth-Auswahl
FE-4:
- Dockerfile: HEALTHCHECK, Error-Handling, multi-stage build
- Caddyfile: HTTPS, Security Headers, gzip+zstd
- docker-compose.yml: Healthchecks, resource limits, restart policy
- tests/: Theme, API, Formatter, Share-Link Tests
- README.md: Architektur-Diagramm, Installation, Nutzung
- CHANGELOG.md: FE-0 bis FE-4
92 lines
4.1 KiB
Svelte
92 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import { truncateId, truncateQuery, formatDate, formatStatus, getConfidenceBadge, getIndependenceBadge, scoreColor, domainFavicon } from '$lib/utils/formatters';
|
|
|
|
let results: string[] = [];
|
|
let error = '';
|
|
|
|
function addResult(msg: string) {
|
|
results = [...results, msg];
|
|
}
|
|
|
|
function assert(condition: boolean, msg: string) {
|
|
if (condition) {
|
|
addResult(`✓ ${msg}`);
|
|
} else {
|
|
addResult(`✗ ${msg}`);
|
|
error = 'Assertion failed';
|
|
}
|
|
}
|
|
|
|
function runTests() {
|
|
results = [];
|
|
error = '';
|
|
|
|
// truncateId tests
|
|
assert(truncateId('abc123def456') === 'abc123de', 'truncateId truncates long IDs');
|
|
assert(truncateId('short') === 'short', 'truncateId returns short IDs as-is');
|
|
assert(truncateId('') === '', 'truncateId returns empty string for empty input');
|
|
assert(truncateId(null as any) === '', 'truncateId handles null input');
|
|
|
|
// truncateQuery tests
|
|
assert(truncateQuery('Hello World', 10) === 'Hello Wor…', 'truncateQuery truncates at max length');
|
|
assert(truncateQuery('Hi', 10) === 'Hi', 'truncateQuery returns short strings as-is');
|
|
assert(truncateQuery('', 10) === '', 'truncateQuery handles empty string');
|
|
assert(truncateQuery(null as any, 10) === '', 'truncateQuery handles null input');
|
|
|
|
// formatDate tests
|
|
assert(formatDate('2024-01-15T14:30:00Z').includes('15.01.2024'), 'formatDate formats date correctly');
|
|
assert(formatDate('2024-01-15T14:30:00Z').includes('14:30'), 'formatDate includes time');
|
|
assert(formatDate('') === '', 'formatDate returns empty for empty input');
|
|
assert(formatDate('invalid') !== '', 'formatDate handles invalid dates');
|
|
|
|
// formatStatus tests
|
|
assert(formatStatus('COMPLETED') === 'Abgeschlossen', 'formatStatus maps COMPLETED');
|
|
assert(formatStatus('FAILED') === 'Fehlgeschlagen', 'formatStatus maps FAILED');
|
|
assert(formatStatus('SEARCHING') === 'Suche läuft', 'formatStatus maps SEARCHING');
|
|
assert(formatStatus('UNKNOWN') === 'UNKNOWN', 'formatStatus returns unknown status');
|
|
|
|
// getConfidenceBadge tests
|
|
const highConf = getConfidenceBadge(0.9);
|
|
assert(highConf.label === 'Hoch', 'getConfidenceBadge returns "Hoch" for 0.9');
|
|
assert(highConf.color.includes('emerald'), 'High confidence uses emerald color');
|
|
|
|
const lowConf = getConfidenceBadge(0.3);
|
|
assert(lowConf.label === 'Sehr niedrig', 'getConfidenceBadge returns "Sehr niedrig" for 0.3');
|
|
assert(lowConf.color.includes('red'), 'Low confidence uses red color');
|
|
|
|
// getIndependenceBadge tests
|
|
const highInd = getIndependenceBadge(0.9);
|
|
assert(highInd.label === 'Sehr unabhängig', 'getIndependenceBadge returns "Sehr unabhängig" for 0.9');
|
|
|
|
const lowInd = getIndependenceBadge(0.2);
|
|
assert(lowInd.label === 'Abhängig', 'getIndependenceBadge returns "Abhängig" for 0.2');
|
|
|
|
// scoreColor tests
|
|
assert(scoreColor(0.9).includes('emerald'), 'scoreColor returns emerald for high score');
|
|
assert(scoreColor(0.5).includes('yellow'), 'scoreColor returns yellow for medium score');
|
|
assert(scoreColor(0.1).includes('red'), 'scoreColor returns red for low score');
|
|
|
|
// domainFavicon tests
|
|
assert(domainFavicon('example.com') === 'E', 'domainFavicon extracts first letter');
|
|
assert(domainFavicon('') === '?', 'domainFavicon returns ? for empty string');
|
|
assert(domainFavicon('https://deep.nested.domain.com') === 'D', 'domainFavicon handles URLs');
|
|
|
|
addResult('');
|
|
if (!error) {
|
|
addResult('All formatter tests passed!');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="test-formatters">
|
|
<h2>Formatter Tests</h2>
|
|
<button on:click={runTests} class="run-tests-btn">Run Tests</button>
|
|
<div class="test-results">
|
|
{#each results as result}
|
|
<p class="{result.startsWith('✓') ? 'pass' : result.startsWith('✗') ? 'fail' : ''}">{result}</p>
|
|
{/each}
|
|
{#if error}
|
|
<p class="error">{error}</p>
|
|
{/if}
|
|
</div>
|
|
</div> |