create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/components/navigation/nav-link.tsx

@@ -38,7 +38,7 @@ const NavLink = ({
         'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors',
         'hover:bg-accent hover:text-accent-foreground',
         'focus:bg-accent focus:text-accent-foreground',
-        'focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        'focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:ring-[3px]',
         'disabled:pointer-events-none disabled:opacity-50',
         'outline-none',
         isActive && 'bg-accent text-accent-foreground',

package/templates/starter/src/components/navigation/nav-menu-card-deck.tsx

@@ -6,7 +6,8 @@ import React, { useState } from 'react'
 import { cn } from '@/lib/utils'
 import { Card, CardContent } from '../ui/card'
 import { ChevronDown } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
+import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
 
 const NavMenuCardDeck = ({
   containerButtonText,
@@ -34,78 +35,80 @@ const NavMenuCardDeck = ({
   }
 
   return (
-    <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <button
-        type="button"
-        className={cn(
-          'flex items-center gap-2 rounded-md px-4 py-2 outline-none transition-colors',
-          checkIfTriggerActive(pathname) && 'bg-accent text-accent-foreground',
-          'hover:bg-accent hover:text-accent-foreground',
-        )}
-      >
-        {containerButtonIcon}
-        <span className="text-sm font-medium">{containerButtonText}</span>
-        <motion.div animate={{ rotate: isHovered ? 180 : 0 }} transition={{ duration: 0.2, ease: 'easeInOut' }}>
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
-        </motion.div>
-      </button>
+    <LazyMotion features={domAnimation} strict>
+      <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+        <button
+          type="button"
+          className={cn(
+            'flex items-center gap-2 rounded-md px-4 py-2 outline-none transition-colors',
+            checkIfTriggerActive(pathname) && 'bg-accent text-accent-foreground',
+            'hover:bg-accent hover:text-accent-foreground',
+          )}
+        >
+          {containerButtonIcon}
+          <span className="text-sm font-medium">{containerButtonText}</span>
+          <motion.div animate={{ rotate: isHovered ? 180 : 0 }} transition={{ duration: 0.2, ease: 'easeInOut' }}>
+            <ChevronDown className="size-4 text-muted-foreground" />
+          </motion.div>
+        </button>
 
-      <AnimatePresence>
-        {isHovered && (
-          <>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute left-0 top-full h-1 w-full bg-transparent"
-            />
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute left-0 top-full z-50 mt-1 rounded-md border border-none bg-popover p-2 shadow-md"
-            >
-              <div
-                className={cn(
-                  'grid gap-1',
-                  dropdownItems.length === 1 ? 'w-[300px] grid-cols-1' : 'w-[600px] grid-cols-2',
-                )}
+        <AnimatePresence>
+          {isHovered && (
+            <>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="absolute left-0 top-full h-1 w-full bg-transparent"
+              />
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="absolute left-0 top-full z-50 mt-1 rounded-md border border-none bg-popover p-2 shadow-md"
               >
-                {dropdownItems.map(item => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className="transition-colors hover:cursor-pointer"
-                    onClick={() => setIsHovered(false)}
-                  >
-                    <Card
-                      className={cn(
-                        'h-24 w-full border-none outline-none transition-colors hover:bg-accent dark:hover:bg-primary-foreground dark:hover:text-accent-foreground',
-                        checkIfItemActive(item.href) &&
-                          'bg-green-400/25 text-accent-foreground dark:bg-primary-foreground',
-                        'hover:cursor-pointer',
-                      )}
+                <div
+                  className={cn(
+                    'grid gap-1',
+                    dropdownItems.length === 1 ? 'w-[300px] grid-cols-1' : 'w-[600px] grid-cols-2',
+                  )}
+                >
+                  {dropdownItems.map(item => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className="transition-colors hover:cursor-pointer"
+                      onClick={() => setIsHovered(false)}
                     >
-                      <CardContent className="flex h-full w-full items-center gap-3 p-4">
-                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
-                          {item.icon}
-                        </div>
-                        <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <span className="truncate text-sm font-medium">{item.text}</span>
-                          <span className="line-clamp-2 text-xs text-accent-foreground">{item.description}</span>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </Link>
-                ))}
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </div>
+                      <Card
+                        className={cn(
+                          'h-24 w-full border-none outline-none transition-colors hover:bg-accent dark:hover:bg-primary-foreground dark:hover:text-accent-foreground',
+                          checkIfItemActive(item.href) &&
+                            'bg-green-400/25 text-accent-foreground dark:bg-primary-foreground',
+                          'hover:cursor-pointer',
+                        )}
+                      >
+                        <CardContent className="flex size-full items-center gap-3 p-4">
+                          <div className="flex size-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
+                            {item.icon}
+                          </div>
+                          <div className="flex min-w-0 flex-1 flex-col justify-center">
+                            <span className="truncate text-sm font-medium">{item.text}</span>
+                            <span className="line-clamp-2 text-xs text-accent-foreground">{item.description}</span>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))}
+                </div>
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
+      </div>
+    </LazyMotion>
   )
 }
 

package/templates/starter/src/components/reports/test-case-logs-modal.tsx

@@ -49,7 +49,7 @@ const stepStatusToBadge = (status: StepStatus) => {
           variant="outline"
           className="flex items-center gap-1 rounded-xl border-green-700 bg-green-700/10 py-0.5 text-xs text-green-500"
         >
-          <CheckCircle className="h-3 w-3" />
+          <CheckCircle className="size-3" />
           PASSED
         </Badge>
       )
@@ -59,7 +59,7 @@ const stepStatusToBadge = (status: StepStatus) => {
           variant="outline"
           className="flex items-center gap-1 rounded-xl border-red-700 bg-red-700/10 py-0.5 text-xs text-red-500"
         >
-          <XCircle className="h-3 w-3" />
+          <XCircle className="size-3" />
           FAILED
         </Badge>
       )
@@ -67,9 +67,9 @@ const stepStatusToBadge = (status: StepStatus) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-1 rounded-xl border-gray-700 bg-gray-700/10 py-0.5 text-xs text-gray-500"
+          className="flex items-center gap-1 rounded-xl border-zinc-700 bg-zinc-700/10 py-0.5 text-xs text-zinc-500"
         >
-          <Clock className="h-3 w-3" />
+          <Clock className="size-3" />
           SKIPPED
         </Badge>
       )
@@ -77,7 +77,7 @@ const stepStatusToBadge = (status: StepStatus) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-1 rounded-xl border-gray-700 bg-gray-700/10 py-0.5 text-xs text-gray-500"
+          className="flex items-center gap-1 rounded-xl border-zinc-700 bg-zinc-700/10 py-0.5 text-xs text-zinc-500"
         >
           {status}
         </Badge>
@@ -109,7 +109,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
   }
 
   // Sort steps by order
-  const sortedSteps = [...reportScenario.steps].sort((a, b) => a.order - b.order)
+  const sortedSteps = reportScenario.steps.toSorted((a, b) => a.order - b.order)
 
   return (
     <>
@@ -170,7 +170,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {step.errorMessage && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Message</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words text-xs text-red-300">
@@ -181,7 +181,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {step.errorTrace && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Trace</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words font-mono text-xs text-red-300">
@@ -255,7 +255,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {hook.errorMessage && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Message</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words text-xs text-red-300">
@@ -266,7 +266,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {hook.errorTrace && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Trace</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words font-mono text-xs text-red-300">

package/templates/starter/src/components/table/table-actions.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ReactNode } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TableActions from './table-actions'
+
+const { toast } = vi.hoisted(() => ({
+  toast: vi.fn(),
+}))
+
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: { href: string; children: ReactNode }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+describe('TableActions', () => {
+  it('restores interactivity after deleting from the row actions menu', async () => {
+    const user = userEvent.setup()
+    const deleteHandler = vi.fn().mockResolvedValue({
+      status: 200,
+      message: 'Deleted',
+    })
+
+    render(<TableActions deleteHandler={deleteHandler} />)
+
+    await user.click(screen.getByRole('button', { name: 'Open menu' }))
+    await user.click(screen.getByText('Delete'))
+    await user.click(screen.getByRole('button', { name: /^delete$/i }))
+
+    await waitFor(() => {
+      expect(deleteHandler).toHaveBeenCalledTimes(1)
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    expect(document.body.style.pointerEvents).not.toBe('none')
+
+    await user.click(screen.getByRole('button', { name: 'Open menu' }))
+    expect(screen.getByText('Actions')).toBeInTheDocument()
+  })
+})

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

@@ -30,10 +30,10 @@ const TableActions = ({
   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" />,
+  editActionIcon = <Pencil className="size-4" />,
+  deleteActionIcon = <Trash className="size-4" />,
+  viewActionIcon = <Eye className="size-4" />,
+  cancelActionIcon = <XCircle className="size-4" />,
 }: {
   modifyLink?: string
   deleteHandler: () => Promise<ActionResponse>
@@ -83,11 +83,11 @@ const TableActions = ({
         open={isDeleteDialogOpen}
         onOpenChange={setIsDeleteDialogOpen}
       />
-      <DropdownMenu>
+      <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="h-8 w-8 p-0">
+          <Button variant="ghost" className="size-8 p-0">
             <span className="sr-only">Open menu</span>
-            <MoreHorizontal className="h-4 w-4" />
+            <MoreHorizontal className="size-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -159,9 +159,13 @@ const TableActions = ({
             </span>
           </DropdownMenuItem>
           {resolveConflictsHandler && (
-            <DropdownMenuItem>
-              <span className="flex items-center gap-2" onClick={resolveConflictsHandler}>
-                <CheckCircleIcon className="h-4 w-4" /> Mark conflicts as resolved
+            <DropdownMenuItem
+              onClick={() => {
+                void resolveConflictsHandler()
+              }}
+            >
+              <span className="flex items-center gap-2">
+                <CheckCircleIcon className="size-4" /> Mark conflicts as resolved
               </span>
             </DropdownMenuItem>
           )}

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

@@ -1,11 +1,7 @@
 import { StepParameterType, TemplateStepIcon } from '@prisma/client'
 import { describe, expect, it } from 'vitest'
 
-import {
-  buildScenarioPreview,
-  buildScenarioSteps,
-  getNodesWithMissingMandatoryParams,
-} from './test-case-form-helpers'
+import { buildScenarioPreview, buildScenarioSteps, getNodesWithMissingMandatoryParams } from './test-case-form-helpers'
 
 describe('test-case form helpers', () => {
   it('builds gherkin preview text from ordered scenario steps', () => {
@@ -50,6 +46,7 @@ describe('test-case form helpers', () => {
       }),
     ).toEqual([
       {
+        nodeId: 'node-1',
         gherkinStep: 'fill email',
         label: 'Fill email',
         icon: TemplateStepIcon.INPUT,

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

@@ -7,6 +7,7 @@ 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'
+import { formatOrderedGherkinSteps } from '@/lib/gherkin-step-format'
 
 type ScenarioNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
 type ScenarioNode = ScenarioNodeOrder[string]
@@ -23,8 +24,12 @@ export const testCaseQuickTips = [
     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',
+    title: 'Assign your test scenario to a test suite',
+    description: 'Organize your test scenarios into test suites for better management and categorization',
+  },
+  {
+    title: 'Add tags to your test scenario',
+    description: 'Tags help filter and categorize your test scenarios for better organization and searchability',
   },
 ] as const
 
@@ -38,7 +43,8 @@ function normalizeStepParameters(parameters: ScenarioNode['parameters']) {
 }
 
 export function buildScenarioSteps(nodeOrder: ScenarioNodeOrder) {
-  return Object.entries(nodeOrder).map(([, value]) => ({
+  return Object.entries(nodeOrder).map(([nodeId, value]) => ({
+    nodeId: value.nodeId ?? nodeId,
     gherkinStep: value.gherkinStep || '',
     label: value.label,
     icon: IconToKeyTransformer(value.icon),
@@ -48,11 +54,7 @@ export function buildScenarioSteps(nodeOrder: ScenarioNodeOrder) {
   }))
 }
 
-export function buildScenarioPreview(
-  title: string,
-  description: string | undefined,
-  nodeOrder: ScenarioNodeOrder,
-) {
+export function buildScenarioPreview(title: string, description: string | undefined, nodeOrder: ScenarioNodeOrder) {
   if (!title) {
     return ''
   }
@@ -62,47 +64,7 @@ export function buildScenarioPreview(
     .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}`
-  })
+  const gherkinSteps = formatOrderedGherkinSteps(validSteps, { resetWhenAfterThen: true })
 
   return [scenarioHeader, ...gherkinSteps].join('\n')
 }
@@ -135,6 +97,35 @@ export function getNodesWithMissingMandatoryParams(
   return nodesWithMissingParams
 }
 
-export function getActionErrorMessage(response: ActionResponse) {
+function getActionErrorMessage(response: ActionResponse) {
   return response.error || 'An error occurred'
 }
+
+export function handleTestCaseSaveResponse({
+  response,
+  redirectPath,
+  push,
+  toast,
+}: {
+  response: ActionResponse
+  redirectPath: string
+  push: (path: string) => void
+  toast: (props: { title: string; description: string; variant: 'default' | 'destructive' }) => unknown
+}) {
+  if (response.status === 200) {
+    toast({
+      title: 'Success',
+      description: 'Test case saved successfully',
+      variant: 'default',
+    })
+    push(redirectPath)
+  }
+
+  if (response.status === 500) {
+    toast({
+      title: 'Error',
+      description: getActionErrorMessage(response),
+      variant: 'destructive',
+    })
+  }
+}

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

@@ -10,16 +10,14 @@ export function createSelectionState(selectedIds: string[]): RowSelectionState {
 }
 
 export function testCaseMatchesQuery(testCase: TestCasePickerRow, filterValue: unknown): boolean {
-  const query = String(filterValue ?? '').trim().toLowerCase()
+  const query = String(filterValue ?? '')
+    .trim()
+    .toLowerCase()
   if (!query) {
     return true
   }
 
-  const searchableText = [
-    testCase.title,
-    testCase.description ?? '',
-    ...testCase.tags.map(tag => tag.name),
-  ]
+  const searchableText = [testCase.title, testCase.description ?? '', ...testCase.tags.map(tag => tag.name)]
     .join(' ')
     .toLowerCase()
 
@@ -32,7 +30,10 @@ export function getSavedTestCases(testCases: TestCasePickerRow[], selectedIds: s
     .filter((testCase): testCase is TestCasePickerRow => Boolean(testCase))
 }
 
-export function getSelectedIdsFromRowSelection(testCases: TestCasePickerRow[], rowSelection: RowSelectionState): string[] {
+export function getSelectedIdsFromRowSelection(
+  testCases: TestCasePickerRow[],
+  rowSelection: RowSelectionState,
+): string[] {
   return testCases.filter(testCase => rowSelection[testCase.id]).map(testCase => testCase.id)
 }
 

package/templates/starter/src/components/test-case/test-case-picker.test.tsx

@@ -6,24 +6,27 @@ import { describe, expect, it, vi } from 'vitest'
 
 import TestCasePicker from './test-case-picker'
 
+const fixtureTimestamp = '2024-01-01T00:00:00.000Z'
+
 describe('TestCasePicker', () => {
   it('saves selected test cases from the dialog', async () => {
     const user = userEvent.setup()
     const onSave = vi.fn()
+    const testCases = [
+      {
+        id: 'case-1',
+        title: 'Login test',
+        description: 'Checks login',
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+        steps: [],
+        createdAt: new Date(fixtureTimestamp),
+        updatedAt: new Date(fixtureTimestamp),
+      } as never,
+    ]
 
     render(
       <TestCasePicker
-        testCases={[
-          {
-            id: 'case-1',
-            title: 'Login test',
-            description: 'Checks login',
-            tags: [{ id: 'tag-1', name: 'smoke' }],
-            steps: [],
-            createdAt: new Date('2024-01-01T00:00:00.000Z'),
-            updatedAt: new Date('2024-01-01T00:00:00.000Z'),
-          } as never,
-        ]}
+        testCases={testCases}
         selectedIds={[]}
         onSave={onSave}
         triggerPlaceholder="Select test case(s)"