create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/components/test-run/test-run-header-helpers.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { getTestRunHeaderPollMode, matchesTestRunExitEvent } from './test-run-header-helpers'
+
+describe('test-run-header helpers', () => {
+  it('derives polling modes from run status and report availability', () => {
+    expect(
+      getTestRunHeaderPollMode({
+        status: 'RUNNING',
+        reports: [],
+      } as never),
+    ).toBe('status')
+    expect(
+      getTestRunHeaderPollMode({
+        status: 'COMPLETED',
+        reports: [],
+      } as never),
+    ).toBe('report')
+    expect(
+      getTestRunHeaderPollMode({
+        status: 'COMPLETED',
+        reports: [{ id: 'report-1' }],
+      } as never),
+    ).toBeNull()
+  })
+
+  it('matches exit events by run id', () => {
+    expect(matchesTestRunExitEvent({ testRunId: 'run-1' }, 'run-1')).toBe(true)
+    expect(matchesTestRunExitEvent({ testRunId: 'run-2' }, 'run-1')).toBe(false)
+  })
+})

package/templates/default/src/components/test-run/test-run-header-helpers.ts

@@ -0,0 +1,23 @@
+import type { TestRunDetailsData } from './test-run-details-helpers'
+
+export type TestRunExitEventDetail = {
+  testRunId: string
+}
+
+export type TestRunHeaderPollMode = 'status' | 'report' | null
+
+export function getTestRunHeaderPollMode(testRun: TestRunDetailsData): TestRunHeaderPollMode {
+  if (testRun.status !== 'COMPLETED' && testRun.status !== 'CANCELLED') {
+    return 'status'
+  }
+
+  if (testRun.status === 'COMPLETED' && testRun.reports.length === 0) {
+    return 'report'
+  }
+
+  return null
+}
+
+export function matchesTestRunExitEvent(detail: TestRunExitEventDetail | undefined, runId: string) {
+  return detail?.testRunId === runId
+}

package/templates/default/src/components/test-run/test-run-header.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from '@testing-library/react'
+import { TestRunResult, TestRunStatus } from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { TestRunHeader } from './test-run-header'
+import type { TestRunDetailsData } from './test-run-details-helpers'
+
+const { getTestRunByIdAction } = vi.hoisted(() => ({
+  getTestRunByIdAction: vi.fn(),
+}))
+
+vi.mock('@/actions/test-run/test-run-actions', () => ({
+  getTestRunByIdAction,
+}))
+
+vi.mock('motion/react', () => ({
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  motion: {
+    div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
+  },
+}))
+
+function createTestRun(overrides?: Partial<TestRunDetailsData>): TestRunDetailsData {
+  return {
+    id: 'run-db-id',
+    runId: 'run-1',
+    name: 'Nightly run',
+    startedAt: new Date('2024-01-01T00:00:00.000Z'),
+    completedAt: null,
+    status: TestRunStatus.RUNNING,
+    result: TestRunResult.PENDING,
+    updatedAt: new Date('2024-01-01T00:00:00.000Z'),
+    environmentId: 'env-1',
+    testWorkersCount: 2,
+    browserEngine: 'CHROMIUM',
+    logPath: null,
+    reportPath: null,
+    testCases: [],
+    tags: [],
+    environment: {
+      id: 'env-1',
+      name: 'Staging',
+      baseUrl: 'https://example.com',
+      apiBaseUrl: null,
+      username: null,
+      password: null,
+      createdAt: new Date('2024-01-01T00:00:00.000Z'),
+      updatedAt: new Date('2024-01-01T00:00:00.000Z'),
+    },
+    reports: [],
+    ...overrides,
+  } as TestRunDetailsData
+}
+
+describe('TestRunHeader', () => {
+  beforeEach(() => {
+    vi.useRealTimers()
+    getTestRunByIdAction.mockReset()
+  })
+
+  it('refreshes report state after a completed run publishes a report', async () => {
+    vi.useFakeTimers()
+    getTestRunByIdAction.mockResolvedValue({
+      status: 200,
+      data: createTestRun({
+        status: TestRunStatus.COMPLETED,
+        result: TestRunResult.PASSED,
+        completedAt: new Date('2024-01-01T00:00:10.000Z'),
+        reports: [
+          {
+            id: 'report-1',
+            name: 'Nightly report',
+            description: null,
+            reportPath: null,
+            testRunId: 'run-db-id',
+            createdAt: new Date('2024-01-01T00:00:10.000Z'),
+            updatedAt: new Date('2024-01-01T00:00:10.000Z'),
+          },
+        ],
+      }),
+    })
+
+    render(
+      <TestRunHeader
+        initialTestRun={createTestRun({
+          status: TestRunStatus.COMPLETED,
+          result: TestRunResult.PASSED,
+          completedAt: new Date('2024-01-01T00:00:10.000Z'),
+        })}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: /generating report/i })).toBeInTheDocument()
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2000)
+    })
+
+    expect(screen.getByRole('button', { name: /view report/i })).toBeInTheDocument()
+  })
+})

package/templates/default/src/components/test-run/test-run-header.tsx

@@ -1,149 +1,27 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { ViewReportButton } from '@/components/test-run/view-report-button'
-import { TestRun, TestRunTestCase, Tag, Environment, TestRunStatus, Report } from '@prisma/client'
-
-interface TestRunHeaderProps {
-  initialTestRun: TestRun & {
-    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-    tags: Tag[]
-    environment: Environment
-    reports: Report[]
-  }
-}
-
-export function TestRunHeader({ initialTestRun }: TestRunHeaderProps) {
-  const [testRun, setTestRun] = useState(initialTestRun)
-
-  // Poll for status updates while test run is running or queued
-  useEffect(() => {
-    // Only poll if test run is not completed/cancelled
-    if (testRun.status === TestRunStatus.COMPLETED || testRun.status === TestRunStatus.CANCELLED) {
-      return
-    }
-
-    const pollInterval = setInterval(async () => {
-      try {
-        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
-        if (error || !updatedTestRun) {
-          console.error('Error polling test run status:', error)
-          return
-        }
-
-        const typedTestRun = updatedTestRun as TestRun & {
-          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-          tags: Tag[]
-          environment: Environment
-          reports: Report[]
-        }
-
-        // Update state with latest test run data
-        setTestRun(typedTestRun)
-
-        // Stop polling if test run is completed or cancelled
-        if (typedTestRun.status === TestRunStatus.COMPLETED || typedTestRun.status === TestRunStatus.CANCELLED) {
-          clearInterval(pollInterval)
-        }
-      } catch (error) {
-        console.error('Error polling test run status:', error)
-      }
-    }, 2000) // Poll every 2 seconds
-
-    return () => clearInterval(pollInterval)
-  }, [testRun.id, testRun.status])
-
-  // Listen for SSE exit events from LogViewer as a backup signal
-  useEffect(() => {
-    const handleTestRunExit = (event: CustomEvent<{ testRunId: string }>) => {
-      // Only handle events for this test run
-      if (event.detail.testRunId === testRun.runId) {
-        // Trigger a status refresh
-        getTestRunByIdAction(testRun.id)
-          .then(response => {
-            if (response.data && !response.error) {
-              const typedTestRun = response.data as TestRun & {
-                testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-                tags: Tag[]
-                environment: Environment
-                reports: Report[]
-              }
-              setTestRun(typedTestRun)
-            }
-          })
-          .catch(error => {
-            console.error('Error refreshing test run status after exit event:', error)
-          })
-      }
-    }
-
-    // Listen for custom event dispatched by LogViewer
-    window.addEventListener('testrun:exit', handleTestRunExit as EventListener)
-
-    return () => {
-      window.removeEventListener('testrun:exit', handleTestRunExit as EventListener)
-    }
-  }, [testRun.id, testRun.runId])
-
-  // Poll for report updates after test run completes
-  useEffect(() => {
-    // Only poll if test run is completed (not cancelled) but no report exists yet
-    // Cancelled runs won't generate reports, so we don't poll for them
-    const shouldPoll = testRun.status === TestRunStatus.COMPLETED && testRun.reports.length === 0
-
-    if (!shouldPoll) {
-      return
-    }
-
-    // Poll for reports (they might be created asynchronously after test run completes)
-    const pollInterval = setInterval(async () => {
-      try {
-        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
-        if (error || !updatedTestRun) {
-          console.error('Error polling for report:', error)
-          return
-        }
-
-        const typedTestRun = updatedTestRun as TestRun & {
-          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-          tags: Tag[]
-          environment: Environment
-          reports: Report[]
-        }
-
-        // Update if reports are now available
-        if (typedTestRun.reports.length > 0) {
-          setTestRun(typedTestRun)
-          clearInterval(pollInterval)
-        }
-      } catch (error) {
-        console.error('Error polling for report:', error)
-      }
-    }, 2000) // Poll every 2 seconds
-
-    // Stop polling after 30 seconds to avoid infinite polling
-    const timeout = setTimeout(() => {
-      clearInterval(pollInterval)
-    }, 30000)
-
-    return () => {
-      clearInterval(pollInterval)
-      clearTimeout(timeout)
-    }
-  }, [testRun.id, testRun.status, testRun.reports.length])
-
-  return (
-    <div className="mb-8">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex-1">
-          <PageHeader>Test Run Details</PageHeader>
-          <HeaderSubtitle>View test run execution details and live logs</HeaderSubtitle>
-        </div>
-        <ViewReportButton testRunStatus={testRun.status} reports={testRun.reports} className="mt-2" />
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { ViewReportButton } from '@/components/test-run/view-report-button'
+import type { TestRunDetailsData } from './test-run-details-helpers'
+import { useTestRunHeader } from './use-test-run-header'
+
+type TestRunHeaderProps = {
+  initialTestRun: TestRunDetailsData
+}
+
+export function TestRunHeader({ initialTestRun }: TestRunHeaderProps) {
+  const { testRun } = useTestRunHeader({ initialTestRun })
+
+  return (
+    <div className="mb-8">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1">
+          <PageHeader>Test Run Details</PageHeader>
+          <HeaderSubtitle>View test run execution details and live logs</HeaderSubtitle>
+        </div>
+        <ViewReportButton testRunStatus={testRun.status} reports={testRun.reports} className="mt-2" />
+      </div>
+    </div>
+  )
+}

package/templates/default/src/components/test-run/use-log-viewer.ts

@@ -0,0 +1,213 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { TestRunStatus } from '@prisma/client'
+
+import { getTestRunLogsAction } from '@/actions/test-run/test-run-actions'
+
+import {
+  createLogMessage,
+  dispatchTestRunExit,
+  isFatalLogStreamError,
+  isTerminalRunStatus,
+  parseLogMessages,
+  type ConnectionStatus,
+  type LogMessage,
+} from './log-viewer-helpers'
+
+type UseLogViewerParams = {
+  testRunId: string
+  status?: TestRunStatus
+}
+
+export function useLogViewer({ testRunId, status }: UseLogViewerParams) {
+  const [logs, setLogs] = useState<LogMessage[]>([])
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('connecting')
+  const [error, setError] = useState<string | null>(null)
+
+  const logCountRef = useRef(0)
+  const wasConnectedRef = useRef(false)
+  const shouldStopReconnectingRef = useRef(false)
+
+  useEffect(() => {
+    logCountRef.current = logs.length
+  }, [logs.length])
+
+  useEffect(() => {
+    if (!isTerminalRunStatus(status)) {
+      return
+    }
+
+    queueMicrotask(() => setConnectionStatus('loading'))
+
+    getTestRunLogsAction(testRunId)
+      .then(response => {
+        if (response.error) {
+          setError(response.error)
+          setConnectionStatus('error')
+          return
+        }
+
+        setLogs(parseLogMessages(response.data))
+        setConnectionStatus('completed')
+      })
+      .catch(error => {
+        console.error('[LogViewer] Error loading logs from database:', error)
+        setError('Failed to load logs from database')
+        setConnectionStatus('error')
+      })
+  }, [status, testRunId])
+
+  useEffect(() => {
+    if (isTerminalRunStatus(status)) {
+      return
+    }
+
+    const eventSource = new EventSource(`/api/test-runs/${testRunId}/logs`)
+
+    eventSource.onopen = () => {
+      wasConnectedRef.current = true
+      setConnectionStatus('connected')
+      setError(null)
+    }
+
+    eventSource.onerror = error => {
+      const readyState = eventSource.readyState
+
+      if (readyState === EventSource.CONNECTING) {
+        return
+      }
+
+      if (readyState === EventSource.CLOSED) {
+        if (!wasConnectedRef.current) {
+          shouldStopReconnectingRef.current = true
+          eventSource.close()
+          setConnectionStatus('error')
+          setError(
+            'Failed to connect to log stream. The test run may not be running or the process has ended. Please check the server logs for more details.',
+          )
+          return
+        }
+
+        setConnectionStatus('disconnected')
+
+        if (shouldStopReconnectingRef.current) {
+          eventSource.close()
+        }
+        return
+      }
+
+      console.error(`[LogViewer] SSE error for testRunId: ${testRunId}`, error, 'readyState:', readyState)
+      setConnectionStatus('error')
+      setError(`Failed to connect to log stream (readyState: ${readyState}). Check server logs for details.`)
+      shouldStopReconnectingRef.current = true
+      eventSource.close()
+    }
+
+    eventSource.addEventListener('connected', (event: MessageEvent) => {
+      try {
+        if (!event.data) {
+          return
+        }
+
+        const data = JSON.parse(event.data)
+        setLogs(currentLogs => [...currentLogs, createLogMessage('status', data.message || 'Connected to log stream')])
+      } catch (error) {
+        console.error('[LogViewer] Error parsing connected event:', error, 'event.data:', event.data)
+      }
+    })
+
+    eventSource.addEventListener('log', (event: MessageEvent) => {
+      try {
+        if (!event.data) {
+          return
+        }
+
+        const data = JSON.parse(event.data)
+        if (logCountRef.current < 5) {
+          console.log('[LogViewer] Received log event:', data)
+        }
+
+        setLogs(currentLogs => [
+          ...currentLogs,
+          createLogMessage(data.type || 'stdout', data.message || ''),
+        ])
+      } catch (error) {
+        console.error('[LogViewer] Error parsing log event:', error, 'event.data:', event.data)
+      }
+    })
+
+    eventSource.addEventListener('exit', (event: MessageEvent) => {
+      try {
+        if (!event.data) {
+          setConnectionStatus('completed')
+          eventSource.close()
+          dispatchTestRunExit(testRunId)
+          return
+        }
+
+        const data = JSON.parse(event.data)
+        setLogs(currentLogs => [
+          ...currentLogs,
+          createLogMessage('status', `Process exited with code ${data.code}`),
+        ])
+      } catch (error) {
+        console.error('[LogViewer] Error parsing exit event:', error, 'event.data:', event.data)
+      } finally {
+        setConnectionStatus('completed')
+        eventSource.close()
+        dispatchTestRunExit(testRunId)
+      }
+    })
+
+    eventSource.addEventListener('error', (event: MessageEvent) => {
+      try {
+        if (!event.data) {
+          return
+        }
+
+        const data = JSON.parse(event.data)
+        const errorMessage = data.error || data.message || 'Unknown error'
+
+        setLogs(currentLogs => [...currentLogs, createLogMessage('stderr', `Error: ${errorMessage}`)])
+        setConnectionStatus('error')
+
+        if (isFatalLogStreamError(errorMessage)) {
+          shouldStopReconnectingRef.current = true
+          eventSource.close()
+        }
+      } catch (error) {
+        console.error('[LogViewer] Error parsing error event:', error, 'event.data:', event.data)
+      }
+    })
+
+    eventSource.addEventListener('scenario::end', (event: MessageEvent) => {
+      try {
+        if (!event.data) {
+          return
+        }
+
+        const data = JSON.parse(event.data)
+        const suffix = data.tracePath ? ' (trace available)' : ''
+        setLogs(currentLogs => [
+          ...currentLogs,
+          createLogMessage('status', `Scenario completed: ${data.scenarioName} - ${data.status}${suffix}`),
+        ])
+      } catch (error) {
+        console.error('[LogViewer] Error handling scenario::end event:', error, 'event.data:', event.data)
+      }
+    })
+
+    return () => {
+      wasConnectedRef.current = false
+      shouldStopReconnectingRef.current = false
+      eventSource.close()
+    }
+  }, [status, testRunId])
+
+  return {
+    logs,
+    connectionStatus,
+    error,
+  }
+}