create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/components/test-run/test-run-details.test.tsx

@@ -0,0 +1,174 @@
+// @vitest-environment jsdom
+
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  TestRunResult,
+  TestRunStatus,
+  TestRunTestCaseResult,
+  TestRunTestCaseStatus,
+} from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { TestRunDetails } from './test-run-details'
+import type { TestRunDetailsData } from './test-run-details-helpers'
+
+const {
+  getTestRunByIdAction,
+  spawnTraceViewerAction,
+  checkTraceViewerStatusAction,
+  cancelTestRunAction,
+  toast,
+} = vi.hoisted(() => ({
+  getTestRunByIdAction: vi.fn(),
+  spawnTraceViewerAction: vi.fn(),
+  checkTraceViewerStatusAction: vi.fn(),
+  cancelTestRunAction: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('@/actions/test-run/test-run-actions', () => ({
+  getTestRunByIdAction,
+  spawnTraceViewerAction,
+  checkTraceViewerStatusAction,
+  cancelTestRunAction,
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('motion/react', () => ({
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  motion: {
+    div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
+  },
+}))
+
+function createTestRunDetails(overrides?: Partial<TestRunDetailsData>): TestRunDetailsData {
+  return {
+    id: 'run-db-id',
+    name: 'Nightly run',
+    runId: 'run-1',
+    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: [
+      {
+        id: 'tc-1',
+        testRunId: 'run-db-id',
+        testCaseId: 'case-1',
+        testSuiteId: 'suite-1',
+        status: TestRunTestCaseStatus.PENDING,
+        result: TestRunTestCaseResult.UNTESTED,
+        tracePath: 'trace.zip',
+        testCase: {
+          title: 'Login test',
+          description: 'Checks login',
+        },
+        testSuite: {
+          id: 'suite-1',
+          name: 'Smoke',
+        },
+      },
+    ],
+    tags: [
+      {
+        id: 'tag-1',
+        name: 'smoke',
+      },
+    ],
+    environment: {
+      id: 'env-1',
+      name: 'Staging',
+    },
+    reports: [],
+    ...overrides,
+  } as TestRunDetailsData
+}
+
+describe('TestRunDetails', () => {
+  beforeEach(() => {
+    vi.useRealTimers()
+    getTestRunByIdAction.mockReset()
+    spawnTraceViewerAction.mockReset()
+    checkTraceViewerStatusAction.mockReset()
+    cancelTestRunAction.mockReset()
+    toast.mockReset()
+  })
+
+  it('polls a running run and updates the UI when it completes', async () => {
+    vi.useFakeTimers()
+
+    getTestRunByIdAction.mockResolvedValue({
+      status: 200,
+      data: createTestRunDetails({
+        status: TestRunStatus.COMPLETED,
+        result: TestRunResult.PASSED,
+        completedAt: new Date('2024-01-01T00:00:10.000Z'),
+        testCases: [
+          {
+            ...createTestRunDetails().testCases[0],
+            status: TestRunTestCaseStatus.COMPLETED,
+            result: TestRunTestCaseResult.PASSED,
+          },
+        ],
+      }),
+    })
+
+    render(<TestRunDetails testRun={createTestRunDetails()} />)
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2000)
+    })
+
+    expect(screen.getByText('Finished')).toBeInTheDocument()
+    expect(screen.getAllByText('Completed').length).toBeGreaterThan(0)
+    expect(screen.getByText('1 of 1 tests finished')).toBeInTheDocument()
+  })
+
+  it('handles trace viewer launches and cancellation actions', async () => {
+    const user = userEvent.setup()
+
+    spawnTraceViewerAction.mockResolvedValue({ status: 200, message: 'opened' })
+    cancelTestRunAction.mockResolvedValue({ status: 200, message: 'Cancelled successfully' })
+    checkTraceViewerStatusAction.mockResolvedValue({ status: 200, data: { isRunning: true } })
+
+    render(
+      <TestRunDetails
+        testRun={createTestRunDetails({
+          testCases: [
+            {
+              ...createTestRunDetails().testCases[0],
+              status: TestRunTestCaseStatus.COMPLETED,
+              result: TestRunTestCaseResult.FAILED,
+            },
+          ],
+        })}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /view trace/i }))
+
+    await waitFor(() => {
+      expect(spawnTraceViewerAction).toHaveBeenCalledWith('run-1', 'tc-1')
+    })
+
+    await user.click(screen.getByRole('button', { name: /cancel run/i }))
+
+    await waitFor(() => {
+      expect(cancelTestRunAction).toHaveBeenCalledWith('run-1')
+      expect(toast).toHaveBeenCalledWith({
+        title: 'Test run cancelled',
+        description: 'Cancelled successfully',
+      })
+    })
+  })
+})

package/templates/starter/src/components/test-run/test-run-details.tsx

@@ -0,0 +1,322 @@
+'use client'
+
+import { AnimatePresence, motion } from 'motion/react'
+import { TestRunStatus, TestRunTestCaseResult } from '@prisma/client'
+import {
+  Binoculars,
+  CheckCircle,
+  ExternalLink,
+  Info,
+  LoaderCircle,
+  Tag as TagIcon,
+  Tags,
+  TestTubeDiagonal,
+  TestTubes,
+  Timer,
+  Trash,
+  XCircle,
+} from 'lucide-react'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { cn, formatDateTime } from '@/lib/utils'
+
+import {
+  getDurationSeconds,
+  getProgressStats,
+  getTestCaseResultMeta,
+  getTestCaseStatusMeta,
+  getTestRunResultText,
+  getTestRunStatusMeta,
+  type TestRunDetailsData,
+} from './test-run-details-helpers'
+import { useTestRunDetails } from './use-test-run-details'
+
+type TestRunDetailsProps = {
+  testRun: TestRunDetailsData
+}
+
+export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps) {
+  const { testRun, loadingTraceViewer, runningTraceViewers, isCancelling, handleViewTrace, handleCancelRun } =
+    useTestRunDetails({ initialTestRun })
+
+  const statusMeta = getTestRunStatusMeta(testRun.status, testRun.result)
+  const progress = getProgressStats(testRun.testCases)
+  const durationSeconds = getDurationSeconds(testRun.startedAt, testRun.completedAt)
+  const StatusIcon = statusMeta.icon
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            {testRun.status === TestRunStatus.RUNNING ? (
+              <div className="flex items-center gap-2">
+                <LoaderCircle className="h-6 w-6 animate-spin text-blue-500" />
+                <span>Executing</span>
+              </div>
+            ) : testRun.status === TestRunStatus.COMPLETED ? (
+              <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
+                <CheckCircle className="h-6 w-6 text-green-500" />
+                <span>Finished</span>
+              </div>
+            ) : testRun.status === TestRunStatus.CANCELLED ? (
+              <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
+                <XCircle className="h-6 w-6 text-red-500 duration-300 animate-in fade-in-0" />
+                <span>Interrupted</span>
+              </div>
+            ) : null}
+            {testRun.status === TestRunStatus.RUNNING ? (
+              <Button
+                onClick={handleCancelRun}
+                disabled={isCancelling}
+                className="bg-red-500 font-bold text-white hover:bg-red-600"
+                size="sm"
+              >
+                {isCancelling ? (
+                  <>
+                    <LoaderCircle className="h-4 w-4 animate-spin" />
+                    Cancelling...
+                  </>
+                ) : (
+                  <>
+                    <Trash className="h-4 w-4" />
+                    <span>Cancel Run</span>
+                  </>
+                )}
+              </Button>
+            ) : null}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <Progress value={progress.percentage} />
+            </div>
+            <div className="whitespace-nowrap text-sm font-medium">
+              {progress.completed} of {progress.total} tests finished
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Info className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Test Run Information</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Name</span>
+              <span className="text-sm">{testRun.name}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Status</span>
+              <Badge variant="outline" className={cn(statusMeta.badgeClassName, 'py-1')}>
+                <span className="mr-1 text-white">
+                  <StatusIcon className={cn('h-4 w-4', testRun.status === TestRunStatus.RUNNING && 'animate-spin')} />
+                </span>
+                <span className="text-white">{statusMeta.label}</span>
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Result</span>
+              <Badge variant="outline">{getTestRunResultText(testRun.result)}</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Run ID</span>
+              <span className="font-mono text-sm">{testRun.runId}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Environment</span>
+              <span className="text-sm">{testRun.environment.name}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Browser</span>
+              <span className="text-sm">{testRun.browserEngine}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Workers</span>
+              <span className="text-sm">{testRun.testWorkersCount || 1}</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Timer className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Timing</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Started At</span>
+              <span className="text-sm">{formatDateTime(testRun.startedAt)}</span>
+            </div>
+            {testRun.completedAt ? (
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Completed At</span>
+                <span className="text-sm">{formatDateTime(testRun.completedAt)}</span>
+              </div>
+            ) : null}
+            {durationSeconds !== null ? (
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Duration</span>
+                <span className="text-sm">{durationSeconds}s</span>
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+
+        <Card className="md:col-span-2">
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Tags className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Tags</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {testRun.tags.length > 0 ? (
+              <div className="flex flex-wrap gap-2">
+                {testRun.tags.map(tag => (
+                  <Badge key={tag.id} variant="outline" className="bg-gray-700 text-white">
+                    <TagIcon className="mr-2 h-4 w-4 text-white" />
+                    <span className="text-sm">{tag.name}</span>
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">No tags</span>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="md:col-span-2">
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <TestTubes className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Test Cases ({testRun.testCases.length})</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {testRun.testCases.length > 0 ? (
+              <div className="space-y-2">
+                {testRun.testCases.map(testCase => {
+                  const testCaseStatusMeta = getTestCaseStatusMeta(testCase.status)
+                  const testCaseResultMeta = getTestCaseResultMeta(testCase.result)
+                  const TestCaseStatusIcon = testCaseStatusMeta.icon
+                  const TestCaseResultIcon = testCaseResultMeta.icon
+
+                  return (
+                    <div
+                      key={testCase.id}
+                      className="flex items-center justify-between rounded-md bg-muted p-2 shadow-md"
+                    >
+                      <div className="flex items-center gap-2">
+                        <TestTubeDiagonal
+                          className={cn(
+                            'mr-2 h-6 w-6 text-white',
+                            testCase.result === TestRunTestCaseResult.PASSED
+                              ? 'text-green-500'
+                              : testCase.result === TestRunTestCaseResult.FAILED
+                                ? 'text-red-500'
+                                : testCase.result === TestRunTestCaseResult.UNTESTED
+                                  ? 'text-blue-500'
+                                  : 'text-gray-500',
+                          )}
+                        />
+                        <div className="flex flex-col gap-1">
+                          <span className="text-sm font-semibold">{testCase.testCase.title}</span>
+                          <span className="text-xs text-muted-foreground">{testCase.testCase.description}</span>
+                          {testCase.testSuite ? (
+                            <div className="pt-1">
+                              <Badge variant="outline" className="w-fit text-[11px]">
+                                Suite: {testCase.testSuite.name}
+                              </Badge>
+                            </div>
+                          ) : null}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                          <div className="flex min-w-20 items-center gap-2 p-1.5">
+                            <TestCaseStatusIcon
+                              className={cn(
+                                'h-4 w-4',
+                                testCase.status === 'PENDING' || testCase.status === 'RUNNING'
+                                  ? 'animate-spin'
+                                  : testCaseStatusMeta.iconClassName,
+                              )}
+                            />
+                            <span>{testCaseStatusMeta.label}</span>
+                          </div>
+                        </Badge>
+                        <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                          <div className="flex min-w-20 items-center gap-2 p-1.5">
+                            <TestCaseResultIcon className={cn('h-4 w-4', testCaseResultMeta.iconClassName)} />
+                            <span>{testCaseResultMeta.label}</span>
+                          </div>
+                        </Badge>
+                        {testCase.result === TestRunTestCaseResult.FAILED && testCase.tracePath ? (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleViewTrace(testCase.id)}
+                            disabled={loadingTraceViewer === testCase.id || runningTraceViewers.has(testCase.id)}
+                            className="w-28 bg-transparent text-xs"
+                          >
+                            <AnimatePresence mode="wait" initial={false}>
+                              <motion.div
+                                key={
+                                  loadingTraceViewer === testCase.id
+                                    ? 'opening'
+                                    : runningTraceViewers.has(testCase.id)
+                                      ? 'running'
+                                      : 'idle'
+                                }
+                                initial={{ opacity: 0, y: 4 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -4 }}
+                                transition={{ duration: 0.15 }}
+                                className="flex w-full items-center justify-center gap-1"
+                              >
+                                {loadingTraceViewer === testCase.id ? (
+                                  <>
+                                    <ExternalLink className="h-3 w-3 animate-pulse text-gray-500" />
+                                    Opening
+                                  </>
+                                ) : runningTraceViewers.has(testCase.id) ? (
+                                  <>
+                                    <LoaderCircle className="text-white-500 h-3 w-3 animate-spin" />
+                                    Running
+                                  </>
+                                ) : (
+                                  <>
+                                    <Binoculars className="h-3 w-3 text-blue-500" />
+                                    View Trace
+                                  </>
+                                )}
+                              </motion.div>
+                            </AnimatePresence>
+                          </Button>
+                        ) : null}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">No test cases</span>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

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