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

package/templates/starter/src/app/(base)/test-runs/test-run-table.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { deleteTestRunAction, getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { Environment, Tag, TestRun, TestRunTestCase, TestRunStatus } from '@prisma/client'
+import React, { useEffect, useState, useRef, useMemo } from 'react'
+import { testRunTableCols } from './test-run-table-columns'
+
+type TestRunData = TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment }
+
+interface TestRunTableProps {
+  initialData: TestRunData[]
+  filter: 'recentFailed' | 'all'
+}
+
+const TestRunTable = ({ initialData, filter = 'all' }: TestRunTableProps) => {
+  const [testRuns, setTestRuns] = useState<TestRunData[]>(initialData)
+  const pollingRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Memoize running test run IDs to avoid unnecessary effect re-runs
+  // Include RUNNING, QUEUED, and CANCELLING statuses for polling
+  const runningTestRunIds = useMemo(() => {
+    return testRuns
+      .filter(
+        tr =>
+          tr.status === TestRunStatus.RUNNING ||
+          tr.status === TestRunStatus.QUEUED ||
+          tr.status === TestRunStatus.CANCELLING,
+      )
+      .map(tr => tr.id)
+  }, [testRuns])
+
+  // Create a stable dependency string for useEffect
+  const runningTestRunIdsKey = useMemo(() => runningTestRunIds.join(','), [runningTestRunIds])
+
+  // Poll for status updates while test runs are running
+  useEffect(() => {
+    // Clear any existing polling interval
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+
+    // If no running test runs, don't poll
+    if (runningTestRunIds.length === 0) {
+      return
+    }
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        // Poll only running test runs in parallel
+        const updatePromises = runningTestRunIds.map(async id => {
+          const { data, error } = await getTestRunByIdAction(id)
+          if (error || !data) {
+            return null
+          }
+          // getTestRunByIdAction returns testCases with nested testCase, but we need to flatten it
+          const testRun = data as TestRun & {
+            testCases: (TestRunTestCase & { testCase: { title: string } })[]
+            tags: Tag[]
+            environment: Environment
+          }
+          // Convert to the format expected by the table (flatten testCases)
+          return {
+            ...testRun,
+            testCases: testRun.testCases.map(tc => ({
+              id: tc.id,
+              testRunId: tc.testRunId,
+              testCaseId: tc.testCaseId,
+              status: tc.status,
+              result: tc.result,
+            })) as TestRunTestCase[],
+          } as TestRunData
+        })
+
+        const updates = await Promise.all(updatePromises)
+        const validUpdates = updates.filter((u): u is TestRunData => u !== null)
+
+        // Update only the changed test runs
+        setTestRuns(prev =>
+          prev.map(tr => {
+            const update = validUpdates.find(u => u.id === tr.id)
+            return update || tr
+          }),
+        )
+
+        // Check if any are still running (including CANCELLING)
+        const stillRunning = validUpdates.filter(
+          u =>
+            u.status === TestRunStatus.RUNNING ||
+            u.status === TestRunStatus.QUEUED ||
+            u.status === TestRunStatus.CANCELLING,
+        )
+
+        // If no test runs are running anymore, stop polling
+        if (stillRunning.length === 0 && pollingRef.current) {
+          clearInterval(pollingRef.current)
+          pollingRef.current = null
+        }
+      } catch (error) {
+        console.error('Error polling test runs status:', error)
+      }
+    }, 2000) // Poll every 2 seconds
+
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current)
+        pollingRef.current = null
+      }
+    }
+  }, [runningTestRunIdsKey, runningTestRunIds])
+
+  return (
+    <>
+      <DataTable
+        columns={testRunTableCols}
+        data={testRuns}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestRunAction}
+        createLink={filter === 'all' ? '/test-runs/create' : undefined}
+      />
+    </>
+  )
+}
+
+export default TestRunTable

package/templates/starter/src/app/(base)/test-runs/use-test-run-name-validation.ts

@@ -0,0 +1,74 @@
+'use client'
+
+import { useCallback, useEffect, useRef } from 'react'
+
+import { checkTestRunNameUniqueAction } from '@/actions/test-run/test-run-actions'
+
+type NameValidationResult = {
+  isValid: boolean
+  error?: string
+}
+
+export function useTestRunNameValidation(id?: string) {
+  const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const checkNameUniqueness = useCallback(
+    async (name: string): Promise<NameValidationResult> => {
+      if (!name) {
+        return { isValid: true }
+      }
+
+      try {
+        const response = await checkTestRunNameUniqueAction(name, id)
+
+        if (response.status !== 200) {
+          return { isValid: true }
+        }
+
+        const isUnique =
+          typeof response.data === 'object' &&
+          response.data !== null &&
+          'isUnique' in response.data &&
+          typeof response.data.isUnique === 'boolean'
+            ? response.data.isUnique
+            : true
+
+        return isUnique
+          ? { isValid: true }
+          : {
+              isValid: false,
+              error: 'A test run with this name already exists. Please choose a different name.',
+            }
+      } catch {
+        return { isValid: true }
+      }
+    },
+    [id],
+  )
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const debouncedNameValidation = useCallback(
+    (name: string): Promise<NameValidationResult> =>
+      new Promise(resolve => {
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current)
+        }
+
+        debounceTimeoutRef.current = setTimeout(async () => {
+          resolve(await checkNameUniqueness(name))
+        }, 500)
+      }),
+    [checkNameUniqueness],
+  )
+
+  return {
+    debouncedNameValidation,
+  }
+}

package/templates/starter/src/app/(base)/test-suites/create/page.tsx

@@ -0,0 +1,51 @@
+import { createTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { TestSuiteForm } from '../test-suite-form'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+import { getModuleRows, getTagRows, getTestCasePickerRows } from '../test-suite-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Test Suite',
+  description: 'Create a new test suite to run your tests against',
+}
+
+const CreateTestSuite = async () => {
+  const [testCasesResponse, moduleListResponse, tagsResponse] = await Promise.all([
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllTagsAction(),
+  ])
+
+  const loadError = testCasesResponse.error || moduleListResponse.error || tagsResponse.error
+  if (loadError) {
+    return <div>Error: {loadError}</div>
+  }
+
+  const testCases = getTestCasePickerRows(testCasesResponse.data)
+  const moduleList = getModuleRows(moduleListResponse.data)
+  const tags = getTagRows(tagsResponse.data)
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Test Suite</PageHeader>
+        <HeaderSubtitle>Create a new test suite to run your tests against</HeaderSubtitle>
+      </div>
+      <TestSuiteForm
+        successTitle="Suite created"
+        successMessage="Test suite created successfully"
+        onSubmitAction={createTestSuiteAction}
+        testCases={testCases}
+        moduleList={moduleList}
+        tags={tags}
+      />
+    </>
+  )
+}
+
+export default CreateTestSuite

package/templates/starter/src/app/(base)/test-suites/modify/[id]/page.tsx

@@ -0,0 +1,59 @@
+import { getTestSuiteByIdAction, updateTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { TestSuiteForm } from '../../test-suite-form'
+import React from 'react'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+import { getEditableTestSuite, getModuleRows, getTagRows, getTestCasePickerRows } from '../../test-suite-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Test Suite',
+  description: 'Update test suite configuration',
+}
+
+const ModifyTestSuite = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const [testSuiteResponse, testCasesResponse, moduleListResponse, tagsResponse] = await Promise.all([
+    getTestSuiteByIdAction(id),
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllTagsAction(),
+  ])
+
+  const loadError = testSuiteResponse.error || moduleListResponse.error || tagsResponse.error
+  if (loadError) {
+    return <div>Error: {loadError}</div>
+  }
+
+  const testSuiteData = getEditableTestSuite(testSuiteResponse.data)
+  if (!testSuiteData) {
+    return <div>Error: Invalid test suite</div>
+  }
+
+  const testCases = getTestCasePickerRows(testCasesResponse.data)
+  const moduleList = getModuleRows(moduleListResponse.data)
+  const tags = getTagRows(tagsResponse.data)
+
+  return (
+    <TestSuiteForm
+      defaultValues={{
+        name: testSuiteData.name ?? '',
+        description: testSuiteData.description ?? '',
+        testCases: testSuiteData.testCases.map(testCase => testCase.id),
+        moduleId: testSuiteData.moduleId ?? '',
+        tagIds: testSuiteData.tags?.map(tag => tag.id) || [],
+      }}
+      successTitle="Suite updated"
+      successMessage="Test suite updated successfully"
+      onSubmitAction={updateTestSuiteAction}
+      id={id}
+      testCases={testCases}
+      moduleList={moduleList}
+      tags={tags}
+    />
+  )
+}
+
+export default ModifyTestSuite

package/templates/starter/src/app/(base)/test-suites/page.tsx

@@ -0,0 +1,76 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { TestTubes } from 'lucide-react'
+import TestSuiteTable from './test-suite-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import InfoGrid from '@/components/data-visualization/info-grid'
+import EmptyState from '@/components/data-state/empty-state'
+import { Metadata } from 'next'
+import { TubePlus } from '@/assets/icons/tube-plus'
+import EmptyTube from '@/assets/icons/empty-tube'
+import { Tag as TagIcon } from 'lucide-react'
+
+import { buildTestSuiteInfoCards, getTestSuiteTableRows } from './test-suite-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Suites',
+  description: 'Manage test suites and their configurations',
+}
+
+const TestSuites = async () => {
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+
+  if (testSuitesError) {
+    return <div>Error: {testSuitesError}</div>
+  }
+
+  const testSuitesData = getTestSuiteTableRows(testSuites)
+  const infoCards = buildTestSuiteInfoCards(testSuitesData).map(card => ({
+    ...card,
+    icon:
+      card.legend === 'Empty test suite(s)' ? (
+        <EmptyTube className="h-12 w-12 rounded-sm bg-muted p-2" />
+      ) : card.legend === 'Latest test suite' ? (
+        <TubePlus className="h-12 w-12 rounded-sm bg-muted p-2" />
+      ) : (
+        <TagIcon className="h-12 w-12 rounded-sm bg-muted p-2" />
+      ),
+  }))
+
+  if (testSuitesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<TestTubes className="h-8 w-8" />}
+          title="No test suites found"
+          description="Get started by creating a test suite and grouping tests together"
+          createRoute="/test-suites/create"
+          createText="Create Test Suite"
+        />
+      </div>
+    )
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <TestTubes className="mr-2 h-8 w-8" />
+            Test Suites
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Test suites are collections of tests that are used to test a specific feature or functionality
+        </HeaderSubtitle>
+        <InfoGrid infoCards={infoCards} />
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestSuiteTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestSuites

package/templates/starter/src/app/(base)/test-suites/test-suite-form.test.tsx

@@ -0,0 +1,127 @@
+// @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 { TestSuiteForm } from './test-suite-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('@/components/test-case/test-case-picker', () => ({
+  __esModule: true,
+  default: ({
+    onSave,
+  }: {
+    onSave: (value: string[]) => void
+  }) => (
+    <button type="button" onClick={() => onSave(['case-1'])}>
+      Select Cases
+    </button>
+  ),
+}))
+
+vi.mock('@/components/ui/multi-select-with-preview', () => ({
+  __esModule: true,
+  default: ({
+    onSelectChange,
+  }: {
+    onSelectChange: (value: string[]) => void
+  }) => (
+    <button type="button" onClick={() => onSelectChange(['tag-1'])}>
+      Select Tags
+    </button>
+  ),
+}))
+
+vi.mock('@/components/ui/select', async () => {
+  const React = await import('react')
+  const SelectContext = React.createContext<{ value?: string; onValueChange: (value: string) => void }>({
+    value: '',
+    onValueChange: () => {},
+  })
+
+  return {
+    Select: ({
+      value,
+      onValueChange,
+      children,
+    }: {
+      value?: string
+      onValueChange: (value: string) => void
+      children: React.ReactNode
+    }) => <SelectContext.Provider value={{ value, onValueChange }}>{children}</SelectContext.Provider>,
+    SelectTrigger: ({ id, children }: { id?: string; children: React.ReactNode }) => <div id={id}>{children}</div>,
+    SelectValue: ({ placeholder }: { placeholder?: string }) => <span>{placeholder}</span>,
+    SelectContent: ({ children }: { children: React.ReactNode }) => {
+      const { value, onValueChange } = React.useContext(SelectContext)
+      return (
+        <select aria-label="Module" value={value || ''} onChange={event => onValueChange(event.target.value)}>
+          <option value="">Select a module</option>
+          {children}
+        </select>
+      )
+    },
+    SelectItem: ({ value, children }: { value: string; children: React.ReactNode }) => (
+      <option value={value}>{children}</option>
+    ),
+  }
+})
+
+describe('TestSuiteForm', () => {
+  it('submits valid values and navigates back to the suites list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({ status: 200 })
+
+    render(
+      <TestSuiteForm
+        successTitle="Suite created"
+        successMessage="Test suite created successfully"
+        onSubmitAction={onSubmitAction}
+        testCases={[]}
+        moduleList={[{ id: 'module-1', name: 'Payments' } as never]}
+        tags={[{ id: 'tag-1', name: 'smoke' } as never]}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'Smoke Suite')
+    await user.type(screen.getByLabelText('Description'), 'Important tests')
+    await user.click(screen.getByRole('button', { name: 'Select Cases' }))
+    await user.selectOptions(screen.getByRole('combobox', { name: 'Module' }), 'module-1')
+    await user.click(screen.getByRole('button', { name: 'Select Tags' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        {
+          name: 'Smoke Suite',
+          description: 'Important tests',
+          testCases: ['case-1'],
+          moduleId: 'module-1',
+          tagIds: ['tag-1'],
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Suite created',
+      description: 'Test suite created successfully',
+    })
+    expect(push).toHaveBeenCalledWith('/test-suites')
+  })
+})