create-appraisejs 0.1.10-alpha.8 → 0.2.0-alpha.1

package/templates/default/src/app/(base)/reports/[id]/page.tsx

@@ -8,7 +8,7 @@ import {
   StepStatus,
   Prisma,
 } from '@prisma/client'
-import { Calendar, CheckCircle, Clock, Compass, Flame, Info, XCircle } from 'lucide-react'
+import { Calendar, ChartLine, CheckCircle, Clock, Compass, Flame, Info, XCircle } from 'lucide-react'
 import { Metadata } from 'next'
 import ReportMetricCard from '../report-metric-card'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -53,6 +53,7 @@ type ReportDetailWithRelations = Prisma.ReportGetPayload<{
                 tags: true
               }
             }
+            testSuite: true
           }
         }
         reportScenario: {
@@ -343,6 +344,7 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
   const totalTests = report.testCases.length
   const passedTests = report.testCases.filter(rtc => rtc.testRunTestCase.result === 'PASSED').length
   const failedTests = report.testCases.filter(rtc => rtc.testRunTestCase.result === 'FAILED').length
+  const untestedTests = report.testCases.filter(rtc => rtc.testRunTestCase.result === 'UNTESTED').length
 
   // Calculate overview chart data
   const overviewData = [
@@ -418,39 +420,41 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
 
   return (
     <>
-      <div className="flex justify-between">
-        <div>
-          <PageHeader className="mb-2 flex items-center gap-2 text-3xl">
-            <div>
-              <span>Test Run Report: </span>
-              <span>{report.testRun.name}</span>
-            </div>
-            {testRunResultToBadge(testRun.result)}
-          </PageHeader>
-          <div className="flex gap-2">
-            {testRun.completedAt && (
-              <div className="flex items-center gap-1 text-sm text-gray-400">
-                <Calendar className="h-4 w-4" />
-                {formatDateTime(testRun.completedAt)}
-              </div>
-            )}
-            {testRun.completedAt && testRun.startedAt && (
-              <div className="flex items-center gap-1 text-sm text-gray-400">
-                <Clock className="h-4 w-4" />
-                {formatDuration(testRun.startedAt, testRun.completedAt)}
-              </div>
-            )}
-          </div>
+
+      <div>
+        <div className="w-fit mb-2">
+          {testRunResultToBadge(testRun.result)}
         </div>
-        <div className="flex w-1/2 justify-between gap-1">
-          <ReportMetricCard title="Total Tests" value={totalTests.toString()} />
-          <ReportMetricCard title="Passed" value={passedTests.toString()} />
-          <ReportMetricCard title="Failed" value={failedTests.toString()} />
+        <PageHeader className="mb-2 text-4xl">
+          <div>
+            <span>Test Run Report: </span>
+            <span>{report.testRun.name}</span>
+          </div>
+        </PageHeader>
+        <div className="flex gap-2">
+          {testRun.completedAt && (
+            <div className="flex items-center gap-1 text-sm text-gray-400">
+              <Calendar className="h-4 w-4" />
+              {formatDateTime(testRun.completedAt)}
+            </div>
+          )}
+          {testRun.completedAt && testRun.startedAt && (
+            <div className="flex items-center gap-1 text-sm text-gray-400">
+              <Clock className="h-4 w-4" />
+              {formatDuration(testRun.startedAt, testRun.completedAt)}
+            </div>
+          )}
         </div>
       </div>
+      <div className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <ReportMetricCard title="Total Tests" value={totalTests.toString()} />
+        <ReportMetricCard title="Passed" value={passedTests.toString()} />
+        <ReportMetricCard title="Failed" value={failedTests.toString()} />
+        <ReportMetricCard title="Untested" value={untestedTests.toString()} />
+      </div>
       <Separator className="my-4 bg-muted" />
       <div className="flex gap-6">
-        <Card className="flex h-[420px] min-w-0 flex-1 flex-col">
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col shadow-none bg-gray-500/10 border-none">
           <CardHeader className="flex-shrink-0">
             <div className="flex items-center gap-2">
               <Info className="h-6 w-6" />
@@ -484,13 +488,16 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
             </div>
           </CardContent>
         </Card>
-        <Card className="flex h-[420px] min-w-0 flex-1 flex-col">
-          <CardHeader className="flex-shrink-0">
-            <CardTitle>Visualizations</CardTitle>
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col shadow-none bg-gray-500/10 border-none">
+          <CardHeader className="flex-shrink-0 ">
+            <div className="flex items-center gap-2">
+              <ChartLine className="h-6 w-6" />
+              <CardTitle className="text-lg font-semibold">Visualizations</CardTitle>
+            </div>
           </CardHeader>
           <CardContent className="flex flex-1 flex-col overflow-hidden">
             <Tabs defaultValue="overview" className="flex min-w-0 flex-1 flex-col overflow-hidden">
-              <TabsList className="flex-shrink-0">
+              <TabsList className="flex-shrink-0 bg-gray-500/15 w-fit mx-auto p-2">
                 <TabsTrigger value="overview">Overview</TabsTrigger>
                 <TabsTrigger value="feature">Feature</TabsTrigger>
                 <TabsTrigger value="duration">Duration</TabsTrigger>

package/templates/default/src/app/(base)/reports/duration-chart.tsx

@@ -1,33 +1,33 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-export default function DurationChart({
-  config,
-  data,
-}: {
-  config: ChartConfig
-  data: Array<{ feature: string; duration: number }>
-}) {
-  return (
-    <>
-      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Duration by Feature(Seconds)</p>
-      <ChartContainer config={config} className="min-h-[300px] w-full">
-        <BarChart
-          accessibilityLayer
-          data={data}
-          layout="vertical"
-          margin={{
-            left: 5,
-          }}
-        >
-          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
-          <XAxis dataKey="duration" type="number" hide />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Bar dataKey="duration" fill="oklch(54.6% 0.245 262.881)" />
-        </BarChart>
-      </ChartContainer>
-    </>
-  )
-}
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+export default function DurationChart({
+  config,
+  data,
+}: {
+  config: ChartConfig
+  data: Array<{ feature: string; duration: number }>
+}) {
+  return (
+    <>
+      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Duration by Feature(Seconds)</p>
+      <ChartContainer config={config} className="min-h-[300px] w-full">
+        <BarChart
+          accessibilityLayer
+          data={data}
+          layout="vertical"
+          margin={{
+            left: 5,
+          }}
+        >
+          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
+          <XAxis dataKey="duration" type="number" hide />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Bar dataKey="duration" fill="oklch(54.6% 0.245 262.881)" />
+        </BarChart>
+      </ChartContainer>
+    </>
+  )
+}

package/templates/default/src/app/(base)/reports/feature-chart.tsx

@@ -1,78 +1,78 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-interface FeatureChartProps {
-  config: ChartConfig
-  data: Array<{
-    feature: string
-    passed: number
-    failed: number
-    cancelled: number
-    unknown: number
-    total: number
-  }>
-}
-
-export default function FeatureChart({ config, data }: FeatureChartProps) {
-  // Calculate height based on number of items (each bar needs ~40px)
-  // Set a maximum height to prevent bars from becoming too thick when there are few items
-  const barHeight = 40
-  const maxHeight = 300 // Maximum height to prevent bars from becoming too thick
-  const calculatedHeight = data.length * barHeight
-  const minHeight = Math.min(Math.max(calculatedHeight, 200), maxHeight) // Cap at maxHeight
-
-  return (
-    <>
-      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Results by Feature</p>
-      <ChartContainer
-        config={config}
-        className="min-h-[200px] w-full"
-        style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
-      >
-        <BarChart
-          accessibilityLayer
-          data={data}
-          layout="vertical"
-          barCategoryGap="20%"
-          margin={{
-            left: 5,
-          }}
-        >
-          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
-          <XAxis dataKey="total" type="number" hide />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Bar
-            dataKey="passed"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['passed']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="failed"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['failed']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="cancelled"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['cancelled']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="unknown"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['unknown']?.color as string}
-            stroke="none"
-          />
-        </BarChart>
-      </ChartContainer>
-    </>
-  )
-}
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+interface FeatureChartProps {
+  config: ChartConfig
+  data: Array<{
+    feature: string
+    passed: number
+    failed: number
+    cancelled: number
+    unknown: number
+    total: number
+  }>
+}
+
+export default function FeatureChart({ config, data }: FeatureChartProps) {
+  // Calculate height based on number of items (each bar needs ~40px)
+  // Set a maximum height to prevent bars from becoming too thick when there are few items
+  const barHeight = 40
+  const maxHeight = 300 // Maximum height to prevent bars from becoming too thick
+  const calculatedHeight = data.length * barHeight
+  const minHeight = Math.min(Math.max(calculatedHeight, 200), maxHeight) // Cap at maxHeight
+
+  return (
+    <>
+      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Results by Feature</p>
+      <ChartContainer
+        config={config}
+        className="min-h-[200px] w-full"
+        style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
+      >
+        <BarChart
+          accessibilityLayer
+          data={data}
+          layout="vertical"
+          barCategoryGap="20%"
+          margin={{
+            left: 5,
+          }}
+        >
+          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
+          <XAxis dataKey="total" type="number" hide />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Bar
+            dataKey="passed"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['passed']?.color as string}
+            stroke="none"
+          />
+          <Bar
+            dataKey="failed"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['failed']?.color as string}
+            stroke="none"
+          />
+          <Bar
+            dataKey="cancelled"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['cancelled']?.color as string}
+            stroke="none"
+          />
+          <Bar
+            dataKey="unknown"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['unknown']?.color as string}
+            stroke="none"
+          />
+        </BarChart>
+      </ChartContainer>
+    </>
+  )
+}

package/templates/default/src/app/(base)/reports/overview-chart.tsx

@@ -1,46 +1,49 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Pie, PieChart, Label } from 'recharts'
-
-interface OverviewChartProps {
-  config: ChartConfig
-  data: Array<{ result: string; value: number; fill: string }>
-}
-
-const calculatePassRate = (data: Array<{ result: string; value: number; fill: string }>) => {
-  const total = data.reduce((acc, curr) => acc + curr.value, 0)
-  const passed = data.find(item => item.result === 'passed')?.value || 0
-  return Math.round((passed / total) * 100)
-}
-
-export default function OverviewChart({ config, data }: OverviewChartProps) {
-  return (
-    <>
-      <p className="mt-2 text-center text-xs text-muted-foreground">Status(%) by Feature</p>
-      <ChartContainer config={config} className="mx-auto aspect-square max-h-[250px]">
-        <PieChart>
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Pie data={data} dataKey="value" nameKey="result" innerRadius={60} strokeWidth={5}>
-            <Label
-              content={({ viewBox }) => {
-                if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                  return (
-                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
-                      <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
-                        {calculatePassRate(data)}%
-                      </tspan>
-                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
-                        Pass Rate
-                      </tspan>
-                    </text>
-                  )
-                }
-              }}
-            />
-          </Pie>
-        </PieChart>
-      </ChartContainer>
-    </>
-  )
-}
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Pie, PieChart, Label } from 'recharts'
+
+interface OverviewChartProps {
+  config: ChartConfig
+  data: Array<{ result: string; value: number; fill: string }>
+}
+
+const calculatePassRate = (data: Array<{ result: string; value: number; fill: string }>) => {
+  const total = data.reduce((acc, curr) => acc + curr.value, 0)
+  if (total === 0) {
+    return 0
+  }
+  const passed = data.find(item => item.result === 'passed')?.value || 0
+  return Math.round((passed / total) * 100)
+}
+
+export default function OverviewChart({ config, data }: OverviewChartProps) {
+  return (
+    <>
+      <p className="mt-2 text-center text-xs text-muted-foreground">Status(%) by Feature</p>
+      <ChartContainer config={config} className="mx-auto aspect-square max-h-[250px]">
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie data={data} dataKey="value" nameKey="result" innerRadius={60} strokeWidth={5}>
+            <Label
+              content={({ viewBox }) => {
+                if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                  return (
+                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                      <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+                        {calculatePassRate(data)}%
+                      </tspan>
+                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+                        Pass Rate
+                      </tspan>
+                    </text>
+                  )
+                }
+              }}
+            />
+          </Pie>
+        </PieChart>
+      </ChartContainer>
+    </>
+  )
+}

package/templates/default/src/app/(base)/reports/page.tsx

@@ -1,98 +1,98 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { FileCheck } from 'lucide-react'
-import { Metadata } from 'next'
-import ReportTable from './report-table'
-import EmptyState from '@/components/data-state/empty-state'
-import { getAllReportsAction } from '@/actions/reports/report-actions'
-import { Prisma } from '@prisma/client'
-
-type ReportWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-          }
-        }
-      }
-    }
-  }
-}>
-
-export const metadata: Metadata = {
-  title: 'Appraise | Reports',
-  description: 'Manage reports for test runs',
-}
-
-const Reports = async () => {
-  const { data: reports, error: reportsError } = await getAllReportsAction()
-
-  if (reportsError) {
-    return <div>Error: {reportsError}</div>
-  }
-
-  // Type guard to validate the data structure
-  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
-    if (!Array.isArray(data)) return false
-    return data.every(
-      item =>
-        item &&
-        typeof item === 'object' &&
-        'id' in item &&
-        'testRun' in item &&
-        'testCases' in item &&
-        Array.isArray(item.testCases),
-    )
-  }
-
-  if (!reports || !isValidReportData(reports)) {
-    return <div>Error: Invalid report data format</div>
-  }
-
-  if (!reports || reports.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<FileCheck className="h-8 w-8" />}
-          title="No reports found"
-          description="Get started by creating a test run to generate reports"
-          createRoute="/test-runs/create"
-          createText="Create Test Run"
-        />
-      </div>
-    )
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <FileCheck className="mr-2 h-8 w-8" />
-            Reports
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Review test execution details, identify patterns, and optimize performance</HeaderSubtitle>
-      </div>
-      <ReportTable />
-    </>
-  )
-}
-
-export default Reports
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { FileCheck } from 'lucide-react'
+import { Metadata } from 'next'
+import ReportTable from './report-table'
+import EmptyState from '@/components/data-state/empty-state'
+import { getAllReportsAction } from '@/actions/reports/report-actions'
+import { Prisma } from '@prisma/client'
+
+type ReportWithRelations = Prisma.ReportGetPayload<{
+  include: {
+    testRun: {
+      include: {
+        environment: true
+        tags: true
+      }
+    }
+    testCases: {
+      include: {
+        testRunTestCase: {
+          include: {
+            testCase: {
+              include: {
+                tags: true
+              }
+            }
+          }
+        }
+        reportScenario: {
+          include: {
+            reportFeature: true
+          }
+        }
+      }
+    }
+  }
+}>
+
+export const metadata: Metadata = {
+  title: 'Appraise | Reports',
+  description: 'Manage reports for test runs',
+}
+
+const Reports = async () => {
+  const { data: reports, error: reportsError } = await getAllReportsAction()
+
+  if (reportsError) {
+    return <div>Error: {reportsError}</div>
+  }
+
+  // Type guard to validate the data structure
+  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
+    if (!Array.isArray(data)) return false
+    return data.every(
+      item =>
+        item &&
+        typeof item === 'object' &&
+        'id' in item &&
+        'testRun' in item &&
+        'testCases' in item &&
+        Array.isArray(item.testCases),
+    )
+  }
+
+  if (!reports || !isValidReportData(reports)) {
+    return <div>Error: Invalid report data format</div>
+  }
+
+  if (!reports || reports.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<FileCheck className="h-8 w-8" />}
+          title="No reports found"
+          description="Get started by creating a test run to generate reports"
+          createRoute="/test-runs/create"
+          createText="Create Test Run"
+        />
+      </div>
+    )
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <FileCheck className="mr-2 h-8 w-8" />
+            Reports
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Review test execution details, identify patterns, and optimize performance</HeaderSubtitle>
+      </div>
+      <ReportTable />
+    </>
+  )
+}
+
+export default Reports