create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

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

@@ -0,0 +1,99 @@
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import { buildFunctionDefinitionPreview, getTemplateStepFormDefaults, getTemplateStepRows } from './template-step-helpers'
+
+describe('template-step helpers', () => {
+  it('builds function previews from signature, type, and params', () => {
+    expect(
+      buildFunctionDefinitionPreview(
+        `When('', async function(this:CustomWorld){});`,
+        'click {string}',
+        TemplateStepType.ACTION,
+        [{ name: 'target', type: StepParameterType.STRING }],
+      ),
+    ).toBe(`When('click {string}', async function(this:CustomWorld, target: string){});`)
+
+    expect(
+      buildFunctionDefinitionPreview(
+        `When('click', async function(this:CustomWorld){});`,
+        'see result',
+        TemplateStepType.ASSERTION,
+        [],
+      ),
+    ).toBe(`Then('see result', async function(this:CustomWorld){});`)
+  })
+
+  it('derives local state defaults for create and edit modes', () => {
+    expect(getTemplateStepFormDefaults()).toEqual({
+      signature: '',
+      functionDefinition: `When('', async function(this:CustomWorld){});`,
+      type: TemplateStepType.ACTION,
+      params: [],
+    })
+  })
+
+  it('keeps template step list rows when parameters only include id and name', () => {
+    expect(
+      getTemplateStepRows([
+        {
+          id: 'step-1',
+          name: 'Click',
+          description: null,
+          type: TemplateStepType.ACTION,
+          signature: 'click',
+          icon: TemplateStepIcon.MOUSE,
+          templateStepGroupId: 'group-1',
+          templateStepGroup: {
+            id: 'group-1',
+            name: 'Actions',
+            description: null,
+            createdAt: new Date('2026-01-01T00:00:00.000Z'),
+            updatedAt: new Date('2026-01-01T00:00:00.000Z'),
+          },
+          createdAt: new Date('2026-01-01T00:00:00.000Z'),
+          updatedAt: new Date('2026-01-01T00:00:00.000Z'),
+          parameters: [
+            {
+              id: 'param-1',
+              name: 'target',
+            },
+          ],
+        },
+      ]),
+    ).toHaveLength(1)
+  })
+
+  it('narrows editable template step details with full parameter rows', () => {
+    expect(
+      getTemplateStepRows([
+        {
+          id: 'step-1',
+          name: 'Click',
+          description: null,
+          type: TemplateStepType.ACTION,
+          signature: 'click',
+          icon: TemplateStepIcon.MOUSE,
+          templateStepGroupId: 'group-1',
+          templateStepGroup: {
+            id: 'group-1',
+            name: 'Actions',
+            description: null,
+            createdAt: new Date('2026-01-01T00:00:00.000Z'),
+            updatedAt: new Date('2026-01-01T00:00:00.000Z'),
+          },
+          createdAt: new Date('2026-01-01T00:00:00.000Z'),
+          updatedAt: new Date('2026-01-01T00:00:00.000Z'),
+          parameters: [
+            {
+              id: 'param-1',
+              name: 'target',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+        },
+      ]),
+    ).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,176 @@
+import {
+  StepParameterType,
+  TemplateStepIcon,
+  TemplateStepType,
+  type TemplateStep as PrismaTemplateStep,
+  type TemplateStepGroup,
+  type TemplateStepParameter,
+} from '@prisma/client'
+
+import {
+  templateStepSchema,
+  type TemplateStep as TemplateStepFormValues,
+} from '@/constants/form-opts/template-test-step-form-opts'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+
+export type TemplateStepGroupOption = {
+  id: string
+  name: string
+}
+
+export type EditableTemplateStep = PrismaTemplateStep & {
+  parameters: TemplateStepParameter[]
+  templateStepGroup: TemplateStepGroup
+}
+
+export type TemplateStepParameterSummary = Pick<TemplateStepParameter, 'id' | 'name'>
+
+export type TemplateStepTableRow = PrismaTemplateStep & {
+  parameters: TemplateStepParameterSummary[]
+  templateStepGroup: TemplateStepGroup
+}
+
+export type TemplateStepFormSubmitAction = (
+  _prev: unknown,
+  value: TemplateStepFormValues,
+  id?: string,
+) => Promise<ActionResponse>
+
+export const templateStepFieldValidators = {
+  name: templateStepSchema.shape.name,
+  templateStepGroupId: templateStepSchema.shape.templateStepGroupId,
+  type: templateStepSchema.shape.type,
+  signature: templateStepSchema.shape.signature,
+}
+
+export function getInitialFunctionDefinition() {
+  return `When('', async function(this:CustomWorld){});`
+}
+
+export function getFieldErrorMessage(error: unknown) {
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message
+  }
+
+  return String(error)
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || 'An error occurred'
+}
+
+export function buildFunctionDefinitionPreview(
+  currentDefinition: string,
+  signature: string,
+  type: TemplateStepType,
+  params: Array<{ name: string; type: string }>,
+  quoteType: `'` | `"` | '`' = `'`,
+) {
+  const updatedSignature = currentDefinition.replace(/(When|Then)\((['"`])(.*?)\2/, () => {
+    const keyword = type === TemplateStepType.ASSERTION ? 'Then' : 'When'
+    return `${keyword}(${quoteType}${signature}${quoteType}`
+  })
+
+  const paramsString = params
+    .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(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
+  )
+}
+
+export function getTemplateStepFormDefaults(defaultValues?: TemplateStepFormValues) {
+  return {
+    signature: defaultValues?.signature ?? '',
+    functionDefinition: defaultValues?.functionDefinition ?? getInitialFunctionDefinition(),
+    type: (defaultValues?.type as TemplateStepType) ?? TemplateStepType.ACTION,
+    params: defaultValues?.params ?? [],
+  }
+}
+
+function isNamedRow(value: unknown): value is TemplateStepGroupOption {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value &&
+    'type' in value &&
+    'order' in value
+  )
+}
+
+function isTemplateStepParameterSummary(value: unknown): value is TemplateStepParameterSummary {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isEditableTemplateStep(value: unknown): value is EditableTemplateStep {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value &&
+    'createdAt' in value &&
+    'updatedAt' in value &&
+    'type' in value &&
+    'signature' in value &&
+    'icon' in value &&
+    'templateStepGroupId' in value &&
+    'templateStepGroup' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTemplateStepParameterRow)
+  )
+}
+
+function isTemplateStepTableRow(value: unknown): value is TemplateStepTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value &&
+    'createdAt' in value &&
+    'updatedAt' in value &&
+    'type' in value &&
+    'signature' in value &&
+    'icon' in value &&
+    'templateStepGroupId' in value &&
+    'templateStepGroup' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTemplateStepParameterSummary)
+  )
+}
+
+export function getTemplateStepGroupRows(data: ActionResponseData | undefined): TemplateStepGroupOption[] {
+  return Array.isArray(data) ? data.filter(isNamedRow) : []
+}
+
+export function getEditableTemplateStep(data: ActionResponseData | undefined) {
+  return isEditableTemplateStep(data) ? data : null
+}
+
+export function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStepTableRow[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepTableRow) : []
+}
+
+export function getTemplateStepIconOptions() {
+  return Object.values(TemplateStepIcon)
+}
+
+export function getTemplateStepTypeOptions() {
+  return Object.values(TemplateStepType)
+}
+
+export function getTemplateStepParameterTypes() {
+  return Object.values(StepParameterType)
+}

package/templates/default/src/app/(base)/template-steps/template-step-table-columns.tsx

@@ -1,158 +1,153 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTemplateStepAction } from '@/actions/template-step/template-step-actions'
-import { TemplateStep, TemplateStepParameter, TemplateStepType } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { CheckCheck, MousePointer2 } from 'lucide-react'
-import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
-import { Kbd, KbdGroup } from '@/components/ui/kbd'
-
-export const templateStepTableCols: ColumnDef<TemplateStep>[] = [
-  {
-    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: 'icon',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Icon" />,
-    cell: ({ row }) => {
-      const templateStep = row.original
-      return (
-        <Badge variant="outline" className="flex w-fit items-center gap-1">
-          {KeyToIconTransformer(templateStep.icon, 'h-4 w-4')}
-          {templateStep.icon.charAt(0).toUpperCase() + templateStep.icon.slice(1).toLowerCase()}
-        </Badge>
-      )
-    },
-  },
-  {
-    accessorKey: 'type',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
-    cell: ({ row }) => {
-      const templateStep = row.original
-      const icon =
-        templateStep.type === TemplateStepType.ACTION ? (
-          <MousePointer2 className="h-4 w-4" />
-        ) : (
-          <CheckCheck className="h-4 w-4" />
-        )
-      return (
-        <Badge variant="outline" className="flex w-fit items-center gap-1">
-          {icon} {templateStep.type.charAt(0).toUpperCase() + templateStep.type.slice(1).toLowerCase()}
-        </Badge>
-      )
-    },
-  },
-  {
-    accessorKey: 'parameters',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Parameters" />,
-    cell: ({ row }) => {
-      const parameters = row.original as TemplateStep & {
-        parameters: TemplateStepParameter[]
-      }
-      return (
-        <KbdGroup className="flex flex-wrap gap-1">
-          {parameters.parameters.map((parameter: TemplateStepParameter) => (
-            <Kbd
-              key={parameter.id}
-              className="bg-gray-200 px-2 text-xs text-gray-600 dark:bg-gray-700/55 dark:text-gray-400"
-            >
-              {parameter.name}
-            </Kbd>
-          ))}
-        </KbdGroup>
-      )
-    },
-  },
-  {
-    accessorKey: 'signature',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Signature" />,
-    cell: ({ row }) => {
-      const templateStep = row.original
-      const signature = templateStep.signature || ''
-      const parts: (string | React.ReactElement)[] = []
-      const regex = /\{(string|int)\}/g
-      let lastIndex = 0
-      let match
-
-      while ((match = regex.exec(signature)) !== null) {
-        if (match.index > lastIndex) {
-          parts.push(signature.slice(lastIndex, match.index))
-        }
-
-        parts.push(
-          <Badge key={match.index} variant="outline" className="mx-1 px-1.5">
-            {match[0]}
-          </Badge>,
-        )
-
-        lastIndex = regex.lastIndex
-      }
-
-      if (lastIndex < signature.length) {
-        parts.push(signature.slice(lastIndex))
-      }
-
-      return (
-        <div className="inline-flex flex-wrap items-center gap-0 text-sm">{parts.length > 0 ? parts : signature}</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 templateStep = row.original
-      return (
-        <TableActions
-          modifyLink={`/template-steps/modify/${templateStep.id}`}
-          deleteHandler={() => deleteTemplateStepAction([templateStep.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { TemplateStepType } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { CheckCheck, MousePointer2 } from 'lucide-react'
+import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
+import type { TemplateStepTableRow } from './template-step-helpers'
+
+export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
+  {
+    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: 'icon',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Icon" />,
+    cell: ({ row }) => {
+      const templateStep = row.original
+      return (
+        <Badge variant="outline" className="flex w-fit items-center gap-1">
+          {KeyToIconTransformer(templateStep.icon, 'h-4 w-4')}
+          {templateStep.icon.charAt(0).toUpperCase() + templateStep.icon.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => {
+      const templateStep = row.original
+      const icon =
+        templateStep.type === TemplateStepType.ACTION ? (
+          <MousePointer2 className="h-4 w-4" />
+        ) : (
+          <CheckCheck className="h-4 w-4" />
+        )
+      return (
+        <Badge variant="outline" className="flex w-fit items-center gap-1">
+          {icon} {templateStep.type.charAt(0).toUpperCase() + templateStep.type.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'parameters',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Parameters" />,
+    cell: ({ row }) => {
+      return (
+        <KbdGroup className="flex flex-wrap gap-1">
+          {row.original.parameters.map(parameter => (
+            <Kbd key={parameter.id} className="bg-gray-200 px-2 text-xs text-gray-600 dark:bg-gray-700/55 dark:text-gray-400">
+              {parameter.name}
+            </Kbd>
+          ))}
+        </KbdGroup>
+      )
+    },
+  },
+  {
+    accessorKey: 'signature',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Signature" />,
+    cell: ({ row }) => {
+      const templateStep = row.original
+      const signature = templateStep.signature || ''
+      const parts: (string | React.ReactElement)[] = []
+      const regex = /\{(string|int)\}/g
+      let lastIndex = 0
+      let match
+
+      while ((match = regex.exec(signature)) !== null) {
+        if (match.index > lastIndex) {
+          parts.push(signature.slice(lastIndex, match.index))
+        }
+
+        parts.push(
+          <Badge key={match.index} variant="outline" className="mx-1 px-1.5">
+            {match[0]}
+          </Badge>,
+        )
+
+        lastIndex = regex.lastIndex
+      }
+
+      if (lastIndex < signature.length) {
+        parts.push(signature.slice(lastIndex))
+      }
+
+      return (
+        <div className="inline-flex flex-wrap items-center gap-0 text-sm">{parts.length > 0 ? parts : signature}</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 templateStep = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-steps/modify/${templateStep.id}`}
+          deleteHandler={() => deleteTemplateStepAction([templateStep.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/template-steps/template-step-table.tsx

@@ -1,24 +1,26 @@
-import { deleteTemplateStepAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { templateStepTableCols } from './template-step-table-columns'
-import { TemplateStep } from '@prisma/client'
-
-const TemplateStepTable = async () => {
-  const { data: templateSteps } = await getAllTemplateStepsAction()
-
-  return (
-    <>
-      <DataTable
-        columns={templateStepTableCols}
-        data={templateSteps as TemplateStep[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/template-steps/create"
-        modifyLink="/template-steps/modify"
-        deleteAction={deleteTemplateStepAction}
-      />
-    </>
-  )
-}
-
-export default TemplateStepTable
+import { deleteTemplateStepAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { templateStepTableCols } from './template-step-table-columns'
+
+import { getTemplateStepRows } from './template-step-helpers'
+
+const TemplateStepTable = async () => {
+  const { data: templateSteps } = await getAllTemplateStepsAction()
+  const rows = getTemplateStepRows(templateSteps)
+
+  return (
+    <>
+      <DataTable
+        columns={templateStepTableCols}
+        data={rows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-steps/create"
+        modifyLink="/template-steps/modify"
+        deleteAction={deleteTemplateStepAction}
+      />
+    </>
+  )
+}
+
+export default TemplateStepTable