create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/app/(base)/template-test-cases/create-template-test-case-page-data.test.ts

@@ -0,0 +1,78 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTemplateStepParamsAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+
+import { loadCreateTemplateTestCasePageData } from './create-template-test-case-page-data'
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepParamsAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/locator/locator-actions', () => ({
+  getAllLocatorsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/locator-groups/locator-group-actions', () => ({
+  getAllLocatorGroupsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/environments/environment-actions', () => ({
+  getAllEnvironmentsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/modules/module-actions', () => ({
+  getAllModulesAction: vi.fn(),
+}))
+
+const getAllTemplateStepParamsActionMock = vi.mocked(getAllTemplateStepParamsAction)
+const getAllTemplateStepsActionMock = vi.mocked(getAllTemplateStepsAction)
+const getAllLocatorsActionMock = vi.mocked(getAllLocatorsAction)
+const getAllLocatorGroupsActionMock = vi.mocked(getAllLocatorGroupsAction)
+const getAllEnvironmentsActionMock = vi.mocked(getAllEnvironmentsAction)
+const getAllModulesActionMock = vi.mocked(getAllModulesAction)
+
+describe('loadCreateTemplateTestCasePageData', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns error when template step params fail to load', async () => {
+    getAllTemplateStepParamsActionMock.mockResolvedValue({ data: null, error: 'params failed' })
+
+    await expect(loadCreateTemplateTestCasePageData()).resolves.toEqual({
+      status: 'error',
+      message: 'params failed',
+    })
+  })
+
+  it('returns success when all requests succeed', async () => {
+    const templateStepParams = [{ id: 'param-1', name: 'url', type: 'STRING', templateStepId: 'step-1', order: 0 }]
+    const templateSteps = [{ id: 'step-1', name: 'Navigate', type: 'NAVIGATION', signature: 'navigate' }]
+    const locators = [{ id: 'loc-1', name: 'Submit', locatorGroupId: 'group-1' }]
+    const locatorGroups = [{ id: 'group-1', name: 'Checkout', route: '/checkout', moduleId: 'module-1' }]
+    const environments = [{ id: 'env-1', name: 'Staging' }]
+    const modules = [{ id: 'module-1', name: 'Shop', parentId: null }]
+
+    getAllTemplateStepParamsActionMock.mockResolvedValue({ data: templateStepParams, error: null })
+    getAllTemplateStepsActionMock.mockResolvedValue({ data: templateSteps, error: null })
+    getAllLocatorsActionMock.mockResolvedValue({ data: locators, error: null })
+    getAllLocatorGroupsActionMock.mockResolvedValue({ data: locatorGroups, error: null })
+    getAllEnvironmentsActionMock.mockResolvedValue({ data: environments, error: null })
+    getAllModulesActionMock.mockResolvedValue({ data: modules, error: null })
+
+    await expect(loadCreateTemplateTestCasePageData()).resolves.toEqual({
+      status: 'success',
+      templateStepParams,
+      templateSteps,
+      locators,
+      locatorGroups,
+      environments,
+      modules,
+    })
+  })
+})

package/templates/starter/src/app/(base)/template-test-cases/create-template-test-case-page-data.ts

@@ -0,0 +1,58 @@
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import type { Environment, Locator, LocatorGroup, Module, TemplateStep, TemplateStepParameter } from '@prisma/client'
+
+export type CreateTemplateTestCasePageData =
+  | { status: 'error'; message: string }
+  | {
+      status: 'success'
+      templateStepParams: TemplateStepParameter[]
+      templateSteps: TemplateStep[]
+      locators: Locator[]
+      locatorGroups: LocatorGroup[]
+      environments: Environment[]
+      modules: Module[]
+    }
+
+export async function loadCreateTemplateTestCasePageData(): Promise<CreateTemplateTestCasePageData> {
+  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
+
+  if (templateStepParamsError) {
+    return { status: 'error', message: templateStepParamsError }
+  }
+
+  const [
+    { data: templateSteps, error: templateStepsError },
+    { data: locators, error: locatorsError },
+    { data: locatorGroups, error: locatorGroupsError },
+    { data: environments, error: environmentsError },
+    { data: modules, error: modulesError },
+  ] = await Promise.all([
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllEnvironmentsAction(),
+    getAllModulesAction(),
+  ])
+
+  const secondaryError =
+    templateStepsError || locatorsError || locatorGroupsError || environmentsError || modulesError
+
+  if (secondaryError) {
+    return { status: 'error', message: secondaryError }
+  }
+
+  return {
+    status: 'success',
+    templateStepParams: templateStepParams as TemplateStepParameter[],
+    templateSteps: templateSteps as TemplateStep[],
+    locators: locators as Locator[],
+    locatorGroups: locatorGroups as LocatorGroup[],
+    environments: environments as Environment[],
+    modules: modules as Module[],
+  }
+}

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

@@ -1,11 +1,15 @@
 import {
   Locator,
   LocatorGroup,
+  Environment,
+  Module,
   TemplateStep,
   TemplateStepParameter,
   TemplateTestCase,
   TemplateTestCaseStep,
   TemplateTestCaseStepParameter,
+  TemplateTestCaseFlowBlock,
+  TemplateTestCaseFlowBlockNode,
 } from '@prisma/client'
 import React from 'react'
 import TemplateTestCaseForm from '../../template-test-case-form'
@@ -16,6 +20,8 @@ import {
   getAllTemplateStepsAction,
 } from '@/actions/template-step/template-step-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
 import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
 import {
   getTemplateTestCaseByIdAction,
@@ -31,22 +37,63 @@ export const metadata: Metadata = {
 
 const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const { data, error } = await getTemplateTestCaseByIdAction(id)
+  if (!id?.trim()) {
+    return <div>Error: Invalid template test case id.</div>
+  }
+
+  const [
+    templateCaseResponse,
+    { data: templateStepParams, error: templateStepParamsError },
+    { data: templateSteps, error: templateStepsError },
+    { data: locators, error: locatorsError },
+    { data: locatorGroups, error: locatorGroupsError },
+    { data: environments, error: environmentsError },
+    { data: modules, error: modulesError },
+  ] = await Promise.all([
+    getTemplateTestCaseByIdAction(id),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllEnvironmentsAction(),
+    getAllModulesAction(),
+  ])
+
+  const { data, error } = templateCaseResponse
 
   if (error) {
     return <div>Error: {error}</div>
   }
+
+  if (!data) {
+    return <div>Error: Template test case not found.</div>
+  }
+
   const templateTestCase = data as TemplateTestCase & {
     steps: (TemplateTestCaseStep & {
       parameters: TemplateTestCaseStepParameter[]
     })[]
+    flowBlocks: (TemplateTestCaseFlowBlock & { nodes: TemplateTestCaseFlowBlockNode[] })[]
   }
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
-    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
+  if (
+    templateStepParamsError ||
+    templateStepsError ||
+    locatorsError ||
+    locatorGroupsError ||
+    environmentsError ||
+    modulesError
+  ) {
+    return (
+      <div>
+        Error:{' '}
+        {templateStepParamsError ||
+          templateStepsError ||
+          locatorsError ||
+          locatorGroupsError ||
+          environmentsError ||
+          modulesError}
+      </div>
+    )
   }
   return (
     <>
@@ -63,8 +110,12 @@ const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string
         templateSteps={templateSteps as TemplateStep[]}
         locators={locators as Locator[]}
         locatorGroups={locatorGroups as LocatorGroup[]}
+        environments={environments as Environment[]}
+        modules={modules as Module[]}
         defaultNodesOrder={templateTestCase.steps.reduce((acc, step) => {
-          acc[step.id] = {
+          const nodeId = step.flowNodeId ?? step.id
+          acc[nodeId] = {
+            nodeId,
             order: step.order,
             label: step.label,
             gherkinStep: step.gherkinStep,
@@ -81,6 +132,14 @@ const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string
           }
           return acc
         }, {} as TemplateTestCaseNodeOrderMap)}
+        defaultFlowBlocks={templateTestCase.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)/template-test-cases/page.tsx

@@ -27,7 +27,7 @@ const TemplateTestCasesPage = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Blocks className="h-8 w-8" />}
+          icon={<Blocks className="size-8" />}
           title="No template test cases found"
           description="Get started by creating a template test case to quickly create test cases"
           createRoute="/template-test-cases/create"
@@ -42,7 +42,7 @@ const TemplateTestCasesPage = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
+            <Blocks className="mr-2 size-8" />
             Template Test Cases
           </span>
         </PageHeader>

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

@@ -77,6 +77,8 @@ describe('TemplateTestCaseFlow', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onNodeOrderChange={onNodeOrderChange}
         defaultValueInput
       />,

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

@@ -1,26 +1,36 @@
 import FlowDiagram from '@/components/diagram/flow-diagram'
 import { toTemplateTestCaseNodeOrderMap } from '@/components/diagram/flow-host-helpers'
 import { useFlowNodeOrder } from '@/components/diagram/use-flow-node-order'
-import type { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import type { Locator, LocatorGroup, TemplateStep, TemplateStepParameter } from '@prisma/client'
+import type { FlowBlock, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import type { Environment, Locator, LocatorGroup, Module, TemplateStep, TemplateStepParameter } from '@prisma/client'
 
 type TemplateTestCaseFlowProps = {
   initialNodesOrder: TemplateTestCaseNodeOrderMap
   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: TemplateTestCaseNodeOrderMap) => void
+  flowBlocks?: FlowBlock[]
+  onFlowBlocksChange?: (flowBlocks: FlowBlock[]) => void
   defaultValueInput?: boolean
 }
 
+const EMPTY_FLOW_BLOCKS: FlowBlock[] = []
+
 const TemplateTestCaseFlow = ({
   initialNodesOrder,
   templateStepParams,
   templateSteps,
   locators,
   locatorGroups,
+  environments,
+  modules,
   onNodeOrderChange,
+  flowBlocks = EMPTY_FLOW_BLOCKS,
+  onFlowBlocksChange,
   defaultValueInput = false,
 }: TemplateTestCaseFlowProps) => {
   const { nodesOrder, handleNodeOrderChange } = useFlowNodeOrder({
@@ -37,7 +47,12 @@ const TemplateTestCaseFlow = ({
       templateSteps={templateSteps}
       locators={locators}
       locatorGroups={locatorGroups}
+      environments={environments}
+      modules={modules}
       defaultValueInput={defaultValueInput}
+      enableNodeGrouping
+      flowBlocks={flowBlocks}
+      onFlowBlocksChange={onFlowBlocksChange}
     />
   )
 }

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

@@ -73,6 +73,8 @@ describe('TemplateTestCaseForm', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onSubmitAction={onSubmitAction}
       />,
     )
@@ -86,11 +88,13 @@ describe('TemplateTestCaseForm', () => {
         {
           title: 'Reusable login',
           description: 'Uses default credentials',
+          flowBlocks: [],
           steps: [
             {
               gherkinStep: 'fill email',
               label: 'Fill email',
               icon: 'INPUT',
+              nodeId: 'node-1',
               parameters: [
                 {
                   name: 'email',
@@ -127,6 +131,8 @@ describe('TemplateTestCaseForm', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onSubmitAction={onSubmitAction}
       />,
     )

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

@@ -2,10 +2,12 @@
 import React, { useCallback, useState } from 'react'
 
 import TemplateTestCaseFlow from './template-test-case-flow'
-import type { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import type { FlowBlock, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
 import {
   type Locator,
   type LocatorGroup,
+  type Environment,
+  type Module,
   type TemplateStep,
   type TemplateStepParameter,
 } from '@prisma/client'
@@ -17,7 +19,7 @@ import { TestScenarioPreview } from '@/components/test-case/test-scenario-previe
 import {
   buildScenarioPreview,
   buildScenarioSteps,
-  getActionErrorMessage,
+  handleTestCaseSaveResponse,
   templateTestCaseSubmitSchema,
 } from '@/components/test-case/test-case-form-helpers'
 import { Button } from '@/components/ui/button'
@@ -28,33 +30,46 @@ import { templateTestCaseSchema } from '@/constants/form-opts/template-test-case
 import { toast } from '@/hooks/use-toast'
 import type { ActionResponse } from '@/types/form/actionHandler'
 
+function TemplateTestCaseFormFieldError({ message }: { message?: string[] }) {
+  return <ErrorMessage message={message?.[0] || ''} visible={!!message} />
+}
+
 type TemplateTestCaseFormProps = {
   defaultNodesOrder: TemplateTestCaseNodeOrderMap
   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'>>
   onSubmitAction: (value: z.infer<typeof templateTestCaseSchema>, id?: string) => Promise<ActionResponse>
   id?: string
   defaultTitle?: string
   defaultDescription?: string
   defaultValueInput?: boolean
+  defaultFlowBlocks?: FlowBlock[]
 }
 
+const EMPTY_FLOW_BLOCKS: FlowBlock[] = []
+
 const TemplateTestCaseForm = ({
   defaultNodesOrder,
   templateStepParams,
   templateSteps,
   locators,
   locatorGroups,
+  environments,
+  modules,
   id,
   defaultTitle,
   defaultDescription,
   defaultValueInput = false,
+  defaultFlowBlocks = EMPTY_FLOW_BLOCKS,
   onSubmitAction,
 }: TemplateTestCaseFormProps) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(defaultNodesOrder)
+  const [flowBlocks, setFlowBlocks] = useState<FlowBlock[]>(defaultFlowBlocks)
   const [title, setTitle] = useState(defaultTitle || '')
   const [description, setDescription] = useState(defaultDescription || '')
   const [errors, setErrors] = useState<{
@@ -64,7 +79,6 @@ const TemplateTestCaseForm = ({
   }>({})
 
   const scenarioPreview = buildScenarioPreview(title, description, nodesOrder)
-  const renderError = (message?: string[]) => <ErrorMessage message={message?.[0] || ''} visible={!!message} />
 
   const onNodeOrderChange = useCallback((nodesOrder: TemplateTestCaseNodeOrderMap) => {
     setNodesOrder(nodesOrder)
@@ -83,6 +97,7 @@ const TemplateTestCaseForm = ({
       title,
       description,
       steps: buildScenarioSteps(nodesOrder),
+      flowBlocks,
     })
 
     if (!result.success) {
@@ -91,22 +106,8 @@ const TemplateTestCaseForm = ({
     }
     setErrors({})
     const response = await onSubmitAction(result.data, id)
-    if (response.status === 200) {
-      toast({
-        title: 'Success',
-        description: 'Test case saved successfully',
-        variant: 'default',
-      })
-      router.push(`/template-test-cases`)
-    }
-    if (response.status === 500) {
-      toast({
-        title: 'Error',
-        description: getActionErrorMessage(response),
-        variant: 'destructive',
-      })
-    }
-  }, [description, nodesOrder, title, router, onSubmitAction, id])
+    handleTestCaseSaveResponse({ response, redirectPath: '/template-test-cases', push, toast })
+  }, [description, nodesOrder, title, push, onSubmitAction, id, flowBlocks])
 
   return (
     <div className="flex flex-col gap-4">
@@ -115,12 +116,12 @@ const TemplateTestCaseForm = ({
           <div className="mb-4 flex flex-col gap-2">
             <Label htmlFor="title">Title</Label>
             <Input id="title" name="title" value={title} onChange={onTitleChange} />
-            {renderError(errors.title)}
+            <TemplateTestCaseFormFieldError message={errors.title} />
           </div>
           <div className="mb-4 flex flex-col gap-2">
             <Label htmlFor="description">Description</Label>
             <Textarea id="description" name="description" value={description} onChange={onDescriptionChange} />
-            {renderError(errors.description)}
+            <TemplateTestCaseFormFieldError message={errors.description} />
           </div>
         </div>
         <div className="w-1/2">
@@ -130,7 +131,6 @@ const TemplateTestCaseForm = ({
         </div>
       </div>
       <div className="mb-4 flex h-[500px] flex-col gap-2">
-        <Label htmlFor="test-case-flow">Test Case Flow</Label>
         <TemplateTestCaseFlow
           initialNodesOrder={nodesOrder}
           templateStepParams={templateStepParams}
@@ -138,10 +138,14 @@ const TemplateTestCaseForm = ({
           onNodeOrderChange={onNodeOrderChange}
           locators={locators}
           locatorGroups={locatorGroups}
+          environments={environments}
+          modules={modules}
           defaultValueInput={defaultValueInput}
+          flowBlocks={flowBlocks}
+          onFlowBlocksChange={setFlowBlocks}
         />
       </div>
-      {renderError(errors.steps)}
+      <TemplateTestCaseFormFieldError message={errors.steps} />
       <div className="mb-4 flex flex-col gap-2">
         <Button onClick={handleSubmit} className="w-fit px-6">
           Save