mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 09:31:13 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
284
src-old/components/admin/IntegrationTestRunner.tsx
Normal file
284
src-old/components/admin/IntegrationTestRunner.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
/**
|
||||
* Integration Test Runner Component
|
||||
*
|
||||
* Superuser-only UI for running comprehensive integration tests.
|
||||
* Requires AAL2 if MFA is enrolled.
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import { useSuperuserGuard } from '@/hooks/useSuperuserGuard';
|
||||
import { IntegrationTestRunner as TestRunner, allTestSuites, type TestResult } from '@/lib/integrationTests';
|
||||
import { Play, Square, Download, ChevronDown, CheckCircle2, XCircle, Clock, SkipForward } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { handleError } from '@/lib/errorHandler';
|
||||
|
||||
export function IntegrationTestRunner() {
|
||||
const superuserGuard = useSuperuserGuard();
|
||||
const [selectedSuites, setSelectedSuites] = useState<string[]>(allTestSuites.map(s => s.id));
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [results, setResults] = useState<TestResult[]>([]);
|
||||
const [runner] = useState(() => new TestRunner((result) => {
|
||||
setResults(prev => {
|
||||
const existing = prev.findIndex(r => r.id === result.id);
|
||||
if (existing >= 0) {
|
||||
const updated = [...prev];
|
||||
updated[existing] = result;
|
||||
return updated;
|
||||
}
|
||||
return [...prev, result];
|
||||
});
|
||||
}));
|
||||
|
||||
const toggleSuite = useCallback((suiteId: string) => {
|
||||
setSelectedSuites(prev =>
|
||||
prev.includes(suiteId)
|
||||
? prev.filter(id => id !== suiteId)
|
||||
: [...prev, suiteId]
|
||||
);
|
||||
}, []);
|
||||
|
||||
const runTests = useCallback(async () => {
|
||||
const suitesToRun = allTestSuites.filter(s => selectedSuites.includes(s.id));
|
||||
|
||||
if (suitesToRun.length === 0) {
|
||||
toast.error('Please select at least one test suite');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsRunning(true);
|
||||
setResults([]);
|
||||
runner.reset();
|
||||
|
||||
toast.info(`Running ${suitesToRun.length} test suite(s)...`);
|
||||
|
||||
try {
|
||||
await runner.runAllSuites(suitesToRun);
|
||||
const summary = runner.getSummary();
|
||||
|
||||
if (summary.failed > 0) {
|
||||
toast.error(`Tests completed with ${summary.failed} failure(s)`);
|
||||
} else {
|
||||
toast.success(`All ${summary.passed} tests passed!`);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: 'Run integration tests',
|
||||
metadata: { suitesCount: suitesToRun.length }
|
||||
});
|
||||
toast.error('Test run failed');
|
||||
} finally {
|
||||
setIsRunning(false);
|
||||
}
|
||||
}, [selectedSuites, runner]);
|
||||
|
||||
const stopTests = useCallback(() => {
|
||||
runner.stop();
|
||||
setIsRunning(false);
|
||||
toast.info('Test run stopped');
|
||||
}, [runner]);
|
||||
|
||||
const exportResults = useCallback(() => {
|
||||
const summary = runner.getSummary();
|
||||
const exportData = {
|
||||
timestamp: new Date().toISOString(),
|
||||
summary,
|
||||
results: runner.getResults()
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `integration-tests-${Date.now()}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Test results exported');
|
||||
}, [runner]);
|
||||
|
||||
// Guard is handled by the route/page, no loading state needed here
|
||||
|
||||
const summary = runner.getSummary();
|
||||
const totalTests = allTestSuites
|
||||
.filter(s => selectedSuites.includes(s.id))
|
||||
.reduce((sum, s) => sum + s.tests.length, 0);
|
||||
const progress = totalTests > 0 ? (results.length / totalTests) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
🧪 Integration Test Runner
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Superuser-only comprehensive testing system. Tests run against real database functions and edge functions.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Suite Selection */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-medium">Select Test Suites:</h3>
|
||||
<div className="space-y-2">
|
||||
{allTestSuites.map(suite => (
|
||||
<div key={suite.id} className="flex items-start space-x-3">
|
||||
<Checkbox
|
||||
id={suite.id}
|
||||
checked={selectedSuites.includes(suite.id)}
|
||||
onCheckedChange={() => toggleSuite(suite.id)}
|
||||
disabled={isRunning}
|
||||
/>
|
||||
<div className="space-y-1 flex-1">
|
||||
<label
|
||||
htmlFor={suite.id}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
|
||||
>
|
||||
{suite.name} ({suite.tests.length} tests)
|
||||
</label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{suite.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={runTests} loading={isRunning} loadingText="Running..." disabled={selectedSuites.length === 0}>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Run Selected
|
||||
</Button>
|
||||
{isRunning && (
|
||||
<Button onClick={stopTests} variant="destructive">
|
||||
<Square className="w-4 h-4 mr-2" />
|
||||
Stop
|
||||
</Button>
|
||||
)}
|
||||
{results.length > 0 && !isRunning && (
|
||||
<Button onClick={exportResults} variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export Results
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
{results.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Progress: {results.length}/{totalTests} tests</span>
|
||||
<span>{progress.toFixed(0)}%</span>
|
||||
</div>
|
||||
<Progress value={progress} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary */}
|
||||
{results.length > 0 && (
|
||||
<div className="flex gap-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
<span>{summary.passed} passed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="w-4 h-4 text-destructive" />
|
||||
<span>{summary.failed} failed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<SkipForward className="w-4 h-4 text-muted-foreground" />
|
||||
<span>{summary.skipped} skipped</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>{(summary.totalDuration / 1000).toFixed(2)}s</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results */}
|
||||
{results.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Test Results</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[600px] pr-4">
|
||||
<div className="space-y-2">
|
||||
{results.map(result => (
|
||||
<Collapsible key={result.id}>
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg border bg-card">
|
||||
<div className="pt-0.5">
|
||||
{result.status === 'pass' && <CheckCircle2 className="w-4 h-4 text-green-500" />}
|
||||
{result.status === 'fail' && <XCircle className="w-4 h-4 text-destructive" />}
|
||||
{result.status === 'skip' && <SkipForward className="w-4 h-4 text-muted-foreground" />}
|
||||
{result.status === 'running' && <Clock className="w-4 h-4 text-blue-500 animate-pulse" />}
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">{result.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{result.suite}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{result.duration}ms
|
||||
</Badge>
|
||||
{(result.error || result.details) && (
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0">
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{result.error && (
|
||||
<p className="text-sm text-destructive">{result.error}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{(result.error || result.details) && (
|
||||
<CollapsibleContent>
|
||||
<div className="ml-7 mt-2 p-3 rounded-lg bg-muted/50 space-y-2">
|
||||
{result.error && result.stack && (
|
||||
<div>
|
||||
<p className="text-xs font-medium mb-1">Stack Trace:</p>
|
||||
<pre className="text-xs whitespace-pre-wrap font-mono bg-background p-2 rounded">
|
||||
{result.stack}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{result.details && (
|
||||
<div>
|
||||
<p className="text-xs font-medium mb-1">Details:</p>
|
||||
<pre className="text-xs whitespace-pre-wrap font-mono bg-background p-2 rounded">
|
||||
{JSON.stringify(result.details, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
)}
|
||||
</Collapsible>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user