@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-test-report/index.tsx

@@ -0,0 +1,469 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { Progress } from "../progress"
+import { ScrollArea } from "../scroll-area"
+import { Input } from "../input"
+import {
+  CheckCircle2,
+  XCircle,
+  SkipForward,
+  Clock,
+  ChevronDown,
+  ChevronRight,
+  Search,
+  FileText,
+  BarChart3,
+  Filter,
+  AlertTriangle,
+} from "lucide-react"
+
+export type TestStatus = "passed" | "failed" | "skipped" | "pending"
+
+export interface TestCase {
+  id: string
+  name: string
+  status: TestStatus
+  duration: number // in ms
+  errorMessage?: string
+  stackTrace?: string
+  file?: string
+  line?: number
+}
+
+export interface TestSuite {
+  id: string
+  name: string
+  file?: string
+  tests: TestCase[]
+  duration: number // in ms
+  timestamp?: Date
+}
+
+export interface CoverageReport {
+  lines: { covered: number; total: number; percentage: number }
+  branches: { covered: number; total: number; percentage: number }
+  functions: { covered: number; total: number; percentage: number }
+  statements: { covered: number; total: number; percentage: number }
+}
+
+export interface WakaTestReportProps {
+  /** Test suites */
+  suites: TestSuite[]
+  /** Coverage report */
+  coverage?: CoverageReport
+  /** Title */
+  title?: string
+  /** Callback when clicking on a test */
+  onTestClick?: (test: TestCase) => void
+  /** Callback when viewing test file */
+  onViewFile?: (file: string, line?: number) => void
+  /** Show only failed tests */
+  showFailedOnly?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const statusConfig: Record<TestStatus, { icon: React.ElementType; color: string; bgColor: string; label: string }> = {
+  passed: { icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500/10", label: "Passed" },
+  failed: { icon: XCircle, color: "text-red-500", bgColor: "bg-red-500/10", label: "Failed" },
+  skipped: { icon: SkipForward, color: "text-gray-500", bgColor: "bg-gray-500/10", label: "Skipped" },
+  pending: { icon: Clock, color: "text-yellow-500", bgColor: "bg-yellow-500/10", label: "Pending" },
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  const secs = ms / 1000
+  if (secs < 60) return `${secs.toFixed(2)}s`
+  const mins = Math.floor(secs / 60)
+  return `${mins}m ${(secs % 60).toFixed(0)}s`
+}
+
+function CoverageBar({
+  label,
+  covered,
+  total,
+  percentage,
+}: {
+  label: string
+  covered: number
+  total: number
+  percentage: number
+}) {
+  const getColor = (pct: number) => {
+    if (pct >= 80) return "bg-green-500"
+    if (pct >= 50) return "bg-yellow-500"
+    return "bg-red-500"
+  }
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="font-medium">
+          {covered}/{total} ({percentage.toFixed(1)}%)
+        </span>
+      </div>
+      <div className="h-2 bg-muted rounded-full overflow-hidden">
+        <div
+          className={cn("h-full transition-all", getColor(percentage))}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function TestSuiteCard({
+  suite,
+  isExpanded,
+  onToggle,
+  onTestClick,
+  onViewFile,
+  searchQuery,
+}: {
+  suite: TestSuite
+  isExpanded: boolean
+  onToggle: () => void
+  onTestClick?: (test: TestCase) => void
+  onViewFile?: (file: string, line?: number) => void
+  searchQuery: string
+}) {
+  const stats = {
+    passed: suite.tests.filter((t) => t.status === "passed").length,
+    failed: suite.tests.filter((t) => t.status === "failed").length,
+    skipped: suite.tests.filter((t) => t.status === "skipped").length,
+    total: suite.tests.length,
+  }
+
+  const allPassed = stats.failed === 0 && stats.passed > 0
+  const hasFailed = stats.failed > 0
+
+  // Filter tests by search query
+  const filteredTests = suite.tests.filter((test) =>
+    test.name.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  if (searchQuery && filteredTests.length === 0) return null
+
+  return (
+    <div className={cn("border rounded-lg overflow-hidden", hasFailed && "border-red-500/30")}>
+      <button
+        className={cn(
+          "w-full flex items-center gap-3 p-3 text-left hover:bg-muted/50 transition-colors",
+          hasFailed ? "bg-red-500/5" : allPassed ? "bg-green-500/5" : ""
+        )}
+        onClick={onToggle}
+      >
+        {isExpanded ? (
+          <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+        ) : (
+          <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+        )}
+
+        <div className="flex-1 min-w-0">
+          <div className="font-medium truncate">{suite.name}</div>
+          {suite.file && (
+            <div className="text-xs text-muted-foreground truncate">{suite.file}</div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {stats.passed > 0 && (
+            <Badge className="bg-green-500 text-xs">{stats.passed}</Badge>
+          )}
+          {stats.failed > 0 && (
+            <Badge className="bg-red-500 text-xs">{stats.failed}</Badge>
+          )}
+          {stats.skipped > 0 && (
+            <Badge variant="secondary" className="text-xs">{stats.skipped}</Badge>
+          )}
+          <span className="text-xs text-muted-foreground">{formatDuration(suite.duration)}</span>
+        </div>
+      </button>
+
+      {isExpanded && (
+        <div className="border-t">
+          {filteredTests.map((test) => {
+            const config = statusConfig[test.status]
+            const Icon = config.icon
+
+            return (
+              <div
+                key={test.id}
+                className={cn(
+                  "flex items-start gap-3 p-3 border-b last:border-b-0 hover:bg-muted/30 cursor-pointer",
+                  config.bgColor
+                )}
+                onClick={() => onTestClick?.(test)}
+              >
+                <Icon className={cn("h-4 w-4 mt-0.5 shrink-0", config.color)} />
+
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium">{test.name}</div>
+                  {test.errorMessage && (
+                    <div className="text-xs text-red-500 mt-1 line-clamp-2">{test.errorMessage}</div>
+                  )}
+                  {test.file && (
+                    <button
+                      className="text-xs text-primary hover:underline mt-1"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onViewFile?.(test.file!, test.line)
+                      }}
+                    >
+                      {test.file}:{test.line}
+                    </button>
+                  )}
+                </div>
+
+                <span className="text-xs text-muted-foreground shrink-0">
+                  {formatDuration(test.duration)}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WakaTestReport({
+  suites,
+  coverage,
+  title = "Test Report",
+  onTestClick,
+  onViewFile,
+  showFailedOnly = false,
+  className,
+}: WakaTestReportProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [expandedSuites, setExpandedSuites] = React.useState<Set<string>>(new Set())
+  const [filterFailed, setFilterFailed] = React.useState(showFailedOnly)
+
+  // Calculate overall stats
+  const stats = React.useMemo(() => {
+    let passed = 0
+    let failed = 0
+    let skipped = 0
+    let duration = 0
+
+    suites.forEach((suite) => {
+      suite.tests.forEach((test) => {
+        if (test.status === "passed") passed++
+        if (test.status === "failed") failed++
+        if (test.status === "skipped") skipped++
+      })
+      duration += suite.duration
+    })
+
+    return { passed, failed, skipped, total: passed + failed + skipped, duration }
+  }, [suites])
+
+  const toggleSuite = (id: string) => {
+    setExpandedSuites((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const expandAll = () => {
+    setExpandedSuites(new Set(suites.map((s) => s.id)))
+  }
+
+  const collapseAll = () => {
+    setExpandedSuites(new Set())
+  }
+
+  // Filter suites
+  const filteredSuites = filterFailed
+    ? suites.filter((s) => s.tests.some((t) => t.status === "failed"))
+    : suites
+
+  return (
+    <div className={cn("flex flex-col border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-3">
+          <FileText className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {stats.passed > 0 && (
+            <Badge className="bg-green-500">{stats.passed} passed</Badge>
+          )}
+          {stats.failed > 0 && (
+            <Badge className="bg-red-500">{stats.failed} failed</Badge>
+          )}
+          {stats.skipped > 0 && (
+            <Badge variant="secondary">{stats.skipped} skipped</Badge>
+          )}
+          <span className="text-sm text-muted-foreground">{formatDuration(stats.duration)}</span>
+        </div>
+      </div>
+
+      {/* Coverage */}
+      {coverage && (
+        <div className="p-4 border-b bg-muted/30">
+          <div className="flex items-center gap-2 mb-3">
+            <BarChart3 className="h-4 w-4" />
+            <span className="font-medium text-sm">Code Coverage</span>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <CoverageBar
+              label="Lines"
+              covered={coverage.lines.covered}
+              total={coverage.lines.total}
+              percentage={coverage.lines.percentage}
+            />
+            <CoverageBar
+              label="Branches"
+              covered={coverage.branches.covered}
+              total={coverage.branches.total}
+              percentage={coverage.branches.percentage}
+            />
+            <CoverageBar
+              label="Functions"
+              covered={coverage.functions.covered}
+              total={coverage.functions.total}
+              percentage={coverage.functions.percentage}
+            />
+            <CoverageBar
+              label="Statements"
+              covered={coverage.statements.covered}
+              total={coverage.statements.total}
+              percentage={coverage.statements.percentage}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 p-2 border-b">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search tests..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-8"
+          />
+        </div>
+
+        <Button
+          variant={filterFailed ? "default" : "outline"}
+          size="sm"
+          className="h-8"
+          onClick={() => setFilterFailed(!filterFailed)}
+        >
+          <AlertTriangle className="h-4 w-4 mr-1" />
+          Failed only
+        </Button>
+
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="sm" className="h-8" onClick={expandAll}>
+            Expand All
+          </Button>
+          <Button variant="ghost" size="sm" className="h-8" onClick={collapseAll}>
+            Collapse All
+          </Button>
+        </div>
+      </div>
+
+      {/* Test suites */}
+      <ScrollArea className="flex-1 max-h-[500px]">
+        <div className="p-3 space-y-2">
+          {filteredSuites.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <CheckCircle2 className="h-8 w-8 mb-2" />
+              <span>No tests to display</span>
+            </div>
+          ) : (
+            filteredSuites.map((suite) => (
+              <TestSuiteCard
+                key={suite.id}
+                suite={suite}
+                isExpanded={expandedSuites.has(suite.id)}
+                onToggle={() => toggleSuite(suite.id)}
+                onTestClick={onTestClick}
+                onViewFile={onViewFile}
+                searchQuery={searchQuery}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-3 py-2 border-t bg-muted/30 text-sm">
+        <span className="text-muted-foreground">
+          {suites.length} test suites, {stats.total} tests
+        </span>
+        <span className={cn(
+          "font-medium",
+          stats.failed > 0 ? "text-red-500" : "text-green-500"
+        )}>
+          {stats.failed > 0
+            ? `${stats.failed} tests failed`
+            : "All tests passed"}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// Default sample data for demo
+export const defaultTestSuites: TestSuite[] = [
+  {
+    id: "1",
+    name: "Authentication",
+    file: "src/auth/__tests__/auth.test.ts",
+    duration: 2450,
+    tests: [
+      { id: "1-1", name: "should login with valid credentials", status: "passed", duration: 245, file: "src/auth/__tests__/auth.test.ts", line: 15 },
+      { id: "1-2", name: "should reject invalid password", status: "passed", duration: 128, file: "src/auth/__tests__/auth.test.ts", line: 32 },
+      { id: "1-3", name: "should refresh token before expiry", status: "passed", duration: 512, file: "src/auth/__tests__/auth.test.ts", line: 48 },
+      { id: "1-4", name: "should handle logout correctly", status: "passed", duration: 89, file: "src/auth/__tests__/auth.test.ts", line: 65 },
+    ],
+  },
+  {
+    id: "2",
+    name: "User Service",
+    file: "src/users/__tests__/users.test.ts",
+    duration: 3200,
+    tests: [
+      { id: "2-1", name: "should create a new user", status: "passed", duration: 345 },
+      { id: "2-2", name: "should update user profile", status: "failed", duration: 156, errorMessage: "Expected status 200 but got 500", stackTrace: "Error: Request failed\n  at UserService.update (src/users/service.ts:45)" },
+      { id: "2-3", name: "should delete user", status: "passed", duration: 234 },
+      { id: "2-4", name: "should list users with pagination", status: "skipped", duration: 0 },
+    ],
+  },
+  {
+    id: "3",
+    name: "API Integration",
+    file: "src/api/__tests__/integration.test.ts",
+    duration: 8500,
+    tests: [
+      { id: "3-1", name: "should handle concurrent requests", status: "passed", duration: 2500 },
+      { id: "3-2", name: "should retry on network failure", status: "passed", duration: 1800 },
+      { id: "3-3", name: "should timeout after 30s", status: "passed", duration: 3200 },
+    ],
+  },
+]
+
+export const defaultCoverage: CoverageReport = {
+  lines: { covered: 1245, total: 1500, percentage: 83.0 },
+  branches: { covered: 89, total: 120, percentage: 74.2 },
+  functions: { covered: 156, total: 180, percentage: 86.7 },
+  statements: { covered: 1380, total: 1650, percentage: 83.6 },
+}