create-appraisejs 0.3.0-alpha.0 → 0.3.0

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

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

@@ -0,0 +1,184 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import {
+  cancelTestRunAction,
+  checkTraceViewerStatusAction,
+  getTestRunByIdAction,
+  spawnTraceViewerAction,
+} from '@/actions/test-run/test-run-actions'
+import { toast } from '@/hooks/use-toast'
+
+import {
+  getTestRunDetailsData,
+  getTraceViewerStatusData,
+  getTraceViewerEligibleTestCases,
+  isTerminalTestRunStatus,
+  type TestRunDetailsData,
+} from './test-run-details-helpers'
+
+type UseTestRunDetailsParams = {
+  initialTestRun: TestRunDetailsData
+}
+
+export function useTestRunDetails({ initialTestRun }: UseTestRunDetailsParams) {
+  const [testRun, setTestRun] = useState(initialTestRun)
+  const [loadingTraceViewer, setLoadingTraceViewer] = useState<string | null>(null)
+  const [runningTraceViewers, setRunningTraceViewers] = useState<Set<string>>(new Set())
+  const [isCancelling, setIsCancelling] = useState(false)
+
+  const runningTraceViewersRef = useRef<Set<string>>(new Set())
+
+  useEffect(() => {
+    runningTraceViewersRef.current = runningTraceViewers
+  }, [runningTraceViewers])
+
+  useEffect(() => {
+    if (isTerminalTestRunStatus(testRun.status)) {
+      return
+    }
+
+    const interval = window.setInterval(async () => {
+      try {
+        const response = await getTestRunByIdAction(testRun.id)
+        const nextTestRun = getTestRunDetailsData(response.data)
+        if (!nextTestRun) {
+          return
+        }
+
+        setTestRun(nextTestRun)
+
+        if (isTerminalTestRunStatus(nextTestRun.status)) {
+          window.clearInterval(interval)
+        }
+      } catch (error) {
+        console.error('Error polling test run status:', error)
+      }
+    }, 2000)
+
+    return () => window.clearInterval(interval)
+  }, [testRun.id, testRun.status])
+
+  useEffect(() => {
+    const eligibleTestCases = getTraceViewerEligibleTestCases(testRun.testCases)
+
+    if (eligibleTestCases.length === 0 || runningTraceViewers.size === 0) {
+      return
+    }
+
+    let isMounted = true
+
+    const checkTraceViewers = async () => {
+      const currentRunning = runningTraceViewersRef.current
+      if (currentRunning.size === 0) {
+        return
+      }
+
+      const results = await Promise.all(
+        Array.from(currentRunning).map(async testCaseId => {
+          const testCase = eligibleTestCases.find(candidate => candidate.id === testCaseId)
+          if (!testCase) {
+            return { testCaseId, isRunning: false }
+          }
+
+          try {
+            const response = await checkTraceViewerStatusAction(testRun.runId, testCase.id)
+            const statusData = getTraceViewerStatusData(response.data)
+            return { testCaseId, isRunning: statusData?.isRunning ?? false }
+          } catch (error) {
+            console.error(`Error checking trace viewer status for test case ${testCase.id}:`, error)
+            return { testCaseId, isRunning: true }
+          }
+        }),
+      )
+
+      if (!isMounted) {
+        return
+      }
+
+      const actuallyRunning = new Set(results.filter(result => result.isRunning).map(result => result.testCaseId))
+
+      setRunningTraceViewers(currentRunningState => {
+        if (
+          actuallyRunning.size === currentRunningState.size &&
+          Array.from(actuallyRunning).every(testCaseId => currentRunningState.has(testCaseId))
+        ) {
+          return currentRunningState
+        }
+
+        return actuallyRunning
+      })
+    }
+
+    void checkTraceViewers()
+
+    const interval = window.setInterval(() => {
+      if (isMounted) {
+        void checkTraceViewers()
+      }
+    }, 2000)
+
+    return () => {
+      isMounted = false
+      window.clearInterval(interval)
+    }
+  }, [runningTraceViewers.size, testRun.runId, testRun.testCases])
+
+  const handleViewTrace = async (testCaseId: string) => {
+    setLoadingTraceViewer(testCaseId)
+
+    try {
+      const response = await spawnTraceViewerAction(testRun.runId, testCaseId)
+
+      if (response.error) {
+        throw new Error(response.error)
+      }
+
+      setRunningTraceViewers(currentRunning => new Set(currentRunning).add(testCaseId))
+    } catch (error) {
+      toast({
+        title: 'Error opening trace viewer',
+        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+        variant: 'destructive',
+      })
+    } finally {
+      setLoadingTraceViewer(null)
+    }
+  }
+
+  const handleCancelRun = async () => {
+    setIsCancelling(true)
+
+    try {
+      const response = await cancelTestRunAction(testRun.runId)
+      if (response.error) {
+        throw new Error(response.error)
+      }
+
+      toast({
+        title: 'Test run cancelled',
+        description: response.message,
+      })
+      window.setTimeout(() => {
+        setIsCancelling(false)
+      }, 2000)
+    } catch (error) {
+      toast({
+        title: 'Error canceling test run',
+        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+        variant: 'destructive',
+      })
+      setIsCancelling(false)
+    }
+  }
+
+  return {
+    testRun,
+    loadingTraceViewer,
+    runningTraceViewers,
+    isCancelling,
+    handleViewTrace,
+    handleCancelRun,
+  }
+}

package/templates/starter/src/components/test-run/use-test-run-header.ts

@@ -0,0 +1,89 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
+
+import {
+  getTestRunDetailsData,
+  type TestRunDetailsData,
+} from './test-run-details-helpers'
+import {
+  getTestRunHeaderPollMode,
+  matchesTestRunExitEvent,
+  type TestRunExitEventDetail,
+} from './test-run-header-helpers'
+
+type UseTestRunHeaderParams = {
+  initialTestRun: TestRunDetailsData
+}
+
+export function useTestRunHeader({ initialTestRun }: UseTestRunHeaderParams) {
+  const [testRun, setTestRun] = useState(initialTestRun)
+
+  const refreshTestRun = useCallback(async () => {
+    try {
+      const response = await getTestRunByIdAction(testRun.id)
+      const nextTestRun = getTestRunDetailsData(response.data)
+      if (!nextTestRun) {
+        return null
+      }
+
+      setTestRun(nextTestRun)
+      return nextTestRun
+    } catch (error) {
+      console.error('Error refreshing test run header:', error)
+      return null
+    }
+  }, [testRun.id])
+
+  useEffect(() => {
+    const pollMode = getTestRunHeaderPollMode(testRun)
+    if (!pollMode) {
+      return
+    }
+
+    const interval = window.setInterval(async () => {
+      const nextTestRun = await refreshTestRun()
+      if (!nextTestRun) {
+        return
+      }
+
+      const nextMode = getTestRunHeaderPollMode(nextTestRun)
+      if (nextMode !== pollMode) {
+        window.clearInterval(interval)
+      }
+    }, 2000)
+
+    if (pollMode !== 'report') {
+      return () => window.clearInterval(interval)
+    }
+
+    const timeout = window.setTimeout(() => {
+      window.clearInterval(interval)
+    }, 30000)
+
+    return () => {
+      window.clearInterval(interval)
+      window.clearTimeout(timeout)
+    }
+  }, [refreshTestRun, testRun])
+
+  useEffect(() => {
+    const handleTestRunExit = (event: Event) => {
+      const customEvent = event as CustomEvent<TestRunExitEventDetail>
+      if (!matchesTestRunExitEvent(customEvent.detail, testRun.runId)) {
+        return
+      }
+
+      void refreshTestRun()
+    }
+
+    window.addEventListener('testrun:exit', handleTestRunExit)
+    return () => window.removeEventListener('testrun:exit', handleTestRunExit)
+  }, [refreshTestRun, testRun.runId])
+
+  return {
+    testRun,
+  }
+}

package/templates/starter/src/components/test-run/view-report-button.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { TestRunStatus, Report } from '@prisma/client'
+import { Button } from '@/components/ui/button'
+import { FileText, LoaderCircle, XCircle } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import Link from 'next/link'
+
+interface ViewReportButtonProps {
+  testRunStatus: TestRunStatus
+  reports: Report[]
+  className?: string
+}
+
+export function ViewReportButton({ testRunStatus, reports, className }: ViewReportButtonProps) {
+  // Button should only be visible when test run is completed/cancelled AND a report exists
+  const shouldShowReportButton =
+    (testRunStatus === TestRunStatus.COMPLETED || testRunStatus === TestRunStatus.CANCELLED) && reports.length > 0
+
+  // Show cancelled status if test run is cancelled and no report exists
+  if (testRunStatus === TestRunStatus.CANCELLED && reports.length === 0) {
+    return (
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
+          <Button variant="outline" size="sm" className={className} disabled>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center gap-2"
+            >
+              <XCircle className="h-4 w-4" />
+              Report Not Available
+            </motion.div>
+          </Button>
+        </motion.div>
+      </AnimatePresence>
+    )
+  }
+
+  // Show generating report message only for completed (not cancelled) runs without reports
+  if (testRunStatus === TestRunStatus.COMPLETED && reports.length === 0) {
+    return (
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
+          <Button variant="outline" size="sm" className={className}>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center gap-2"
+            >
+              <LoaderCircle className="h-4 w-4 animate-spin" />
+              Generating Report...
+            </motion.div>
+          </Button>
+        </motion.div>
+      </AnimatePresence>
+    )
+  }
+
+  if (!shouldShowReportButton) {
+    return null
+  }
+
+  const reportId = reports[0].id
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -10 }}
+        transition={{ duration: 0.3, ease: 'easeOut' }}
+      >
+        <Link href={`/reports/${reportId}`}>
+          <Button variant="outline" size="sm" className={className}>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center gap-2"
+            >
+              <FileText className="h-4 w-4" />
+              View Report
+            </motion.div>
+          </Button>
+        </Link>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

package/templates/starter/src/components/test-suite/test-suite-picker-helpers.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import type { TestSuitePickerRow } from '@/types/test-suite-picker'
+
+import { createDraftSelections, normalizeSuiteSelection, suiteMatchesQuery } from './test-suite-picker-helpers'
+
+const suite: TestSuitePickerRow = {
+  id: 'suite-1',
+  name: 'Checkout',
+  description: 'Checkout flow',
+  module: { id: 'module-1', name: 'Payments' } as never,
+  tags: [{ id: 'tag-1', name: 'smoke', type: 'FILTER', tagExpression: '@smoke' }] as never,
+  testCases: [
+    {
+      id: 'case-1',
+      title: 'Pay with card',
+      description: 'Card path',
+      steps: [],
+      tags: [{ id: 'tag-2', name: 'regression', type: 'FILTER', tagExpression: '@regression' }],
+    } as never,
+    {
+      id: 'case-2',
+      title: 'Pay with wallet',
+      description: 'Wallet path',
+      steps: [],
+      tags: [],
+    } as never,
+  ],
+} as never
+
+describe('test-suite-picker helpers', () => {
+  it('creates draft maps and normalizes partial/full selections', () => {
+    expect(
+      createDraftSelections([
+        {
+          testSuiteId: 'suite-1',
+          runAll: false,
+          testCaseIds: ['case-1'],
+        },
+      ]),
+    ).toEqual({
+      'suite-1': {
+        testSuiteId: 'suite-1',
+        runAll: false,
+        testCaseIds: ['case-1'],
+      },
+    })
+
+    expect(
+      normalizeSuiteSelection(suite, {
+        testSuiteId: 'suite-1',
+        runAll: false,
+        testCaseIds: ['case-1', 'case-2'],
+      }),
+    ).toEqual({
+      testSuiteId: 'suite-1',
+      runAll: true,
+      testCaseIds: [],
+    })
+  })
+
+  it('matches suites against module, suite, tag, and child test text', () => {
+    expect(suiteMatchesQuery(suite, 'payments')).toBe(true)
+    expect(suiteMatchesQuery(suite, 'wallet')).toBe(true)
+    expect(suiteMatchesQuery(suite, 'smoke')).toBe(true)
+    expect(suiteMatchesQuery(suite, 'missing')).toBe(false)
+  })
+})