create-appraisejs 0.1.7 → 0.1.8-alpha

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

@@ -1,73 +1,73 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { formOpts } from '@/constants/form-opts/template-selection-form-opts'
-import { TemplateTestCase } from '@prisma/client'
-import { useForm } from '@tanstack/react-form'
-import { ArrowRight } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import React from 'react'
-import { z } from 'zod'
-
-const TemplateSelectionForm = ({ templateTestCases }: { templateTestCases: TemplateTestCase[] }) => {
-  const router = useRouter()
-  const form = useForm({
-    defaultValues: formOpts?.defaultValues,
-    validators: formOpts?.validators,
-    onSubmit: async ({ value }) => {
-      router.push(`/test-cases/create-from-template/generate/${value.templateTestCaseId}`)
-    },
-  })
-  return (
-    <div>
-      <form
-        onSubmit={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          form.handleSubmit()
-        }}
-      >
-        <form.Field
-          name="templateTestCaseId"
-          validators={{
-            onChange: z.string().min(1, { message: 'Template test case is required' }),
-          }}
-        >
-          {field => {
-            return (
-              <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-                <Label htmlFor={field.name}>Template Test Case</Label>
-                <Select onValueChange={field.handleChange} value={field.state.value}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a template test case" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {templateTestCases.map(templateTestCase => (
-                      <SelectItem key={templateTestCase.id} value={templateTestCase.id}>
-                        {templateTestCase.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-              </div>
-            )
-          }}
-        </form.Field>
-
-        <Button type="submit" className="w-fit hover:bg-emerald-500">
-          <span className="font-bold">Next</span>
-          <ArrowRight className="h-4 w-4" />
-        </Button>
-      </form>
-    </div>
-  )
-}
-
-export default TemplateSelectionForm
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts } from '@/constants/form-opts/template-selection-form-opts'
+import { TemplateTestCase } from '@prisma/client'
+import { useForm } from '@tanstack/react-form'
+import { ArrowRight } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+import { z } from 'zod'
+
+const TemplateSelectionForm = ({ templateTestCases }: { templateTestCases: TemplateTestCase[] }) => {
+  const router = useRouter()
+  const form = useForm({
+    defaultValues: formOpts?.defaultValues,
+    validators: formOpts?.validators,
+    onSubmit: async ({ value }) => {
+      router.push(`/test-cases/create-from-template/generate/${value.templateTestCaseId}`)
+    },
+  })
+  return (
+    <div>
+      <form
+        onSubmit={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <form.Field
+          name="templateTestCaseId"
+          validators={{
+            onChange: z.string().min(1, { message: 'Template test case is required' }),
+          }}
+        >
+          {field => {
+            return (
+              <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+                <Label htmlFor={field.name}>Template Test Case</Label>
+                <Select onValueChange={field.handleChange} value={field.state.value}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a template test case" />
+                  </SelectTrigger>
+                  <SelectContent isEmpty={templateTestCases.length === 0}>
+                    {templateTestCases.map(templateTestCase => (
+                      <SelectItem key={templateTestCase.id} value={templateTestCase.id}>
+                        {templateTestCase.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={index} className="text-xs text-pink-500">
+                    {typeof error === 'string' ? error : error?.message || String(error)}
+                  </p>
+                ))}
+              </div>
+            )
+          }}
+        </form.Field>
+
+        <Button type="submit" className="w-fit hover:bg-emerald-500">
+          <span className="font-bold">Next</span>
+          <ArrowRight className="h-4 w-4" />
+        </Button>
+      </form>
+    </div>
+  )
+}
+
+export default TemplateSelectionForm

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

@@ -1,106 +1,106 @@
-import { getTestCaseByIdAction, updateTestCaseAction } from '@/actions/test-case/test-case-actions'
-import {
-  Locator,
-  LocatorGroup,
-  TemplateStep,
-  TemplateStepParameter,
-  TestCase,
-  TestCaseStep,
-  TestCaseStepParameter,
-  TestSuite,
-  Tag,
-} from '@prisma/client'
-import React from 'react'
-import TestCaseForm from '../../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 { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
-import { NodeOrderMap } from '@/types/diagram/diagram'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Test Case',
-  description: 'Modify a test case',
-}
-
-const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data, error } = await getTestCaseByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-  const testCase = data as TestCase & {
-    steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
-    testSuiteIds: string[]
-    tagIds: string[]
-  }
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-  if (
-    templateStepParamsError ||
-    templateStepsError ||
-    locatorsError ||
-    testSuitesError ||
-    locatorGroupsError ||
-    tagsError
-  ) {
-    return (
-      <div>
-        Error:{' '}
-        {templateStepParamsError || templateStepsError || locatorsError || testSuitesError || locatorGroupsError || tagsError}
-      </div>
-    )
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Modify Test Case</PageHeader>
-        <HeaderSubtitle>Modify a test case</HeaderSubtitle>
-      </div>
-      <TestCaseForm
-        onSubmitAction={updateTestCaseAction}
-        id={id}
-        defaultTitle={testCase.title}
-        defaultDescription={testCase.description}
-        defaultTestSuiteIds={testCase.testSuiteIds}
-        defaultTagIds={testCase.tagIds || []}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        testSuites={testSuites as TestSuite[]}
-        tags={tags as Tag[]}
-        defaultNodesOrder={testCase.steps.reduce((acc, step) => {
-          acc[step.id] = {
-            order: step.order,
-            label: step.label,
-            gherkinStep: step.gherkinStep,
-            icon: step.icon,
-            parameters: ((step.parameters || []) as TestCaseStepParameter[]).map((param: TestCaseStepParameter) => ({
-              name: param.name,
-              value: param.value,
-              type: param.type,
-              order: param.order,
-            })),
-            templateStepId: step.templateStepId,
-          }
-          return acc
-        }, {} as NodeOrderMap)}
-      />
-    </>
-  )
-}
-
-export default ModifyTestCase
+import { getTestCaseByIdAction, updateTestCaseAction } from '@/actions/test-case/test-case-actions'
+import {
+  Locator,
+  LocatorGroup,
+  TemplateStep,
+  TemplateStepParameter,
+  TestCase,
+  TestCaseStep,
+  TestCaseStepParameter,
+  TestSuite,
+  Tag,
+} from '@prisma/client'
+import React from 'react'
+import TestCaseForm from '../../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 { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import { NodeOrderMap } from '@/types/diagram/diagram'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Test Case',
+  description: 'Modify a test case',
+}
+
+const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getTestCaseByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+  const testCase = data as TestCase & {
+    steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
+    testSuiteIds: string[]
+    tagIds: string[]
+  }
+  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
+  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+  if (
+    templateStepParamsError ||
+    templateStepsError ||
+    locatorsError ||
+    testSuitesError ||
+    locatorGroupsError ||
+    tagsError
+  ) {
+    return (
+      <div>
+        Error:{' '}
+        {templateStepParamsError || templateStepsError || locatorsError || testSuitesError || locatorGroupsError || tagsError}
+      </div>
+    )
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Modify Test Case</PageHeader>
+        <HeaderSubtitle>Modify a test case</HeaderSubtitle>
+      </div>
+      <TestCaseForm
+        onSubmitAction={updateTestCaseAction}
+        id={id}
+        defaultTitle={testCase.title}
+        defaultDescription={testCase.description}
+        defaultTestSuiteIds={testCase.testSuiteIds}
+        defaultTagIds={testCase.tagIds || []}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        testSuites={testSuites as TestSuite[]}
+        tags={tags as Tag[]}
+        defaultNodesOrder={testCase.steps.reduce((acc, step) => {
+          acc[step.id] = {
+            order: step.order,
+            label: step.label,
+            gherkinStep: step.gherkinStep,
+            icon: step.icon,
+            parameters: ((step.parameters || []) as TestCaseStepParameter[]).map((param: TestCaseStepParameter) => ({
+              name: param.name,
+              value: param.value,
+              type: param.type,
+              order: param.order,
+            })),
+            templateStepId: step.templateStepId,
+          }
+          return acc
+        }, {} as NodeOrderMap)}
+      />
+    </>
+  )
+}
+
+export default ModifyTestCase

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

@@ -1,60 +1,60 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React, { Suspense } from 'react'
-import { TestTubeDiagonal } from 'lucide-react'
-import TestCaseTable from './test-case-table'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { TestCase, TestCaseStep } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Test Cases',
-  description: 'Manage test cases and their configurations',
-}
-
-const TestCases = async () => {
-  const { data: testCases, error: testCasesError } = await getAllTestCasesAction()
-
-  if (testCasesError) {
-    return <div>Error: {testCasesError}</div>
-  }
-
-  const testCasesData = testCases as (TestCase & { steps: TestCaseStep[] })[]
-
-  if (!testCasesData || testCasesData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<TestTubeDiagonal className="h-8 w-8" />}
-          title="No test cases found"
-          description="Get started by creating a test case to test your application functionality"
-          createRoute="/test-cases/create"
-          createText="Create Test Case"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <TestTubeDiagonal className="mr-2 h-8 w-8" />
-            Test Cases
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>
-          Test cases are individual tests that are used to test a specific feature or functionality
-        </HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestCaseTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestCases
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React, { Suspense } from 'react'
+import { TestTubeDiagonal } from 'lucide-react'
+import TestCaseTable from './test-case-table'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { TestCase, TestCaseStep } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Cases',
+  description: 'Manage test cases and their configurations',
+}
+
+const TestCases = async () => {
+  const { data: testCases, error: testCasesError } = await getAllTestCasesAction()
+
+  if (testCasesError) {
+    return <div>Error: {testCasesError}</div>
+  }
+
+  const testCasesData = testCases as (TestCase & { steps: TestCaseStep[] })[]
+
+  if (!testCasesData || testCasesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<TestTubeDiagonal className="h-8 w-8" />}
+          title="No test cases found"
+          description="Get started by creating a test case to test your application functionality"
+          createRoute="/test-cases/create"
+          createText="Create Test Case"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <TestTubeDiagonal className="mr-2 h-8 w-8" />
+            Test Cases
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Test cases are individual tests that are used to test a specific feature or functionality
+        </HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestCaseTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestCases

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

@@ -1,82 +1,82 @@
-import FlowDiagram from '@/components/diagram/flow-diagram'
-import { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
-import React, { useCallback, useEffect, useState, 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 TestCaseFlow = ({
-  initialNodesOrder,
-  templateStepParams,
-  templateSteps,
-  locators,
-  locatorGroups,
-  onNodeOrderChange,
-}: {
-  initialNodesOrder: NodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
-}) => {
-  const [nodesOrder, setNodesOrder] = useState<NodeOrderMap>(initialNodesOrder)
-
-  const handleNodeOrderChange = useCallback(
-    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
-      // Convert TemplateTestCaseNodeOrderMap to NodeOrderMap if needed
-      const convertedNodeOrder: NodeOrderMap = {}
-      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,
-              value: 'defaultValue' in param ? param.defaultValue : param.value,
-            }),
-          ),
-        }
-      })
-      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}
-        defaultValueInput={false}
-        onNodeOrderChange={handleNodeOrderChange}
-        templateSteps={templateSteps}
-        locators={locators}
-        locatorGroups={locatorGroups}
-      />
-    </>
-  )
-}
-
-export default TestCaseFlow
+import FlowDiagram from '@/components/diagram/flow-diagram'
+import { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
+import React, { useCallback, useEffect, useState, 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 TestCaseFlow = ({
+  initialNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+}: {
+  initialNodesOrder: NodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
+}) => {
+  const [nodesOrder, setNodesOrder] = useState<NodeOrderMap>(initialNodesOrder)
+
+  const handleNodeOrderChange = useCallback(
+    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
+      // Convert TemplateTestCaseNodeOrderMap to NodeOrderMap if needed
+      const convertedNodeOrder: NodeOrderMap = {}
+      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,
+              value: 'defaultValue' in param ? param.defaultValue : param.value,
+            }),
+          ),
+        }
+      })
+      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}
+        defaultValueInput={false}
+        onNodeOrderChange={handleNodeOrderChange}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+      />
+    </>
+  )
+}
+
+export default TestCaseFlow