create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -0,0 +1,57 @@
+'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,7 +71,10 @@ 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 (
@@ -77,6 +95,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 +116,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)
+  })
+})

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

@@ -0,0 +1,203 @@
+import type { FlowBlock, NodeOrderMap } from '@/types/diagram/diagram'
+import type { Tag, TestSuite } from '@prisma/client'
+
+export type TestCaseFormErrors = {
+  templateTestCaseId?: string[]
+  title?: string[]
+  description?: string[]
+  testSuiteIds?: string[]
+  tagIds?: string[]
+  steps?: string[]
+}
+
+export type TestCaseFormState = {
+  nodesOrder: NodeOrderMap
+  flowBlocks: FlowBlock[]
+  title: string
+  description: string
+  availableTestSuites: TestSuite[]
+  availableTags: Tag[]
+  selectedTestSuites: string[]
+  selectedTags: string[]
+  selectedTemplateId: string
+  appliedTemplateId: string
+  currentStep: number
+  isCreateSuiteDialogOpen: boolean
+  isCreateTagDialogOpen: boolean
+  isFlowImmersive: boolean
+  errors: TestCaseFormErrors
+}
+
+type Updater<T> = T | ((prev: T) => T)
+
+function applyUpdater<T>(updater: Updater<T>, prev: T): T {
+  return typeof updater === 'function' ? (updater as (value: T) => T)(prev) : updater
+}
+
+function appendUniqueById<T extends { id: string }>(items: T[], item: T): T[] {
+  return items.some(currentItem => currentItem.id === item.id) ? items : [...items, item]
+}
+
+function appendUniqueId(ids: string[], id: string): string[] {
+  return ids.includes(id) ? ids : [...ids, id]
+}
+
+export type TestCaseFormAction =
+  | { type: 'setCurrentStep'; step: number }
+  | { type: 'setNodesOrder'; nodesOrder: NodeOrderMap }
+  | { type: 'setFlowBlocks'; flowBlocks: FlowBlock[] }
+  | { type: 'setTitle'; title: string }
+  | { type: 'setDescription'; description: string }
+  | { type: 'setSelectedTemplateId'; templateId: string }
+  | { type: 'setAppliedTemplateId'; templateId: string }
+  | { type: 'setSelectedTestSuites'; testSuiteIds: string[] }
+  | { type: 'setSelectedTags'; tagIds: string[] }
+  | { type: 'setIsCreateSuiteDialogOpen'; open: boolean }
+  | { type: 'setIsCreateTagDialogOpen'; open: boolean }
+  | { type: 'toggleFlowImmersive' }
+  | { type: 'patchErrors'; updater: Updater<TestCaseFormErrors> }
+  | { type: 'setErrors'; errors: TestCaseFormErrors }
+  | { type: 'clearErrors' }
+  | {
+      type: 'applyTemplateConversion'
+      payload: {
+        title: string
+        description: string
+        nodesOrder: NodeOrderMap
+        flowBlocks: FlowBlock[]
+        appliedTemplateId: string
+      }
+    }
+  | { type: 'addTestSuite'; testSuite: TestSuite }
+  | { type: 'addTag'; tag: Tag }
+
+export function testCaseFormReducer(state: TestCaseFormState, action: TestCaseFormAction): TestCaseFormState {
+  switch (action.type) {
+    case 'setCurrentStep':
+      return { ...state, currentStep: action.step }
+    case 'setNodesOrder':
+      return {
+        ...state,
+        nodesOrder: action.nodesOrder,
+        errors: { ...state.errors, steps: undefined },
+      }
+    case 'setFlowBlocks':
+      return { ...state, flowBlocks: action.flowBlocks }
+    case 'setTitle':
+      return {
+        ...state,
+        title: action.title,
+        errors: { ...state.errors, title: undefined },
+      }
+    case 'setDescription':
+      return {
+        ...state,
+        description: action.description,
+        errors: { ...state.errors, description: undefined },
+      }
+    case 'setSelectedTemplateId':
+      return {
+        ...state,
+        selectedTemplateId: action.templateId,
+        errors: { ...state.errors, templateTestCaseId: undefined },
+      }
+    case 'setAppliedTemplateId':
+      return { ...state, appliedTemplateId: action.templateId }
+    case 'setSelectedTestSuites':
+      return {
+        ...state,
+        selectedTestSuites: action.testSuiteIds,
+        errors: { ...state.errors, testSuiteIds: undefined },
+      }
+    case 'setSelectedTags':
+      return {
+        ...state,
+        selectedTags: action.tagIds,
+        errors: { ...state.errors, tagIds: undefined },
+      }
+    case 'setIsCreateSuiteDialogOpen':
+      return { ...state, isCreateSuiteDialogOpen: action.open }
+    case 'setIsCreateTagDialogOpen':
+      return { ...state, isCreateTagDialogOpen: action.open }
+    case 'toggleFlowImmersive':
+      return { ...state, isFlowImmersive: !state.isFlowImmersive }
+    case 'patchErrors':
+      return { ...state, errors: applyUpdater(action.updater, state.errors) }
+    case 'setErrors':
+      return { ...state, errors: action.errors }
+    case 'clearErrors':
+      return { ...state, errors: {} }
+    case 'applyTemplateConversion':
+      return {
+        ...state,
+        title: action.payload.title,
+        description: action.payload.description,
+        nodesOrder: action.payload.nodesOrder,
+        flowBlocks: action.payload.flowBlocks,
+        appliedTemplateId: action.payload.appliedTemplateId,
+        errors: { ...state.errors, steps: undefined, templateTestCaseId: undefined },
+      }
+    case 'addTestSuite':
+      return {
+        ...state,
+        availableTestSuites: appendUniqueById(state.availableTestSuites, action.testSuite),
+        selectedTestSuites: appendUniqueId(state.selectedTestSuites, action.testSuite.id),
+        isCreateSuiteDialogOpen: false,
+      }
+    case 'addTag':
+      return {
+        ...state,
+        availableTags: appendUniqueById(state.availableTags, action.tag),
+        selectedTags: appendUniqueId(state.selectedTags, action.tag.id),
+        isCreateTagDialogOpen: false,
+      }
+    default:
+      return state
+  }
+}
+
+export type CreateTestCaseFormStateInput = {
+  defaultNodesOrder: NodeOrderMap
+  defaultFlowBlocks: FlowBlock[]
+  defaultTitle?: string
+  defaultDescription?: string
+  testSuites: TestSuite[]
+  tags: Tag[]
+  defaultTestSuiteIds?: string[]
+  defaultTagIds?: string[]
+  defaultTemplateTestCaseId?: string
+  initialWizardStep: number
+}
+
+export function createTestCaseFormState({
+  defaultNodesOrder,
+  defaultFlowBlocks,
+  defaultTitle,
+  defaultDescription,
+  testSuites,
+  tags,
+  defaultTestSuiteIds,
+  defaultTagIds,
+  defaultTemplateTestCaseId,
+  initialWizardStep,
+}: CreateTestCaseFormStateInput): TestCaseFormState {
+  const templateId = defaultTemplateTestCaseId ?? ''
+
+  return {
+    nodesOrder: defaultNodesOrder,
+    flowBlocks: defaultFlowBlocks,
+    title: defaultTitle ?? '',
+    description: defaultDescription ?? '',
+    availableTestSuites: testSuites,
+    availableTags: tags,
+    selectedTestSuites: defaultTestSuiteIds ?? [],
+    selectedTags: defaultTagIds ?? [],
+    selectedTemplateId: templateId,
+    appliedTemplateId: templateId,
+    currentStep: initialWizardStep,
+    isCreateSuiteDialogOpen: false,
+    isCreateTagDialogOpen: false,
+    isFlowImmersive: false,
+    errors: {},
+  }
+}