create-appraisejs 0.3.0-alpha.0 → 0.3.0-alpha.1

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

@@ -0,0 +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

package/templates/starter/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/starter/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)),
+    }
+  })
+}

package/templates/starter/src/app/(base)/reports/report-metric-card.tsx

@@ -0,0 +1,78 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+const metricStyles: Record<
+  string,
+  {
+    card: string
+    glow: string
+    dot: string
+    value: string
+  }
+> = {
+  'Total Tests': {
+    card: 'bg-gradient-to-br from-card via-card to-primary/5',
+    glow: 'bg-primary/20',
+    dot: 'bg-primary',
+    value: 'text-primary',
+  },
+  Passed: {
+    card: 'bg-gradient-to-br from-card via-card to-primary/10',
+    glow: 'bg-primary/25',
+    dot: 'bg-green-500',
+    value: 'text-green-500',
+  },
+  Failed: {
+    card: 'bg-gradient-to-br from-card via-card to-destructive/10',
+    glow: 'bg-destructive/20',
+    dot: 'bg-destructive',
+    value: 'text-destructive',
+  },
+  Untested: {
+    card: 'bg-gradient-to-br from-card via-card to-secondary/70',
+    glow: 'bg-muted-foreground/15',
+    dot: 'bg-muted-foreground',
+    value: 'text-foreground',
+  },
+}
+
+const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
+  const styles = metricStyles[title] ?? {
+    card: 'bg-gradient-to-br from-card to-muted/40',
+    glow: 'bg-primary/15',
+    dot: 'bg-primary',
+    value: 'text-foreground',
+  }
+
+  return (
+    <Card
+      className={cn(
+        'group relative min-w-0 overflow-hidden rounded-2xl shadow-sm transition-colors bg-transparent border-gray-500/10',
+        styles.card,
+      )}
+    >
+      <div
+        className={cn(
+          'pointer-events-none absolute -right-10 -top-10 h-28 w-28 rounded-full blur-3xl transition-opacity group-hover:opacity-90',
+          styles.glow,
+        )}
+      />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/70 to-transparent dark:via-white/20" />
+
+      <CardHeader className="space-y-3 p-5 pb-3">
+        <div className="flex items-center gap-3">
+          <span className={cn('h-2.5 w-2.5 rounded-full shadow-sm', styles.dot)} />
+          <CardTitle className="text-sm font-medium tracking-[0.18em] text-muted-foreground uppercase">
+            {title}
+          </CardTitle>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-5 pt-0">
+        <div className={cn('text-4xl font-bold tracking-tight sm:text-[2.75rem]', styles.value)}>{value}</div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportMetricCard