create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it, vi } from 'vitest'
+
+import TestCaseForm from './test-case-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('./test-case-flow', () => ({
+  __esModule: true,
+  default: () => <div>Mock test case flow</div>,
+}))
+
+vi.mock('@/components/ui/multi-select', () => ({
+  MultiSelect: ({
+    options,
+    selected,
+    onChange,
+  }: {
+    options: Array<{ label: string; value: string }>
+    selected: string[]
+    onChange: (selected: string[]) => void
+  }) => (
+    <div>
+      {options.map(option => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() =>
+            onChange(
+              selected.includes(option.value)
+                ? selected.filter(value => value !== option.value)
+                : [...selected, option.value],
+            )
+          }
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  ),
+}))
+
+vi.mock('@uiw/react-codemirror', () => ({
+  __esModule: true,
+  default: ({ value }: { value: string }) => <div>{value}</div>,
+  EditorView: { lineWrapping: {} },
+}))
+
+vi.mock('@uiw/codemirror-extensions-langs', () => ({
+  langs: {
+    feature: () => ({}),
+  },
+}))
+
+vi.mock('@uiw/codemirror-theme-github', () => ({
+  githubDark: {},
+}))
+
+describe('TestCaseForm', () => {
+  it('submits valid values and navigates back to the test cases list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+    })
+
+    render(
+      <TestCaseForm
+        defaultNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Click submit',
+            gherkinStep: 'click submit',
+            icon: 'MOUSE',
+            parameters: [
+              {
+                name: 'target',
+                value: 'Submit',
+                type: StepParameterType.STRING,
+                order: 1,
+              },
+            ],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        testSuites={[{ id: 'suite-1', name: 'Smoke' } as never]}
+        tags={[{ id: 'tag-1', name: 'Regression' } as never]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Title'), 'Checkout flow')
+    await user.type(screen.getByLabelText('Description'), 'Ensures checkout succeeds')
+    await user.click(screen.getByRole('button', { name: 'Smoke' }))
+    await user.click(screen.getByRole('button', { name: 'Regression' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        {
+          title: 'Checkout flow',
+          description: 'Ensures checkout succeeds',
+          testSuiteIds: ['suite-1'],
+          tagIds: ['tag-1'],
+          steps: [
+            {
+              gherkinStep: 'click submit',
+              label: 'Click submit',
+              icon: 'MOUSE',
+              parameters: [
+                {
+                  name: 'target',
+                  value: 'Submit',
+                  type: StepParameterType.STRING,
+                  order: 1,
+                },
+              ],
+              order: 1,
+              templateStepId: 'step-1',
+            },
+          ],
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Success',
+      description: 'Test case saved successfully',
+      variant: 'default',
+    })
+    expect(push).toHaveBeenCalledWith('/test-cases')
+  })
+
+  it('shows a destructive toast and skips submit when a required node parameter is missing', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <TestCaseForm
+        defaultNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Click submit',
+            gherkinStep: 'click submit',
+            icon: 'MOUSE',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[
+          {
+            id: 'param-1',
+            name: 'target',
+            type: StepParameterType.STRING,
+            order: 1,
+            isMandatory: true,
+            templateStepId: 'step-1',
+          } as never,
+        ]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        testSuites={[{ id: 'suite-1', name: 'Smoke' } as never]}
+        tags={[]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Title'), 'Checkout flow')
+    await user.click(screen.getByRole('button', { name: 'Smoke' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmitAction).not.toHaveBeenCalled()
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Validation Error',
+      description:
+        'The following nodes have missing mandatory parameters: Click submit. Please fill in all required parameters before saving.',
+      variant: 'destructive',
+    })
+  })
+})

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

@@ -0,0 +1,263 @@
+'use client'
+import React, { useCallback, useState } from 'react'
+
+import TestCaseFlow from './test-case-flow'
+import type { NodeOrderMap } from '@/types/diagram/diagram'
+import {
+  type Locator,
+  type LocatorGroup,
+  type TemplateStep,
+  type TemplateStepParameter,
+  type TestSuite,
+  type Tag,
+} from '@prisma/client'
+import { Info, Save } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { z } from 'zod'
+
+import ErrorMessage from '@/components/form/error-message'
+import { TestScenarioPreview } from '@/components/test-case/test-scenario-preview'
+import {
+  buildScenarioPreview,
+  buildScenarioSteps,
+  getActionErrorMessage,
+  getNodesWithMissingMandatoryParams,
+  testCaseQuickTips,
+  testCaseSubmitSchema,
+} from '@/components/test-case/test-case-form-helpers'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { MultiSelect } from '@/components/ui/multi-select'
+import { Textarea } from '@/components/ui/textarea'
+import { testCaseSchema } from '@/constants/form-opts/test-case-form-opts'
+import { toast } from '@/hooks/use-toast'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+type TestCaseFormProps = {
+  defaultNodesOrder: NodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  testSuites: TestSuite[]
+  tags: Tag[]
+  onSubmitAction: (value: z.infer<typeof testCaseSchema>, id?: string) => Promise<ActionResponse>
+  id?: string
+  defaultTitle?: string
+  defaultDescription?: string
+  defaultTestSuiteIds?: string[]
+  defaultTagIds?: string[]
+}
+
+const TestCaseForm = ({
+  defaultNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  testSuites,
+  tags,
+  id,
+  defaultTitle,
+  defaultDescription,
+  defaultTestSuiteIds,
+  defaultTagIds,
+  onSubmitAction,
+}: TestCaseFormProps) => {
+  const router = useRouter()
+  const [nodesOrder, setNodesOrder] = useState<NodeOrderMap>(defaultNodesOrder)
+  const [title, setTitle] = useState(defaultTitle || '')
+  const [description, setDescription] = useState(defaultDescription || '')
+  const [selectedTestSuites, setSelectedTestSuites] = useState(defaultTestSuiteIds || [])
+  const [selectedTags, setSelectedTags] = useState(defaultTagIds || [])
+  const [errors, setErrors] = useState<{
+    title?: string[]
+    description?: string[]
+    testSuiteIds?: string[]
+    steps?: string[]
+  }>({})
+
+  const scenarioPreview = buildScenarioPreview(title, description, nodesOrder)
+  const renderError = (message?: string[]) => <ErrorMessage message={message?.[0] || ''} visible={!!message} />
+
+  const onNodeOrderChange = useCallback((nodesOrder: NodeOrderMap) => {
+    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 onTestSuiteChange = useCallback((selectedTestSuites: string[]) => {
+    setSelectedTestSuites(selectedTestSuites)
+  }, [])
+
+  const onTagChange = useCallback((selectedTags: string[]) => {
+    setSelectedTags(selectedTags)
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    const nodesWithMissingParams = getNodesWithMissingMandatoryParams(nodesOrder, templateStepParams)
+
+    if (nodesWithMissingParams.length > 0) {
+      toast({
+        title: 'Validation Error',
+        description: `The following nodes have missing mandatory parameters: ${nodesWithMissingParams.join(', ')}. Please fill in all required parameters before saving.`,
+        variant: 'destructive',
+      })
+      return
+    }
+
+    const result = testCaseSubmitSchema.safeParse({
+      title,
+      description,
+      testSuiteIds: selectedTestSuites,
+      tagIds: selectedTags,
+      steps: buildScenarioSteps(nodesOrder),
+    })
+
+    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(`/test-cases`)
+    }
+    if (response.status === 500) {
+      toast({
+        title: 'Error',
+        description: getActionErrorMessage(response),
+        variant: 'destructive',
+      })
+    }
+  }, [description, nodesOrder, selectedTestSuites, selectedTags, title, router, onSubmitAction, id, templateStepParams])
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-between gap-8" id="meta">
+        <div className="w-1/2">
+          <Card className="h-full dark:border-gray-700 dark:bg-gray-500/10">
+            <CardHeader className="mb-4">
+              <CardTitle className="text-xl font-bold text-primary">Test Case Details</CardTitle>
+              <CardDescription>Enter the core details of your test scenario</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="mb-6 flex flex-col gap-2">
+                <Label htmlFor="title">Title</Label>
+                <Input id="title" name="title" value={title} onChange={onTitleChange} />
+                {renderError(errors.title)}
+              </div>
+              <div className="mb-6 flex flex-col gap-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  name="description"
+                  value={description}
+                  onChange={onDescriptionChange}
+                  className="bg-background"
+                />
+                {renderError(errors.description)}
+              </div>
+              <div className="mb-6 flex flex-col gap-2">
+                <Label htmlFor="test-suites">Test Suites</Label>
+                <MultiSelect
+                  options={testSuites.map(testSuite => {
+                    return {
+                      label: testSuite.name,
+                      value: testSuite.id,
+                    }
+                  })}
+                  selected={selectedTestSuites}
+                  onChange={onTestSuiteChange}
+                />
+                {renderError(errors.testSuiteIds)}
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="tags">Filter Tags</Label>
+                <MultiSelect
+                  options={tags.map(tag => {
+                    return {
+                      label: tag.name,
+                      value: tag.id,
+                    }
+                  })}
+                  selected={selectedTags}
+                  onChange={onTagChange}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+        <div className="w-1/2">
+          <Card className="mb-4 border-gray-700 bg-gray-500/10">
+            <CardHeader className="mb-2">
+              <CardTitle className="flex items-center gap-2 text-xl text-primary">
+                <Info className="h-5 w-5" />
+                <span className="font-bold">Quick Tips</span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3">
+              {testCaseQuickTips.map((tip, index) => (
+                <div key={tip.title} className="flex items-start gap-4">
+                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                    {index + 1}
+                  </span>
+                  <div className="flex flex-col gap-1">
+                    <span className="text-base font-bold">{tip.title}</span>
+                    <span className="text-sm text-muted-foreground">{tip.description}</span>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+          <TestScenarioPreview
+            title="Test Scenario(Preview)"
+            description="Preview of the test scenario in Gherkin syntax"
+            scenario={scenarioPreview}
+          />
+        </div>
+      </div>
+      <Card className="mb-4 border-gray-700 bg-gray-500/10">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-primary">Test Case Flow</CardTitle>
+          <CardDescription>Build your test scenario step by step visually</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-[500px] flex-col gap-2">
+            <Label htmlFor="test-case-flow">Test Case Flow</Label>
+            <TestCaseFlow
+              initialNodesOrder={nodesOrder}
+              templateStepParams={templateStepParams}
+              templateSteps={templateSteps}
+              onNodeOrderChange={onNodeOrderChange}
+              locators={locators}
+              locatorGroups={locatorGroups}
+            />
+          </div>
+        </CardContent>
+      </Card>
+      {renderError(errors.steps)}
+      <div className="mb-4 flex flex-col gap-2">
+        <Button onClick={handleSubmit} className="w-fit px-6 hover:bg-emerald-500">
+          <Save className="h-4 w-4" />
+          <span className="font-bold">Save</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default TestCaseForm

package/templates/blank/src/app/(base)/test-cases/test-case-route-helpers.test.ts

@@ -0,0 +1,95 @@
+import { StepParameterType, TemplateStepIcon } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildNodeOrderFromTestCaseSteps,
+  getEditableTestCase,
+  getTestCaseRows,
+} from './test-case-route-helpers'
+
+describe('test-case route helpers', () => {
+  it('narrows test case list rows from action data', () => {
+    expect(
+      getTestCaseRows([
+        {
+          id: 'case-1',
+          title: 'Login flow',
+          steps: [],
+          tags: [{ id: 'tag-1', name: 'smoke' }],
+        },
+        {
+          id: 'broken-case',
+          title: 'Broken row',
+          steps: [],
+          tags: ['bad-tag'],
+        },
+      ]),
+    ).toEqual([
+      {
+        id: 'case-1',
+        title: 'Login flow',
+        steps: [],
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+      },
+    ])
+  })
+
+  it('narrows editable test cases and converts steps into node order', () => {
+    const editableTestCase = getEditableTestCase({
+      id: 'case-1',
+      title: 'Login flow',
+      description: 'Checks login',
+      testSuiteIds: ['suite-1'],
+      tagIds: ['tag-1'],
+      steps: [
+        {
+          id: 'step-1',
+          order: 1,
+          label: 'Fill email',
+          gherkinStep: 'fill email',
+          icon: TemplateStepIcon.INPUT,
+          templateStepId: 'template-step-1',
+          parameters: [
+            {
+              name: 'email',
+              value: 'qa@appraise.dev',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+        },
+      ],
+    })
+
+    expect(editableTestCase).not.toBeNull()
+    expect(buildNodeOrderFromTestCaseSteps(editableTestCase!.steps)).toEqual({
+      'step-1': {
+        order: 1,
+        label: 'Fill email',
+        gherkinStep: 'fill email',
+        icon: TemplateStepIcon.INPUT,
+        parameters: [
+          {
+            name: 'email',
+            value: 'qa@appraise.dev',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'template-step-1',
+      },
+    })
+  })
+
+  it('rejects malformed editable test case data', () => {
+    expect(
+      getEditableTestCase({
+        id: 'case-1',
+        title: 'Broken flow',
+        steps: [{ id: 'step-1', label: 'Missing params array' }],
+        testSuiteIds: ['suite-1'],
+        tagIds: ['tag-1'],
+      }),
+    ).toBeNull()
+  })
+})

package/templates/blank/src/app/(base)/test-cases/test-case-route-helpers.ts

@@ -0,0 +1,147 @@
+import type {
+  Locator,
+  LocatorGroup,
+  Tag,
+  TestCase,
+  TestCaseStep,
+  TestCaseStepParameter,
+  TestSuite,
+  TemplateStep,
+  TemplateStepParameter,
+} from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+import type { NodeOrderMap } from '@/types/diagram/diagram'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+
+export type EditableTestCase = TestCase & {
+  steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
+  testSuiteIds: string[]
+  tagIds: string[]
+}
+
+function isNamedRow(value: unknown): value is { id: string; name: string } {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTagRow(value: unknown): value is Tag {
+  return isNamedRow(value)
+}
+
+function isTestCaseStepParameterRow(value: unknown): value is TestCaseStepParameter {
+  return typeof value === 'object' && value !== null && 'name' in value && 'value' in value && 'type' in value
+}
+
+function isTestCaseStepRow(value: unknown): value is TestCaseStep & { parameters: TestCaseStepParameter[] } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'label' in value &&
+    'templateStepId' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTestCaseStepParameterRow)
+  )
+}
+
+function isTestCaseRow(value: unknown): value is TestCasePickerRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    'tags' in value &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow)
+  )
+}
+
+function isEditableTestCase(value: unknown): value is EditableTestCase {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    value.steps.every(isTestCaseStepRow) &&
+    'testSuiteIds' in value &&
+    Array.isArray(value.testSuiteIds) &&
+    'tagIds' in value &&
+    Array.isArray(value.tagIds)
+  )
+}
+
+function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
+  return typeof value === 'object' && value !== null && 'id' in value && 'templateStepId' in value
+}
+
+function isTemplateStepRow(value: unknown): value is TemplateStep {
+  return isNamedRow(value)
+}
+
+function isLocatorRow(value: unknown): value is Locator {
+  return isNamedRow(value)
+}
+
+function isTestSuiteRow(value: unknown): value is TestSuite {
+  return isNamedRow(value)
+}
+
+function isLocatorGroupRow(value: unknown): value is LocatorGroup {
+  return isNamedRow(value)
+}
+
+export function getTestCaseRows(data: ActionResponseData | undefined): TestCasePickerRow[] {
+  return Array.isArray(data) ? data.filter(isTestCaseRow) : []
+}
+
+export function getEditableTestCase(data: ActionResponseData | undefined) {
+  return isEditableTestCase(data) ? data : null
+}
+
+export function buildNodeOrderFromTestCaseSteps(steps: EditableTestCase['steps']): NodeOrderMap {
+  return steps.reduce<NodeOrderMap>((acc, step) => {
+    acc[step.id] = {
+      order: step.order,
+      label: step.label,
+      gherkinStep: step.gherkinStep,
+      icon: step.icon,
+      parameters: (step.parameters || []).map(parameter => ({
+        name: parameter.name,
+        value: parameter.value,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: step.templateStepId,
+    }
+    return acc
+  }, {})
+}
+
+export function getTemplateStepParamRows(data: ActionResponseData | undefined): TemplateStepParameter[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepParameterRow) : []
+}
+
+export function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStep[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepRow) : []
+}
+
+export function getLocatorRows(data: ActionResponseData | undefined): Locator[] {
+  return Array.isArray(data) ? data.filter(isLocatorRow) : []
+}
+
+export function getTestSuiteRows(data: ActionResponseData | undefined): TestSuite[] {
+  return Array.isArray(data) ? data.filter(isTestSuiteRow) : []
+}
+
+export function getLocatorGroupRows(data: ActionResponseData | undefined): LocatorGroup[] {
+  return Array.isArray(data) ? data.filter(isLocatorGroupRow) : []
+}
+
+export function getTagRows(data: ActionResponseData | undefined): Tag[] {
+  return Array.isArray(data) ? data.filter(isTagRow) : []
+}