create-appraisejs 0.3.1-alpha.0 → 0.4.0-alpha.0

package/templates/starter/src/app/(base)/template-step-groups/template-step-group-form.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { templateStepGroupFormOpts, type TemplateStepGroup } from '@/constants/form-opts/template-step-group-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
 import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import {
@@ -167,7 +168,8 @@ export const TemplateStepGroupForm = ({
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
         {([canSubmit, isSubmitting]) => (
           <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
           </Button>
         )}
       </form.Subscribe>

package/templates/starter/src/app/(base)/template-step-groups/template-step-group-helpers.ts

@@ -1,4 +1,7 @@
-import { templateStepGroupSchema, type TemplateStepGroup as TemplateStepGroupFormValues } from '@/constants/form-opts/template-step-group-form-opts'
+import {
+  templateStepGroupSchema,
+  type TemplateStepGroup as TemplateStepGroupFormValues,
+} from '@/constants/form-opts/template-step-group-form-opts'
 import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
 
 export const templateStepGroupTypes = ['ACTION', 'VALIDATION'] as const

package/templates/starter/src/app/(base)/template-steps/paramChip.tsx

@@ -128,11 +128,9 @@ export default function ParamChip({
         ...formValues,
       }
 
-      setItems(prev => {
-        const next = [...prev, newItem]
-        onSubmit(next.map(stripItemId))
-        return next
-      })
+      const nextItems = [...items, newItem]
+      setItems(nextItems)
+      onSubmit(nextItems.map(stripItemId))
 
       setFormValues({
         name: '',
@@ -146,11 +144,9 @@ export default function ParamChip({
 
   // Handle removing an item
   const removeItem = (id: string) => {
-    setItems(prev => {
-      const nextItems = prev.filter(item => item.id !== id)
-      onSubmit(nextItems.map(stripItemId))
-      return nextItems
-    })
+    const nextItems = items.filter(item => item.id !== id)
+    setItems(nextItems)
+    onSubmit(nextItems.map(stripItemId))
   }
 
   return (

package/templates/starter/src/app/(base)/template-steps/template-step-form-helpers.ts

@@ -46,11 +46,13 @@ export function buildFunctionDefinitionPreview(
   })
 
   const paramsString = params
-    .map(param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`)
+    .map(
+      param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`,
+    )
     .join(', ')
 
   return updatedSignature.replace(
-    /async function\s*\(\s*this:CustomWorld(?:,\s*.*?)?\s*\)/,
+    /async function\s*\(\s*this\s*:\s*CustomWorld(?:,\s*.*?)?\s*\)/,
     `async function(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
   )
 }

package/templates/starter/src/app/(base)/template-steps/template-step-helpers.test.ts

@@ -1,7 +1,11 @@
 import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
 import { describe, expect, it } from 'vitest'
 
-import { buildFunctionDefinitionPreview, getTemplateStepFormDefaults, getTemplateStepRows } from './template-step-helpers'
+import {
+  buildFunctionDefinitionPreview,
+  getTemplateStepFormDefaults,
+  getTemplateStepRows,
+} from './template-step-helpers'
 
 describe('template-step helpers', () => {
   it('builds function previews from signature, type, and params', () => {
@@ -24,6 +28,20 @@ describe('template-step helpers', () => {
     ).toBe(`Then('see result', async function(this:CustomWorld){});`)
   })
 
+  it('updates function parameters when an existing definition uses formatted CustomWorld spacing', () => {
+    expect(
+      buildFunctionDefinitionPreview(
+        `When('the user does {string}', async function (this: CustomWorld, test: string) {});`,
+        'the user does {string}',
+        TemplateStepType.ACTION,
+        [
+          { name: 'terst', type: StepParameterType.STRING },
+          { name: 'gyg', type: StepParameterType.STRING },
+        ],
+      ),
+    ).toBe(`When('the user does {string}', async function(this:CustomWorld, terst: string, gyg: string) {});`)
+  })
+
   it('derives local state defaults for create and edit modes', () => {
     expect(getTemplateStepFormDefaults()).toEqual({
       signature: '',

package/templates/starter/src/app/(base)/template-steps/template-step-helpers.ts

@@ -6,11 +6,7 @@ export {
   getTemplateStepFormDefaults,
   templateStepFieldValidators,
 } from './template-step-form-helpers'
-export {
-  getEditableTemplateStep,
-  getTemplateStepGroupRows,
-  getTemplateStepRows,
-} from './template-step-row-guards'
+export { getEditableTemplateStep, getTemplateStepGroupRows, getTemplateStepRows } from './template-step-row-guards'
 export {
   getTemplateStepIconOptions,
   getTemplateStepParameterTypes,

package/templates/starter/src/app/(base)/template-steps/template-step-row-guards.ts

@@ -41,11 +41,7 @@ function hasTemplateStepShape(value: unknown): value is UnknownRecord & { parame
     'parameters',
   ] as const
 
-  return (
-    isRecord(value) &&
-    requiredFields.every(field => field in value) &&
-    Array.isArray(value.parameters)
-  )
+  return isRecord(value) && requiredFields.every(field => field in value) && Array.isArray(value.parameters)
 }
 
 function isEditableTemplateStep(value: unknown): value is EditableTemplateStep {

package/templates/starter/src/app/(base)/template-steps/template-step-types.ts

@@ -1,8 +1,4 @@
-import type {
-  TemplateStep as PrismaTemplateStep,
-  TemplateStepGroup,
-  TemplateStepParameter,
-} from '@prisma/client'
+import type { TemplateStep as PrismaTemplateStep, TemplateStepGroup, TemplateStepParameter } from '@prisma/client'
 
 import type { TemplateStep as TemplateStepFormValues } from '@/constants/form-opts/template-test-step-form-opts'
 import type { ActionResponse } from '@/types/form/actionHandler'

package/templates/starter/src/app/(base)/template-test-cases/create-template-test-case-page-data.test.ts

@@ -3,7 +3,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
 import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
 import { getAllModulesAction } from '@/actions/modules/module-actions'
-import { getAllTemplateStepParamsAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
 
 import { loadCreateTemplateTestCasePageData } from './create-template-test-case-page-data'

package/templates/starter/src/app/(base)/template-test-cases/create-template-test-case-page-data.ts

@@ -39,8 +39,7 @@ export async function loadCreateTemplateTestCasePageData(): Promise<CreateTempla
     getAllModulesAction(),
   ])
 
-  const secondaryError =
-    templateStepsError || locatorsError || locatorGroupsError || environmentsError || modulesError
+  const secondaryError = templateStepsError || locatorsError || locatorGroupsError || environmentsError || modulesError
 
   if (secondaryError) {
     return { status: 'error', message: secondaryError }

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

@@ -140,6 +140,7 @@ const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string
             name: block.name,
             nodeIds: block.nodes.map(node => node.flowNodeId),
           }))}
+        defaultValueInput={true}
       />
     </>
   )

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

@@ -107,5 +107,4 @@ describe('TemplateTestCaseFlow', () => {
     })
     expect(screen.getByTestId('default-value-input')).toHaveTextContent('true')
   })
-
 })

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

@@ -12,6 +12,7 @@ import {
   type TemplateStepParameter,
 } from '@prisma/client'
 import { useRouter } from 'next/navigation'
+import { Save } from 'lucide-react'
 import { z } from 'zod'
 
 import ErrorMessage from '@/components/form/error-message'
@@ -148,7 +149,8 @@ const TemplateTestCaseForm = ({
       <TemplateTestCaseFormFieldError message={errors.steps} />
       <div className="mb-4 flex flex-col gap-2">
         <Button onClick={handleSubmit} className="w-fit px-6">
-          Save
+          <Save className="size-4" aria-hidden />
+          <span className="font-bold">Save</span>
         </Button>
       </div>
     </div>

package/templates/starter/src/app/(base)/template-test-cases/template-test-case-table-columns.tsx

@@ -1,76 +1,76 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const templateTestCaseTableCols: ColumnDef<TemplateTestCase & { steps: TemplateTestCaseStep[] }>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'description',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
-  },
-  {
-    accessorKey: 'steps',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
-    cell: ({ row }) => {
-      const templateTestCase = row.original
-      return <div>{templateTestCase.steps.length}</div>
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const templateTestCase = row.original
-      return (
-        <TableActions
-          modifyLink={`/template-test-cases/modify/${templateTestCase.id}`}
-          deleteHandler={() => deleteTemplateTestCaseAction([templateTestCase.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
+import { formatDateTime } from '@/lib/utils'
+
+export const templateTestCaseTableCols: ColumnDef<TemplateTestCase & { steps: TemplateTestCaseStep[] }>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'steps',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
+    cell: ({ row }) => {
+      const templateTestCase = row.original
+      return <div>{templateTestCase.steps.length}</div>
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const templateTestCase = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-test-cases/modify/${templateTestCase.id}`}
+          deleteHandler={() => deleteTemplateTestCaseAction([templateTestCase.id])}
+        />
+      )
+    },
+  },
+]

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

@@ -1,32 +1,32 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { templateTestCaseTableCols } from './template-test-case-table-columns'
-import {
-  getAllTemplateTestCasesAction,
-  deleteTemplateTestCaseAction,
-} from '@/actions/template-test-case/template-test-case-actions'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-
-type TemplateTestCaseWithSteps = TemplateTestCase & {
-  steps: TemplateTestCaseStep[]
-}
-
-const TemplateTestCaseTable = async () => {
-  const { data: templateTestCases } = await getAllTemplateTestCasesAction()
-
-  return (
-    <>
-      <DataTable
-        columns={templateTestCaseTableCols}
-        data={templateTestCases as TemplateTestCaseWithSteps[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/template-test-cases/create"
-        modifyLink="/template-test-cases/modify"
-        deleteAction={deleteTemplateTestCaseAction}
-      />
-    </>
-  )
-}
-
-export default TemplateTestCaseTable
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { templateTestCaseTableCols } from './template-test-case-table-columns'
+import {
+  getAllTemplateTestCasesAction,
+  deleteTemplateTestCaseAction,
+} from '@/actions/template-test-case/template-test-case-actions'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+
+type TemplateTestCaseWithSteps = TemplateTestCase & {
+  steps: TemplateTestCaseStep[]
+}
+
+const TemplateTestCaseTable = async () => {
+  const { data: templateTestCases } = await getAllTemplateTestCasesAction()
+
+  return (
+    <>
+      <DataTable
+        columns={templateTestCaseTableCols}
+        data={templateTestCases as TemplateTestCaseWithSteps[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-test-cases/create"
+        modifyLink="/template-test-cases/modify"
+        deleteAction={deleteTemplateTestCaseAction}
+      />
+    </>
+  )
+}
+
+export default TemplateTestCaseTable

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

@@ -67,11 +67,7 @@ const CreateTestCase = async () => {
     environmentsResponse.error
 
   if (loadError) {
-    return (
-      <div>
-        Error: {loadError}
-      </div>
-    )
+    return <div>Error: {loadError}</div>
   }
 
   const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)

package/templates/starter/src/app/(base)/test-cases/create-from-template/create-from-template-selection-helpers.ts

@@ -47,10 +47,7 @@ function isTemplateTestCaseStepRow(value: unknown) {
 
 function isTemplateTestCaseWithSteps(value: unknown): value is TemplateTestCaseWithSteps {
   return (
-    isNamedRow(value) &&
-    'steps' in value &&
-    Array.isArray(value.steps) &&
-    value.steps.every(isTemplateTestCaseStepRow)
+    isNamedRow(value) && 'steps' in value && Array.isArray(value.steps) && value.steps.every(isTemplateTestCaseStepRow)
   )
 }
 

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

@@ -80,6 +80,8 @@ vi.mock('../test-case-form', () => ({
   default: testCaseFormSpy,
 }))
 
+import CreateTestCaseFromTemplate from './page'
+
 describe('Create Test Case From Template page', () => {
   it('passes template options and the selected template defaults into the shared test case form', async () => {
     getAllTemplateTestCasesAction.mockResolvedValue({
@@ -120,8 +122,6 @@ describe('Create Test Case From Template page', () => {
     getAllModulesAction.mockResolvedValue({ data: [{ id: 'module-1', name: 'Auth' }] })
     getAllEnvironmentsAction.mockResolvedValue({ data: [{ id: 'env-1', name: 'Staging' }] })
 
-    const { default: CreateTestCaseFromTemplate } = await import('./page')
-
     render(
       await CreateTestCaseFromTemplate({
         searchParams: Promise.resolve({ templateTestCaseId: 'template-1' }),

package/templates/starter/src/app/(base)/test-cases/inline-tag-creation-dialog.tsx

@@ -2,13 +2,7 @@
 
 import TagForm from '@/app/(base)/tags/tag-form'
 import type { TagFormSubmitAction } from '@/app/(base)/tags/tag-form-helpers'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import type { Tag } from '@prisma/client'
 
 type InlineTagCreationDialogProps = {

package/templates/starter/src/app/(base)/test-cases/inline-test-suite-creation-dialog.tsx

@@ -2,13 +2,7 @@
 
 import { TestSuiteForm } from '@/app/(base)/test-suites/test-suite-form'
 import type { TestSuiteFormSubmitAction } from '@/app/(base)/test-suites/test-suite-helpers'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import type { TestCasePickerRow } from '@/types/test-case-picker'
 import type { Module, Tag, TestSuite } from '@prisma/client'
 

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

@@ -77,11 +77,7 @@ const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) =
     environmentsResponse.error
 
   if (loadError) {
-    return (
-      <div>
-        Error: {loadError}
-      </div>
-    )
+    return <div>Error: {loadError}</div>
   }
 
   const testCase = getEditableTestCase(testCaseResponse.data)