create-appraisejs 0.3.0-alpha.0 → 0.3.0

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

@@ -0,0 +1,80 @@
+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 },
+    }),
+  )
+}

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

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { TestRunStatus } from '@prisma/client'
+
+import { LogViewer } from './log-viewer'
+
+const { getTestRunLogsAction } = vi.hoisted(() => ({
+  getTestRunLogsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/test-run/test-run-actions', () => ({
+  getTestRunLogsAction,
+}))
+
+vi.mock('./download-logs-button', () => ({
+  DownloadLogsButton: ({ testRunId }: { testRunId: string }) => <div>Download logs for {testRunId}</div>,
+}))
+
+class MockEventSource {
+  static CONNECTING = 0
+  static OPEN = 1
+  static CLOSED = 2
+
+  onopen: ((event: Event) => void) | null = null
+  onerror: ((event: Event) => void) | null = null
+  readyState = MockEventSource.CONNECTING
+  url: string
+  closed = false
+  listeners = new Map<string, Array<(event: MessageEvent) => void>>()
+
+  constructor(url: string) {
+    this.url = url
+  }
+
+  addEventListener(type: string, listener: (event: MessageEvent) => void) {
+    const existingListeners = this.listeners.get(type) ?? []
+    existingListeners.push(listener)
+    this.listeners.set(type, existingListeners)
+  }
+
+  close() {
+    this.closed = true
+    this.readyState = MockEventSource.CLOSED
+  }
+
+  emit(type: string, data?: unknown) {
+    const event = { data: data === undefined ? '' : JSON.stringify(data) } as MessageEvent
+    for (const listener of this.listeners.get(type) ?? []) {
+      listener(event)
+    }
+  }
+}
+
+describe('LogViewer', () => {
+  beforeEach(() => {
+    getTestRunLogsAction.mockReset()
+  })
+
+  it('loads persisted logs for completed test runs', async () => {
+    getTestRunLogsAction.mockResolvedValue({
+      status: 200,
+      data: [
+        {
+          type: 'stdout',
+          message: 'Run finished',
+          timestamp: '2024-01-01T00:00:00.000Z',
+        },
+      ],
+    })
+
+    render(<LogViewer testRunId="run-1" status={TestRunStatus.COMPLETED} />)
+
+    expect(await screen.findByText('Run finished')).toBeInTheDocument()
+    expect(screen.getByText('Completed')).toBeInTheDocument()
+    expect(screen.getByText('Download logs for run-1')).toBeInTheDocument()
+  })
+
+  it('streams live logs and dispatches the exit event when the run completes', async () => {
+    const emittedEvents: Array<Event> = []
+    const addEventListenerSpy = vi.spyOn(window, 'dispatchEvent')
+    const eventSources: MockEventSource[] = []
+
+    vi.stubGlobal(
+      'EventSource',
+      class extends MockEventSource {
+        constructor(url: string) {
+          super(url)
+          eventSources.push(this)
+        }
+      },
+    )
+
+    render(<LogViewer testRunId="run-2" status={TestRunStatus.RUNNING} />)
+
+    const eventSource = eventSources[0]
+    expect(eventSource?.url).toBe('/api/test-runs/run-2/logs')
+
+    eventSource.readyState = MockEventSource.OPEN
+    eventSource.onopen?.(new Event('open'))
+    eventSource.emit('log', { type: 'stdout', message: 'Scenario started' })
+    eventSource.emit('exit', { code: 0 })
+
+    await waitFor(() => {
+      expect(screen.getByText('Scenario started')).toBeInTheDocument()
+      expect(screen.getByText('Process exited with code 0')).toBeInTheDocument()
+      expect(screen.getByText('Completed')).toBeInTheDocument()
+    })
+
+    expect(addEventListenerSpy).toHaveBeenCalled()
+    expect(eventSource.closed).toBe(true)
+
+    addEventListenerSpy.mock.calls.forEach(call => emittedEvents.push(call[0]))
+    const exitEvent = emittedEvents.find(event => event.type === 'testrun:exit') as CustomEvent | undefined
+    expect(exitEvent?.detail).toEqual({ testRunId: 'run-2' })
+  })
+})

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

@@ -0,0 +1,133 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { TestRunStatus } from '@prisma/client'
+import { CheckCircle, LoaderCircle, Logs, Wifi, WifiOff, XCircle } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { DownloadLogsButton } from './download-logs-button'
+import { getConnectionStatusText } from './log-viewer-helpers'
+import { useLogViewer } from './use-log-viewer'
+
+type LogViewerProps = {
+  testRunId: string
+  status?: TestRunStatus
+  className?: string
+}
+
+export function LogViewer({ testRunId, status, className }: LogViewerProps) {
+  const { logs, connectionStatus, error } = useLogViewer({ testRunId, status })
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+  const autoScrollRef = useRef(true)
+
+  useEffect(() => {
+    if (!autoScrollRef.current || !scrollAreaRef.current) {
+      return
+    }
+
+    const scrollContainer = scrollAreaRef.current.querySelector('[data-radix-scroll-area-viewport]')
+    if (scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight
+    }
+  }, [logs])
+
+  const handleScroll = () => {
+    if (!scrollAreaRef.current) {
+      return
+    }
+
+    const scrollContainer = scrollAreaRef.current.querySelector('[data-radix-scroll-area-viewport]')
+    if (!scrollContainer) {
+      return
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainer
+    autoScrollRef.current = scrollTop + clientHeight >= scrollHeight - 10
+  }
+
+  const statusIcon =
+    connectionStatus === 'connecting' || connectionStatus === 'loading' ? (
+      <LoaderCircle className="h-4 w-4 animate-spin" />
+    ) : connectionStatus === 'connected' ? (
+      <Wifi className="h-4 w-4 text-green-500" />
+    ) : connectionStatus === 'disconnected' ? (
+      <WifiOff className="h-4 w-4 text-gray-500" />
+    ) : connectionStatus === 'error' ? (
+      <XCircle className="h-4 w-4 text-red-500" />
+    ) : (
+      <CheckCircle className="h-4 w-4 text-blue-500" />
+    )
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Logs className="h-6 w-6" />
+            Live Logs
+          </span>
+          {connectionStatus === 'completed' || connectionStatus === 'disconnected' ? (
+            <DownloadLogsButton testRunId={testRunId} />
+          ) : null}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className={cn('flex flex-col gap-2', className)}>
+          <div className="flex items-center justify-between">
+            <Badge variant="outline" className="flex items-center gap-2">
+              {statusIcon}
+              <span>{getConnectionStatusText(connectionStatus)}</span>
+            </Badge>
+            {logs.length > 0 ? (
+              <Badge variant="outline" className="font-mono text-xs">
+                {logs.length} log{logs.length !== 1 ? 's' : ''}
+              </Badge>
+            ) : null}
+          </div>
+
+          {error ? (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : null}
+
+          <ScrollArea
+            ref={scrollAreaRef}
+            className="bg-muted/50 h-[600px] w-full rounded-md border p-4 font-mono text-sm"
+            onScroll={handleScroll}
+          >
+            {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" />
+                {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) => (
+              <div
+                key={index}
+                className={cn(
+                  'mb-1 flex items-start gap-2 whitespace-pre-wrap break-words',
+                  log.type === 'stderr' && 'text-red-400',
+                  log.type === 'stdout' && 'text-foreground',
+                  log.type === 'status' && 'font-semibold text-blue-400',
+                )}
+              >
+                <span className="shrink-0 text-xs text-muted-foreground">{log.timestamp.toLocaleTimeString()}</span>
+                <span className="w-16 shrink-0 text-xs text-muted-foreground">[{log.type.toUpperCase()}]</span>
+                <span className="flex-1">{log.message}</span>
+              </div>
+            ))}
+          </ScrollArea>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { TestRunResult, TestRunStatus } from '@prisma/client'
+
+import {
+  getDurationSeconds,
+  getProgressStats,
+  getTestRunResultText,
+  getTestRunStatusMeta,
+} from './test-run-details-helpers'
+
+describe('test-run-details helpers', () => {
+  it('builds progress stats from completed and cancelled test cases', () => {
+    const progress = getProgressStats([
+      { status: 'COMPLETED' },
+      { status: 'CANCELLED' },
+      { status: 'RUNNING' },
+    ] as never)
+
+    expect(progress).toEqual({
+      total: 3,
+      completed: 2,
+      percentage: (2 / 3) * 100,
+    })
+  })
+
+  it('formats run status, result, and duration values', () => {
+    expect(getTestRunStatusMeta(TestRunStatus.COMPLETED, TestRunResult.PASSED).label).toBe('Completed')
+    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)
+  })
+})

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

@@ -0,0 +1,208 @@
+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))
+}