create-appraisejs 0.2.0 → 0.3.0-alpha.0

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

@@ -1,59 +1,59 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React from 'react'
-import { Code } from 'lucide-react'
-import ModuleTable from './module-table'
-import { Suspense } from 'react'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { getAllModulesAction } from '@/actions/modules/module-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { Module } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modules',
-  description: 'Manage application modules and their configurations',
-}
-
-const Modules = async () => {
-  const { data: modules, error: modulesError } = await getAllModulesAction()
-
-  if (modulesError) {
-    return <div>Error: {modulesError}</div>
-  }
-
-  const modulesData = modules as (Module & { parent: { name: string } })[]
-
-  if (!modulesData || modulesData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<Code className="h-8 w-8" />}
-          title="No modules found"
-          description="Get started by creating a module to organize your application components"
-          createRoute="/modules/create"
-          createText="Create Module"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Code className="mr-2 h-8 w-8" />
-            Modules
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Modules are the components that are used to build the application</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <ModuleTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default Modules
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import { Code } from 'lucide-react'
+import ModuleTable from './module-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Metadata } from 'next'
+import { getModuleTableRows } from './module-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modules',
+  description: 'Manage application modules and their configurations',
+}
+
+const Modules = async () => {
+  const { data: modules, error: modulesError } = await getAllModulesAction()
+
+  if (modulesError) {
+    return <div>Error: {modulesError}</div>
+  }
+
+  const modulesData = getModuleTableRows(modules)
+
+  if (!modulesData || modulesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Code className="h-8 w-8" />}
+          title="No modules found"
+          description="Get started by creating a module to organize your application components"
+          createRoute="/modules/create"
+          createText="Create Module"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Code className="mr-2 h-8 w-8" />
+            Modules
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Modules are the components that are used to build the application</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <ModuleTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default Modules

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

@@ -1,144 +1,38 @@
 import PageHeader from '@/components/typography/page-header'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
-import {
-  BrowserEngine,
-  TestRunResult,
-  TestRunStatus,
-  StepStatus,
-  Prisma,
-} from '@prisma/client'
-import { Calendar, ChartLine, CheckCircle, Clock, Compass, Flame, Info, XCircle } from 'lucide-react'
+import { BrowserEngine, TestRunResult, TestRunStatus } from '@prisma/client'
+import { Calendar, ChartLine, CheckCircle, Clock, Info, XCircle } from 'lucide-react'
 import { Metadata } from 'next'
 import ReportMetricCard from '../report-metric-card'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { ChartConfig } from '@/components/ui/chart'
 import OverviewChart from '../overview-chart'
 import FeatureChart from '../feature-chart'
 import DurationChart from '../duration-chart'
 import ReportViewTable from '../report-view-table'
 import { getReportByIdAction } from '@/actions/reports/report-actions'
 import { notFound } from 'next/navigation'
-
-/**
- * Type for report detail with all relations from getReportByIdAction
- */
-type ReportDetailWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    features: {
-      include: {
-        tags: true
-        scenarios: {
-          include: {
-            tags: true
-            steps: true
-            hooks: true
-          }
-        }
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-            testSuite: true
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-            tags: true
-            steps: {
-              orderBy: {
-                order: 'asc'
-              }
-            }
-            hooks: true
-          }
-        }
-      }
-    }
-  }
-}>
+import {
+  browserIcons,
+  durationByFeatureBarChartConfig,
+  formatDateTime,
+  formatDuration,
+  getDurationData,
+  getFeatureData,
+  getOverviewData,
+  getReportMetrics,
+  isValidReportDetail,
+  overViewPieChartConfig,
+  resultByFeatureBarChartConfig,
+  type ReportDetailWithRelations,
+} from '../report-detail-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | View Report',
   description: 'View report details and live logs',
 }
 
-const colorMap = {
-  passed: 'oklch(59.6% 0.145 163.225)',
-  failed: 'oklch(59.2% 0.249 0.584)',
-  cancelled: 'oklch(55.4% 0.046 257.417)',
-  unknown: 'oklch(79.5% 0.184 86.047)',
-  default: 'oklch(54.6% 0.245 262.881)',
-}
-
-const overViewPieChartConfig = {
-  value: {
-    label: 'Value',
-  },
-  passed: {
-    label: 'Passed',
-    color: colorMap.passed,
-  },
-  failed: {
-    label: 'Failed',
-    color: colorMap.failed,
-  },
-  cancelled: {
-    label: 'Cancelled',
-    color: colorMap.cancelled,
-  },
-  unknown: {
-    label: 'Unknown',
-    color: colorMap.unknown,
-  },
-} satisfies ChartConfig
-
-const resultByFeatureBarChartConfig = {
-  feature: {
-    label: 'Feature',
-  },
-  passed: {
-    label: 'Passed',
-    color: colorMap.passed,
-  },
-  failed: {
-    label: 'Failed',
-    color: colorMap.failed,
-  },
-  cancelled: {
-    label: 'Cancelled',
-    color: colorMap.cancelled,
-  },
-  unknown: {
-    label: 'Unknown',
-    color: colorMap.unknown,
-  },
-} satisfies ChartConfig
-
-const durationByFeatureBarChartConfig = {
-  feature: {
-    label: 'Feature',
-  },
-  duration: {
-    label: 'Duration',
-  },
-} satisfies ChartConfig
-
 const testRunResultToBadge = (result: TestRunResult) => {
   switch (result) {
     case TestRunResult.PASSED:
@@ -184,51 +78,6 @@ const testRunResultToBadge = (result: TestRunResult) => {
   }
 }
 
-const formatDateTime = (date: Date) => {
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-const formatDuration = (startDate: Date, endDate: Date) => {
-  const diffInMs = endDate.getTime() - startDate.getTime()
-  const totalSeconds = Math.floor(diffInMs / 1000)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-
-  return `${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`
-}
-
-const browserIcons = {
-  [BrowserEngine.CHROMIUM]: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-4 w-4"
-    >
-      <path d="M10.88 21.94 15.46 14" />
-      <path d="M21.17 8H12" />
-      <path d="M3.95 6.06 8.54 14" />
-      <circle cx="12" cy="12" r="10" />
-      <circle cx="12" cy="12" r="4" />
-    </svg>
-  ),
-  [BrowserEngine.FIREFOX]: <Flame className="h-4 w-4" />,
-  [BrowserEngine.WEBKIT]: <Compass className="h-4 w-4" />,
-}
-
 const browserEngineToBadge = (browserEngine: BrowserEngine) => {
   switch (browserEngine) {
     case BrowserEngine.CHROMIUM:
@@ -317,22 +166,6 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
     notFound()
   }
 
-  // Type guard to validate the data structure
-  const isValidReportDetail = (data: unknown): data is ReportDetailWithRelations => {
-    if (!data || typeof data !== 'object') return false
-    const report = data as Record<string, unknown>
-    return (
-      'id' in report &&
-      'testRun' in report &&
-      'testCases' in report &&
-      'features' in report &&
-      Array.isArray(report.testCases) &&
-      Array.isArray(report.features) &&
-      report.testRun !== null &&
-      typeof report.testRun === 'object'
-    )
-  }
-
   if (!isValidReportDetail(reportResponse.data)) {
     notFound()
   }
@@ -340,83 +173,10 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
   const report: ReportDetailWithRelations = reportResponse.data
   const testRun = report.testRun
 
-  // Calculate metrics from report data
-  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 = [
-    {
-      result: 'passed',
-      value: passedTests,
-      fill: colorMap.passed,
-    },
-    {
-      result: 'failed',
-      value: failedTests,
-      fill: colorMap.failed,
-    },
-    {
-      result: 'cancelled',
-      value: report.testCases.filter(rtc => rtc.testRunTestCase.result === 'UNTESTED').length,
-      fill: colorMap.cancelled,
-    },
-    {
-      result: 'unknown',
-      value: 0,
-      fill: colorMap.unknown,
-    },
-  ]
-
-  // Calculate feature chart data
-  const featureData = report.features.map(feature => {
-    const scenarios = feature.scenarios
-    const passed = scenarios.filter(
-      s =>
-        s.steps.every(step => step.status === StepStatus.PASSED) &&
-        s.hooks.every(hook => hook.status === StepStatus.PASSED),
-    ).length
-    const failed = scenarios.filter(
-      s =>
-        s.steps.some(step => step.status === StepStatus.FAILED) ||
-        s.hooks.some(hook => hook.status === StepStatus.FAILED),
-    ).length
-    const cancelled = scenarios.filter(
-      s =>
-        s.steps.some(step => step.status === StepStatus.SKIPPED) ||
-        s.hooks.some(hook => hook.status === StepStatus.SKIPPED),
-    ).length
-    const unknown = scenarios.length - passed - failed - cancelled
-
-    return {
-      feature: feature.name,
-      passed,
-      failed,
-      cancelled,
-      unknown,
-      total: scenarios.length,
-    }
-  })
-
-  const nanoSecondsToSeconds = (nanoSeconds: number) => {
-    return (nanoSeconds / 1000000000).toFixed(2)
-  }
-
-  // Calculate duration chart data
-  const durationData = report.features.map(feature => {
-    const totalDuration = feature.scenarios.reduce((total, scenario) => {
-      const scenarioDuration =
-        scenario.steps.reduce((stepTotal, step) => stepTotal + Number(step.duration), 0) +
-        scenario.hooks.reduce((hookTotal, hook) => hookTotal + Number(hook.duration), 0)
-      return total + scenarioDuration
-    }, 0)
-    return {
-      feature: feature.name,
-      duration: Number(nanoSecondsToSeconds(totalDuration)), // Convert nanoseconds to seconds
-    }
-  })
+  const { totalTests, passedTests, failedTests, untestedTests } = getReportMetrics(report)
+  const overviewData = getOverviewData(report)
+  const featureData = getFeatureData(report)
+  const durationData = getDurationData(report)
 
   return (
     <>

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,79 @@
-'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
+  /** Stacked segments are counts; `total` should equal the sum of the four outcome columns (used for the value axis). */
+  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>
+    </>
+  )
+}