create-appraisejs 0.2.0 → 0.3.0-alpha.0

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

@@ -1,49 +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)
-  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>
-    </>
-  )
-}
+'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

package/templates/default/src/app/(base)/reports/report-detail-helpers.test.ts

@@ -0,0 +1,109 @@
+import { StepStatus } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatDuration,
+  getDurationData,
+  getFeatureData,
+  getOverviewData,
+  getReportMetrics,
+  isValidReportDetail,
+} from './report-detail-helpers'
+
+function createReport() {
+  return {
+    id: 'report-1',
+    testRun: {
+      id: 'run-1',
+      name: 'Nightly',
+      environment: {
+        name: 'Staging',
+        baseUrl: 'https://example.com',
+        apiBaseUrl: 'https://api.example.com',
+      },
+      result: 'PASSED',
+      status: 'COMPLETED',
+      testWorkersCount: 2,
+      browserEngine: 'CHROMIUM',
+      startedAt: new Date('2024-01-01T00:00:00.000Z'),
+      completedAt: new Date('2024-01-01T00:00:10.000Z'),
+      tags: [],
+    },
+    testCases: [
+      {
+        testRunTestCase: {
+          result: 'PASSED',
+        },
+      },
+      {
+        testRunTestCase: {
+          result: 'FAILED',
+        },
+      },
+      {
+        testRunTestCase: {
+          result: 'UNTESTED',
+        },
+      },
+    ],
+    features: [
+      {
+        name: 'Checkout',
+        scenarios: [
+          {
+            steps: [
+              { status: StepStatus.PASSED, duration: BigInt(1_000_000_000) },
+              { status: StepStatus.PASSED, duration: BigInt(2_000_000_000) },
+            ],
+            hooks: [{ status: StepStatus.PASSED, duration: BigInt(500_000_000) }],
+          },
+          {
+            steps: [{ status: StepStatus.FAILED, duration: BigInt(1_000_000_000) }],
+            hooks: [],
+          },
+          {
+            steps: [{ status: StepStatus.SKIPPED, duration: BigInt(0) }],
+            hooks: [],
+          },
+        ],
+      },
+    ],
+  } as never
+}
+
+describe('report-detail helpers', () => {
+  it('validates report shape and formats durations', () => {
+    expect(isValidReportDetail(createReport())).toBe(true)
+    expect(formatDuration(new Date('2024-01-01T00:00:00.000Z'), new Date('2024-01-01T01:02:03.000Z'))).toBe(
+      '01h 02m 03s',
+    )
+  })
+
+  it('derives report metrics and chart datasets', () => {
+    const report = createReport()
+
+    expect(getReportMetrics(report)).toEqual({
+      totalTests: 3,
+      passedTests: 1,
+      failedTests: 1,
+      untestedTests: 1,
+    })
+    expect(getOverviewData(report).map(item => item.value)).toEqual([1, 1, 1, 0])
+    expect(getFeatureData(report)).toEqual([
+      {
+        feature: 'Checkout',
+        passed: 1,
+        failed: 1,
+        cancelled: 1,
+        unknown: 0,
+        total: 3,
+      },
+    ])
+    expect(getDurationData(report)).toEqual([
+      {
+        feature: 'Checkout',
+        duration: 4.5,
+      },
+    ])
+  })
+})

package/templates/default/src/app/(base)/reports/report-detail-helpers.ts

@@ -0,0 +1,247 @@
+import { BrowserEngine, Prisma, StepStatus } from '@prisma/client'
+import { Compass, Flame } from 'lucide-react'
+import { createElement } from 'react'
+
+import type { ChartConfig } from '@/components/ui/chart'
+
+export 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
+          }
+        }
+      }
+    }
+  }
+}>
+
+export const reportColorMap = {
+  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)',
+} as const
+
+export const browserIcons = {
+  [BrowserEngine.CHROMIUM]: createElement(Flame, { className: 'h-4 w-4' }),
+  [BrowserEngine.FIREFOX]: createElement(Flame, { className: 'h-4 w-4' }),
+  [BrowserEngine.WEBKIT]: createElement(Compass, { className: 'h-4 w-4' }),
+} as const
+
+export const overViewPieChartConfig = {
+  value: {
+    label: 'Value',
+  },
+  passed: {
+    label: 'Passed',
+    color: reportColorMap.passed,
+  },
+  failed: {
+    label: 'Failed',
+    color: reportColorMap.failed,
+  },
+  cancelled: {
+    label: 'Cancelled',
+    color: reportColorMap.cancelled,
+  },
+  unknown: {
+    label: 'Unknown',
+    color: reportColorMap.unknown,
+  },
+} satisfies ChartConfig
+
+export const resultByFeatureBarChartConfig = {
+  feature: {
+    label: 'Feature',
+  },
+  passed: {
+    label: 'Passed',
+    color: reportColorMap.passed,
+  },
+  failed: {
+    label: 'Failed',
+    color: reportColorMap.failed,
+  },
+  cancelled: {
+    label: 'Cancelled',
+    color: reportColorMap.cancelled,
+  },
+  unknown: {
+    label: 'Unknown',
+    color: reportColorMap.unknown,
+  },
+} satisfies ChartConfig
+
+export const durationByFeatureBarChartConfig = {
+  feature: {
+    label: 'Feature',
+  },
+  duration: {
+    label: 'Duration',
+  },
+} satisfies ChartConfig
+
+export function 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'
+  )
+}
+
+export function formatDateTime(date: Date) {
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function 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`
+}
+
+export function getReportMetrics(report: ReportDetailWithRelations) {
+  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
+
+  return {
+    totalTests,
+    passedTests,
+    failedTests,
+    untestedTests,
+  }
+}
+
+export function getOverviewData(report: ReportDetailWithRelations) {
+  const { passedTests, failedTests } = getReportMetrics(report)
+
+  return [
+    {
+      result: 'passed',
+      value: passedTests,
+      fill: reportColorMap.passed,
+    },
+    {
+      result: 'failed',
+      value: failedTests,
+      fill: reportColorMap.failed,
+    },
+    {
+      result: 'cancelled',
+      value: report.testCases.filter(rtc => rtc.testRunTestCase.result === 'UNTESTED').length,
+      fill: reportColorMap.cancelled,
+    },
+    {
+      result: 'unknown',
+      value: 0,
+      fill: reportColorMap.unknown,
+    },
+  ]
+}
+
+export function getFeatureData(report: ReportDetailWithRelations) {
+  return report.features.map(feature => {
+    const scenarios = feature.scenarios
+    const passed = scenarios.filter(
+      scenario =>
+        scenario.steps.every(step => step.status === StepStatus.PASSED) &&
+        scenario.hooks.every(hook => hook.status === StepStatus.PASSED),
+    ).length
+    const failed = scenarios.filter(
+      scenario =>
+        scenario.steps.some(step => step.status === StepStatus.FAILED) ||
+        scenario.hooks.some(hook => hook.status === StepStatus.FAILED),
+    ).length
+    const cancelled = scenarios.filter(
+      scenario =>
+        scenario.steps.some(step => step.status === StepStatus.SKIPPED) ||
+        scenario.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,
+    }
+  })
+}
+
+export function getDurationData(report: ReportDetailWithRelations) {
+  return 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((totalDuration / 1000000000).toFixed(2)),
+    }
+  })
+}