create-appraisejs 0.1.8 → 0.1.10-alpha.0

package/templates/default/src/actions/test-suite/test-suite-actions.ts

@@ -3,24 +3,12 @@
 
 import prisma from '@/config/db-config'
 import { testSuiteSchema } from '@/constants/form-opts/test-suite-form-opts'
+import { automationProjectionService } from '@/lib/automation/projection-service'
 import { ActionResponse } from '@/types/form/actionHandler'
 import { Prisma } from '@prisma/client'
 import { revalidatePath } from 'next/cache'
 import { z, ZodError } from 'zod'
-import { generateFeatureFile, deleteFeatureFile } from '@/lib/feature-file-generator'
-
-const generateSafeFileName = (testSuiteName: string): string => {
-  return testSuiteName
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-    .replace(/-+/g, '-')
-}
 
-/**
- * Get all test suites
- * @returns ActionResponse
- */
 export async function getAllTestSuitesAction(): Promise<ActionResponse> {
   try {
     const testSuites = await prisma.testSuite.findMany({
@@ -34,20 +22,14 @@ export async function getAllTestSuitesAction(): Promise<ActionResponse> {
       status: 200,
       data: testSuites,
     }
-  } catch (e) {
+  } catch (error) {
     return {
       status: 500,
-      error: `Server error occurred: ${e}`,
+      error: `Server error occurred: ${error}`,
     }
   }
 }
 
-/**
- * Create a new test suite
- * @param _prev - Previous state
- * @param value - Test suite data
- * @returns ActionResponse
- */
 export async function createTestSuiteAction(
   _prev: unknown,
   value: z.infer<typeof testSuiteSchema>,
@@ -55,7 +37,6 @@ export async function createTestSuiteAction(
   try {
     testSuiteSchema.parse(value)
 
-    // Create the test suite
     const newTestSuite = await prisma.testSuite.create({
       data: {
         name: value.name,
@@ -72,18 +53,12 @@ export async function createTestSuiteAction(
           connect: value.tagIds?.map(id => ({ id })) || [],
         },
       },
-      include: {
-        module: true,
-      },
     })
 
-    const sanitizedTestSuiteName = generateSafeFileName(newTestSuite.name)
-    // Generate feature file for the new test suite
     try {
-      await generateFeatureFile(newTestSuite.id, sanitizedTestSuiteName, newTestSuite.description || undefined)
-    } catch (featureFileError) {
-      console.error('Error generating feature file:', featureFileError)
-      // Don't fail the test suite creation if feature file generation fails
+      await automationProjectionService.generateFeature(newTestSuite.id)
+    } catch (error) {
+      console.error('Error generating feature file:', error)
     }
 
     revalidatePath('/test-suites')
@@ -91,17 +66,17 @@ export async function createTestSuiteAction(
       status: 200,
       message: 'Test suite created successfully',
     }
-  } catch (e) {
-    if (e instanceof ZodError) {
+  } catch (error) {
+    if (error instanceof ZodError) {
       return {
         status: 400,
-        error: e.message,
+        error: error.message,
       }
     }
-    if (e instanceof Prisma.PrismaClientKnownRequestError) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError) {
       return {
         status: 500,
-        error: e.message,
+        error: error.message,
       }
     }
     return {
@@ -111,20 +86,13 @@ export async function createTestSuiteAction(
   }
 }
 
-/**
- * Delete a test suite
- * @param id - Test suite id
- * @returns ActionResponse
- */
 export async function deleteTestSuiteAction(id: string[]): Promise<ActionResponse> {
   try {
-    // Delete corresponding feature files before deleting test suites
     for (const testSuiteId of id) {
       try {
-        await deleteFeatureFile(testSuiteId)
-      } catch (featureFileError) {
-        console.error(`Error deleting feature file for test suite ${testSuiteId}:`, featureFileError)
-        // Don't fail the test suite deletion if feature file deletion fails
+        await automationProjectionService.deleteFeature(testSuiteId)
+      } catch (error) {
+        console.error(`Error deleting feature file for test suite ${testSuiteId}:`, error)
       }
     }
 
@@ -136,19 +104,14 @@ export async function deleteTestSuiteAction(id: string[]): Promise<ActionRespons
       status: 200,
       message: 'Test suite(s) deleted successfully',
     }
-  } catch (e) {
+  } catch (error) {
     return {
       status: 500,
-      error: `Server error occurred: ${e}`,
+      error: `Server error occurred: ${error}`,
     }
   }
 }
 
-/**
- * Get a test suite by id
- * @param id - Test suite id
- * @returns ActionResponse
- */
 export async function getTestSuiteByIdAction(id: string): Promise<ActionResponse> {
   try {
     const testSuite = await prisma.testSuite.findUnique({
@@ -159,19 +122,12 @@ export async function getTestSuiteByIdAction(id: string): Promise<ActionResponse
       status: 200,
       data: testSuite,
     }
-  } catch (e) {
-    console.error(e)
-    throw e
+  } catch (error) {
+    console.error(error)
+    throw error
   }
 }
 
-/**
- * Update a test suite
- * @param _prev - Previous state
- * @param value - Test suite data
- * @param id - Test suite id
- * @returns ActionResponse
- */
 export async function updateTestSuiteAction(
   _prev: unknown,
   value: z.infer<typeof testSuiteSchema>,
@@ -180,7 +136,6 @@ export async function updateTestSuiteAction(
   try {
     testSuiteSchema.parse(value)
 
-    // Get the current test suite to check if name or module changed
     const currentTestSuite = await prisma.testSuite.findUnique({
       where: { id },
       include: {
@@ -195,30 +150,27 @@ export async function updateTestSuiteAction(
       }
     }
 
-    // Check if name or module changed - if so, delete old feature file
     const nameChanged = currentTestSuite.name !== value.name
     const moduleChanged = currentTestSuite.moduleId !== value.moduleId
 
     if (nameChanged || moduleChanged) {
       try {
-        await deleteFeatureFile(currentTestSuite.id)
-      } catch (featureFileError) {
-        console.error('Error deleting old feature file:', featureFileError)
-        // Don't fail the update if old file deletion fails
+        await automationProjectionService.deleteFeature(currentTestSuite.id)
+      } catch (error) {
+        console.error('Error deleting old feature file:', error)
       }
     }
 
-    // Update the test suite
     const updatedTestSuite = await prisma.testSuite.update({
       where: { id },
       data: {
         name: value.name,
         description: value.description,
         testCases: {
-          set: value.testCases?.map(id => ({ id })),
+          set: value.testCases?.map(testCaseId => ({ id: testCaseId })),
         },
         tags: {
-          set: value.tagIds?.map(id => ({ id })) || [],
+          set: value.tagIds?.map(tagId => ({ id: tagId })) || [],
         },
         module: {
           connect: {
@@ -226,17 +178,12 @@ export async function updateTestSuiteAction(
           },
         },
       },
-      include: {
-        module: true,
-      },
     })
 
-    // Generate new feature file with updated information
     try {
-      await generateFeatureFile(updatedTestSuite.id, updatedTestSuite.name, updatedTestSuite.description || undefined)
-    } catch (featureFileError) {
-      console.error('Error generating updated feature file:', featureFileError)
-      // Don't fail the test suite update if feature file generation fails
+      await automationProjectionService.generateFeature(updatedTestSuite.id)
+    } catch (error) {
+      console.error('Error generating updated feature file:', error)
     }
 
     revalidatePath('/test-suites')
@@ -244,10 +191,10 @@ export async function updateTestSuiteAction(
       status: 200,
       message: 'Test suite updated successfully',
     }
-  } catch (e) {
+  } catch (error) {
     return {
       status: 500,
-      error: `Server error occurred: ${e}`,
+      error: `Server error occurred: ${error}`,
     }
   }
 }

package/templates/default/src/app/(base)/locator-groups/page.tsx

@@ -47,9 +47,7 @@ const LocatorGroups = async () => {
             Locator Groups
           </span>
         </PageHeader>
-        <HeaderSubtitle>
-          Locator groups are used to group locators together. They are used to identify the elements on the page.
-        </HeaderSubtitle>
+        <HeaderSubtitle>Organize locators for better maintainability and reusability</HeaderSubtitle>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>
         <LocatorGroupTable />

package/templates/default/src/app/(base)/reports/page.tsx

@@ -88,7 +88,7 @@ const Reports = async () => {
             Reports
           </span>
         </PageHeader>
-        <HeaderSubtitle>Reports are the reports of the test runs.</HeaderSubtitle>
+        <HeaderSubtitle>Review test execution details, identify patterns, and optimize performance</HeaderSubtitle>
       </div>
       <ReportTable />
     </>

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

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
   description: 'Manage test cases report for identifying elements on pages',
 }
 
-const TestCasesMetricsReport = async ({searchParams}: {searchParams: Promise<{filter?: string}>}) => {
+const TestCasesMetricsReport = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
   const resolvedSearchParams = await searchParams
   const filter = resolvedSearchParams?.filter as 'repeatedlyFailing' | 'flaky' | undefined
 
@@ -27,7 +27,7 @@ const TestCasesMetricsReport = async ({searchParams}: {searchParams: Promise<{fi
               </span>
             </PageHeader>
             <HeaderSubtitle>
-              Test cases are the individual tests that are used to test a specific feature or functionality
+              Test cases are the individual tests that validate the functionality a specific feature or functionality
             </HeaderSubtitle>
           </div>
         </div>

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

@@ -57,7 +57,7 @@ export const testCasesMetricTableCols: ColumnDef<TestCaseMetrics & { testCase: T
       header: ({ column }) => <DataTableColumnHeader column={column} title="Failure Rate" />,
       cell: ({ row }) => {
         const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.failureRate * 100}%</div>
+        return <div>{((testCaseMetrics.failureRate as number) * 100).toFixed(2)}%</div>
       },
     },
     {

package/templates/default/src/app/(base)/tags/page.tsx

@@ -2,7 +2,7 @@ import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-tab
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import { Tag } from 'lucide-react'
-import React, { Suspense } from 'react'
+import { Suspense } from 'react'
 import TagTable from './tag-table'
 import { getAllTagsAction } from '@/actions/tags/tag-actions'
 import EmptyState from '@/components/data-state/empty-state'
@@ -46,7 +46,7 @@ const Tags = async () => {
             Tags
           </span>
         </PageHeader>
-        <HeaderSubtitle>Tags are used to categorize test cases and test runs</HeaderSubtitle>
+        <HeaderSubtitle>Categorize test cases and test runs for better organization and filtering</HeaderSubtitle>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>
         <TagTable />

package/templates/default/src/app/(base)/template-steps/page.tsx

@@ -1,6 +1,5 @@
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import PageHeader from '@/components/typography/page-header'
-import React from 'react'
 import TemplateStepTable from './template-step-table'
 import { LayoutTemplate } from 'lucide-react'
 import { Suspense } from 'react'
@@ -47,7 +46,7 @@ const TemplateSteps = async () => {
             Template Steps
           </span>
         </PageHeader>
-        <HeaderSubtitle>Template steps are the steps that are used to define a reusable test step</HeaderSubtitle>
+        <HeaderSubtitle>Define reusable test steps for consistent and efficient test authoring</HeaderSubtitle>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>
         <TemplateStepTable />

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

@@ -14,7 +14,7 @@ export const metadata: Metadata = {
   description: 'Manage test runs and their execution results',
 }
 
-const TestRuns = async ({searchParams}: {searchParams: Promise<{filter?: string}>}) => {
+const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
   const resolvedSearchParams = await searchParams
   const filter = resolvedSearchParams?.filter
   const { data: testRuns, error: testRunsError } = await getAllTestRunsAction(filter)
@@ -48,7 +48,7 @@ const TestRuns = async ({searchParams}: {searchParams: Promise<{filter?: string}
             Test Runs
           </span>
         </PageHeader>
-        <HeaderSubtitle>Test runs are the runs of the test cases.</HeaderSubtitle>
+        <HeaderSubtitle>Orchestrate tests and track the execution progress with detailed results</HeaderSubtitle>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>
         <TestRunTable initialData={testRunsData} filter={filter as 'recentFailed' | 'all'} />

package/templates/default/src/app/api/test-runs/[runId]/logs/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest } from 'next/server'
 import { processManager } from '@/lib/test-run/process-manager'
-import { taskSpawner } from '@/tests/utils/spawner.util'
+import { taskSpawner } from '@/lib/process/task-spawner'
 import prisma from '@/config/db-config'
 import { TestRunStatus } from '@prisma/client'
 
@@ -418,3 +418,4 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     },
   })
 }
+

package/templates/default/src/app/api/test-runs/[runId]/trace/[testCaseId]/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { promises as fs } from 'fs'
-import { taskSpawner } from '@/tests/utils/spawner.util'
+import { taskSpawner } from '@/lib/process/task-spawner'
 import prisma from '@/config/db-config'
 import path from 'path'
 
@@ -144,3 +144,4 @@ export async function POST(
   }
 }
 
+

package/templates/default/src/app/page.tsx

@@ -20,7 +20,8 @@ const Dashboard = async () => {
   const metrics = metricsResponse.status === 200 ? (metricsResponse.data as DashboardMetrics | null) : null
 
   const entityMetricsResponse = await getEntityMetricsAction()
-  const entityMetrics = entityMetricsResponse.status === 200 ? (entityMetricsResponse.data as unknown as EntityMetrics) : null
+  const entityMetrics =
+    entityMetricsResponse.status === 200 ? (entityMetricsResponse.data as unknown as EntityMetrics) : null
   if (!entityMetrics) {
     return <div>Error loading entity metrics</div>
   }
@@ -30,15 +31,13 @@ const Dashboard = async () => {
   // Fetch test suite execution data
   const testSuiteExecutionResponse = await getTestSuiteExecutionDataAction()
   const testSuiteExecutionData =
-    testSuiteExecutionResponse.status === 200
-      ? (testSuiteExecutionResponse.data as TestSuiteExecutionData)
-      : []
+    testSuiteExecutionResponse.status === 200 ? (testSuiteExecutionResponse.data as TestSuiteExecutionData) : []
 
   return (
     <div>
       <div className="mb-8">
         <PageHeader>Dashboard</PageHeader>
-        <HeaderSubtitle>Welcome to the dashboard. Here you can see your test suites and run them.</HeaderSubtitle>
+        <HeaderSubtitle>Check metrics, entity states, execution health, and more</HeaderSubtitle>
       </div>
       <div className="flex gap-7" id="dashboard-content">
         <div className="flex flex-col gap-7">

package/templates/default/src/components/diagram/dynamic-parameters.tsx

@@ -108,19 +108,50 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
     return values
   }, [templateStepParams, initialParameterValues])
 
+  // Derive initial locator groups from initialParameterValues (locator name -> group id via locators lookup)
+  const initialSelectedLocatorGroups = useMemo(() => {
+    const groups: Record<string, string> = {}
+    const initialValueMap: Record<string, string> = {}
+    initialParameterValues?.forEach(v => {
+      initialValueMap[v.name] = v.value
+    })
+    templateStepParams.forEach(param => {
+      if (param.type === 'LOCATOR') {
+        const locatorName = initialValueMap[param.name]
+        if (locatorName) {
+          const locator = locators.find(l => l.name === locatorName)
+          if (locator?.locatorGroupId) {
+            groups[param.name] = locator.locatorGroupId
+          }
+        }
+      }
+    })
+    return groups
+  }, [templateStepParams, initialParameterValues, locators])
+
   // Initialize state with initial values
   const [values, setValues] = useState<{
     [key: string]: string | number | boolean | Date
   }>(initialValues)
   const [errors, setErrors] = useState<Record<string, string>>({})
 
-  // State for locator group selection
-  const [selectedLocatorGroups, setSelectedLocatorGroups] = useState<Record<string, string>>({})
+  // State for locator group selection (initialized from initial data so edit restores group + locator)
+  const [selectedLocatorGroups, setSelectedLocatorGroups] = useState<Record<string, string>>(
+    initialSelectedLocatorGroups,
+  )
 
   useEffect(() => {
     queueMicrotask(() => setErrors({}))
   }, [templateStepParams])
 
+  // Sync state when initial data changes (e.g. opening edit for a different node)
+  useEffect(() => {
+    queueMicrotask(() => {
+      setValues(initialValues)
+      setSelectedLocatorGroups(initialSelectedLocatorGroups)
+    })
+  }, [initialValues, initialSelectedLocatorGroups])
+
   useImperativeHandle(ref, () => ({
     validate: () => {
       // Skip all validation if defaultValueInput is true (all fields are optional)
@@ -251,8 +282,8 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
     switch (type) {
       case 'NUMBER':
         return (
-          <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor={`input-${name}`}>
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`input-${name}`} className="text-primary">
               {defaultValueInput ? `Default ${name}` : name}{' '}
               {!defaultValueInput && <span className="text-red-500">*</span>}
             </Label>
@@ -269,8 +300,8 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
 
       case 'STRING':
         return (
-          <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor={`input-${name}`}>
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`input-${name}`} className="text-primary">
               {defaultValueInput ? `Default ${name}` : name}{' '}
               {!defaultValueInput && <span className="text-red-500">*</span>}
             </Label>
@@ -287,8 +318,8 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
 
       case 'DATE':
         return (
-          <div className="grid w-full items-center gap-1.5">
-            <Label>
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label className="text-primary">
               {defaultValueInput ? `Default ${name}` : name}{' '}
               {!defaultValueInput && <span className="text-red-500">*</span>}
             </Label>
@@ -324,8 +355,8 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
 
       case 'BOOLEAN':
         return (
-          <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor={`select-${name}`}>
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`select-${name}`} className="text-primary">
               {defaultValueInput ? `Default ${name}` : name}{' '}
               {!defaultValueInput && <span className="text-red-500">*</span>}
             </Label>
@@ -350,8 +381,8 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
         const availableLocators = selectedGroupId ? getLocatorsForGroup(selectedGroupId) : []
 
         return (
-          <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor={`select-${name}`}>
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`select-${name}`} className="text-primary">
               {defaultValueInput ? `Default ${name}` : name}{' '}
               {!defaultValueInput && <span className="text-red-500">*</span>}
             </Label>
@@ -380,31 +411,36 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
             </div>
 
             {/* Locator Selection */}
-            <Select
-              value={typeof values[name] === 'string' ? values[name] : ''}
-              onValueChange={value => handleInputChange(name, value)}
-              required={!defaultValueInput}
-              disabled={!selectedGroupId}
-            >
-              <SelectTrigger id={`select-${name}`} className="w-full">
-                <SelectValue
-                  placeholder={
-                    !selectedGroupId
-                      ? 'Select a locator group first'
-                      : defaultValueInput
-                        ? 'Select a locator (optional)'
-                        : 'Select a locator *'
-                  }
-                />
-              </SelectTrigger>
-              <SelectContent isEmpty={availableLocators.length === 0}>
-                {availableLocators.map(locator => (
-                  <SelectItem key={locator.id} value={locator.name}>
-                    {locator.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <div>
+              <Label htmlFor={`select-${name}`} className="text-sm text-muted-foreground">
+                Locator
+              </Label>
+              <Select
+                value={typeof values[name] === 'string' ? values[name] : ''}
+                onValueChange={value => handleInputChange(name, value)}
+                required={!defaultValueInput}
+                disabled={!selectedGroupId}
+              >
+                <SelectTrigger id={`select-${name}`} className="w-full">
+                  <SelectValue
+                    placeholder={
+                      !selectedGroupId
+                        ? 'Select a locator group first'
+                        : defaultValueInput
+                          ? 'Select a locator (optional)'
+                          : 'Select a locator *'
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent isEmpty={availableLocators.length === 0}>
+                  {availableLocators.map(locator => (
+                    <SelectItem key={locator.id} value={locator.name}>
+                      {locator.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
             <ErrorMessage message={errorMessage || ''} visible={!!errorMessage} />
           </div>
         )
@@ -420,9 +456,9 @@ const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProp
   }
 
   return (
-    <Card className="border-none shadow-none" key={resetKey}>
-      <CardHeader className='py-3'>
-        <CardTitle className='text-xs font-bold text-primary'>Parameters</CardTitle>
+    <Card className="border-gray-700 bg-transparent shadow-none" key={resetKey}>
+      <CardHeader className="py-3">
+        <CardTitle className="text-xs font-bold text-primary">Parameters</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-6">

package/templates/default/src/components/diagram/options-header-node.tsx

@@ -33,7 +33,7 @@ const OptionsHeaderNode = memo(({ selected, data, onEdit }: OptionsHeaderNodePro
   const { label, gherkinStep, isFirstNode, icon, isMissingParams } = data as unknown as OptionsHeaderNodeData
 
   return (
-    <BaseNode selected={selected} className={cn('w-52 border-none px-3 py-2', isMissingParams && 'bg-red-700')}>
+    <BaseNode selected={selected} className={cn('max-w-80 border-none px-3 py-2', isMissingParams && 'bg-red-700')}>
       {!isFirstNode && <Handle type="target" position={Position.Left} />}
       <NodeHeader className="-mx-3 -mt-2 border-b">
         <NodeHeaderIcon>{KeyToIconTransformer(icon as TemplateStepIcon)}</NodeHeaderIcon>