@shirokuma-library/shirokuma-docs 0.1.0-alpha.5

package/portal/app/test-cases/[file]/[line]/test-detail-document.tsx

@@ -0,0 +1,335 @@
+/**
+ * Test Case Detail - ドキュメント形式表示
+ *
+ * 個別テストケースの詳細をテーブル形式で表示
+ */
+
+import Link from "next/link";
+import {
+  FlaskConical,
+  CheckCircle2,
+  AlertTriangle,
+  Shield,
+  AlertCircle,
+  Layers,
+  GitBranch,
+  ArrowRight,
+  FileCode,
+  Target,
+  FileText,
+  ExternalLink,
+  ListChecks,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { DocSection, DocTable, type DocTableColumn } from "@/components/document";
+import { encodeFilePath } from "@/lib/path-utils";
+import type { TestCase } from "@/lib/types";
+
+// Category config
+const categoryConfig: Record<
+  string,
+  { icon: React.ElementType; color: string; bgColor: string; label: string }
+> = {
+  "happy-path": { icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500/10", label: "正常系" },
+  auth: { icon: Shield, color: "text-blue-500", bgColor: "bg-blue-500/10", label: "認証" },
+  "error-handling": { icon: AlertCircle, color: "text-red-500", bgColor: "bg-red-500/10", label: "異常系" },
+  validation: { icon: AlertTriangle, color: "text-yellow-500", bgColor: "bg-yellow-500/10", label: "バリデーション" },
+  "edge-case": { icon: Layers, color: "text-purple-500", bgColor: "bg-purple-500/10", label: "境界値" },
+  integration: { icon: GitBranch, color: "text-cyan-500", bgColor: "bg-cyan-500/10", label: "統合" },
+  other: { icon: FlaskConical, color: "text-gray-500", bgColor: "bg-gray-500/10", label: "その他" },
+  success: { icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500/10", label: "正常系" },
+  error: { icon: AlertCircle, color: "text-red-500", bgColor: "bg-red-500/10", label: "異常系" },
+  edge: { icon: Layers, color: "text-purple-500", bgColor: "bg-purple-500/10", label: "境界値" },
+  unknown: { icon: FlaskConical, color: "text-gray-500", bgColor: "bg-gray-500/10", label: "その他" },
+};
+
+interface InfoRow {
+  label: string;
+  value: string;
+}
+
+interface RelatedTestRow {
+  line: number;
+  name: string;
+  category: string;
+  categoryLabel: string;
+  categoryColor: string;
+}
+
+interface DescribeDocRow {
+  name: string;
+  description?: string;
+  purpose?: string;
+}
+
+interface TestDetailDocumentProps {
+  test: TestCase;
+  file: string;
+  relatedTests: TestCase[];
+  relatedSource?: {
+    type: string;
+    module: string;
+    name: string;
+    path: string;
+  } | null;
+  fileStats?: {
+    module?: { detailPath?: string; name?: string };
+  };
+}
+
+export function TestDetailDocument({
+  test,
+  file,
+  relatedTests,
+  relatedSource,
+  fileStats,
+}: TestDetailDocumentProps) {
+  const config = categoryConfig[test.category || "unknown"] || categoryConfig.unknown;
+
+  // Basic info rows
+  const infoRows: InfoRow[] = [
+    { label: "ファイル", value: file },
+    { label: "describe", value: test.describe },
+    { label: "行番号", value: String(test.line) },
+    { label: "フレームワーク", value: test.framework === "playwright" ? "Playwright" : "Jest" },
+    { label: "カテゴリ", value: config.label },
+  ];
+
+  const infoColumns: DocTableColumn<InfoRow>[] = [
+    {
+      key: "label",
+      header: "項目",
+      width: "150px",
+      render: (_, row) => <span className="text-muted-foreground">{row.label}</span>,
+    },
+    {
+      key: "value",
+      header: "値",
+      render: (_, row) => <span className="font-mono text-sm">{row.value}</span>,
+    },
+  ];
+
+  // Describe docs rows
+  const describeDocRows: DescribeDocRow[] =
+    test.describeDocs?.map((doc) => ({
+      name: doc.name,
+      description: doc.testdoc,
+      purpose: doc.purpose,
+    })) || [];
+
+  const describeDocColumns: DocTableColumn<DescribeDocRow>[] = [
+    {
+      key: "name",
+      header: "名前",
+      width: "250px",
+      render: (_, row) => <span className="font-medium">{row.name}</span>,
+    },
+    {
+      key: "description",
+      header: "説明",
+      render: (_, row) => (
+        <span className="text-sm text-muted-foreground">{row.description || "-"}</span>
+      ),
+    },
+    {
+      key: "purpose",
+      header: "目的",
+      render: (_, row) => (
+        <span className="text-sm text-muted-foreground">{row.purpose || "-"}</span>
+      ),
+    },
+  ];
+
+  // Related tests rows
+  const relatedTestRows: RelatedTestRow[] = relatedTests.slice(0, 20).map((rt) => {
+    const rtConfig = categoryConfig[rt.category || "unknown"] || categoryConfig.unknown;
+    return {
+      line: rt.line,
+      name: rt.it,
+      category: rt.category || "unknown",
+      categoryLabel: rtConfig.label,
+      categoryColor: rtConfig.color,
+    };
+  });
+
+  const relatedTestColumns: DocTableColumn<RelatedTestRow>[] = [
+    {
+      key: "name",
+      header: "テスト名",
+      render: (_, row) => (
+        <Link
+          href={`/test-cases/${encodeFilePath(file)}/${row.line}`}
+          className="text-primary hover:underline flex items-center gap-1"
+        >
+          {row.name}
+          <ArrowRight className="h-3 w-3" />
+        </Link>
+      ),
+    },
+    {
+      key: "categoryLabel",
+      header: "カテゴリ",
+      width: "120px",
+      render: (_, row) => {
+        const cfg = categoryConfig[row.category] || categoryConfig.unknown;
+        const Icon = cfg.icon;
+        return (
+          <div className="flex items-center gap-1">
+            <Icon className={`h-3 w-3 ${row.categoryColor}`} />
+            <span className="text-xs">{row.categoryLabel}</span>
+          </div>
+        );
+      },
+    },
+    {
+      key: "line",
+      header: "Line",
+      width: "80px",
+      align: "right",
+      render: (_, row) => <span className="font-mono text-xs">{row.line}</span>,
+    },
+  ];
+
+  // Calculate related tests category preview
+  const relatedCatCounts: Record<string, number> = {};
+  for (const t of relatedTests) {
+    const cat = t.category || "unknown";
+    relatedCatCounts[cat] = (relatedCatCounts[cat] || 0) + 1;
+  }
+  const relatedPreview = Object.entries(relatedCatCounts)
+    .slice(0, 2)
+    .map(([cat, cnt]) => `${categoryConfig[cat]?.label || cat}:${cnt}`)
+    .join(", ");
+
+  return (
+    <div className="space-y-6">
+      {/* Basic Info */}
+      <DocSection
+        title="基本情報"
+        variant="info"
+        icon={<FileCode className="h-4 w-4" />}
+        preview={`${config.label}, Line ${test.line}`}
+        defaultOpen
+      >
+        <DocTable columns={infoColumns} data={infoRows} />
+      </DocSection>
+
+      {/* Description */}
+      {test.description && (
+        <DocSection
+          title="説明"
+          variant="default"
+          icon={<FileText className="h-4 w-4" />}
+          preview={test.description.slice(0, 50) + (test.description.length > 50 ? "..." : "")}
+          defaultOpen
+        >
+          <p className="text-foreground">{test.description}</p>
+        </DocSection>
+      )}
+
+      {/* Purpose & Expected */}
+      {(test.purpose || test.expected) && (
+        <DocSection
+          title="テスト内容"
+          variant="success"
+          icon={<Target className="h-4 w-4" />}
+          preview={test.purpose?.slice(0, 30) || test.expected?.slice(0, 30)}
+          defaultOpen
+        >
+          <div className="space-y-4">
+            {test.purpose && (
+              <div>
+                <h4 className="text-sm font-medium text-muted-foreground mb-1">目的</h4>
+                <p className="text-sm">{test.purpose}</p>
+              </div>
+            )}
+            {test.expected && (
+              <div>
+                <h4 className="text-sm font-medium text-muted-foreground mb-1">期待結果</h4>
+                <p className="text-sm">{test.expected}</p>
+              </div>
+            )}
+          </div>
+        </DocSection>
+      )}
+
+      {/* Describe Docs */}
+      {describeDocRows.length > 0 && (
+        <DocSection
+          title="テストスイート情報"
+          variant="cyan"
+          icon={<ListChecks className="h-4 w-4" />}
+          badge={<Badge variant="outline">{describeDocRows.length} describe</Badge>}
+          preview={describeDocRows[0]?.name}
+          defaultOpen
+        >
+          <DocTable columns={describeDocColumns} data={describeDocRows} />
+        </DocSection>
+      )}
+
+      {/* Related Source */}
+      {relatedSource && (
+        <DocSection
+          title="テスト対象"
+          variant="primary"
+          icon={<ExternalLink className="h-4 w-4" />}
+          preview={relatedSource.name}
+          defaultOpen
+        >
+          <Link
+            href={`/details/${relatedSource.type}/${encodeURIComponent(relatedSource.module)}/${encodeURIComponent(relatedSource.name)}`}
+            className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors group"
+          >
+            <div>
+              <p className="font-medium group-hover:text-primary transition-colors">
+                {relatedSource.name}
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {relatedSource.module} / {relatedSource.type}
+              </p>
+            </div>
+            <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          </Link>
+        </DocSection>
+      )}
+
+      {/* Module link from fileStats (fallback) */}
+      {fileStats?.module?.detailPath && !relatedSource && (
+        <DocSection
+          title="関連モジュール"
+          variant="primary"
+          icon={<ExternalLink className="h-4 w-4" />}
+          preview={fileStats.module.name}
+          defaultOpen
+        >
+          <Link
+            href={`/${fileStats.module.detailPath.replace(".html", "")}`}
+            className="flex items-center gap-2 text-primary hover:underline"
+          >
+            {fileStats.module.name || "詳細を見る"}
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+        </DocSection>
+      )}
+
+      {/* Related Tests */}
+      {relatedTestRows.length > 0 && (
+        <DocSection
+          title="同じ describe のテスト"
+          variant="default"
+          icon={<FlaskConical className="h-4 w-4" />}
+          badge={<Badge variant="secondary">{relatedTests.length} tests</Badge>}
+          preview={relatedPreview}
+          defaultOpen
+        >
+          <DocTable columns={relatedTestColumns} data={relatedTestRows} />
+          {relatedTests.length > 20 && (
+            <p className="text-xs text-muted-foreground mt-2 text-center">
+              +{relatedTests.length - 20} more tests
+            </p>
+          )}
+        </DocSection>
+      )}
+    </div>
+  );
+}

package/portal/app/test-cases/[file]/page.tsx

@@ -0,0 +1,323 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import {
+  ArrowLeft,
+  FileCode2,
+  FlaskConical,
+  CheckCircle2,
+  AlertTriangle,
+  Shield,
+  AlertCircle,
+  Layers,
+  GitBranch,
+  ExternalLink,
+  Bot,
+  Wrench,
+} from "lucide-react";
+import { loadTestCases, loadApiTools } from "@/lib/data-loader";
+import { encodeFilePath, decodeFilePath } from "@/lib/path-utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { getPortalFormat } from "@/lib/format";
+import { TestFileDocument } from "./test-file-document";
+
+export const dynamicParams = false;
+
+// MCP tool type
+interface ApiTool {
+  name: string;
+  description: string;
+  category?: string;
+  tests?: Array<{ target: string; file: string }>;
+}
+
+// Category config (supports both old and new naming conventions)
+const categoryConfig: Record<string, { icon: React.ElementType; color: string; label: string }> = {
+  // New naming convention
+  "happy-path": { icon: CheckCircle2, color: "text-green-500", label: "正常系" },
+  auth: { icon: Shield, color: "text-blue-500", label: "認証" },
+  "error-handling": { icon: AlertCircle, color: "text-red-500", label: "異常系" },
+  validation: { icon: AlertTriangle, color: "text-yellow-500", label: "バリデーション" },
+  "edge-case": { icon: Layers, color: "text-purple-500", label: "境界値" },
+  integration: { icon: GitBranch, color: "text-cyan-500", label: "統合" },
+  other: { icon: FlaskConical, color: "text-gray-500", label: "その他" },
+  // Old naming convention aliases (for backward compatibility)
+  success: { icon: CheckCircle2, color: "text-green-500", label: "正常系" },
+  error: { icon: AlertCircle, color: "text-red-500", label: "異常系" },
+  edge: { icon: Layers, color: "text-purple-500", label: "境界値" },
+  unknown: { icon: FlaskConical, color: "text-gray-500", label: "その他" },
+};
+
+export async function generateStaticParams() {
+  const data = await loadTestCases();
+  if (!data) return [];
+
+  // Get unique files
+  const files = new Set<string>();
+  for (const tc of data.testCases) {
+    files.add(tc.file);
+  }
+
+  // Use __ instead of / for URL-safe paths (Nginx decodes %2F)
+  return Array.from(files).map((file) => ({
+    file: encodeFilePath(file),
+  }));
+}
+
+interface Props {
+  params: Promise<{ file: string }>;
+}
+
+export default async function TestFilePage({ params }: Props) {
+  const { file: encodedFile } = await params;
+  const file = decodeFilePath(encodedFile);
+
+  const [data, mcpTools] = await Promise.all([
+    loadTestCases(),
+    loadApiTools() as Promise<{ tools: ApiTool[] } | null>,
+  ]);
+  if (!data) return notFound();
+
+  // Find MCP tools that have tests in this file
+  const relatedApiTools = mcpTools?.tools.filter((tool) =>
+    tool.tests?.some((t) => t.file === file)
+  ) || [];
+
+  // Get tests for this file
+  const tests = data.testCases.filter((tc) => tc.file === file);
+  if (tests.length === 0) return notFound();
+
+  // Get file stats
+  const fileStats = data.summary.fileStats?.find((fs) => fs.file === file);
+  const format = getPortalFormat();
+
+  // Group tests by describe
+  const testsByDescribe: Record<string, typeof tests> = {};
+  for (const test of tests) {
+    const describe = test.describe || "Other";
+    if (!testsByDescribe[describe]) {
+      testsByDescribe[describe] = [];
+    }
+    testsByDescribe[describe].push(test);
+  }
+
+  // Extract filename for display
+  const fileName = file.split("/").pop() || file;
+
+  // Document format
+  if (format === "document") {
+    return (
+      <div className="space-y-8">
+        {/* Header */}
+        <header>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+            <Link href="/test-cases" className="hover:text-primary transition-colors">
+              テストケース
+            </Link>
+            <span>/</span>
+            <span className="truncate">{fileName}</span>
+          </div>
+
+          <div className="flex items-start gap-4">
+            <div className="rounded-lg bg-accent-green/10 p-3">
+              <FileCode2 className="h-8 w-8 text-accent-green" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl font-bold tracking-tight truncate">{fileName}</h1>
+              <p className="mt-1 text-sm text-muted-foreground">
+                テストファイル詳細
+              </p>
+            </div>
+          </div>
+        </header>
+
+        <TestFileDocument
+          file={file}
+          encodedFile={encodedFile}
+          tests={tests}
+          fileStats={fileStats}
+          relatedApiTools={relatedApiTools}
+        />
+
+        {/* Back link */}
+        <div className="flex justify-center">
+          <Button asChild variant="ghost">
+            <Link href="/test-cases">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              テストケース一覧に戻る
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Card format (default)
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <header>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+          <Link href="/test-cases" className="hover:text-primary transition-colors">
+            テストケース
+          </Link>
+          <span>/</span>
+          <span className="truncate">{fileName}</span>
+        </div>
+
+        <div className="flex items-start gap-4">
+          <div className="rounded-lg bg-accent-green/10 p-3">
+            <FileCode2 className="h-8 w-8 text-accent-green" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h1 className="text-2xl font-bold tracking-tight truncate">{fileName}</h1>
+            <p className="mt-1 text-sm text-muted-foreground truncate">{file}</p>
+            <div className="mt-2 flex flex-wrap gap-2">
+              <Badge variant="outline">
+                {tests[0].framework === "playwright" ? "Playwright" : "Jest"}
+              </Badge>
+              <Badge variant="secondary">{tests.length} tests</Badge>
+              {fileStats?.module?.type && fileStats.module.type !== "unknown" && (
+                <Badge variant="secondary" className="capitalize">
+                  {fileStats.module.type}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Link to source if available */}
+        {fileStats?.module?.detailPath && (
+          <div className="mt-4">
+            <Button asChild variant="outline" size="sm">
+              <Link href={`/${fileStats.module.detailPath.replace(".html", "")}`}>
+                <ExternalLink className="h-4 w-4 mr-2" />
+                ソースの詳細を見る
+              </Link>
+            </Button>
+          </div>
+        )}
+      </header>
+
+      {/* Category Stats */}
+      {fileStats?.categoryStats && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">カテゴリ別テスト数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-3">
+              {Object.entries(fileStats.categoryStats)
+                .filter(([_, count]) => count > 0)
+                .map(([category, count]) => {
+                  const config = categoryConfig[category] || categoryConfig.unknown;
+                  const Icon = config.icon;
+                  return (
+                    <div key={category} className="flex items-center gap-1.5 text-sm">
+                      <Icon className={`h-4 w-4 ${config.color}`} />
+                      <span>{config.label}</span>
+                      <Badge variant="secondary" className="text-xs">{count}</Badge>
+                    </div>
+                  );
+                })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Related MCP Tools */}
+      {relatedApiTools.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Bot className="h-5 w-5 text-purple-500" />
+              関連 MCP ツール
+            </CardTitle>
+            <CardDescription>
+              このテストファイルでテストされている MCP ツール
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {relatedApiTools.map((tool) => (
+                <Button
+                  key={tool.name}
+                  asChild
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 border-purple-500/30 hover:border-purple-500/50"
+                >
+                  <Link href={`/api-tools/${tool.name}`}>
+                    <Wrench className="h-3 w-3 text-purple-500" />
+                    <span className="font-mono font-medium">{tool.name}</span>
+                  </Link>
+                </Button>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Tests grouped by describe */}
+      <div className="space-y-6">
+        {Object.entries(testsByDescribe).map(([describe, describeTests]) => (
+          <Card key={describe}>
+            <CardHeader>
+              <CardTitle className="text-lg">{describe}</CardTitle>
+              <CardDescription>{describeTests.length} テスト</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {describeTests.map((test) => {
+                  const config = categoryConfig[test.category || "unknown"] || categoryConfig.unknown;
+                  const Icon = config.icon;
+                  return (
+                    <Link
+                      key={test.line}
+                      href={`/test-cases/${encodedFile}/${test.line}`}
+                      id={`line-${test.line}`}
+                      className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors scroll-mt-20 group"
+                    >
+                      <Icon className={`h-5 w-5 mt-0.5 ${config.color}`} />
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium group-hover:text-primary transition-colors">
+                          {test.it}
+                        </p>
+                        {test.description && (
+                          <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                            {test.description}
+                          </p>
+                        )}
+                        <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+                          <Badge variant="outline" className="text-xs">{config.label}</Badge>
+                          <span>Line {test.line}</span>
+                        </div>
+                      </div>
+                    </Link>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Back link */}
+      <div className="flex justify-center">
+        <Button asChild variant="ghost">
+          <Link href="/test-cases">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            テストケース一覧に戻る
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}