create-appraisejs 0.1.10-alpha.8 → 0.2.0-alpha.1

package/templates/default/src/app/(base)/test-cases/test-case-table-columns.tsx

@@ -1,79 +1,14 @@
 'use client'
 
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { TestCase, TestCaseStep, Tag } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-import { Checkbox } from '@/components/ui/checkbox'
 import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
+import { testCaseDataColumns, testCaseSelectionColumn } from '@/components/test-case/test-case-columns'
 import TableActions from '@/components/table/table-actions'
-import { formatDateTime } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
+import { TestCasePickerRow } from '@/types/test-case-picker'
+import { ColumnDef } from '@tanstack/react-table'
 
-export const testCaseTableCols: ColumnDef<TestCase & { steps: TestCaseStep[]; tags?: Tag[] }>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'title',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Title" />,
-  },
-  {
-    accessorKey: 'description',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
-  },
-  {
-    accessorKey: 'tags',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
-    cell: ({ row }) => {
-      const testCase = row.original
-      const tags = testCase.tags || []
-      return (
-        <div className="flex flex-wrap gap-1">
-          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
-        </div>
-      )
-    },
-  },
-  {
-    accessorKey: 'steps',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
-    cell: ({ row }) => {
-      const testCase = row.original
-      return <div>{testCase.steps.length}</div>
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
+export const testCaseTableCols: ColumnDef<TestCasePickerRow>[] = [
+  testCaseSelectionColumn,
+  ...testCaseDataColumns,
   {
     id: 'actions',
     cell: ({ row }) => {

package/templates/default/src/app/(base)/test-cases/test-case-table.tsx

@@ -1,6 +1,6 @@
 import { deleteTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
 import { DataTable } from '@/components/ui/data-table'
-import { TestCase, TestCaseStep } from '@prisma/client'
+import { TestCasePickerRow } from '@/types/test-case-picker'
 import { testCaseTableCols } from './test-case-table-columns'
 import { Cog, LayoutPanelTop } from 'lucide-react'
 
@@ -11,7 +11,7 @@ export default async function TestCaseTable() {
     <>
       <DataTable
         columns={testCaseTableCols}
-        data={testCases as (TestCase & { steps: TestCaseStep[] })[]}
+        data={testCases as TestCasePickerRow[]}
         filterColumn="title"
         filterPlaceholder="Filter by title..."
         modifyLink="/test-cases/modify"

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

@@ -34,7 +34,10 @@ export default async function TestRunDetailPage({ params }: TestRunDetailPagePro
 
   // TypeScript now knows response.data is defined
   const testRun = response.data as TestRun & {
-    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+    testCases: (TestRunTestCase & {
+      testCase: { title: string; description: string }
+      testSuite: { id: string; name: string } | null
+    })[]
     tags: Tag[]
     environment: Environment
     reports: Report[]

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

@@ -1,28 +1,30 @@
-import { createTestRunAction, getAllTestSuiteTestCasesAction } from '@/actions/test-run/test-run-actions'
+import { createTestRunAction } from '@/actions/test-run/test-run-actions'
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Environment, Tag, TestCase, TestSuite } from '@prisma/client'
+import { Environment, Tag } from '@prisma/client'
 import React from 'react'
 import TestRunForm from '../test-run-form'
 import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
 import { getAllTagsAction } from '@/actions/tags/tag-actions'
 import { Metadata } from 'next'
+import { getAllTestSuiteTestCasesAction } from '@/actions/test-run/test-run-actions'
+import { TestSuitePickerRow } from '@/types/test-suite-picker'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Run',
-  description: 'Create a new test run to execute your test cases',
+  description: 'Create a new test run to execute your selected suites or tagged tests',
 }
 
 const CreateTestRun = async () => {
-  const { data: testSuiteTestCases, error: testSuiteTestCasesError } = await getAllTestSuiteTestCasesAction()
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuiteTestCasesAction()
   const { data: environments, error: environmentsError } = await getAllEnvironmentsAction()
   const { data: tags, error: tagsError } = await getAllTagsAction()
 
-  if (testSuiteTestCasesError || environmentsError || tagsError) {
-    return <div>Error: {testSuiteTestCasesError || environmentsError || tagsError}</div>
+  if (testSuitesError || environmentsError || tagsError) {
+    return <div>Error: {testSuitesError || environmentsError || tagsError}</div>
   }
 
-  const testSuiteTestCasesData = testSuiteTestCases as (TestSuite & { testCases: TestCase[] })[]
+  const testSuitesData = testSuites as TestSuitePickerRow[]
   const environmentsData = environments as Environment[]
   const tagsData = tags as Tag[]
 
@@ -30,10 +32,10 @@ const CreateTestRun = async () => {
     <>
       <div className="mb-8">
         <PageHeader>Create Test Run</PageHeader>
-        <HeaderSubtitle>Create a new test run to execute your test cases</HeaderSubtitle>
+        <HeaderSubtitle>Create a new test run to execute selected suites or tagged tests</HeaderSubtitle>
       </div>
       <TestRunForm
-        testSuiteTestCases={testSuiteTestCasesData}
+        testSuites={testSuitesData}
         environments={environmentsData}
         tags={tagsData}
         onSubmitAction={createTestRunAction}

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

@@ -1,60 +1,60 @@
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { ListChecks } from 'lucide-react'
-import React, { Suspense } from 'react'
-import TestRunTable from './test-run-table'
-import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { Environment, Tag, TestRun, TestRunTestCase } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Test Runs',
-  description: 'Manage test runs and their execution results',
-}
-
-const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
-  const resolvedSearchParams = await searchParams
-  const filter = resolvedSearchParams?.filter
-  const { data: testRuns, error: testRunsError } = await getAllTestRunsAction(filter)
-
-  if (testRunsError) {
-    return <div>Error: {testRunsError}</div>
-  }
-
-  const testRunsData = testRuns as (TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment })[]
-
-  if (!testRunsData || testRunsData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<ListChecks className="h-8 w-8" />}
-          title="No test runs found"
-          description="Get started by creating a test run to execute your test cases"
-          createRoute="/test-runs/create"
-          createText="Create Test Run"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <ListChecks className="mr-2 h-8 w-8" />
-            Test Runs
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Orchestrate tests and track the execution progress with detailed results</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestRunTable initialData={testRunsData} filter={filter as 'recentFailed' | 'all'} />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestRuns
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { ListChecks } from 'lucide-react'
+import React, { Suspense } from 'react'
+import TestRunTable from './test-run-table'
+import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Environment, Tag, TestRun, TestRunTestCase } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Runs',
+  description: 'Manage test runs and their execution results',
+}
+
+const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
+  const resolvedSearchParams = await searchParams
+  const filter = resolvedSearchParams?.filter
+  const { data: testRuns, error: testRunsError } = await getAllTestRunsAction(filter)
+
+  if (testRunsError) {
+    return <div>Error: {testRunsError}</div>
+  }
+
+  const testRunsData = testRuns as (TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment })[]
+
+  if (!testRunsData || testRunsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<ListChecks className="h-8 w-8" />}
+          title="No test runs found"
+          description="Get started by creating a test run to execute your test cases"
+          createRoute="/test-runs/create"
+          createText="Create Test Run"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <ListChecks className="mr-2 h-8 w-8" />
+            Test Runs
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Orchestrate tests and track the execution progress with detailed results</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestRunTable initialData={testRunsData} filter={filter as 'recentFailed' | 'all'} />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestRuns

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
+import TestSuitePicker from '@/components/test-suite/test-suite-picker'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -8,7 +9,7 @@ import { MultiSelect } from '@/components/ui/multi-select'
 import { formOpts, TestRun } from '@/constants/form-opts/test-run-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { ActionResponse } from '@/types/form/actionHandler'
-import { BrowserEngine, Environment, Tag, TestCase, TestRunTestCase, TestSuite } from '@prisma/client'
+import { BrowserEngine, Environment, Tag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
 import { useRouter } from 'next/navigation'
 import { useState, useRef, useEffect, useCallback } from 'react'
@@ -17,17 +18,18 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { checkTestRunNameUniqueAction } from '@/actions/test-run/test-run-actions'
 import { Info, Play } from 'lucide-react'
+import { TestSuitePickerRow } from '@/types/test-suite-picker'
 
 enum TestSelectionType {
   TAGS = 'tags',
-  TEST_CASES = 'testCases',
+  TEST_SUITES = 'testSuites',
 }
 
 const TestRunForm = ({
   defaultValues,
   successTitle,
   successMessage,
-  testSuiteTestCases,
+  testSuites,
   environments,
   tags,
   id,
@@ -36,14 +38,16 @@ const TestRunForm = ({
   defaultValues?: TestRun
   successTitle: string
   successMessage: string
-  testSuiteTestCases: (TestSuite & { testCases: TestCase[] })[]
+  testSuites: TestSuitePickerRow[]
   environments: Environment[]
   tags: Tag[]
   id?: string
   onSubmitAction: (_prev: unknown, value: TestRun, id?: string) => Promise<ActionResponse>
 }) => {
   const router = useRouter()
-  const [testSelectionType, setTestSelectionType] = useState<TestSelectionType>(TestSelectionType.TAGS)
+  const [testSelectionType, setTestSelectionType] = useState<TestSelectionType>(() =>
+    defaultValues?.testSuites?.length ? TestSelectionType.TEST_SUITES : TestSelectionType.TAGS,
+  )
   const testSelectionTypeRef = useRef<TestSelectionType>(testSelectionType)
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -118,7 +122,7 @@ const TestRunForm = ({
       const submitValue = {
         ...value,
         tags: testSelectionType === TestSelectionType.TAGS ? value.tags : [],
-        testCases: testSelectionType === TestSelectionType.TEST_CASES ? value.testCases : [],
+        testSuites: testSelectionType === TestSelectionType.TEST_SUITES ? value.testSuites : [],
       }
       const res = await onSubmitAction(undefined, submitValue, id)
       if (res.status === 200) {
@@ -174,15 +178,15 @@ const TestRunForm = ({
                   setTestSelectionType(newType)
                   // Clear the other field when switching filter types
                   if (newType === TestSelectionType.TAGS) {
-                    form.setFieldValue('testCases', [])
+                    form.setFieldValue('testSuites', [])
                     // Validate both fields to clear any errors
                     form.validateField('tags', 'change')
-                    form.validateField('testCases', 'change')
+                    form.validateField('testSuites', 'change')
                   } else {
                     form.setFieldValue('tags', [])
                     // Validate both fields to clear any errors
                     form.validateField('tags', 'change')
-                    form.validateField('testCases', 'change')
+                    form.validateField('testSuites', 'change')
                   }
                 }}
                 className="mb-4 flex gap-4"
@@ -192,8 +196,8 @@ const TestRunForm = ({
                   <Label htmlFor={TestSelectionType.TAGS}>By Tags</Label>
                 </div>
                 <div className="flex items-center space-x-2">
-                  <RadioGroupItem value={TestSelectionType.TEST_CASES} id={TestSelectionType.TEST_CASES} />
-                  <Label htmlFor={TestSelectionType.TEST_CASES}>By Test Cases</Label>
+                  <RadioGroupItem value={TestSelectionType.TEST_SUITES} id={TestSelectionType.TEST_SUITES} />
+                  <Label htmlFor={TestSelectionType.TEST_SUITES}>By Test Suites</Label>
                 </div>
               </RadioGroup>
 
@@ -235,13 +239,20 @@ const TestRunForm = ({
               </form.Field>
 
               <form.Field
-                name="testCases"
+                name="testSuites"
                 validators={{
                   onChange: ({ value }) => {
                     const currentSelectionType = testSelectionTypeRef.current
-                    if (currentSelectionType === TestSelectionType.TEST_CASES) {
+                    if (currentSelectionType === TestSelectionType.TEST_SUITES) {
                       if (!Array.isArray(value) || value.length === 0) {
-                        return 'Test cases are required'
+                        return 'At least one test suite is required'
+                      }
+
+                      const invalidSuite = value.find(
+                        suiteSelection => !suiteSelection.runAll && suiteSelection.testCaseIds.length === 0,
+                      )
+                      if (invalidSuite) {
+                        return 'Partial suite selections must include at least one test case'
                       }
                     }
                     return undefined
@@ -251,34 +262,16 @@ const TestRunForm = ({
                 {field => {
                   return (
                     <div
-                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === TestSelectionType.TEST_CASES ? 'block' : 'hidden'}`}
+                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === TestSelectionType.TEST_SUITES ? 'block' : 'hidden'}`}
                     >
-                      <MultiSelect
-                        options={(() => {
-                          const seen = new Set<string | number>()
-                          return testSuiteTestCases.flatMap(testSuite =>
-                            testSuite.testCases
-                              .filter(testCase => {
-                                if (!seen.has(testCase.id)) {
-                                  seen.add(testCase.id)
-                                  return true
-                                }
-                                return false
-                              })
-                              .map(testCase => ({
-                                label: testCase.title,
-                                value: testCase.id,
-                              })),
-                          )
-                        })()}
-                        selected={field.state.value.map(testCase => testCase.testCaseId)}
-                        onChange={value =>
-                          field.handleChange(
-                            value.map(testCaseId => ({ testCaseId: testCaseId }) as unknown as TestRunTestCase),
-                          )
-                        }
-                        placeholder="Select test cases"
-                        emptyMessage="No test cases available"
+                      <TestSuitePicker
+                        testSuites={testSuites}
+                        selectedSuites={field.state.value}
+                        onSave={value => field.handleChange(value)}
+                        triggerPlaceholder="Select test suite(s)"
+                        dialogTitle="Select Test Suites"
+                        dialogDescription="Browse suites, expand child test cases, and save the suite-scoped selection for this test run."
+                        selectedLabel="Selected test suite(s)"
                       />
                       {field.state.meta.isTouched &&
                         field.state.meta.errors.map((error, index) => (
@@ -449,7 +442,7 @@ const TestRunForm = ({
                 <div className="flex flex-col gap-1">
                   <span className="text-base font-bold">Select the environment for your test run</span>
                   <span className="text-sm text-muted-foreground">
-                    Choose the environment that best suits your selected test cases
+                    Choose the environment that best suits your selected tests
                   </span>
                 </div>
               </div>
@@ -469,9 +462,9 @@ const TestRunForm = ({
                   4
                 </span>
                 <div className="flex flex-col gap-1">
-                  <span className="text-base font-bold">Select the test cases or tags for your test run</span>
+                  <span className="text-base font-bold">Select the test suites or tags for your test run</span>
                   <span className="text-sm text-muted-foreground">
-                    You can filter your test cases by tags or select specific test cases
+                    You can filter by tags or browse suites and choose full suites or child subsets
                   </span>
                 </div>
               </div>