create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,262 +0,0 @@
-'use client'
-import React, { useCallback, useState } from 'react'
-import TemplateTestCaseFlow from './template-test-case-flow'
-import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import {
-  Locator,
-  LocatorGroup,
-  StepParameterType,
-  TemplateStep,
-  TemplateStepIcon,
-  TemplateStepParameter,
-} from '@prisma/client'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/ui/button'
-import ErrorMessage from '@/components/form/error-message'
-import { z } from 'zod'
-import { toast } from '@/hooks/use-toast'
-import { useRouter } from 'next/navigation'
-import { IconToKeyTransformer } from '@/lib/transformers/key-to-icon-transformer'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import CodeMirror, { EditorView } from '@uiw/react-codemirror'
-import { langs } from '@uiw/codemirror-extensions-langs'
-import { githubDark } from '@uiw/codemirror-theme-github'
-import { ActionResponse } from '@/types/form/actionHandler'
-import { templateTestCaseSchema } from '@/constants/form-opts/template-test-case-form-opts'
-
-const errorSchema = z.object({
-  title: z.string().min(3, { message: 'Title must be at least 3 characters' }),
-  description: z.string().optional(),
-  steps: z
-    .array(
-      z.object({
-        gherkinStep: z.string(),
-        label: z.string(),
-        icon: z.nativeEnum(TemplateStepIcon),
-        parameters: z.array(
-          z.object({
-            name: z.string(),
-            value: z.string(),
-            type: z.nativeEnum(StepParameterType),
-            order: z.number(),
-          }),
-        ),
-        order: z.number(),
-        templateStepId: z.string(),
-      }),
-    )
-    .min(1, { message: 'At least one step is required' }),
-})
-
-const TemplateTestCaseForm = ({
-  defaultNodesOrder,
-  templateStepParams,
-  templateSteps,
-  locators,
-  locatorGroups,
-  id,
-  defaultTitle,
-  defaultDescription,
-  defaultValueInput = false,
-  onSubmitAction,
-}: {
-  defaultNodesOrder: TemplateTestCaseNodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  onSubmitAction: (value: z.infer<typeof templateTestCaseSchema>, id?: string) => Promise<ActionResponse>
-  id?: string
-  defaultTitle?: string
-  defaultDescription?: string
-  defaultValueInput?: boolean
-}) => {
-  const router = useRouter()
-  // states
-  const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(defaultNodesOrder)
-  const [title, setTitle] = useState<string>(defaultTitle || '')
-  const [description, setDescription] = useState<string>(defaultDescription || '')
-  const [errors, setErrors] = useState<{
-    title?: string[]
-    description?: string[]
-    steps?: string[]
-  }>({})
-
-  const generateGherkinSyntax = useCallback(() => {
-    if (!title) return ''
-
-    const scenarioHeader = `Scenario: [${title}] ${description || ''}`
-
-    // Filter out nodes with order -1 and sort the remaining nodes
-    const validSteps = Object.entries(nodesOrder)
-      .map(([, value]) => value)
-      .filter(step => step.order !== -1)
-      .sort((a, b) => a.order - b.order)
-
-    // Generate Gherkin steps with proper keywords
-    let hasThenInPrevious = false
-    let hasWhenInPrevious = false
-
-    const gherkinSteps = validSteps.map((step, index) => {
-      const gherkinStep = step.gherkinStep?.trim() || ''
-      const firstWord = gherkinStep.split(' ')[0].toLowerCase()
-      const hasGherkinKeyword = ['given', 'when', 'then', 'and', 'but'].includes(firstWord)
-      const stepWithoutKeyword = hasGherkinKeyword ? gherkinStep.split(' ').slice(1).join(' ') : gherkinStep
-
-      // First step always starts with Given
-      if (index === 0) {
-        return `Given ${stepWithoutKeyword}`
-      }
-
-      // Check if this step should be a Then statement
-      const isThenStatement =
-        firstWord === 'then' ||
-        stepWithoutKeyword.toLowerCase().startsWith('should') ||
-        stepWithoutKeyword.toLowerCase().startsWith('must') ||
-        stepWithoutKeyword.toLowerCase().startsWith('will')
-
-      // If we haven't seen a Then yet
-      if (!hasThenInPrevious) {
-        // If this is a Then statement
-        if (isThenStatement) {
-          hasThenInPrevious = true
-          return `Then ${stepWithoutKeyword}`
-        }
-
-        // If we haven't seen a When yet, use When
-        if (!hasWhenInPrevious) {
-          hasWhenInPrevious = true
-          return `When ${stepWithoutKeyword}`
-        }
-        // After When, use And
-        return `And ${stepWithoutKeyword}`
-      }
-
-      // After Then
-      if (isThenStatement) {
-        // If it's another Then statement, use And
-        return `And ${stepWithoutKeyword}`
-      }
-      // After Then, use When for new actions
-      hasThenInPrevious = false
-      hasWhenInPrevious = false
-      return `When ${stepWithoutKeyword}`
-    })
-
-    // Update the flags after processing all steps
-    hasThenInPrevious = gherkinSteps.some(step => step.toLowerCase().startsWith('then'))
-    hasWhenInPrevious = gherkinSteps.some(step => step.toLowerCase().startsWith('when'))
-
-    return [scenarioHeader, ...gherkinSteps].join('\n')
-  }, [title, description, nodesOrder])
-
-  // handlers
-  const onNodeOrderChange = useCallback((nodesOrder: TemplateTestCaseNodeOrderMap) => {
-    setNodesOrder(nodesOrder)
-  }, [])
-
-  const onTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value)
-  }, [])
-
-  const onDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setDescription(e.target.value)
-  }, [])
-
-  const handleSubmit = useCallback(async () => {
-    const result = errorSchema.safeParse({
-      title,
-      description,
-      steps: Object.entries(nodesOrder).map(([, value]) => ({
-        gherkinStep: value.gherkinStep || '',
-        label: value.label,
-        icon: IconToKeyTransformer(value.icon),
-        parameters: value.parameters,
-        order: value.order,
-        templateStepId: value.templateStepId,
-      })),
-    })
-
-    if (!result.success) {
-      setErrors(result.error.flatten().fieldErrors)
-      return
-    }
-    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: response.error || 'An error occurred',
-        variant: 'destructive',
-      })
-    }
-  }, [description, nodesOrder, title, router, onSubmitAction, id])
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex justify-between gap-8" id="meta">
-        <div className="w-1/2">
-          <div className="mb-4 flex flex-col gap-2">
-            <Label htmlFor="title">Title</Label>
-            <Input id="title" name="title" value={title} onChange={onTitleChange} />
-            <ErrorMessage message={errors.title?.[0] || ''} visible={!!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} />
-            <ErrorMessage message={errors.description?.[0] || ''} visible={!!errors.description} />
-          </div>
-        </div>
-        <div className="w-1/2">
-          <div className="mb-4 flex flex-col gap-2">
-            <Card>
-              <CardHeader>
-                <CardTitle>Test Scenario(Preview)</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CodeMirror
-                  editable={false}
-                  value={generateGherkinSyntax()}
-                  onChange={() => {}}
-                  height="200px"
-                  extensions={[langs.feature(), EditorView.lineWrapping]}
-                  theme={githubDark}
-                />
-              </CardContent>
-            </Card>
-          </div>
-        </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}
-          templateSteps={templateSteps}
-          onNodeOrderChange={onNodeOrderChange}
-          locators={locators}
-          locatorGroups={locatorGroups}
-          defaultValueInput={defaultValueInput}
-        />
-      </div>
-      <ErrorMessage message={errors.steps?.[0] || ''} visible={!!errors.steps} />
-      <div className="mb-4 flex flex-col gap-2">
-        <Button onClick={handleSubmit} className="w-fit px-6">
-          Save
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default TemplateTestCaseForm

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

@@ -1,76 +0,0 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const templateTestCaseTableCols: ColumnDef<TemplateTestCase & { steps: TemplateTestCaseStep[] }>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'description',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
-  },
-  {
-    accessorKey: 'steps',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
-    cell: ({ row }) => {
-      const templateTestCase = row.original
-      return <div>{templateTestCase.steps.length}</div>
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const templateTestCase = row.original
-      return (
-        <TableActions
-          modifyLink={`/template-test-cases/modify/${templateTestCase.id}`}
-          deleteHandler={() => deleteTemplateTestCaseAction([templateTestCase.id])}
-        />
-      )
-    },
-  },
-]

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

@@ -1,32 +0,0 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { templateTestCaseTableCols } from './template-test-case-table-columns'
-import {
-  getAllTemplateTestCasesAction,
-  deleteTemplateTestCaseAction,
-} from '@/actions/template-test-case/template-test-case-actions'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-
-type TemplateTestCaseWithSteps = TemplateTestCase & {
-  steps: TemplateTestCaseStep[]
-}
-
-const TemplateTestCaseTable = async () => {
-  const { data: templateTestCases } = await getAllTemplateTestCasesAction()
-
-  return (
-    <>
-      <DataTable
-        columns={templateTestCaseTableCols}
-        data={templateTestCases as TemplateTestCaseWithSteps[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/template-test-cases/create"
-        modifyLink="/template-test-cases/modify"
-        deleteAction={deleteTemplateTestCaseAction}
-      />
-    </>
-  )
-}
-
-export default TemplateTestCaseTable

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

@@ -1,76 +0,0 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React from 'react'
-import TestCaseForm from '../test-case-form'
-import {
-  getAllTemplateStepParamsAction,
-  getAllTemplateStepsAction,
-} from '@/actions/template-step/template-step-actions'
-import { Locator, LocatorGroup, TemplateStep, TemplateStepParameter, TestSuite, Tag } from '@prisma/client'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
-import { createTestCaseAction } from '@/actions/test-case/test-case-actions'
-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',
-  description: 'Create a new test from scratch to execute against your application',
-}
-
-const CreateTestCase = async () => {
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-
-  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>
-      <div className="mb-8">
-        <PageHeader>Create New Test Case</PageHeader>
-        <HeaderSubtitle>Create a new test from scratch to execute against your application</HeaderSubtitle>
-      </div>
-      <TestCaseForm
-        defaultNodesOrder={{}}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        testSuites={testSuites as TestSuite[]}
-        tags={tags as Tag[]}
-        onSubmitAction={createTestCaseAction}
-      />
-    </div>
-  )
-}
-
-export default CreateTestCase

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

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

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

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