create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

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

@@ -1,96 +1,105 @@
-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
+import { getTemplateTestCaseByIdAction } from '@/actions/template-test-case/template-test-case-actions'
+import React from 'react'
+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'
+
+import {
+  getConvertedTemplateTestCaseData,
+  getLocatorGroupRows,
+  getLocatorRows,
+  getTagRows,
+  getTemplateStepParamRows,
+  getTemplateStepRows,
+  getTemplateTestCaseWithSteps,
+  getTestSuiteRows,
+} from '../../create-from-template-helpers'
+
+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 [
+    templateTestCaseResponse,
+    templateStepParamsResponse,
+    templateStepsResponse,
+    locatorsResponse,
+    testSuitesResponse,
+    locatorGroupsResponse,
+    tagsResponse,
+  ] = await Promise.all([
+    getTemplateTestCaseByIdAction(id),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllTestSuitesAction(),
+    getAllLocatorGroupsAction(),
+    getAllTagsAction(),
+  ])
+
+  const loadError =
+    templateTestCaseResponse.error ||
+    templateStepParamsResponse.error ||
+    templateStepsResponse.error ||
+    locatorsResponse.error ||
+    testSuitesResponse.error ||
+    locatorGroupsResponse.error ||
+    tagsResponse.error
+
+  if (loadError) {
+    return <div>Error: {loadError}</div>
+  }
+
+  const templateTestCaseData = getTemplateTestCaseWithSteps(templateTestCaseResponse.data)
+  if (!templateTestCaseData) {
+    return <div>Error: Invalid template test case</div>
+  }
+
+  const { convertedData, error } = getConvertedTemplateTestCaseData(templateTestCaseData)
+  if (!convertedData || error) {
+    return <div>{error || 'Invalid test case'}</div>
+  }
+
+  const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
+  const templateSteps = getTemplateStepRows(templateStepsResponse.data)
+  const locators = getLocatorRows(locatorsResponse.data)
+  const testSuites = getTestSuiteRows(testSuitesResponse.data)
+  const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
+  const tags = getTagRows(tagsResponse.data)
+
+  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}
+        templateSteps={templateSteps}
+        locators={locators}
+        testSuites={testSuites}
+        tags={tags}
+        defaultTitle={templateTestCaseData.name || ''}
+        defaultDescription={templateTestCaseData.description || ''}
+        defaultTestSuiteIds={convertedData.testSuiteIds}
+        locatorGroups={locatorGroups}
+      />
+    </div>
+  )
+}
+
+export default GenerateTestCaseFromTemplate

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

@@ -1,38 +1,40 @@
-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
+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 { Metadata } from 'next'
+
+import { getTemplateSelectionRows } from './create-from-template-helpers'
+
+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 response = await getAllTemplateTestCasesAction()
+  const templateTestCases = getTemplateSelectionRows(response.data)
+
+  if (response.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} />
+    </div>
+  )
+}
+
+export default CreateTestCaseFromTemplate

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

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TemplateSelectionForm from './template-selection-form'
+
+const { push } = vi.hoisted(() => ({
+  push: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/components/ui/select', async () => {
+  const ReactModule = await import('react')
+
+  const SelectContext = ReactModule.createContext<{
+    value: string
+    onValueChange: (value: string) => void
+  }>({
+    value: '',
+    onValueChange: () => {},
+  })
+
+  return {
+    Select: ({
+      value,
+      onValueChange,
+      children,
+    }: {
+      value: string
+      onValueChange: (value: string) => void
+      children: React.ReactNode
+    }) => <SelectContext.Provider value={{ value, onValueChange }}>{children}</SelectContext.Provider>,
+    SelectTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    SelectValue: ({ placeholder }: { placeholder?: string }) => <span>{placeholder}</span>,
+    SelectContent: ({
+      children,
+    }: {
+      children: React.ReactNode
+    }) => {
+      const { value, onValueChange } = ReactModule.useContext(SelectContext)
+
+      return (
+        <select aria-label="Template Test Case" value={value} onChange={event => onValueChange(event.target.value)}>
+          <option value="">Select a template test case</option>
+          {children}
+        </select>
+      )
+    },
+    SelectItem: ({ value, children }: { value: string; children: React.ReactNode }) => (
+      <option value={value}>{children}</option>
+    ),
+  }
+})
+
+describe('TemplateSelectionForm', () => {
+  it('navigates to the generate route after a template is selected', async () => {
+    const user = userEvent.setup()
+
+    render(<TemplateSelectionForm templateTestCases={[{ id: 'template-1', name: 'Login flow' }]} />)
+
+    await user.selectOptions(screen.getByRole('combobox', { name: 'Template Test Case' }), 'template-1')
+    await user.click(screen.getByRole('button', { name: 'Next' }))
+
+    await waitFor(() => {
+      expect(push).toHaveBeenCalledWith('/test-cases/create-from-template/generate/template-1')
+    })
+  })
+
+  it('shows validation feedback when no template is selected', async () => {
+    const user = userEvent.setup()
+
+    render(<TemplateSelectionForm templateTestCases={[{ id: 'template-1', name: 'Login flow' }]} />)
+
+    await user.click(screen.getByRole('button', { name: 'Next' }))
+
+    expect(push).not.toHaveBeenCalled()
+    expect(screen.getByText('Template test case is required')).toBeInTheDocument()
+  })
+})

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

@@ -1,73 +1,83 @@
-'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
+'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 { useForm } from '@tanstack/react-form'
+import { ArrowRight } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
+import {
+  getFieldErrorMessage,
+  getTemplateSelectionOptions,
+  type TemplateSelectionRow,
+  templateSelectionFieldValidator,
+} from './create-from-template-helpers'
+
+type TemplateSelectionFormProps = {
+  templateTestCases: TemplateSelectionRow[]
+}
+
+const TemplateSelectionForm = ({ templateTestCases }: TemplateSelectionFormProps) => {
+  const router = useRouter()
+  const templateOptions = getTemplateSelectionOptions(templateTestCases)
+  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: templateSelectionFieldValidator,
+          }}
+        >
+          {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 id={field.name} aria-label="Template Test Case">
+                    <SelectValue placeholder="Select a template test case" />
+                  </SelectTrigger>
+                  <SelectContent isEmpty={templateOptions.length === 0}>
+                    {templateOptions.map(templateOption => (
+                      <SelectItem key={templateOption.value} value={templateOption.value}>
+                        {templateOption.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={index} className="text-xs text-pink-500">
+                    {getFieldErrorMessage(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