create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/app/(base)/test-cases/create-from-template/page.tsx

@@ -3,36 +3,139 @@ import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import { LayoutPanelTop } from 'lucide-react'
 import React from 'react'
-import TemplateSelectionForm from './template-selection-form'
 import { Metadata } from 'next'
+import TestCaseForm from '../test-case-form'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { createTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { createTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { createTestSuiteAction, getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import {
+  getLocatorGroupRows,
+  getEnvironmentRows,
+  getLocatorRows,
+  getModuleRows,
+  getTagRows,
+  getTemplateStepParamRows,
+  getTemplateStepRows,
+  getTestSuiteRows,
+} from '../test-case-resource-rows'
+import { getTestCaseRows } from '../test-case-row-helpers'
 
-import { getTemplateSelectionRows } from './create-from-template-helpers'
+import { getConvertedTemplateTestCaseData, getTemplateTestCasesWithSteps } from './create-from-template-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Case From Template',
   description: 'Select a template test case to create a new test case from',
 }
 
-const CreateTestCaseFromTemplate = async () => {
-  const response = await getAllTemplateTestCasesAction()
-  const templateTestCases = getTemplateSelectionRows(response.data)
+const CreateTestCaseFromTemplate = async ({
+  searchParams,
+}: {
+  searchParams?: Promise<{ templateTestCaseId?: string }>
+}) => {
+  const resolvedSearchParams = searchParams ? await searchParams : {}
+  const selectedTemplateTestCaseId = resolvedSearchParams.templateTestCaseId ?? ''
 
-  if (response.status !== 200) {
-    return <div className="text-red-500">Error</div>
+  const [
+    templateTestCasesResponse,
+    templateStepParamsResponse,
+    templateStepsResponse,
+    testSuitesResponse,
+    locatorsResponse,
+    locatorGroupsResponse,
+    tagsResponse,
+    testCasesResponse,
+    moduleListResponse,
+    environmentsResponse,
+  ] = await Promise.all([
+    getAllTemplateTestCasesAction(),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllTestSuitesAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllTagsAction(),
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllEnvironmentsAction(),
+  ])
+
+  const loadError =
+    templateTestCasesResponse.error ||
+    templateStepParamsResponse.error ||
+    templateStepsResponse.error ||
+    testSuitesResponse.error ||
+    locatorsResponse.error ||
+    locatorGroupsResponse.error ||
+    tagsResponse.error ||
+    testCasesResponse.error ||
+    moduleListResponse.error ||
+    environmentsResponse.error
+
+  if (loadError) {
+    return <div>Error: {loadError}</div>
   }
 
+  const templateTestCases = getTemplateTestCasesWithSteps(templateTestCasesResponse.data)
+  const selectedTemplateTestCase =
+    templateTestCases.find(templateTestCase => templateTestCase.id === selectedTemplateTestCaseId) ?? null
+
+  const convertedTemplateData = selectedTemplateTestCase
+    ? getConvertedTemplateTestCaseData(selectedTemplateTestCase)
+    : { convertedData: null, error: null }
+
+  if (selectedTemplateTestCase && (!convertedTemplateData.convertedData || convertedTemplateData.error)) {
+    return <div>{convertedTemplateData.error || 'Invalid template test case'}</div>
+  }
+
+  const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
+  const templateSteps = getTemplateStepRows(templateStepsResponse.data)
+  const testSuites = getTestSuiteRows(testSuitesResponse.data)
+  const locators = getLocatorRows(locatorsResponse.data)
+  const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
+  const tags = getTagRows(tagsResponse.data)
+  const testCases = getTestCaseRows(testCasesResponse.data)
+  const moduleList = getModuleRows(moduleListResponse.data)
+  const environments = getEnvironmentRows(environmentsResponse.data)
+
   return (
     <div>
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <LayoutPanelTop className="mr-2 h-8 w-8" />
+            <LayoutPanelTop className="mr-2 size-8" />
             Create Test Case From Template
           </span>
         </PageHeader>
-        <HeaderSubtitle>Select a template test case to create a new test case from</HeaderSubtitle>
+        <HeaderSubtitle>Select a template, add the test details, then refine the generated flow</HeaderSubtitle>
       </div>
-      <TemplateSelectionForm templateTestCases={templateTestCases} />
+      <TestCaseForm
+        defaultNodesOrder={convertedTemplateData.convertedData?.nodesOrder ?? {}}
+        templateStepParams={templateStepParams}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        environments={environments}
+        testSuites={testSuites}
+        testCases={testCases}
+        moduleList={moduleList}
+        tags={tags}
+        onSubmitAction={createTestCaseAction}
+        onCreateTestSuiteAction={createTestSuiteAction}
+        onCreateTagAction={createTagAction}
+        templateTestCases={templateTestCases}
+        defaultTemplateTestCaseId={selectedTemplateTestCase?.id}
+        defaultTitle={selectedTemplateTestCase?.name || ''}
+        defaultDescription={selectedTemplateTestCase?.description || ''}
+        defaultTestSuiteIds={convertedTemplateData.convertedData?.testSuiteIds}
+      />
     </div>
   )
 }

package/templates/starter/src/app/(base)/test-cases/editable-test-case-builders.ts

@@ -0,0 +1,35 @@
+import type { FlowBlock, NodeOrderMap } from '@/types/diagram/diagram'
+
+import type { EditableTestCase } from './editable-test-case-types'
+
+export function buildNodeOrderFromTestCaseSteps(steps: EditableTestCase['steps']): NodeOrderMap {
+  return steps.reduce<NodeOrderMap>((acc, step) => {
+    const nodeId = step.flowNodeId ?? step.id
+    acc[nodeId] = {
+      nodeId,
+      order: step.order,
+      label: step.label,
+      gherkinStep: step.gherkinStep,
+      icon: step.icon,
+      parameters: (step.parameters || []).map(parameter => ({
+        name: parameter.name,
+        value: parameter.value,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: step.templateStepId,
+    }
+    return acc
+  }, {})
+}
+
+export function buildFlowBlocksFromTestCaseRows(flowBlocks: EditableTestCase['flowBlocks'] = []): FlowBlock[] {
+  return flowBlocks
+    .slice()
+    .sort((left, right) => left.order - right.order)
+    .map(block => ({
+      id: block.id,
+      name: block.name,
+      nodeIds: block.nodes.map(node => node.flowNodeId),
+    }))
+}

package/templates/starter/src/app/(base)/test-cases/editable-test-case-guards.ts

@@ -0,0 +1,42 @@
+import type { TestCaseStep, TestCaseStepParameter } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type { EditableTestCase } from './editable-test-case-types'
+
+function isTestCaseStepParameterRow(value: unknown): value is TestCaseStepParameter {
+  return typeof value === 'object' && value !== null && 'name' in value && 'value' in value && 'type' in value
+}
+
+function isTestCaseStepRow(value: unknown): value is TestCaseStep & { parameters: TestCaseStepParameter[] } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'label' in value &&
+    'templateStepId' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTestCaseStepParameterRow)
+  )
+}
+
+function isEditableTestCase(value: unknown): value is EditableTestCase {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    value.steps.every(isTestCaseStepRow) &&
+    'testSuiteIds' in value &&
+    Array.isArray(value.testSuiteIds) &&
+    'tagIds' in value &&
+    Array.isArray(value.tagIds)
+  )
+}
+
+export function getEditableTestCase(data: ActionResponseData | undefined) {
+  return isEditableTestCase(data) ? data : null
+}

package/templates/starter/src/app/(base)/test-cases/editable-test-case-helpers.ts

@@ -0,0 +1,3 @@
+export { buildFlowBlocksFromTestCaseRows, buildNodeOrderFromTestCaseSteps } from './editable-test-case-builders'
+export { getEditableTestCase } from './editable-test-case-guards'
+export type { EditableTestCase } from './editable-test-case-types'

package/templates/starter/src/app/(base)/test-cases/editable-test-case-types.ts

@@ -0,0 +1,14 @@
+import type {
+  TestCase,
+  TestCaseFlowBlock,
+  TestCaseFlowBlockNode,
+  TestCaseStep,
+  TestCaseStepParameter,
+} from '@prisma/client'
+
+export type EditableTestCase = TestCase & {
+  steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
+  flowBlocks?: (TestCaseFlowBlock & { nodes: TestCaseFlowBlockNode[] })[]
+  testSuiteIds: string[]
+  tagIds: string[]
+}

package/templates/starter/src/app/(base)/test-cases/inline-tag-creation-dialog.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import TagForm from '@/app/(base)/tags/tag-form'
+import type { TagFormSubmitAction } from '@/app/(base)/tags/tag-form-helpers'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import type { Tag } from '@prisma/client'
+
+type InlineTagCreationDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmitAction: TagFormSubmitAction
+  onSuccess: (tag: Tag) => void | Promise<void>
+}
+
+export function InlineTagCreationDialog({
+  open,
+  onOpenChange,
+  onSubmitAction,
+  onSuccess,
+}: InlineTagCreationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0">
+        <DialogHeader className="border-b px-6 py-4">
+          <DialogTitle>Create Filter Tag</DialogTitle>
+          <DialogDescription>Create a new filter tag without leaving the current test case.</DialogDescription>
+        </DialogHeader>
+
+        <div className="px-6 py-4">
+          <TagForm
+            successTitle="Tag created"
+            successMessage="Tag created successfully"
+            onSubmitAction={onSubmitAction}
+            onSuccess={onSuccess}
+            redirectPath={null}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/templates/starter/src/app/(base)/test-cases/inline-test-suite-creation-dialog.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { TestSuiteForm } from '@/app/(base)/test-suites/test-suite-form'
+import type { TestSuiteFormSubmitAction } from '@/app/(base)/test-suites/test-suite-helpers'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+import type { Module, Tag, TestSuite } from '@prisma/client'
+
+type InlineTestSuiteCreationDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmitAction: TestSuiteFormSubmitAction
+  onSuccess: (suite: TestSuite) => void | Promise<void>
+  testCases: TestCasePickerRow[]
+  moduleList: Module[]
+  tags: Tag[]
+}
+
+export function InlineTestSuiteCreationDialog({
+  open,
+  onOpenChange,
+  onSubmitAction,
+  onSuccess,
+  testCases,
+  moduleList,
+  tags,
+}: InlineTestSuiteCreationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] max-w-6xl gap-0 overflow-hidden p-0">
+        <DialogHeader className="border-b px-6 py-4">
+          <DialogTitle>Create Test Suite</DialogTitle>
+          <DialogDescription>Create a new test suite without leaving the current test case.</DialogDescription>
+        </DialogHeader>
+
+        <div className="overflow-y-auto px-6 py-4">
+          <TestSuiteForm
+            successTitle="Suite created"
+            successMessage="Test suite created successfully"
+            onSubmitAction={onSubmitAction}
+            onSuccess={onSuccess}
+            redirectPath={null}
+            testCases={testCases}
+            moduleList={moduleList}
+            tags={tags}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -8,21 +8,30 @@ import {
   getAllTemplateStepsAction,
 } from '@/actions/template-step/template-step-actions'
 import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { createTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { createTestSuiteAction, getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
 import { Metadata } from 'next'
 
 import {
   buildNodeOrderFromTestCaseSteps,
+  buildFlowBlocksFromTestCaseRows,
   getEditableTestCase,
+} from '../../editable-test-case-helpers'
+import {
+  getEnvironmentRows,
   getLocatorGroupRows,
   getLocatorRows,
+  getModuleRows,
   getTagRows,
   getTemplateStepParamRows,
   getTemplateStepRows,
   getTestSuiteRows,
-} from '../../test-case-route-helpers'
+} from '../../test-case-resource-rows'
+import { getTestCaseRows } from '../../test-case-row-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Modify Test Case',
@@ -39,6 +48,9 @@ const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) =
     testSuitesResponse,
     locatorGroupsResponse,
     tagsResponse,
+    testCasesResponse,
+    moduleListResponse,
+    environmentsResponse,
   ] = await Promise.all([
     getTestCaseByIdAction(id),
     getAllTemplateStepParamsAction(),
@@ -47,6 +59,9 @@ const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) =
     getAllTestSuitesAction(),
     getAllLocatorGroupsAction(),
     getAllTagsAction(),
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllEnvironmentsAction(),
   ])
 
   const loadError =
@@ -56,14 +71,13 @@ const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) =
     locatorsResponse.error ||
     testSuitesResponse.error ||
     locatorGroupsResponse.error ||
-    tagsResponse.error
+    tagsResponse.error ||
+    testCasesResponse.error ||
+    moduleListResponse.error ||
+    environmentsResponse.error
 
   if (loadError) {
-    return (
-      <div>
-        Error: {loadError}
-      </div>
-    )
+    return <div>Error: {loadError}</div>
   }
 
   const testCase = getEditableTestCase(testCaseResponse.data)
@@ -77,6 +91,9 @@ const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) =
   const testSuites = getTestSuiteRows(testSuitesResponse.data)
   const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
   const tags = getTagRows(tagsResponse.data)
+  const testCases = getTestCaseRows(testCasesResponse.data)
+  const moduleList = getModuleRows(moduleListResponse.data)
+  const environments = getEnvironmentRows(environmentsResponse.data)
 
   return (
     <>
@@ -95,9 +112,15 @@ const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) =
         templateSteps={templateSteps}
         locators={locators}
         locatorGroups={locatorGroups}
+        environments={environments}
         testSuites={testSuites}
+        testCases={testCases}
+        moduleList={moduleList}
         tags={tags}
         defaultNodesOrder={buildNodeOrderFromTestCaseSteps(testCase.steps)}
+        defaultFlowBlocks={buildFlowBlocksFromTestCaseRows(testCase.flowBlocks)}
+        onCreateTestSuiteAction={createTestSuiteAction}
+        onCreateTagAction={createTagAction}
       />
     </>
   )

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

@@ -8,7 +8,7 @@ import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
 import EmptyState from '@/components/data-state/empty-state'
 import { Metadata } from 'next'
 
-import { getTestCaseRows } from './test-case-route-helpers'
+import { getTestCaseRows } from './test-case-row-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Test Cases',
@@ -28,7 +28,7 @@ const TestCases = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<TestTubeDiagonal className="h-8 w-8" />}
+          icon={<TestTubeDiagonal className="size-8" />}
           title="No test cases found"
           description="Get started by creating a test case to test your application functionality"
           createRoute="/test-cases/create"
@@ -43,7 +43,7 @@ const TestCases = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <TestTubeDiagonal className="mr-2 h-8 w-8" />
+            <TestTubeDiagonal className="mr-2 size-8" />
             Test Cases
           </span>
         </PageHeader>

package/templates/starter/src/app/(base)/test-cases/test-case-flow.test.tsx

@@ -12,6 +12,8 @@ type MockFlowDiagramProps = {
   nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
   onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
   defaultValueInput?: boolean
+  enableNodeSearch?: boolean
+  layoutRefreshKey?: string | number | boolean
 }
 
 const { flowDiagramRenderSpy } = vi.hoisted(() => ({
@@ -27,6 +29,8 @@ vi.mock('@/components/diagram/flow-diagram', () => ({
       <div>
         <div data-testid="node-order">{JSON.stringify(props.nodeOrder)}</div>
         <div data-testid="default-value-input">{String(props.defaultValueInput)}</div>
+        <div data-testid="enable-node-search">{String(props.enableNodeSearch)}</div>
+        <div data-testid="layout-refresh-key">{String(props.layoutRefreshKey)}</div>
         <button
           type="button"
           onClick={() =>
@@ -77,6 +81,8 @@ describe('TestCaseFlow', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onNodeOrderChange={onNodeOrderChange}
       />,
     )
@@ -103,6 +109,24 @@ describe('TestCaseFlow', () => {
       },
     })
     expect(screen.getByTestId('default-value-input')).toHaveTextContent('false')
+    expect(screen.getByTestId('enable-node-search')).toHaveTextContent('true')
   })
 
+  it('passes layout refresh changes into the shared flow diagram', () => {
+    render(
+      <TestCaseFlow
+        initialNodesOrder={{}}
+        templateStepParams={[]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        onNodeOrderChange={vi.fn()}
+        layoutRefreshKey
+      />,
+    )
+
+    expect(screen.getByTestId('layout-refresh-key')).toHaveTextContent('true')
+  })
 })

package/templates/starter/src/app/(base)/test-cases/test-case-flow.tsx

@@ -1,25 +1,37 @@
 import FlowDiagram from '@/components/diagram/flow-diagram'
 import { toNodeOrderMap } from '@/components/diagram/flow-host-helpers'
 import { useFlowNodeOrder } from '@/components/diagram/use-flow-node-order'
-import type { NodeOrderMap } from '@/types/diagram/diagram'
-import type { Locator, LocatorGroup, TemplateStep, TemplateStepParameter } from '@prisma/client'
+import type { FlowBlock, NodeOrderMap } from '@/types/diagram/diagram'
+import type { Environment, Locator, LocatorGroup, Module, TemplateStep, TemplateStepParameter } from '@prisma/client'
 
 type TestCaseFlowProps = {
   initialNodesOrder: NodeOrderMap
   templateStepParams: TemplateStepParameter[]
   templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
+  modules: Array<Pick<Module, 'id' | 'name' | 'parentId'>>
   onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
+  flowBlocks?: FlowBlock[]
+  layoutRefreshKey?: string | number | boolean
+  onFlowBlocksChange?: (flowBlocks: FlowBlock[]) => void
 }
 
+const EMPTY_FLOW_BLOCKS: FlowBlock[] = []
+
 const TestCaseFlow = ({
   initialNodesOrder,
   templateStepParams,
   templateSteps,
   locators,
   locatorGroups,
+  environments,
+  modules,
   onNodeOrderChange,
+  flowBlocks = EMPTY_FLOW_BLOCKS,
+  layoutRefreshKey,
+  onFlowBlocksChange,
 }: TestCaseFlowProps) => {
   const { nodesOrder, handleNodeOrderChange } = useFlowNodeOrder({
     initialNodesOrder,
@@ -28,15 +40,24 @@ const TestCaseFlow = ({
   })
 
   return (
-    <FlowDiagram
-      nodeOrder={nodesOrder}
-      templateStepParams={templateStepParams}
-      defaultValueInput={false}
-      onNodeOrderChange={handleNodeOrderChange}
-      templateSteps={templateSteps}
-      locators={locators}
-      locatorGroups={locatorGroups}
-    />
+    <div className="flex h-full min-h-0 w-full flex-col">
+      <FlowDiagram
+        nodeOrder={nodesOrder}
+        templateStepParams={templateStepParams}
+        defaultValueInput={false}
+        onNodeOrderChange={handleNodeOrderChange}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        environments={environments}
+        modules={modules}
+        enableNodeSearch
+        enableNodeGrouping
+        flowBlocks={flowBlocks}
+        layoutRefreshKey={layoutRefreshKey}
+        onFlowBlocksChange={onFlowBlocksChange}
+      />
+    </div>
   )
 }
 

package/templates/starter/src/app/(base)/test-cases/test-case-form-reducer.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+
+import { createTestCaseFormState, testCaseFormReducer } from './test-case-form-reducer'
+
+describe('testCaseFormReducer', () => {
+  const baseState = createTestCaseFormState({
+    defaultNodesOrder: {},
+    defaultFlowBlocks: [],
+    testSuites: [],
+    tags: [],
+    initialWizardStep: 0,
+  })
+
+  it('clears title error when title changes', () => {
+    const withError = { ...baseState, errors: { title: ['Required'] } }
+    const next = testCaseFormReducer(withError, { type: 'setTitle', title: 'Login flow' })
+
+    expect(next.title).toBe('Login flow')
+    expect(next.errors.title).toBeUndefined()
+  })
+
+  it('applies template conversion in one action', () => {
+    const next = testCaseFormReducer(baseState, {
+      type: 'applyTemplateConversion',
+      payload: {
+        title: 'From template',
+        description: 'Template description',
+        nodesOrder: { n1: 1 },
+        flowBlocks: [{ id: 'b1', name: 'Block', nodeIds: ['n1'] }],
+        appliedTemplateId: 'template-1',
+      },
+    })
+
+    expect(next.title).toBe('From template')
+    expect(next.appliedTemplateId).toBe('template-1')
+    expect(next.nodesOrder).toEqual({ n1: 1 })
+    expect(next.flowBlocks).toHaveLength(1)
+  })
+
+  it('adds an inline test suite and selects it', () => {
+    const suite = {
+      id: 'suite-1',
+      name: 'Smoke',
+      description: null,
+      moduleId: 'module-1',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    }
+
+    const next = testCaseFormReducer(
+      { ...baseState, isCreateSuiteDialogOpen: true },
+      { type: 'addTestSuite', testSuite: suite },
+    )
+
+    expect(next.availableTestSuites).toEqual([suite])
+    expect(next.selectedTestSuites).toEqual(['suite-1'])
+    expect(next.isCreateSuiteDialogOpen).toBe(false)
+  })
+})