create-appraise 0.1.0

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

@@ -0,0 +1,96 @@
+import { getTemplateTestCaseByIdAction } from '@/actions/template-test-case/template-test-case-actions'
+import {
+  TemplateTestCase,
+  TemplateTestCaseStep,
+  TemplateTestCaseStepParameter,
+  TemplateStep,
+  TemplateStepParameter,
+  Locator,
+  TestSuite,
+  LocatorGroup,
+  Tag,
+} from '@prisma/client'
+import React from 'react'
+import {
+  templateTestCaseToTestCaseConverter,
+  validateConvertedTestCaseData,
+} from '@/lib/transformers/template-test-case-converter'
+import TestCaseForm from '../../../test-case-form'
+import { createTestCaseAction } from '@/actions/test-case/test-case-actions'
+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 HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+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 | Create Test Case From Template',
+  description: 'Create a new test from a template to execute against your application',
+}
+
+const GenerateTestCaseFromTemplate = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: templateTestCase, error } = await getTemplateTestCaseByIdAction(id)
+  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>
+    )
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+  const templateTestCaseData = templateTestCase as TemplateTestCase & {
+    steps: (TemplateTestCaseStep & {
+      parameters: TemplateTestCaseStepParameter[]
+    })[]
+  }
+
+  // Convert template test case to test case format
+  const convertedData = templateTestCaseToTestCaseConverter(templateTestCaseData)
+
+  // Validate the converted data
+  const validation = validateConvertedTestCaseData(convertedData)
+
+  if (!validation.isValid) {
+    return <div>Invalid test case</div>
+  }
+
+  return (
+    <div>
+      <PageHeader>Create New Test Case</PageHeader>
+      <HeaderSubtitle>Create a new test from a template to execute against your application</HeaderSubtitle>
+
+      <TestCaseForm
+        onSubmitAction={createTestCaseAction}
+        defaultNodesOrder={convertedData.nodesOrder}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        testSuites={testSuites as TestSuite[]}
+        tags={tags as Tag[]}
+        defaultTitle={templateTestCaseData.name || ''}
+        defaultDescription={templateTestCaseData.description || ''}
+        defaultTestSuiteIds={convertedData.testSuiteIds}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+      />
+    </div>
+  )
+}
+
+export default GenerateTestCaseFromTemplate

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

@@ -0,0 +1,38 @@
+import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
+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 { TemplateTestCase } from '@prisma/client'
+import { Metadata } from 'next'
+
+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 { data: templateTestCases, status } = await getAllTemplateTestCasesAction()
+
+  if (status !== 200) {
+    return <div className="text-red-500">Error</div>
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <LayoutPanelTop className="mr-2 h-8 w-8" />
+            Create Test Case From Template
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Select a template test case to create a new test case from</HeaderSubtitle>
+      </div>
+      <TemplateSelectionForm templateTestCases={templateTestCases as TemplateTestCase[]} />
+    </div>
+  )
+}
+
+export default CreateTestCaseFromTemplate

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

@@ -0,0 +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

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

@@ -0,0 +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

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

@@ -0,0 +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

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

@@ -0,0 +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