create-appraisejs 0.3.0-alpha.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,105 @@
+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/starter/src/app/(base)/test-cases/create-from-template/page.tsx

@@ -0,0 +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 { 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/starter/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/starter/src/app/(base)/test-cases/create-from-template/template-selection-form.tsx

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

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

@@ -0,0 +1,106 @@
+import { getTestCaseByIdAction, updateTestCaseAction } from '@/actions/test-case/test-case-actions'
+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 { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+import {
+  buildNodeOrderFromTestCaseSteps,
+  getEditableTestCase,
+  getLocatorGroupRows,
+  getLocatorRows,
+  getTagRows,
+  getTemplateStepParamRows,
+  getTemplateStepRows,
+  getTestSuiteRows,
+} from '../../test-case-route-helpers'
+
+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 [
+    testCaseResponse,
+    templateStepParamsResponse,
+    templateStepsResponse,
+    locatorsResponse,
+    testSuitesResponse,
+    locatorGroupsResponse,
+    tagsResponse,
+  ] = await Promise.all([
+    getTestCaseByIdAction(id),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllTestSuitesAction(),
+    getAllLocatorGroupsAction(),
+    getAllTagsAction(),
+  ])
+
+  const loadError =
+    testCaseResponse.error ||
+    templateStepParamsResponse.error ||
+    templateStepsResponse.error ||
+    locatorsResponse.error ||
+    testSuitesResponse.error ||
+    locatorGroupsResponse.error ||
+    tagsResponse.error
+
+  if (loadError) {
+    return (
+      <div>
+        Error: {loadError}
+      </div>
+    )
+  }
+
+  const testCase = getEditableTestCase(testCaseResponse.data)
+  if (!testCase) {
+    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 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}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        testSuites={testSuites}
+        tags={tags}
+        defaultNodesOrder={buildNodeOrderFromTestCaseSteps(testCase.steps)}
+      />
+    </>
+  )
+}
+
+export default ModifyTestCase

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

@@ -0,0 +1,61 @@
+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 { Metadata } from 'next'
+
+import { getTestCaseRows } from './test-case-route-helpers'
+
+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 = getTestCaseRows(testCases)
+
+  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/starter/src/app/(base)/test-cases/test-case-flow.test.tsx

@@ -0,0 +1,108 @@
+// @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 TestCaseFlow from './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: 'Click submit',
+                parameters: [
+                  {
+                    name: 'target',
+                    defaultValue: 'Submit',
+                    type: StepParameterType.STRING,
+                    order: 1,
+                  },
+                ],
+                templateStepId: 'step-1',
+              },
+            })
+          }
+        >
+          Emit Template Nodes
+        </button>
+      </div>
+    )
+  },
+}))
+
+describe('TestCaseFlow', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    flowDiagramRenderSpy.mockClear()
+  })
+
+  it('normalizes template node updates and persists them after the debounce window', async () => {
+    const onNodeOrderChange = vi.fn()
+
+    render(
+      <TestCaseFlow
+        initialNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Initial step',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        onNodeOrderChange={onNodeOrderChange}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Emit Template Nodes' }))
+
+    expect(onNodeOrderChange).not.toHaveBeenCalled()
+
+    await vi.advanceTimersByTimeAsync(200)
+
+    expect(onNodeOrderChange).toHaveBeenCalledWith({
+      'node-1': {
+        order: 1,
+        label: 'Click submit',
+        parameters: [
+          {
+            name: 'target',
+            value: 'Submit',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-1',
+      },
+    })
+    expect(screen.getByTestId('default-value-input')).toHaveTextContent('false')
+  })
+
+})

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

@@ -0,0 +1,43 @@
+import FlowDiagram from '@/components/diagram/flow-diagram'
+import { toNodeOrderMap } from '@/components/diagram/flow-host-helpers'
+import { useFlowNodeOrder } from '@/components/diagram/use-flow-node-order'
+import type { NodeOrderMap } from '@/types/diagram/diagram'
+import type { Locator, LocatorGroup, TemplateStep, TemplateStepParameter } from '@prisma/client'
+
+type TestCaseFlowProps = {
+  initialNodesOrder: NodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
+}
+
+const TestCaseFlow = ({
+  initialNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+}: TestCaseFlowProps) => {
+  const { nodesOrder, handleNodeOrderChange } = useFlowNodeOrder({
+    initialNodesOrder,
+    onNodeOrderChange,
+    normalizeNodeOrder: toNodeOrderMap,
+  })
+
+  return (
+    <FlowDiagram
+      nodeOrder={nodesOrder}
+      templateStepParams={templateStepParams}
+      defaultValueInput={false}
+      onNodeOrderChange={handleNodeOrderChange}
+      templateSteps={templateSteps}
+      locators={locators}
+      locatorGroups={locatorGroups}
+    />
+  )
+}
+
+export default TestCaseFlow