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

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

@@ -1,127 +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
+'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/default/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/default/src/app/(base)/test-suites/create/page.tsx

@@ -3,28 +3,33 @@ 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 { TestCasePickerRow } from '@/types/test-case-picker'
-import { Module, Tag } from '@prisma/client'
 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 { data: testCases, error: testCasesError } = await getAllTestCasesAction()
-
-  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+  const [testCasesResponse, moduleListResponse, tagsResponse] = await Promise.all([
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllTagsAction(),
+  ])
 
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (testCasesError || moduleListError || tagsError) {
-    return <div>Error: {testCasesError || moduleListError || tagsError}</div>
+  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">
@@ -35,9 +40,9 @@ const CreateTestSuite = async () => {
         successTitle="Suite created"
         successMessage="Test suite created successfully"
         onSubmitAction={createTestSuiteAction}
-        testCases={testCases as TestCasePickerRow[]}
-        moduleList={moduleList as Module[]}
-        tags={tags as Tag[]}
+        testCases={testCases}
+        moduleList={moduleList}
+        tags={tags}
       />
     </>
   )

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

@@ -1,13 +1,12 @@
 import { getTestSuiteByIdAction, updateTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
 import { TestSuiteForm } from '../../test-suite-form'
 import React from 'react'
-import { TestSuite, Tag } from '@prisma/client'
 import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
-import { Module, TestCase } from '@prisma/client'
 import { getAllModulesAction } from '@/actions/modules/module-actions'
 import { getAllTagsAction } from '@/actions/tags/tag-actions'
 import { Metadata } from 'next'
-import { TestCasePickerRow } from '@/types/test-case-picker'
+
+import { getEditableTestSuite, getModuleRows, getTagRows, getTestCasePickerRows } from '../../test-suite-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Modify Test Suite',
@@ -16,23 +15,27 @@ export const metadata: Metadata = {
 
 const ModifyTestSuite = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const { data: testSuite, error } = await getTestSuiteByIdAction(id)
-  const { data: testCases } = await getAllTestCasesAction()
-
-  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
-
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (error || moduleListError || tagsError) {
-    return <div>Error: {error || moduleListError || tagsError}</div>
+  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 = testSuite as TestSuite & {
-    testCases: TestCase[]
-    module: Module
-    tags: Tag[]
+  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={{
@@ -46,9 +49,9 @@ const ModifyTestSuite = async ({ params }: { params: Promise<{ id: string }> })
       successMessage="Test suite updated successfully"
       onSubmitAction={updateTestSuiteAction}
       id={id}
-      testCases={testCases as TestCasePickerRow[]}
-      moduleList={moduleList as Module[]}
-      tags={tags as Tag[]}
+      testCases={testCases}
+      moduleList={moduleList}
+      tags={tags}
     />
   )
 }

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

@@ -5,14 +5,14 @@ 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 { Tag, TestCase, TestSuite } from '@prisma/client'
 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 { getFilterTags } from '@/lib/tag-utils'
+
+import { buildTestSuiteInfoCards, getTestSuiteTableRows } from './test-suite-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Test Suites',
@@ -26,60 +26,18 @@ const TestSuites = async () => {
     return <div>Error: {testSuitesError}</div>
   }
 
-  const testSuitesData = testSuites as (TestSuite & { testCases: TestCase[]; tags: Tag[] })[]
-  const emptyTestSuites = testSuitesData.filter(testSuite => testSuite.testCases.length === 0)
-  const latestCreatedTestSuite = [...testSuitesData].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0]
-  const tagSuiteCountMap = new Map<string, { name: string; suiteCount: number }>()
-
-  for (const testSuite of testSuitesData) {
-    for (const tag of getFilterTags(testSuite.tags)) {
-      const currentTag = tagSuiteCountMap.get(tag.id)
-
-      if (currentTag) {
-        currentTag.suiteCount += 1
-      } else {
-        tagSuiteCountMap.set(tag.id, {
-          name: tag.name,
-          suiteCount: 1,
-        })
-      }
-    }
-  }
-
-  const mostCommonTagWithSuites = [...tagSuiteCountMap.values()].sort((a, b) => {
-    if (b.suiteCount !== a.suiteCount) {
-      return b.suiteCount - a.suiteCount
-    }
-
-    return a.name.localeCompare(b.name)
-  })[0]
-  const infoCards = [
-    {
-      showHighlightGroup: testSuitesData.length > 0,
-      highlight: emptyTestSuites.length.toString(),
-      legend: 'Empty test suite(s)',
-      defaultText: 'Empty test suites count. Will update when test suites are created.',
-      icon: <EmptyTube className="h-12 w-12 rounded-sm bg-muted p-2" />,
-    },
-    {
-      showHighlightGroup: testSuitesData.length > 0,
-      highlight: latestCreatedTestSuite ? latestCreatedTestSuite.name : 'N/A',
-      legend: 'Latest test suite',
-      defaultText: 'Latest created test suite. Will update when test suites are created.',
-      icon: <TubePlus className="h-12 w-12 rounded-sm bg-muted p-2" />,
-    },
-    ...(mostCommonTagWithSuites
-      ? [
-        {
-          showHighlightGroup: true,
-          highlight: mostCommonTagWithSuites.name,
-          legend: 'Most common tag',
-          defaultText: 'Most common suite tag will appear here when test suites have tags.',
-          icon: <TagIcon className="h-12 w-12 rounded-sm bg-muted p-2" />,
-        },
-      ]
-      : []),
-  ]
+  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 (

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