create-appraisejs 0.2.0 → 0.3.0-alpha.0

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

@@ -1,56 +1,56 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Blocks } from 'lucide-react'
-import React from 'react'
-import TemplateTestCaseForm from '../template-test-case-form'
-import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
-import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
-import { createTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Template Test Case',
-  description: 'Create a new template test case to quickly create test cases',
-}
-
-const CreateTemplateTestCase = async () => {
-  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>
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
-            Create Template Test Case
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Create a new template test case to quickly create test cases</HeaderSubtitle>
-      </div>
-      <TemplateTestCaseForm
-        defaultNodesOrder={{}}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        onSubmitAction={createTemplateTestCaseAction}
-        defaultValueInput={true}
-      />
-    </>
-  )
-}
-
-export default CreateTemplateTestCase
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Blocks } from 'lucide-react'
+import React from 'react'
+import TemplateTestCaseForm from '../template-test-case-form'
+import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { createTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Test Case',
+  description: 'Create a new template test case to quickly create test cases',
+}
+
+const CreateTemplateTestCase = async () => {
+  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>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Blocks className="mr-2 h-8 w-8" />
+            Create Template Test Case
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Create a new template test case to quickly create test cases</HeaderSubtitle>
+      </div>
+      <TemplateTestCaseForm
+        defaultNodesOrder={{}}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        onSubmitAction={createTemplateTestCaseAction}
+        defaultValueInput={true}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateTestCase

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

@@ -1,89 +1,89 @@
-import {
-  Locator,
-  LocatorGroup,
-  TemplateStep,
-  TemplateStepParameter,
-  TemplateTestCase,
-  TemplateTestCaseStep,
-  TemplateTestCaseStepParameter,
-} from '@prisma/client'
-import React from 'react'
-import TemplateTestCaseForm from '../../template-test-case-form'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import PageHeader from '@/components/typography/page-header'
-import {
-  getAllTemplateStepParamsAction,
-  getAllTemplateStepsAction,
-} from '@/actions/template-step/template-step-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import {
-  getTemplateTestCaseByIdAction,
-  updateTemplateTestCaseAction,
-} from '@/actions/template-test-case/template-test-case-actions'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Template Test Case',
-  description: 'Modify a template test case',
-}
-
-const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data, error } = await getTemplateTestCaseByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-  const templateTestCase = data as TemplateTestCase & {
-    steps: (TemplateTestCaseStep & {
-      parameters: TemplateTestCaseStepParameter[]
-    })[]
-  }
-  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>
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Modify Template Test Case</PageHeader>
-        <HeaderSubtitle>Modify a template test case</HeaderSubtitle>
-      </div>
-      <TemplateTestCaseForm
-        onSubmitAction={updateTemplateTestCaseAction}
-        id={id}
-        defaultTitle={templateTestCase.name}
-        defaultDescription={templateTestCase.description || ''}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        defaultNodesOrder={templateTestCase.steps.reduce((acc, step) => {
-          acc[step.id] = {
-            order: step.order,
-            label: step.label,
-            gherkinStep: step.gherkinStep,
-            icon: step.icon,
-            parameters: ((step.parameters || []) as TemplateTestCaseStepParameter[]).map(
-              (param: TemplateTestCaseStepParameter) => ({
-                name: param.name,
-                defaultValue: param.defaultValue,
-                type: param.type,
-                order: param.order,
-              }),
-            ),
-            templateStepId: step.templateStepId,
-          }
-          return acc
-        }, {} as TemplateTestCaseNodeOrderMap)}
-      />
-    </>
-  )
-}
-
-export default ModifyTemplateTestCase
+import {
+  Locator,
+  LocatorGroup,
+  TemplateStep,
+  TemplateStepParameter,
+  TemplateTestCase,
+  TemplateTestCaseStep,
+  TemplateTestCaseStepParameter,
+} from '@prisma/client'
+import React from 'react'
+import TemplateTestCaseForm from '../../template-test-case-form'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import {
+  getTemplateTestCaseByIdAction,
+  updateTemplateTestCaseAction,
+} from '@/actions/template-test-case/template-test-case-actions'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Test Case',
+  description: 'Modify a template test case',
+}
+
+const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getTemplateTestCaseByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+  const templateTestCase = data as TemplateTestCase & {
+    steps: (TemplateTestCaseStep & {
+      parameters: TemplateTestCaseStepParameter[]
+    })[]
+  }
+  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>
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Modify Template Test Case</PageHeader>
+        <HeaderSubtitle>Modify a template test case</HeaderSubtitle>
+      </div>
+      <TemplateTestCaseForm
+        onSubmitAction={updateTemplateTestCaseAction}
+        id={id}
+        defaultTitle={templateTestCase.name}
+        defaultDescription={templateTestCase.description || ''}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        defaultNodesOrder={templateTestCase.steps.reduce((acc, step) => {
+          acc[step.id] = {
+            order: step.order,
+            label: step.label,
+            gherkinStep: step.gherkinStep,
+            icon: step.icon,
+            parameters: ((step.parameters || []) as TemplateTestCaseStepParameter[]).map(
+              (param: TemplateTestCaseStepParameter) => ({
+                name: param.name,
+                defaultValue: param.defaultValue,
+                type: param.type,
+                order: param.order,
+              }),
+            ),
+            templateStepId: step.templateStepId,
+          }
+          return acc
+        }, {} as TemplateTestCaseNodeOrderMap)}
+      />
+    </>
+  )
+}
+
+export default ModifyTemplateTestCase

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

@@ -1,58 +1,58 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Blocks } from 'lucide-react'
-import React, { Suspense } from 'react'
-import TemplateTestCaseTable from './template-test-case-table'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Template Test Cases',
-  description: 'Manage template test cases for quickly creating test cases',
-}
-
-const TemplateTestCasesPage = async () => {
-  const { data: templateTestCases, error: templateTestCasesError } = await getAllTemplateTestCasesAction()
-
-  if (templateTestCasesError) {
-    return <div>Error: {templateTestCasesError}</div>
-  }
-
-  const templateTestCasesData = templateTestCases as (TemplateTestCase & { steps: TemplateTestCaseStep[] })[]
-
-  if (!templateTestCasesData || templateTestCasesData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<Blocks className="h-8 w-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"
-          createText="Create Template Test Case"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
-            Template Test Cases
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>A collection of templates to quickly create test cases</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TemplateTestCaseTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default TemplateTestCasesPage
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Blocks } from 'lucide-react'
+import React, { Suspense } from 'react'
+import TemplateTestCaseTable from './template-test-case-table'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Template Test Cases',
+  description: 'Manage template test cases for quickly creating test cases',
+}
+
+const TemplateTestCasesPage = async () => {
+  const { data: templateTestCases, error: templateTestCasesError } = await getAllTemplateTestCasesAction()
+
+  if (templateTestCasesError) {
+    return <div>Error: {templateTestCasesError}</div>
+  }
+
+  const templateTestCasesData = templateTestCases as (TemplateTestCase & { steps: TemplateTestCaseStep[] })[]
+
+  if (!templateTestCasesData || templateTestCasesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Blocks className="h-8 w-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"
+          createText="Create Template Test Case"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Blocks className="mr-2 h-8 w-8" />
+            Template Test Cases
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>A collection of templates to quickly create test cases</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TemplateTestCaseTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TemplateTestCasesPage

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

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { StepParameterType } from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+import TemplateTestCaseFlow from './template-test-case-flow'
+
+type MockFlowDiagramProps = {
+  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
+  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
+  defaultValueInput?: boolean
+}
+
+const { flowDiagramRenderSpy } = vi.hoisted(() => ({
+  flowDiagramRenderSpy: vi.fn<(props: MockFlowDiagramProps) => void>(),
+}))
+
+vi.mock('@/components/diagram/flow-diagram', () => ({
+  __esModule: true,
+  default: (props: MockFlowDiagramProps) => {
+    flowDiagramRenderSpy(props)
+
+    return (
+      <div>
+        <div data-testid="node-order">{JSON.stringify(props.nodeOrder)}</div>
+        <div data-testid="default-value-input">{String(props.defaultValueInput)}</div>
+        <button
+          type="button"
+          onClick={() =>
+            props.onNodeOrderChange({
+              'node-1': {
+                order: 1,
+                label: 'Fill email',
+                parameters: [
+                  {
+                    name: 'value',
+                    value: 'qa@appraise.dev',
+                    type: StepParameterType.STRING,
+                    order: 1,
+                  },
+                ],
+                templateStepId: 'step-1',
+              },
+            })
+          }
+        >
+          Emit Runtime Nodes
+        </button>
+      </div>
+    )
+  },
+}))
+
+describe('TemplateTestCaseFlow', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    flowDiagramRenderSpy.mockClear()
+  })
+
+  it('normalizes runtime node updates into default values and persists them after the debounce window', async () => {
+    const onNodeOrderChange = vi.fn()
+
+    render(
+      <TemplateTestCaseFlow
+        initialNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Initial template step',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        onNodeOrderChange={onNodeOrderChange}
+        defaultValueInput
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Emit Runtime Nodes' }))
+
+    expect(onNodeOrderChange).not.toHaveBeenCalled()
+
+    await vi.advanceTimersByTimeAsync(200)
+
+    expect(onNodeOrderChange).toHaveBeenCalledWith({
+      'node-1': {
+        order: 1,
+        label: 'Fill email',
+        parameters: [
+          {
+            name: 'value',
+            defaultValue: 'qa@appraise.dev',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-1',
+      },
+    })
+    expect(screen.getByTestId('default-value-input')).toHaveTextContent('true')
+  })
+
+})

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

@@ -1,84 +1,45 @@
-import FlowDiagram from '@/components/diagram/flow-diagram'
-import { TemplateTestCaseNodeOrderMap, NodeOrderMap } from '@/types/diagram/diagram'
-import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
-import React, { useCallback, useState, useEffect, useRef } from 'react'
-
-function useDebouncedCallback<T extends unknown[]>(callback: (...args: T) => void, delay: number) {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  return (...args: T) => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    timeoutRef.current = setTimeout(() => {
-      callback(...args)
-    }, delay)
-  }
-}
-
-const TemplateTestCaseFlow = ({
-  initialNodesOrder,
-  templateStepParams,
-  templateSteps,
-  locators,
-  locatorGroups,
-  onNodeOrderChange,
-  defaultValueInput = false,
-}: {
-  initialNodesOrder: TemplateTestCaseNodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  onNodeOrderChange: (nodesOrder: TemplateTestCaseNodeOrderMap) => void
-  defaultValueInput?: boolean
-}) => {
-  const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(initialNodesOrder)
-
-  const handleNodeOrderChange = useCallback(
-    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
-      // Convert NodeOrderMap to TemplateTestCaseNodeOrderMap if needed
-      const convertedNodeOrder: TemplateTestCaseNodeOrderMap = {}
-      Object.entries(nodeOrder).forEach(([key, nodeData]) => {
-        convertedNodeOrder[key] = {
-          ...nodeData,
-          parameters: nodeData.parameters.map(
-            (param: {
-              name: string
-              value?: string
-              defaultValue?: string
-              type: StepParameterType
-              order: number
-            }) => ({
-              ...param,
-              defaultValue: 'value' in param ? param.value : param.defaultValue,
-            }),
-          ),
-        }
-      })
-      setNodesOrder(convertedNodeOrder)
-    },
-    [setNodesOrder],
-  )
-
-  const debouncedSaveNodesOrder = useDebouncedCallback(onNodeOrderChange, 200)
-
-  useEffect(() => {
-    debouncedSaveNodesOrder(nodesOrder)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodesOrder])
-
-  return (
-    <>
-      <FlowDiagram
-        nodeOrder={nodesOrder}
-        templateStepParams={templateStepParams}
-        onNodeOrderChange={handleNodeOrderChange}
-        templateSteps={templateSteps}
-        locators={locators}
-        locatorGroups={locatorGroups}
-        defaultValueInput={defaultValueInput}
-      />
-    </>
-  )
-}
-
-export default TemplateTestCaseFlow
+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'
+
+type TemplateTestCaseFlowProps = {
+  initialNodesOrder: TemplateTestCaseNodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  onNodeOrderChange: (nodesOrder: TemplateTestCaseNodeOrderMap) => void
+  defaultValueInput?: boolean
+}
+
+const TemplateTestCaseFlow = ({
+  initialNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+  defaultValueInput = false,
+}: TemplateTestCaseFlowProps) => {
+  const { nodesOrder, handleNodeOrderChange } = useFlowNodeOrder({
+    initialNodesOrder,
+    onNodeOrderChange,
+    normalizeNodeOrder: toTemplateTestCaseNodeOrderMap,
+  })
+
+  return (
+    <FlowDiagram
+      nodeOrder={nodesOrder}
+      templateStepParams={templateStepParams}
+      onNodeOrderChange={handleNodeOrderChange}
+      templateSteps={templateSteps}
+      locators={locators}
+      locatorGroups={locatorGroups}
+      defaultValueInput={defaultValueInput}
+    />
+  )
+}
+
+export default TemplateTestCaseFlow