create-appraisejs 0.3.0-alpha.0 → 0.3.0-alpha.1

package/templates/starter/src/components/test-case/test-case-form-helpers.ts

@@ -0,0 +1,140 @@
+import { type TemplateStepParameter } from '@prisma/client'
+import { z } from 'zod'
+
+import { testCaseSchema } from '@/constants/form-opts/test-case-form-opts'
+import { templateTestCaseSchema } from '@/constants/form-opts/template-test-case-form-opts'
+import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
+import { IconToKeyTransformer } from '@/lib/transformers/key-to-icon-transformer'
+import type { ActionResponse } from '@/types/form/actionHandler'
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+type ScenarioNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+type ScenarioNode = ScenarioNodeOrder[string]
+
+export const testCaseSubmitSchema = testCaseSchema.extend({
+  testSuiteIds: z.array(z.string()).min(1, { message: 'Test suites are required' }),
+})
+
+export const templateTestCaseSubmitSchema = templateTestCaseSchema
+
+export const testCaseQuickTips = [
+  {
+    title: 'Provide a clear and descriptive title & description',
+    description: 'Use clear, specific terms that indicate the purpose of the test scenario',
+  },
+  {
+    title: 'Build your test scenario step by step',
+    description: 'Build your test scenario step by step visually to help others understand the flow of the test scenario',
+  },
+] as const
+
+function normalizeStepParameters(parameters: ScenarioNode['parameters']) {
+  return parameters.map(parameter => ({
+    name: parameter.name,
+    value: 'value' in parameter ? parameter.value : parameter.defaultValue,
+    type: parameter.type,
+    order: parameter.order,
+  }))
+}
+
+export function buildScenarioSteps(nodeOrder: ScenarioNodeOrder) {
+  return Object.entries(nodeOrder).map(([, value]) => ({
+    gherkinStep: value.gherkinStep || '',
+    label: value.label,
+    icon: IconToKeyTransformer(value.icon),
+    parameters: normalizeStepParameters(value.parameters),
+    order: value.order,
+    templateStepId: value.templateStepId,
+  }))
+}
+
+export function buildScenarioPreview(
+  title: string,
+  description: string | undefined,
+  nodeOrder: ScenarioNodeOrder,
+) {
+  if (!title) {
+    return ''
+  }
+
+  const scenarioHeader = `Scenario: [${title}] ${description || ''}`
+  const validSteps = Object.values(nodeOrder)
+    .filter(step => step.order !== -1)
+    .sort((left, right) => left.order - right.order)
+
+  let hasThenInPrevious = false
+  let hasWhenInPrevious = false
+
+  const gherkinSteps = validSteps.map((step, index) => {
+    const gherkinStep = step.gherkinStep?.trim() || ''
+    const firstWord = gherkinStep.split(' ')[0].toLowerCase()
+    const hasGherkinKeyword = ['given', 'when', 'then', 'and', 'but'].includes(firstWord)
+    const stepWithoutKeyword = hasGherkinKeyword ? gherkinStep.split(' ').slice(1).join(' ') : gherkinStep
+
+    if (index === 0) {
+      return `Given ${stepWithoutKeyword}`
+    }
+
+    const isThenStatement =
+      firstWord === 'then' ||
+      stepWithoutKeyword.toLowerCase().startsWith('should') ||
+      stepWithoutKeyword.toLowerCase().startsWith('must') ||
+      stepWithoutKeyword.toLowerCase().startsWith('will')
+
+    if (!hasThenInPrevious) {
+      if (isThenStatement) {
+        hasThenInPrevious = true
+        return `Then ${stepWithoutKeyword}`
+      }
+
+      if (!hasWhenInPrevious) {
+        hasWhenInPrevious = true
+        return `When ${stepWithoutKeyword}`
+      }
+
+      return `And ${stepWithoutKeyword}`
+    }
+
+    if (isThenStatement) {
+      return `And ${stepWithoutKeyword}`
+    }
+
+    hasThenInPrevious = false
+    hasWhenInPrevious = false
+    return `When ${stepWithoutKeyword}`
+  })
+
+  return [scenarioHeader, ...gherkinSteps].join('\n')
+}
+
+export function getNodesWithMissingMandatoryParams(
+  nodeOrder: NodeOrderMap,
+  templateStepParams: TemplateStepParameter[],
+) {
+  const nodesWithMissingParams: string[] = []
+
+  Object.entries(nodeOrder).forEach(([nodeId, nodeData]) => {
+    if (nodeData.order === -1) {
+      return
+    }
+
+    const isMissingParams = checkMissingMandatoryParams(
+      {
+        parameters: normalizeStepParameters(nodeData.parameters),
+        templateStepId: nodeData.templateStepId,
+      },
+      templateStepParams,
+      false,
+    )
+
+    if (isMissingParams) {
+      nodesWithMissingParams.push(nodeData.label || nodeId)
+    }
+  })
+
+  return nodesWithMissingParams
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || 'An error occurred'
+}

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

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  createSelectionState,
+  getSavedTestCases,
+  getSelectedIdsFromRowSelection,
+  getSelectionSummaryLabel,
+  testCaseMatchesQuery,
+} from './test-case-picker-helpers'
+
+const testCases = [
+  {
+    id: 'case-1',
+    title: 'Login test',
+    description: 'Checks login',
+    tags: [{ id: 'tag-1', name: 'smoke' }],
+    steps: [],
+  },
+  {
+    id: 'case-2',
+    title: 'Checkout test',
+    description: 'Validates payment',
+    tags: [{ id: 'tag-2', name: 'regression' }],
+    steps: [],
+  },
+] as never
+
+describe('test-case-picker helpers', () => {
+  it('creates row selection state and selected ids', () => {
+    expect(createSelectionState(['case-1'])).toEqual({ 'case-1': true })
+    expect(getSelectedIdsFromRowSelection(testCases, { 'case-2': true })).toEqual(['case-2'])
+  })
+
+  it('filters and summarizes saved cases', () => {
+    expect(testCaseMatchesQuery(testCases[0], 'smoke')).toBe(true)
+    expect(testCaseMatchesQuery(testCases[0], 'payment')).toBe(false)
+    expect(getSavedTestCases(testCases, ['case-2'])).toEqual([testCases[1]])
+    expect(getSelectionSummaryLabel('Selected test case(s)')).toBe('test case(s)')
+  })
+})

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

@@ -0,0 +1,41 @@
+import type { RowSelectionState } from '@tanstack/react-table'
+
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+
+export function createSelectionState(selectedIds: string[]): RowSelectionState {
+  return selectedIds.reduce<RowSelectionState>((acc, id) => {
+    acc[id] = true
+    return acc
+  }, {})
+}
+
+export function testCaseMatchesQuery(testCase: TestCasePickerRow, filterValue: unknown): boolean {
+  const query = String(filterValue ?? '').trim().toLowerCase()
+  if (!query) {
+    return true
+  }
+
+  const searchableText = [
+    testCase.title,
+    testCase.description ?? '',
+    ...testCase.tags.map(tag => tag.name),
+  ]
+    .join(' ')
+    .toLowerCase()
+
+  return searchableText.includes(query)
+}
+
+export function getSavedTestCases(testCases: TestCasePickerRow[], selectedIds: string[]): TestCasePickerRow[] {
+  return selectedIds
+    .map(selectedId => testCases.find(testCase => testCase.id === selectedId))
+    .filter((testCase): testCase is TestCasePickerRow => Boolean(testCase))
+}
+
+export function getSelectedIdsFromRowSelection(testCases: TestCasePickerRow[], rowSelection: RowSelectionState): string[] {
+  return testCases.filter(testCase => rowSelection[testCase.id]).map(testCase => testCase.id)
+}
+
+export function getSelectionSummaryLabel(selectedLabel: string) {
+  return selectedLabel.replace(/^selected\s+/i, '')
+}

package/templates/starter/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/starter/src/components/test-case/test-case-picker.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { DataTablePagination } from '@/components/ui/data-table-pagination'
+import { testCasePickerColumns } from '@/components/test-case/test-case-columns'
+import { Badge } from '@/components/ui/badge'
+import { TestCasePickerRow } from '@/types/test-case-picker'
+import {
+  ColumnFiltersState,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { Search } from 'lucide-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[]
+  selectedIds: string[]
+  onSave: (selectedIds: string[]) => void
+  triggerPlaceholder: string
+  dialogTitle: string
+  dialogDescription: string
+  selectedLabel: string
+}
+
+export function TestCasePicker({
+  testCases,
+  selectedIds,
+  onSave,
+  triggerPlaceholder,
+  dialogTitle,
+  dialogDescription,
+  selectedLabel,
+}: TestCasePickerProps) {
+  const [open, setOpen] = useState(false)
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(() => createSelectionState(selectedIds))
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+
+  const openDialog = () => {
+    setRowSelection(createSelectionState(selectedIds))
+    setColumnFilters([])
+    setGlobalFilter('')
+    setPagination(current => ({
+      ...current,
+      pageIndex: 0,
+    }))
+    setOpen(true)
+  }
+
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
+  const table = useReactTable({
+    data: testCases,
+    columns: testCasePickerColumns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    enableRowSelection: true,
+    getRowId: row => row.id,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      rowSelection,
+      pagination,
+    },
+    globalFilterFn: (row, _columnId, filterValue) => testCaseMatchesQuery(row.original, filterValue),
+  })
+
+  const savedTestCases = getSavedTestCases(testCases, selectedIds)
+  const selectionSummaryLabel = getSelectionSummaryLabel(selectedLabel)
+  const shouldConstrainSavedListHeight = savedTestCases.length > 3
+
+  const saveDraftSelection = () => {
+    const nextSelectedIds = getSelectedIdsFromRowSelection(testCases, rowSelection)
+
+    onSave(nextSelectedIds)
+    setOpen(false)
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <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>
+        <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Browse</span>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90vh] max-w-6xl gap-0 overflow-hidden p-0">
+          <DialogHeader className="border-b px-6 py-4">
+            <DialogTitle>{dialogTitle}</DialogTitle>
+            <DialogDescription>{dialogDescription}</DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-4 px-6 py-4">
+            <div className="flex items-center gap-3">
+              <div className="relative flex-1">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={globalFilter}
+                  onChange={event => table.setGlobalFilter(event.target.value)}
+                  placeholder="Search by title, description, or tag..."
+                  className="pl-9"
+                />
+              </div>
+              <div className="text-sm text-muted-foreground">{table.getSelectedRowModel().rows.length} selected</div>
+            </div>
+
+            <ScrollArea className="h-[420px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10 bg-background">
+                  {table.getHeaderGroups().map(headerGroup => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map(header => (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows.length > 0 ? (
+                    table.getRowModel().rows.map(row => (
+                      <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                        {row.getVisibleCells().map(cell => (
+                          <TableCell key={cell.id}>
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={testCasePickerColumns.length} className="h-24 text-center">
+                        No test cases found.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </ScrollArea>
+
+            <DataTablePagination table={table} showSelectedRows={false} />
+          </div>
+
+          <DialogFooter className="border-t px-6 py-4">
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="button" onClick={saveDraftSelection}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {savedTestCases.length > 0 && (
+        <div className="rounded-md border bg-muted/20">
+          <div className="border-b px-4 py-3 text-sm font-medium">{selectedLabel}</div>
+          <ScrollArea className={cn(shouldConstrainSavedListHeight && 'h-56')}>
+            <div className="space-y-3 p-4">
+              {savedTestCases.map(testCase => (
+                <div key={testCase.id} className="rounded-md border bg-background p-3">
+                  <div className="mb-1 text-sm font-semibold">{testCase.title}</div>
+                  <p className="text-xs text-muted-foreground">{testCase.description?.trim() || 'No description provided.'}</p>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    <Badge variant="secondary">{testCase.steps.length} steps</Badge>
+                    {testCase.tags.slice(0, 3).map(tag => (
+                      <Badge key={tag.id} variant="outline">
+                        {tag.name}
+                      </Badge>
+                    ))}
+                    {testCase.tags.length > 3 && <Badge variant="outline">+{testCase.tags.length - 3} more</Badge>}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TestCasePicker

package/templates/starter/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/starter/src/components/test-run/download-logs-button.tsx

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

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