create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/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/default/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/default/src/components/test-run/view-report-button.tsx

@@ -1,102 +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>
-  )
-}
+'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/default/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)
+  })
+})

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

@@ -0,0 +1,76 @@
+import { getFilterTags } from '@/lib/tag-utils'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+
+export type DraftSelectionMap = Record<string, TestSuiteSelection>
+
+export function createDraftSelections(selectedSuites: TestSuiteSelection[]): DraftSelectionMap {
+  return selectedSuites.reduce<DraftSelectionMap>((acc, selection) => {
+    acc[selection.testSuiteId] = {
+      testSuiteId: selection.testSuiteId,
+      runAll: selection.runAll,
+      testCaseIds: selection.testCaseIds,
+    }
+    return acc
+  }, {})
+}
+
+export function normalizeSuiteSelection(
+  testSuite: TestSuitePickerRow,
+  selection: TestSuiteSelection,
+): TestSuiteSelection | null {
+  const childIds = testSuite.testCases.map(testCase => testCase.id)
+
+  if (childIds.length === 0) {
+    return null
+  }
+
+  if (selection.runAll) {
+    return {
+      testSuiteId: testSuite.id,
+      runAll: true,
+      testCaseIds: [],
+    }
+  }
+
+  const selectedChildIds = selection.testCaseIds.filter(testCaseId => childIds.includes(testCaseId))
+  if (selectedChildIds.length === 0) {
+    return null
+  }
+
+  if (selectedChildIds.length === childIds.length) {
+    return {
+      testSuiteId: testSuite.id,
+      runAll: true,
+      testCaseIds: [],
+    }
+  }
+
+  return {
+    testSuiteId: testSuite.id,
+    runAll: false,
+    testCaseIds: selectedChildIds,
+  }
+}
+
+export function suiteMatchesQuery(testSuite: TestSuitePickerRow, query: string): boolean {
+  if (!query) {
+    return true
+  }
+
+  const normalizedQuery = query.toLowerCase()
+  const searchableText = [
+    testSuite.name,
+    testSuite.description ?? '',
+    testSuite.module.name,
+    ...getFilterTags(testSuite.tags).map(tag => tag.name),
+    ...testSuite.testCases.flatMap(testCase => [
+      testCase.title,
+      testCase.description ?? '',
+      ...getFilterTags(testCase.tags).map(tag => tag.name),
+    ]),
+  ]
+    .join(' ')
+    .toLowerCase()
+
+  return searchableText.includes(normalizedQuery)
+}

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

@@ -0,0 +1,65 @@
+// @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 TestSuitePicker from './test-suite-picker'
+
+describe('TestSuitePicker', () => {
+  it('saves a partial suite selection', async () => {
+    const user = userEvent.setup()
+    const onSave = vi.fn()
+
+    render(
+      <TestSuitePicker
+        testSuites={[
+          {
+            id: 'suite-1',
+            name: 'Checkout',
+            description: 'Checkout flow',
+            module: { id: 'module-1', name: 'Payments' },
+            tags: [],
+            testCases: [
+              {
+                id: 'case-1',
+                title: 'Pay with card',
+                description: 'Card path',
+                steps: [],
+                tags: [],
+              },
+              {
+                id: 'case-2',
+                title: 'Pay with wallet',
+                description: 'Wallet path',
+                steps: [],
+                tags: [],
+              },
+            ],
+          } as never,
+        ]}
+        selectedSuites={[]}
+        onSave={onSave}
+        triggerPlaceholder="Select test suite(s)"
+        dialogTitle="Select Test Suites"
+        dialogDescription="Pick suites"
+        selectedLabel="Selected suites"
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /select test suite/i }))
+    await user.click(screen.getByRole('button', { name: /checkout/i }))
+    await user.click(screen.getByRole('checkbox', { name: 'Select test case Pay with card' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith([
+        {
+          testSuiteId: 'suite-1',
+          runAll: false,
+          testCaseIds: ['case-1'],
+        },
+      ])
+    })
+  })
+})