create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/components/test-run/log-viewer-helpers.ts

@@ -1,80 +1,4 @@
-import { TestRunStatus } from '@prisma/client'
-
-export interface LogMessage {
-  type: 'stdout' | 'stderr' | 'status'
-  message: string
-  timestamp: Date
-}
-
-export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'completed' | 'loading'
-
-const fatalErrorPatterns = [
-  'Test run not found',
-  'Test run has completed',
-  'Internal server error',
-  'Test run process not found',
-] as const
-
-function isLogMessage(value: unknown): value is LogMessage {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'type' in value &&
-    (value.type === 'stdout' || value.type === 'stderr' || value.type === 'status') &&
-    'message' in value &&
-    typeof value.message === 'string' &&
-    'timestamp' in value
-  )
-}
-
-export function isTerminalRunStatus(status?: TestRunStatus) {
-  return status === TestRunStatus.COMPLETED || status === TestRunStatus.CANCELLED
-}
-
-export function parseLogMessages(data: unknown): LogMessage[] {
-  if (!Array.isArray(data)) {
-    return []
-  }
-
-  return data.filter(isLogMessage).map(log => ({
-    ...log,
-    timestamp: log.timestamp instanceof Date ? log.timestamp : new Date(log.timestamp),
-  }))
-}
-
-export function createLogMessage(
-  type: LogMessage['type'],
-  message: string,
-  timestamp = new Date(),
-): LogMessage {
-  return { type, message, timestamp }
-}
-
-export function isFatalLogStreamError(message: string) {
-  return fatalErrorPatterns.some(pattern => message.toLowerCase().includes(pattern.toLowerCase()))
-}
-
-export function getConnectionStatusText(connectionStatus: ConnectionStatus) {
-  switch (connectionStatus) {
-    case 'connecting':
-      return 'Connecting...'
-    case 'connected':
-      return 'Connected'
-    case 'disconnected':
-      return 'Disconnected'
-    case 'error':
-      return 'Error'
-    case 'completed':
-      return 'Completed'
-    case 'loading':
-      return 'Loading...'
-  }
-}
-
-export function dispatchTestRunExit(testRunId: string) {
-  window.dispatchEvent(
-    new CustomEvent('testrun:exit', {
-      detail: { testRunId },
-    }),
-  )
-}
+export { dispatchTestRunExit } from './log-viewer-events'
+export { createLogMessage, parseLogMessages } from './log-viewer-parsing'
+export { getConnectionStatusText, isFatalLogStreamError, isTerminalRunStatus } from './log-viewer-status'
+export type { ConnectionStatus, LogMessage } from './log-viewer-types'

package/templates/starter/src/components/test-run/log-viewer-parsing.ts

@@ -0,0 +1,28 @@
+import type { LogMessage } from './log-viewer-types'
+
+function isLogMessage(value: unknown): value is LogMessage {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    (value.type === 'stdout' || value.type === 'stderr' || value.type === 'status') &&
+    'message' in value &&
+    typeof value.message === 'string' &&
+    'timestamp' in value
+  )
+}
+
+export function parseLogMessages(data: unknown): LogMessage[] {
+  if (!Array.isArray(data)) {
+    return []
+  }
+
+  return data.filter(isLogMessage).map(log => ({
+    ...log,
+    timestamp: log.timestamp instanceof Date ? log.timestamp : new Date(log.timestamp),
+  }))
+}
+
+export function createLogMessage(type: LogMessage['type'], message: string, timestamp = new Date()): LogMessage {
+  return { type, message, timestamp }
+}

package/templates/starter/src/components/test-run/log-viewer-status.ts

@@ -0,0 +1,35 @@
+import { TestRunStatus } from '@prisma/client'
+
+import type { ConnectionStatus } from './log-viewer-types'
+
+const fatalErrorPatterns = [
+  'Test run not found',
+  'Test run has completed',
+  'Internal server error',
+  'Test run process not found',
+] as const
+
+export function isTerminalRunStatus(status?: TestRunStatus) {
+  return status === TestRunStatus.COMPLETED || status === TestRunStatus.CANCELLED
+}
+
+export function isFatalLogStreamError(message: string) {
+  return fatalErrorPatterns.some(pattern => message.toLowerCase().includes(pattern.toLowerCase()))
+}
+
+export function getConnectionStatusText(connectionStatus: ConnectionStatus) {
+  switch (connectionStatus) {
+    case 'connecting':
+      return 'Connecting...'
+    case 'connected':
+      return 'Connected'
+    case 'disconnected':
+      return 'Disconnected'
+    case 'error':
+      return 'Error'
+    case 'completed':
+      return 'Completed'
+    case 'loading':
+      return 'Loading...'
+  }
+}

package/templates/starter/src/components/test-run/log-viewer-types.ts

@@ -0,0 +1,7 @@
+export interface LogMessage {
+  type: 'stdout' | 'stderr' | 'status'
+  message: string
+  timestamp: Date
+}
+
+export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'completed' | 'loading'

package/templates/starter/src/components/test-run/log-viewer.tsx

@@ -52,15 +52,15 @@ export function LogViewer({ testRunId, status, className }: LogViewerProps) {
 
   const statusIcon =
     connectionStatus === 'connecting' || connectionStatus === 'loading' ? (
-      <LoaderCircle className="h-4 w-4 animate-spin" />
+      <LoaderCircle className="size-4 animate-spin" />
     ) : connectionStatus === 'connected' ? (
-      <Wifi className="h-4 w-4 text-green-500" />
+      <Wifi className="size-4 text-green-500" />
     ) : connectionStatus === 'disconnected' ? (
-      <WifiOff className="h-4 w-4 text-gray-500" />
+      <WifiOff className="size-4 text-zinc-500" />
     ) : connectionStatus === 'error' ? (
-      <XCircle className="h-4 w-4 text-red-500" />
+      <XCircle className="size-4 text-red-500" />
     ) : (
-      <CheckCircle className="h-4 w-4 text-blue-500" />
+      <CheckCircle className="size-4 text-blue-500" />
     )
 
   return (
@@ -68,7 +68,7 @@ export function LogViewer({ testRunId, status, className }: LogViewerProps) {
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span className="flex items-center gap-2">
-            <Logs className="h-6 w-6" />
+            <Logs className="size-6" />
             Live Logs
           </span>
           {connectionStatus === 'completed' || connectionStatus === 'disconnected' ? (
@@ -103,16 +103,16 @@ export function LogViewer({ testRunId, status, className }: LogViewerProps) {
           >
             {logs.length === 0 && (connectionStatus === 'connecting' || connectionStatus === 'loading') ? (
               <div className="flex items-center justify-center py-8 text-muted-foreground">
-                <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+                <LoaderCircle className="mr-2 size-4 animate-spin" />
                 {connectionStatus === 'loading' ? 'Loading logs...' : 'Connecting to log stream...'}
               </div>
             ) : null}
             {logs.length === 0 && connectionStatus !== 'connecting' && connectionStatus !== 'loading' ? (
               <div className="flex items-center justify-center py-8 text-muted-foreground">No logs available</div>
             ) : null}
-            {logs.map((log, index) => (
+            {logs.map(log => (
               <div
-                key={index}
+                key={`${log.timestamp.toISOString()}-${log.type}-${log.message}`}
                 className={cn(
                   'mb-1 flex items-start gap-2 whitespace-pre-wrap break-words',
                   log.type === 'stderr' && 'text-red-400',

package/templates/starter/src/components/test-run/test-run-details-guards.ts

@@ -0,0 +1,85 @@
+import type { Environment, Report, Tag } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type { TestRunDetailsData, TestRunDetailsTestCase } from './test-run-details-types'
+
+type UnknownRecord = Record<string, unknown>
+
+function isObjectRecord(value: unknown): value is UnknownRecord {
+  return typeof value === 'object' && value !== null
+}
+
+function hasFields(value: UnknownRecord, fields: string[]) {
+  return fields.every(field => field in value)
+}
+
+function isTagRow(value: unknown): value is Tag {
+  return isObjectRecord(value) && hasFields(value, ['id', 'name'])
+}
+
+function isEnvironmentRow(value: unknown): value is Environment {
+  return isObjectRecord(value) && hasFields(value, ['id', 'name'])
+}
+
+function isReportRow(value: unknown): value is Report {
+  return isObjectRecord(value) && hasFields(value, ['id', 'testRunId'])
+}
+
+function isTestCaseInfo(value: unknown): value is TestRunDetailsTestCase['testCase'] {
+  return isObjectRecord(value) && hasFields(value, ['title', 'description'])
+}
+
+function isTestSuiteInfo(value: unknown): value is TestRunDetailsTestCase['testSuite'] {
+  return value === null || (isObjectRecord(value) && hasFields(value, ['id', 'name']))
+}
+
+function isTestRunDetailsTestCase(value: unknown): value is TestRunDetailsTestCase {
+  if (!isObjectRecord(value) || !hasFields(value, ['id', 'status', 'result', 'tracePath', 'testCase', 'testSuite'])) {
+    return false
+  }
+
+  return isTestCaseInfo(value.testCase) && isTestSuiteInfo(value.testSuite)
+}
+
+function hasTestRunScalarFields(value: UnknownRecord) {
+  return (
+    hasFields(value, ['id', 'runId', 'status', 'result', 'startedAt', 'completedAt', 'browserEngine', 'testWorkersCount']) &&
+    value.startedAt instanceof Date &&
+    (value.completedAt instanceof Date || value.completedAt === null)
+  )
+}
+
+function hasTestRunCollections(value: UnknownRecord) {
+  return (
+    hasFields(value, ['testCases', 'tags', 'reports']) &&
+    Array.isArray(value.testCases) &&
+    value.testCases.every(isTestRunDetailsTestCase) &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow) &&
+    Array.isArray(value.reports) &&
+    value.reports.every(isReportRow)
+  )
+}
+
+function isTestRunDetailsData(value: unknown): value is TestRunDetailsData {
+  return (
+    isObjectRecord(value) &&
+    hasTestRunScalarFields(value) &&
+    hasTestRunCollections(value) &&
+    hasFields(value, ['environment']) &&
+    isEnvironmentRow(value.environment)
+  )
+}
+
+function isTraceViewerStatusData(value: unknown): value is { isRunning: boolean } {
+  return isObjectRecord(value) && hasFields(value, ['isRunning']) && typeof value.isRunning === 'boolean'
+}
+
+export function getTestRunDetailsData(data: ActionResponseData | undefined) {
+  return isTestRunDetailsData(data) ? data : null
+}
+
+export function getTraceViewerStatusData(data: ActionResponseData | undefined) {
+  return isTraceViewerStatusData(data) ? data : null
+}

package/templates/starter/src/components/test-run/test-run-details-helpers.test.ts

@@ -7,8 +7,44 @@ import {
   getTestRunResultText,
   getTestRunStatusMeta,
 } from './test-run-details-helpers'
+import { getTestRunDetailsData, getTraceViewerStatusData } from './test-run-details-guards'
 
 describe('test-run-details helpers', () => {
+  const validTestRunDetails = {
+    id: 'run-row-1',
+    runId: 'RUN-1',
+    status: TestRunStatus.COMPLETED,
+    result: TestRunResult.PASSED,
+    startedAt: new Date('2024-01-01T00:00:00.000Z'),
+    completedAt: new Date('2024-01-01T00:00:07.000Z'),
+    browserEngine: 'chromium',
+    testWorkersCount: 2,
+    testCases: [
+      {
+        id: 'case-run-1',
+        status: TestRunStatus.COMPLETED,
+        result: TestRunResult.PASSED,
+        tracePath: null,
+        testCase: {
+          title: 'Can sign in',
+          description: 'Valid credentials open the dashboard',
+        },
+        testSuite: {
+          id: 'suite-1',
+          name: 'Authentication',
+        },
+      },
+    ],
+    tags: [{ id: 'tag-1', name: 'smoke' }],
+    environment: { id: 'environment-1', name: 'Local' },
+    reports: [{ id: 'report-1', testRunId: 'run-row-1' }],
+  }
+
+  const withTestRunDetails = (overrides: Record<string, unknown>) => ({
+    ...validTestRunDetails,
+    ...overrides,
+  })
+
   it('builds progress stats from completed and cancelled test cases', () => {
     const progress = getProgressStats([
       { status: 'COMPLETED' },
@@ -28,4 +64,70 @@ describe('test-run-details helpers', () => {
     expect(getTestRunResultText(TestRunResult.FAILED)).toBe('Failed')
     expect(getDurationSeconds(new Date('2024-01-01T00:00:00.000Z'), new Date('2024-01-01T00:00:07.000Z'))).toBe(7)
   })
+
+  it('returns test run details data only for the expected nested payload shape', () => {
+    expect(getTestRunDetailsData(validTestRunDetails)).toBe(validTestRunDetails)
+    expect(getTestRunDetailsData({ ...validTestRunDetails, startedAt: '2024-01-01T00:00:00.000Z' })).toBeNull()
+    expect(getTestRunDetailsData({ ...validTestRunDetails, testCases: [{ id: 'case-run-1' }] })).toBeNull()
+    expect(getTestRunDetailsData({ ...validTestRunDetails, environment: null })).toBeNull()
+  })
+
+  it('accepts valid nullable completedAt, tracePath, and testSuite values', () => {
+    const validNullablePayload = withTestRunDetails({
+      completedAt: null,
+      testCases: [
+        {
+          ...validTestRunDetails.testCases[0],
+          tracePath: '/tmp/trace.zip',
+          testSuite: null,
+        },
+      ],
+    })
+
+    expect(getTestRunDetailsData(validNullablePayload)).toBe(validNullablePayload)
+  })
+
+  it('rejects malformed top-level test run details fields', () => {
+    expect(getTestRunDetailsData(undefined)).toBeNull()
+    expect(getTestRunDetailsData(null)).toBeNull()
+    expect(getTestRunDetailsData('not-a-run')).toBeNull()
+    expect(getTestRunDetailsData(withTestRunDetails({ completedAt: '2024-01-01T00:00:07.000Z' }))).toBeNull()
+    expect(getTestRunDetailsData(withTestRunDetails({ tags: [{ id: 'tag-1' }] }))).toBeNull()
+    expect(getTestRunDetailsData(withTestRunDetails({ reports: [{ id: 'report-1' }] }))).toBeNull()
+  })
+
+  it('rejects malformed nested test case details', () => {
+    const baseTestCase = validTestRunDetails.testCases[0]
+    const testCaseWithoutTracePath: Record<string, unknown> = { ...baseTestCase }
+    delete testCaseWithoutTracePath.tracePath
+
+    expect(
+      getTestRunDetailsData(
+        withTestRunDetails({
+          testCases: [{ ...baseTestCase, testCase: { title: 'Missing description' } }],
+        }),
+      ),
+    ).toBeNull()
+    expect(
+      getTestRunDetailsData(
+        withTestRunDetails({
+          testCases: [{ ...baseTestCase, testSuite: { id: 'suite-1' } }],
+        }),
+      ),
+    ).toBeNull()
+    expect(
+      getTestRunDetailsData(
+        withTestRunDetails({
+          testCases: [testCaseWithoutTracePath],
+        }),
+      ),
+    ).toBeNull()
+  })
+
+  it('returns trace viewer status data only when isRunning is boolean', () => {
+    expect(getTraceViewerStatusData({ isRunning: true })).toEqual({ isRunning: true })
+    expect(getTraceViewerStatusData({ isRunning: false })).toEqual({ isRunning: false })
+    expect(getTraceViewerStatusData({ isRunning: 'true' })).toBeNull()
+    expect(getTraceViewerStatusData(undefined)).toBeNull()
+  })
 })

package/templates/starter/src/components/test-run/test-run-details-helpers.ts

@@ -1,208 +1,10 @@
-import type {
-  Environment,
-  Report,
-  Tag,
-  TestRun,
-  TestRunResult,
-  TestRunStatus,
-  TestRunTestCase,
-  TestRunTestCaseResult,
-  TestRunTestCaseStatus,
-} from '@prisma/client'
-import {
-  CheckCircle,
-  ClipboardCheck,
-  ClipboardX,
-  Clock,
-  ListEnd,
-  LoaderCircle,
-  type LucideIcon,
-  XCircle,
-} from 'lucide-react'
-
-import type { ActionResponseData } from '@/types/form/actionHandler'
-
-export type TestRunDetailsTestCase = TestRunTestCase & {
-  testCase: { title: string; description: string }
-  testSuite: { id: string; name: string } | null
-}
-
-export type TestRunDetailsData = TestRun & {
-  testCases: TestRunDetailsTestCase[]
-  tags: Tag[]
-  environment: Environment
-  reports: Report[]
-}
-
-export type StatusMeta = {
-  label: string
-  icon: LucideIcon
-  badgeClassName?: string
-  iconClassName?: string
-}
-
-function isTagRow(value: unknown): value is Tag {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isEnvironmentRow(value: unknown): value is Environment {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isReportRow(value: unknown): value is Report {
-  return typeof value === 'object' && value !== null && 'id' in value && 'testRunId' in value
-}
-
-function isTestCaseInfo(value: unknown): value is TestRunDetailsTestCase['testCase'] {
-  return typeof value === 'object' && value !== null && 'title' in value && 'description' in value
-}
-
-function isTestSuiteInfo(value: unknown): value is TestRunDetailsTestCase['testSuite'] {
-  return value === null || (typeof value === 'object' && value !== null && 'id' in value && 'name' in value)
-}
-
-function isTestRunDetailsTestCase(value: unknown): value is TestRunDetailsTestCase {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'status' in value &&
-    'result' in value &&
-    'tracePath' in value &&
-    'testCase' in value &&
-    isTestCaseInfo(value.testCase) &&
-    'testSuite' in value &&
-    isTestSuiteInfo(value.testSuite)
-  )
-}
-
-function isTestRunDetailsData(value: unknown): value is TestRunDetailsData {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'runId' in value &&
-    'status' in value &&
-    'result' in value &&
-    'startedAt' in value &&
-    value.startedAt instanceof Date &&
-    'completedAt' in value &&
-    (value.completedAt instanceof Date || value.completedAt === null) &&
-    'browserEngine' in value &&
-    'testWorkersCount' in value &&
-    'testCases' in value &&
-    Array.isArray(value.testCases) &&
-    value.testCases.every(isTestRunDetailsTestCase) &&
-    'tags' in value &&
-    Array.isArray(value.tags) &&
-    value.tags.every(isTagRow) &&
-    'environment' in value &&
-    isEnvironmentRow(value.environment) &&
-    'reports' in value &&
-    Array.isArray(value.reports) &&
-    value.reports.every(isReportRow)
-  )
-}
-
-function isTraceViewerStatusData(value: unknown): value is { isRunning: boolean } {
-  return typeof value === 'object' && value !== null && 'isRunning' in value && typeof value.isRunning === 'boolean'
-}
-
-export function getTestRunDetailsData(data: ActionResponseData | undefined) {
-  return isTestRunDetailsData(data) ? data : null
-}
-
-export function getTraceViewerStatusData(data: ActionResponseData | undefined) {
-  return isTraceViewerStatusData(data) ? data : null
-}
-
-export function isTerminalTestRunStatus(status: TestRunStatus) {
-  return status === 'COMPLETED' || status === 'CANCELLED'
-}
-
-export function getTestRunStatusMeta(status: TestRunStatus, result: TestRunResult): StatusMeta {
-  switch (status) {
-    case 'QUEUED':
-      return { label: 'Queued', icon: ListEnd, badgeClassName: 'bg-gray-500' }
-    case 'RUNNING':
-      return { label: 'Running', icon: LoaderCircle, badgeClassName: 'bg-blue-500' }
-    case 'COMPLETED':
-      return {
-        label: 'Completed',
-        icon: result === 'PASSED' ? CheckCircle : XCircle,
-        badgeClassName: result === 'PASSED' ? 'bg-green-700' : 'bg-red-500',
-      }
-    case 'CANCELLED':
-      return { label: 'Cancelled', icon: XCircle, badgeClassName: 'bg-red-500' }
-    default:
-      return { label: 'Unknown', icon: Clock, badgeClassName: 'bg-gray-500' }
-  }
-}
-
-export function getTestRunResultText(result: TestRunResult) {
-  switch (result) {
-    case 'PENDING':
-      return 'Pending'
-    case 'PASSED':
-      return 'Passed'
-    case 'FAILED':
-      return 'Failed'
-    case 'CANCELLED':
-      return 'Cancelled'
-    default:
-      return 'Unknown'
-  }
-}
-
-export function getTestCaseStatusMeta(status: TestRunTestCaseStatus): StatusMeta {
-  switch (status) {
-    case 'PENDING':
-      return { label: 'Pending', icon: LoaderCircle }
-    case 'RUNNING':
-      return { label: 'Running', icon: LoaderCircle }
-    case 'COMPLETED':
-      return { label: 'Completed', icon: CheckCircle, iconClassName: 'text-green-500' }
-    case 'CANCELLED':
-      return { label: 'Cancelled', icon: XCircle }
-    default:
-      return { label: 'Unknown', icon: Clock }
-  }
-}
-
-export function getTestCaseResultMeta(result: TestRunTestCaseResult): StatusMeta {
-  switch (result) {
-    case 'PASSED':
-      return { label: 'Passed', icon: ClipboardCheck, iconClassName: 'text-green-500' }
-    case 'FAILED':
-      return { label: 'Failed', icon: ClipboardX, iconClassName: 'text-red-500' }
-    case 'UNTESTED':
-      return { label: 'Untested', icon: Clock }
-    default:
-      return { label: 'Unknown', icon: Clock }
-  }
-}
-
-export function getProgressStats(testCases: TestRunDetailsTestCase[]) {
-  const total = testCases.length
-  const completed = testCases.filter(
-    testCase => testCase.status === 'COMPLETED' || testCase.status === 'CANCELLED',
-  ).length
-
-  return {
-    total,
-    completed,
-    percentage: total > 0 ? (completed / total) * 100 : 0,
-  }
-}
-
-export function getDurationSeconds(startedAt: Date, completedAt: Date | null) {
-  if (!completedAt) {
-    return null
-  }
-
-  return Math.round((completedAt.getTime() - startedAt.getTime()) / 1000)
-}
-
-export function getTraceViewerEligibleTestCases(testCases: TestRunDetailsTestCase[]) {
-  return testCases.filter(testCase => testCase.result === 'FAILED' && Boolean(testCase.tracePath))
-}
+export type { TestRunDetailsData } from './test-run-details-types'
+export { getTestRunDetailsData, getTraceViewerStatusData } from './test-run-details-guards'
+export {
+  getTestCaseResultMeta,
+  getTestCaseStatusMeta,
+  getTestRunResultText,
+  getTestRunStatusMeta,
+  isTerminalTestRunStatus,
+} from './test-run-details-status'
+export { getDurationSeconds, getProgressStats, getTraceViewerEligibleTestCases } from './test-run-details-progress'

package/templates/starter/src/components/test-run/test-run-details-progress.ts

@@ -0,0 +1,26 @@
+import type { TestRunDetailsTestCase } from './test-run-details-types'
+
+export function getProgressStats(testCases: TestRunDetailsTestCase[]) {
+  const total = testCases.length
+  const completed = testCases.filter(
+    testCase => testCase.status === 'COMPLETED' || testCase.status === 'CANCELLED',
+  ).length
+
+  return {
+    total,
+    completed,
+    percentage: total > 0 ? (completed / total) * 100 : 0,
+  }
+}
+
+export function getDurationSeconds(startedAt: Date, completedAt: Date | null) {
+  if (!completedAt) {
+    return null
+  }
+
+  return Math.round((completedAt.getTime() - startedAt.getTime()) / 1000)
+}
+
+export function getTraceViewerEligibleTestCases(testCases: TestRunDetailsTestCase[]) {
+  return testCases.filter(testCase => testCase.result === 'FAILED' && Boolean(testCase.tracePath))
+}