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

package/templates/default/src/components/test-case/test-case-picker.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import TestCasePicker from './test-case-picker'
+
+describe('TestCasePicker', () => {
+  it('saves selected test cases from the dialog', async () => {
+    const user = userEvent.setup()
+    const onSave = vi.fn()
+
+    render(
+      <TestCasePicker
+        testCases={[
+          {
+            id: 'case-1',
+            title: 'Login test',
+            description: 'Checks login',
+            tags: [{ id: 'tag-1', name: 'smoke' }],
+            steps: [],
+            createdAt: new Date('2024-01-01T00:00:00.000Z'),
+            updatedAt: new Date('2024-01-01T00:00:00.000Z'),
+          } as never,
+        ]}
+        selectedIds={[]}
+        onSave={onSave}
+        triggerPlaceholder="Select test case(s)"
+        dialogTitle="Select Test Cases"
+        dialogDescription="Pick cases"
+        selectedLabel="Selected test case(s)"
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /select test case/i }))
+    await user.click(screen.getByRole('checkbox', { name: /select row/i }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(['case-1'])
+    })
+  })
+})

package/templates/default/src/components/test-case/test-case-picker.tsx

@@ -29,8 +29,15 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import { Search } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { cn } from '@/lib/utils'
+import {
+  createSelectionState,
+  getSavedTestCases,
+  getSelectedIdsFromRowSelection,
+  getSelectionSummaryLabel,
+  testCaseMatchesQuery,
+} from './test-case-picker-helpers'
 
 type TestCasePickerProps = {
   testCases: TestCasePickerRow[]
@@ -42,12 +49,6 @@ type TestCasePickerProps = {
   selectedLabel: string
 }
 
-const createSelectionState = (selectedIds: string[]): RowSelectionState =>
-  selectedIds.reduce<RowSelectionState>((acc, id) => {
-    acc[id] = true
-    return acc
-  }, {})
-
 export function TestCasePicker({
   testCases,
   selectedIds,
@@ -67,11 +68,7 @@ export function TestCasePicker({
     pageSize: 10,
   })
 
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-
+  const openDialog = () => {
     setRowSelection(createSelectionState(selectedIds))
     setColumnFilters([])
     setGlobalFilter('')
@@ -79,7 +76,8 @@ export function TestCasePicker({
       ...current,
       pageIndex: 0,
     }))
-  }, [open, selectedIds])
+    setOpen(true)
+  }
 
   // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
   const table = useReactTable({
@@ -103,32 +101,15 @@ export function TestCasePicker({
       rowSelection,
       pagination,
     },
-    globalFilterFn: (row, _columnId, filterValue) => {
-      const query = String(filterValue).trim().toLowerCase()
-      if (!query) {
-        return true
-      }
-
-      const searchableText = [
-        row.original.title,
-        row.original.description ?? '',
-        ...row.original.tags.map(tag => tag.name),
-      ]
-        .join(' ')
-        .toLowerCase()
-
-      return searchableText.includes(query)
-    },
+    globalFilterFn: (row, _columnId, filterValue) => testCaseMatchesQuery(row.original, filterValue),
   })
 
-  const savedTestCases = selectedIds
-    .map(selectedId => testCases.find(testCase => testCase.id === selectedId))
-    .filter((testCase): testCase is TestCasePickerRow => Boolean(testCase))
-  const selectionSummaryLabel = selectedLabel.replace(/^selected\s+/i, '')
+  const savedTestCases = getSavedTestCases(testCases, selectedIds)
+  const selectionSummaryLabel = getSelectionSummaryLabel(selectedLabel)
   const shouldConstrainSavedListHeight = savedTestCases.length > 3
 
   const saveDraftSelection = () => {
-    const nextSelectedIds = testCases.filter(testCase => rowSelection[testCase.id]).map(testCase => testCase.id)
+    const nextSelectedIds = getSelectedIdsFromRowSelection(testCases, rowSelection)
 
     onSave(nextSelectedIds)
     setOpen(false)
@@ -136,7 +117,7 @@ export function TestCasePicker({
 
   return (
     <div className="flex flex-col gap-3">
-      <Button type="button" variant="outline" className="justify-between" onClick={() => setOpen(true)}>
+      <Button type="button" variant="outline" className="justify-between" onClick={openDialog}>
         <span className={selectedIds.length > 0 ? 'text-foreground' : 'text-muted-foreground'}>
           {selectedIds.length > 0 ? `${selectedIds.length} ${selectionSummaryLabel.toLowerCase()} selected` : triggerPlaceholder}
         </span>

package/templates/default/src/components/test-case/test-scenario-preview.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import CodeMirror, { EditorView } from '@uiw/react-codemirror'
+import { langs } from '@uiw/codemirror-extensions-langs'
+import { githubDark } from '@uiw/codemirror-theme-github'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+type TestScenarioPreviewProps = {
+  title: string
+  description?: string
+  scenario: string
+}
+
+export function TestScenarioPreview({ title, description, scenario }: TestScenarioPreviewProps) {
+  return (
+    <Card className="border-gray-700 bg-gray-500/10">
+      <CardHeader>
+        <CardTitle className="text-xl font-bold text-primary">{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>
+        <CodeMirror
+          editable={false}
+          value={scenario}
+          onChange={() => {}}
+          height="200px"
+          extensions={[langs.feature(), EditorView.lineWrapping]}
+          theme={githubDark}
+        />
+      </CardContent>
+    </Card>
+  )
+}

package/templates/default/src/components/test-run/download-logs-button.tsx

@@ -1,92 +1,92 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Download, LoaderCircle } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import { toast } from '@/hooks/use-toast'
-
-interface DownloadLogsButtonProps {
-  testRunId: string
-  className?: string
-}
-
-export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonProps) {
-  const [isDownloading, setIsDownloading] = useState(false)
-
-  const handleDownload = async () => {
-    setIsDownloading(true)
-    try {
-      const response = await fetch(`/api/test-runs/${testRunId}/download`)
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
-        throw new Error(errorData.error || `Failed to download: ${response.statusText}`)
-      }
-
-      // Get the filename from Content-Disposition header or use a default
-      const contentDisposition = response.headers.get('Content-Disposition')
-      let filename = `test-run-${testRunId}.zip`
-      if (contentDisposition) {
-        const filenameMatch = contentDisposition.match(/filename="?(.+?)"?$/)
-        if (filenameMatch) {
-          filename = filenameMatch[1]
-        }
-      }
-
-      // Create a blob from the response
-      const blob = await response.blob()
-
-      // Create a download link and trigger it
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      window.URL.revokeObjectURL(url)
-
-      toast({
-        title: 'Download started',
-        description: 'Run artifacts are being downloaded',
-      })
-    } catch (error) {
-      console.error('[DownloadLogsButton] Error downloading logs:', error)
-      toast({
-        title: 'Download failed',
-        description: error instanceof Error ? error.message : 'Failed to download run artifacts',
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDownloading(false)
-    }
-  }
-
-  return (
-    <Button onClick={handleDownload} disabled={isDownloading} variant="outline" size="sm" className={className}>
-      <AnimatePresence mode="wait" initial={false}>
-        <motion.div
-          key={isDownloading ? 'downloading' : 'idle'}
-          initial={{ opacity: 0, y: 4 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -4 }}
-          transition={{ duration: 0.15 }}
-          className="flex items-center gap-2"
-        >
-          {isDownloading ? (
-            <>
-              <LoaderCircle className="h-4 w-4 animate-spin" />
-              Downloading...
-            </>
-          ) : (
-            <>
-              <Download className="h-4 w-4" />
-              Download Run Artifacts
-            </>
-          )}
-        </motion.div>
-      </AnimatePresence>
-    </Button>
-  )
-}
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Download, LoaderCircle } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import { toast } from '@/hooks/use-toast'
+
+interface DownloadLogsButtonProps {
+  testRunId: string
+  className?: string
+}
+
+export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonProps) {
+  const [isDownloading, setIsDownloading] = useState(false)
+
+  const handleDownload = async () => {
+    setIsDownloading(true)
+    try {
+      const response = await fetch(`/api/test-runs/${testRunId}/download`)
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+        throw new Error(errorData.error || `Failed to download: ${response.statusText}`)
+      }
+
+      // Get the filename from Content-Disposition header or use a default
+      const contentDisposition = response.headers.get('Content-Disposition')
+      let filename = `test-run-${testRunId}.zip`
+      if (contentDisposition) {
+        const filenameMatch = contentDisposition.match(/filename="?(.+?)"?$/)
+        if (filenameMatch) {
+          filename = filenameMatch[1]
+        }
+      }
+
+      // Create a blob from the response
+      const blob = await response.blob()
+
+      // Create a download link and trigger it
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.URL.revokeObjectURL(url)
+
+      toast({
+        title: 'Download started',
+        description: 'Run artifacts are being downloaded',
+      })
+    } catch (error) {
+      console.error('[DownloadLogsButton] Error downloading logs:', error)
+      toast({
+        title: 'Download failed',
+        description: error instanceof Error ? error.message : 'Failed to download run artifacts',
+        variant: 'destructive',
+      })
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  return (
+    <Button onClick={handleDownload} disabled={isDownloading} variant="outline" size="sm" className={className}>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={isDownloading ? 'downloading' : 'idle'}
+          initial={{ opacity: 0, y: 4 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -4 }}
+          transition={{ duration: 0.15 }}
+          className="flex items-center gap-2"
+        >
+          {isDownloading ? (
+            <>
+              <LoaderCircle className="h-4 w-4 animate-spin" />
+              Downloading...
+            </>
+          ) : (
+            <>
+              <Download className="h-4 w-4" />
+              Download Run Artifacts
+            </>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </Button>
+  )
+}

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

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { TestRunStatus } from '@prisma/client'
+
+import {
+  getConnectionStatusText,
+  isFatalLogStreamError,
+  isTerminalRunStatus,
+  parseLogMessages,
+} from './log-viewer-helpers'
+
+describe('log-viewer helpers', () => {
+  it('parses serialized log timestamps into Date instances', () => {
+    const logs = parseLogMessages([
+      {
+        type: 'stdout',
+        message: 'Started',
+        timestamp: '2024-01-01T00:00:00.000Z',
+      },
+    ])
+
+    expect(logs).toHaveLength(1)
+    expect(logs[0]?.timestamp).toBeInstanceOf(Date)
+  })
+
+  it('identifies terminal statuses and fatal stream errors', () => {
+    expect(isTerminalRunStatus(TestRunStatus.COMPLETED)).toBe(true)
+    expect(isTerminalRunStatus(TestRunStatus.CANCELLED)).toBe(true)
+    expect(isTerminalRunStatus(TestRunStatus.RUNNING)).toBe(false)
+    expect(isFatalLogStreamError('Test run not found')).toBe(true)
+    expect(isFatalLogStreamError('temporary disconnect')).toBe(false)
+  })
+
+  it('formats connection status text', () => {
+    expect(getConnectionStatusText('loading')).toBe('Loading...')
+    expect(getConnectionStatusText('connected')).toBe('Connected')
+  })
+})

package/templates/default/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/default/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' })
+  })
+})