create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/components/table/table-actions.tsx

@@ -1,172 +1,174 @@
-'use client'
-
-import React, { useState } from 'react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
-import { MoreHorizontal, Pencil, Trash, Eye, CheckCircleIcon, XCircle } from 'lucide-react'
-import { Button } from '../ui/button'
-import Link from 'next/link'
-
-import { ActionResponse } from '@/types/form/actionHandler'
-import { toast } from '@/hooks/use-toast'
-import DeletePrompt from '../user-prompt/delete-prompt'
-
-const TableActions = ({
-  modifyLink,
-  resolveConflictsHandler,
-  deleteHandler,
-  viewLink,
-  showCancelButton = false,
-  cancelHandler,
-  cancelButtonDisabled = false,
-  deleteButtonDisabled = false,
-  viewActionText = 'View',
-  editActionText = 'Edit',
-  deleteActionText = 'Delete',
-  cancelActionText = 'Cancel',
-  editActionIcon = <Pencil className="h-4 w-4" />,
-  deleteActionIcon = <Trash className="h-4 w-4" />,
-  viewActionIcon = <Eye className="h-4 w-4" />,
-  cancelActionIcon = <XCircle className="h-4 w-4" />,
-}: {
-  modifyLink?: string
-  deleteHandler: () => Promise<ActionResponse>
-  resolveConflictsHandler?: () => Promise<ActionResponse>
-  editActionText?: string
-  deleteActionText?: string
-  editActionIcon?: React.ReactNode
-  deleteActionIcon?: React.ReactNode
-  viewActionText?: string
-  viewActionIcon?: React.ReactNode
-  viewLink?: string
-  showCancelButton?: boolean
-  cancelHandler?: () => Promise<ActionResponse>
-  cancelButtonDisabled?: boolean
-  cancelActionText?: string
-  cancelActionIcon?: React.ReactNode
-  deleteButtonDisabled?: boolean
-}) => {
-  const [isCancelling, setIsCancelling] = useState(false)
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
-  
-  const handleDelete = async () => {
-    const res = await deleteHandler()
-    if (res.status === 200) {
-      toast({
-        title: 'Item(s) deleted successfully',
-      })
-      setIsDeleteDialogOpen(false)
-    } else {
-      toast({
-        title: `${res.message}`,
-        description: res.error,
-        variant: 'destructive',
-      })
-    }
-  }
-  
-  return (
-    <>
-      <DeletePrompt
-        dialogTitle="Delete Item"
-        dialogDescription="Please confirm your action"
-        confirmationText="Are you sure you want to delete this item?"
-        deleteHandler={handleDelete}
-        open={isDeleteDialogOpen}
-        onOpenChange={setIsDeleteDialogOpen}
-      />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="h-8 w-8 p-0">
-            <span className="sr-only">Open menu</span>
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          {showCancelButton && (
-            <DropdownMenuItem
-              disabled={cancelButtonDisabled || isCancelling}
-              onClick={async () => {
-                if (!cancelHandler) return
-                setIsCancelling(true)
-                try {
-                  const res = await cancelHandler()
-                  if (res.status === 200) {
-                    toast({
-                      title: 'Test run cancellation requested',
-                      description: res.message || 'The test run is being cancelled.',
-                    })
-                  } else {
-                    toast({
-                      title: 'Error cancelling test run',
-                      description: res.error || res.message,
-                      variant: 'destructive',
-                    })
-                    setIsCancelling(false)
-                  }
-                } catch (error) {
-                  toast({
-                    title: 'Error cancelling test run',
-                    description: error instanceof Error ? error.message : 'An unexpected error occurred',
-                    variant: 'destructive',
-                  })
-                  setIsCancelling(false)
-                }
-              }}
-            >
-              <span className="flex items-center gap-2">
-                {cancelActionIcon} {cancelActionText}
-              </span>
-            </DropdownMenuItem>
-          )}
-          {viewLink && (
-            <DropdownMenuItem>
-              <Link href={viewLink}>
-                <span className="flex items-center gap-2">
-                  {viewActionIcon} {viewActionText}
-                </span>
-              </Link>
-            </DropdownMenuItem>
-          )}
-          {modifyLink && (
-            <DropdownMenuItem>
-              <Link href={modifyLink}>
-                <span className="flex items-center gap-2">
-                  {editActionIcon} {editActionText}
-                </span>
-              </Link>
-            </DropdownMenuItem>
-          )}
-
-          <DropdownMenuItem
-            disabled={deleteButtonDisabled}
-            onClick={() => {
-              setIsDeleteDialogOpen(true)
-            }}
-          >
-            <span className="flex items-center gap-2">
-              {deleteActionIcon} {deleteActionText}
-            </span>
-          </DropdownMenuItem>
-          {resolveConflictsHandler && (
-            <DropdownMenuItem>
-              <span className="flex items-center gap-2" onClick={resolveConflictsHandler}>
-                <CheckCircleIcon className="h-4 w-4" /> Mark conflicts as resolved
-              </span>
-            </DropdownMenuItem>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  )
-}
-
-export default TableActions
+'use client'
+
+import React, { useState } from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { MoreHorizontal, Pencil, Trash, Eye, CheckCircleIcon, XCircle } from 'lucide-react'
+import { Button } from '../ui/button'
+import Link from 'next/link'
+
+import { ActionResponse } from '@/types/form/actionHandler'
+import { toast } from '@/hooks/use-toast'
+import DeletePrompt from '../user-prompt/delete-prompt'
+
+const TableActions = ({
+  modifyLink,
+  resolveConflictsHandler,
+  deleteHandler,
+  viewLink,
+  showCancelButton = false,
+  cancelHandler,
+  cancelButtonDisabled = false,
+  deleteButtonDisabled = false,
+  viewActionText = 'View',
+  editActionText = 'Edit',
+  deleteActionText = 'Delete',
+  cancelActionText = 'Cancel',
+  editActionIcon = <Pencil className="h-4 w-4" />,
+  deleteActionIcon = <Trash className="h-4 w-4" />,
+  viewActionIcon = <Eye className="h-4 w-4" />,
+  cancelActionIcon = <XCircle className="h-4 w-4" />,
+}: {
+  modifyLink?: string
+  deleteHandler: () => Promise<ActionResponse>
+  resolveConflictsHandler?: () => Promise<ActionResponse>
+  editActionText?: string
+  deleteActionText?: string
+  editActionIcon?: React.ReactNode
+  deleteActionIcon?: React.ReactNode
+  viewActionText?: string
+  viewActionIcon?: React.ReactNode
+  viewLink?: string
+  showCancelButton?: boolean
+  cancelHandler?: () => Promise<ActionResponse>
+  cancelButtonDisabled?: boolean
+  cancelActionText?: string
+  cancelActionIcon?: React.ReactNode
+  deleteButtonDisabled?: boolean
+}) => {
+  const [isCancelling, setIsCancelling] = useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+
+  const handleDelete = async () => {
+    const res = await deleteHandler()
+    if (res.status === 200) {
+      toast({
+        title: 'Item(s) deleted successfully',
+      })
+      return true
+    } else {
+      toast({
+        title: `${res.message}`,
+        description: res.error,
+        variant: 'destructive',
+      })
+    }
+
+    return false
+  }
+
+  return (
+    <>
+      <DeletePrompt
+        dialogTitle="Delete Item"
+        dialogDescription="Please confirm your action"
+        confirmationText="Are you sure you want to delete this item?"
+        deleteHandler={handleDelete}
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {showCancelButton && (
+            <DropdownMenuItem
+              disabled={cancelButtonDisabled || isCancelling}
+              onClick={async () => {
+                if (!cancelHandler) return
+                setIsCancelling(true)
+                try {
+                  const res = await cancelHandler()
+                  if (res.status === 200) {
+                    toast({
+                      title: 'Test run cancellation requested',
+                      description: res.message || 'The test run is being cancelled.',
+                    })
+                  } else {
+                    toast({
+                      title: 'Error cancelling test run',
+                      description: res.error || res.message,
+                      variant: 'destructive',
+                    })
+                    setIsCancelling(false)
+                  }
+                } catch (error) {
+                  toast({
+                    title: 'Error cancelling test run',
+                    description: error instanceof Error ? error.message : 'An unexpected error occurred',
+                    variant: 'destructive',
+                  })
+                  setIsCancelling(false)
+                }
+              }}
+            >
+              <span className="flex items-center gap-2">
+                {cancelActionIcon} {cancelActionText}
+              </span>
+            </DropdownMenuItem>
+          )}
+          {viewLink && (
+            <DropdownMenuItem>
+              <Link href={viewLink}>
+                <span className="flex items-center gap-2">
+                  {viewActionIcon} {viewActionText}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+          {modifyLink && (
+            <DropdownMenuItem>
+              <Link href={modifyLink}>
+                <span className="flex items-center gap-2">
+                  {editActionIcon} {editActionText}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuItem
+            disabled={deleteButtonDisabled}
+            onClick={() => {
+              setIsDeleteDialogOpen(true)
+            }}
+          >
+            <span className="flex items-center gap-2">
+              {deleteActionIcon} {deleteActionText}
+            </span>
+          </DropdownMenuItem>
+          {resolveConflictsHandler && (
+            <DropdownMenuItem>
+              <span className="flex items-center gap-2" onClick={resolveConflictsHandler}>
+                <CheckCircleIcon className="h-4 w-4" /> Mark conflicts as resolved
+              </span>
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
+
+export default TableActions

package/templates/default/src/components/test-case/test-case-form-helpers.test.ts

@@ -0,0 +1,100 @@
+import { StepParameterType, TemplateStepIcon } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildScenarioPreview,
+  buildScenarioSteps,
+  getNodesWithMissingMandatoryParams,
+} from './test-case-form-helpers'
+
+describe('test-case form helpers', () => {
+  it('builds gherkin preview text from ordered scenario steps', () => {
+    expect(
+      buildScenarioPreview('Login works', 'Smoke path', {
+        'node-1': {
+          order: 1,
+          label: 'Open login page',
+          gherkinStep: 'open login page',
+          parameters: [],
+          templateStepId: 'step-1',
+        },
+        'node-2': {
+          order: 2,
+          label: 'See dashboard',
+          gherkinStep: 'should see dashboard',
+          parameters: [],
+          templateStepId: 'step-2',
+        },
+      }),
+    ).toBe(`Scenario: [Login works] Smoke path\nGiven open login page\nThen should see dashboard`)
+  })
+
+  it('normalizes template default values into schema-ready step values', () => {
+    expect(
+      buildScenarioSteps({
+        'node-1': {
+          order: 1,
+          label: 'Fill email',
+          gherkinStep: 'fill email',
+          icon: 'INPUT',
+          parameters: [
+            {
+              name: 'email',
+              defaultValue: 'qa@appraise.dev',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'step-1',
+        },
+      }),
+    ).toEqual([
+      {
+        gherkinStep: 'fill email',
+        label: 'Fill email',
+        icon: TemplateStepIcon.INPUT,
+        parameters: [
+          {
+            name: 'email',
+            value: 'qa@appraise.dev',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        order: 1,
+        templateStepId: 'step-1',
+      },
+    ])
+  })
+
+  it('identifies non-isolated nodes that are missing mandatory parameters', () => {
+    expect(
+      getNodesWithMissingMandatoryParams(
+        {
+          'node-1': {
+            order: 1,
+            label: 'Click submit',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+          'node-2': {
+            order: -1,
+            label: 'Unused node',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        },
+        [
+          {
+            id: 'param-1',
+            name: 'target',
+            type: StepParameterType.STRING,
+            order: 1,
+            isMandatory: true,
+            templateStepId: 'step-1',
+          } as never,
+        ],
+      ),
+    ).toEqual(['Click submit'])
+  })
+})

package/templates/default/src/components/test-case/test-case-form-helpers.ts

@@ -0,0 +1,140 @@
+import { type TemplateStepParameter } from '@prisma/client'
+import { z } from 'zod'
+
+import { testCaseSchema } from '@/constants/form-opts/test-case-form-opts'
+import { templateTestCaseSchema } from '@/constants/form-opts/template-test-case-form-opts'
+import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
+import { IconToKeyTransformer } from '@/lib/transformers/key-to-icon-transformer'
+import type { ActionResponse } from '@/types/form/actionHandler'
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+type ScenarioNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+type ScenarioNode = ScenarioNodeOrder[string]
+
+export const testCaseSubmitSchema = testCaseSchema.extend({
+  testSuiteIds: z.array(z.string()).min(1, { message: 'Test suites are required' }),
+})
+
+export const templateTestCaseSubmitSchema = templateTestCaseSchema
+
+export const testCaseQuickTips = [
+  {
+    title: 'Provide a clear and descriptive title & description',
+    description: 'Use clear, specific terms that indicate the purpose of the test scenario',
+  },
+  {
+    title: 'Build your test scenario step by step',
+    description: 'Build your test scenario step by step visually to help others understand the flow of the test scenario',
+  },
+] as const
+
+function normalizeStepParameters(parameters: ScenarioNode['parameters']) {
+  return parameters.map(parameter => ({
+    name: parameter.name,
+    value: 'value' in parameter ? parameter.value : parameter.defaultValue,
+    type: parameter.type,
+    order: parameter.order,
+  }))
+}
+
+export function buildScenarioSteps(nodeOrder: ScenarioNodeOrder) {
+  return Object.entries(nodeOrder).map(([, value]) => ({
+    gherkinStep: value.gherkinStep || '',
+    label: value.label,
+    icon: IconToKeyTransformer(value.icon),
+    parameters: normalizeStepParameters(value.parameters),
+    order: value.order,
+    templateStepId: value.templateStepId,
+  }))
+}
+
+export function buildScenarioPreview(
+  title: string,
+  description: string | undefined,
+  nodeOrder: ScenarioNodeOrder,
+) {
+  if (!title) {
+    return ''
+  }
+
+  const scenarioHeader = `Scenario: [${title}] ${description || ''}`
+  const validSteps = Object.values(nodeOrder)
+    .filter(step => step.order !== -1)
+    .sort((left, right) => left.order - right.order)
+
+  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
+
+    if (index === 0) {
+      return `Given ${stepWithoutKeyword}`
+    }
+
+    const isThenStatement =
+      firstWord === 'then' ||
+      stepWithoutKeyword.toLowerCase().startsWith('should') ||
+      stepWithoutKeyword.toLowerCase().startsWith('must') ||
+      stepWithoutKeyword.toLowerCase().startsWith('will')
+
+    if (!hasThenInPrevious) {
+      if (isThenStatement) {
+        hasThenInPrevious = true
+        return `Then ${stepWithoutKeyword}`
+      }
+
+      if (!hasWhenInPrevious) {
+        hasWhenInPrevious = true
+        return `When ${stepWithoutKeyword}`
+      }
+
+      return `And ${stepWithoutKeyword}`
+    }
+
+    if (isThenStatement) {
+      return `And ${stepWithoutKeyword}`
+    }
+
+    hasThenInPrevious = false
+    hasWhenInPrevious = false
+    return `When ${stepWithoutKeyword}`
+  })
+
+  return [scenarioHeader, ...gherkinSteps].join('\n')
+}
+
+export function getNodesWithMissingMandatoryParams(
+  nodeOrder: NodeOrderMap,
+  templateStepParams: TemplateStepParameter[],
+) {
+  const nodesWithMissingParams: string[] = []
+
+  Object.entries(nodeOrder).forEach(([nodeId, nodeData]) => {
+    if (nodeData.order === -1) {
+      return
+    }
+
+    const isMissingParams = checkMissingMandatoryParams(
+      {
+        parameters: normalizeStepParameters(nodeData.parameters),
+        templateStepId: nodeData.templateStepId,
+      },
+      templateStepParams,
+      false,
+    )
+
+    if (isMissingParams) {
+      nodesWithMissingParams.push(nodeData.label || nodeId)
+    }
+  })
+
+  return nodesWithMissingParams
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || 'An error occurred'
+}

package/templates/default/src/components/test-case/test-case-picker-helpers.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  createSelectionState,
+  getSavedTestCases,
+  getSelectedIdsFromRowSelection,
+  getSelectionSummaryLabel,
+  testCaseMatchesQuery,
+} from './test-case-picker-helpers'
+
+const testCases = [
+  {
+    id: 'case-1',
+    title: 'Login test',
+    description: 'Checks login',
+    tags: [{ id: 'tag-1', name: 'smoke' }],
+    steps: [],
+  },
+  {
+    id: 'case-2',
+    title: 'Checkout test',
+    description: 'Validates payment',
+    tags: [{ id: 'tag-2', name: 'regression' }],
+    steps: [],
+  },
+] as never
+
+describe('test-case-picker helpers', () => {
+  it('creates row selection state and selected ids', () => {
+    expect(createSelectionState(['case-1'])).toEqual({ 'case-1': true })
+    expect(getSelectedIdsFromRowSelection(testCases, { 'case-2': true })).toEqual(['case-2'])
+  })
+
+  it('filters and summarizes saved cases', () => {
+    expect(testCaseMatchesQuery(testCases[0], 'smoke')).toBe(true)
+    expect(testCaseMatchesQuery(testCases[0], 'payment')).toBe(false)
+    expect(getSavedTestCases(testCases, ['case-2'])).toEqual([testCases[1]])
+    expect(getSelectionSummaryLabel('Selected test case(s)')).toBe('test case(s)')
+  })
+})

package/templates/default/src/components/test-case/test-case-picker-helpers.ts

@@ -0,0 +1,41 @@
+import type { RowSelectionState } from '@tanstack/react-table'
+
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+
+export function createSelectionState(selectedIds: string[]): RowSelectionState {
+  return selectedIds.reduce<RowSelectionState>((acc, id) => {
+    acc[id] = true
+    return acc
+  }, {})
+}
+
+export function testCaseMatchesQuery(testCase: TestCasePickerRow, filterValue: unknown): boolean {
+  const query = String(filterValue ?? '').trim().toLowerCase()
+  if (!query) {
+    return true
+  }
+
+  const searchableText = [
+    testCase.title,
+    testCase.description ?? '',
+    ...testCase.tags.map(tag => tag.name),
+  ]
+    .join(' ')
+    .toLowerCase()
+
+  return searchableText.includes(query)
+}
+
+export function getSavedTestCases(testCases: TestCasePickerRow[], selectedIds: string[]): TestCasePickerRow[] {
+  return selectedIds
+    .map(selectedId => testCases.find(testCase => testCase.id === selectedId))
+    .filter((testCase): testCase is TestCasePickerRow => Boolean(testCase))
+}
+
+export function getSelectedIdsFromRowSelection(testCases: TestCasePickerRow[], rowSelection: RowSelectionState): string[] {
+  return testCases.filter(testCase => rowSelection[testCase.id]).map(testCase => testCase.id)
+}
+
+export function getSelectionSummaryLabel(selectedLabel: string) {
+  return selectedLabel.replace(/^selected\s+/i, '')
+}