create-appraisejs 0.3.0 → 0.3.1-alpha.1

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

@@ -1,176 +1,21 @@
-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)
-}
+export {
+  buildFunctionDefinitionPreview,
+  getActionErrorMessage,
+  getFieldErrorMessage,
+  getInitialFunctionDefinition,
+  getTemplateStepFormDefaults,
+  templateStepFieldValidators,
+} from './template-step-form-helpers'
+export { getEditableTemplateStep, getTemplateStepGroupRows, getTemplateStepRows } from './template-step-row-guards'
+export {
+  getTemplateStepIconOptions,
+  getTemplateStepParameterTypes,
+  getTemplateStepTypeOptions,
+} from './template-step-option-helpers'
+export type {
+  EditableTemplateStep,
+  TemplateStepFormSubmitAction,
+  TemplateStepGroupOption,
+  TemplateStepParameterSummary,
+  TemplateStepTableRow,
+} from './template-step-types'

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

@@ -0,0 +1,13 @@
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+
+export function getTemplateStepIconOptions() {
+  return Object.values(TemplateStepIcon)
+}
+
+export function getTemplateStepTypeOptions() {
+  return Object.values(TemplateStepType)
+}
+
+export function getTemplateStepParameterTypes() {
+  return Object.values(StepParameterType)
+}

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

@@ -0,0 +1,65 @@
+import type { TemplateStepParameter } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type {
+  EditableTemplateStep,
+  TemplateStepGroupOption,
+  TemplateStepParameterSummary,
+  TemplateStepTableRow,
+} from './template-step-types'
+
+type UnknownRecord = Record<string, unknown>
+
+function isRecord(value: unknown): value is UnknownRecord {
+  return typeof value === 'object' && value !== null
+}
+
+function isNamedRow(value: unknown): value is TemplateStepGroupOption {
+  return isRecord(value) && 'id' in value && 'name' in value
+}
+
+function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
+  return isRecord(value) && 'id' in value && 'name' in value && 'type' in value && 'order' in value
+}
+
+function isTemplateStepParameterSummary(value: unknown): value is TemplateStepParameterSummary {
+  return isRecord(value) && 'id' in value && 'name' in value
+}
+
+function hasTemplateStepShape(value: unknown): value is UnknownRecord & { parameters: unknown[] } {
+  const requiredFields = [
+    'id',
+    'name',
+    'createdAt',
+    'updatedAt',
+    'type',
+    'signature',
+    'icon',
+    'templateStepGroupId',
+    'templateStepGroup',
+    'parameters',
+  ] as const
+
+  return isRecord(value) && requiredFields.every(field => field in value) && Array.isArray(value.parameters)
+}
+
+function isEditableTemplateStep(value: unknown): value is EditableTemplateStep {
+  return hasTemplateStepShape(value) && value.parameters.every(isTemplateStepParameterRow)
+}
+
+function isTemplateStepTableRow(value: unknown): value is TemplateStepTableRow {
+  return hasTemplateStepShape(value) && 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) : []
+}

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

@@ -51,7 +51,7 @@ export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
       const templateStep = row.original
       return (
         <Badge variant="outline" className="flex w-fit items-center gap-1">
-          {KeyToIconTransformer(templateStep.icon, 'h-4 w-4')}
+          {KeyToIconTransformer(templateStep.icon, 'size-4')}
           {templateStep.icon.charAt(0).toUpperCase() + templateStep.icon.slice(1).toLowerCase()}
         </Badge>
       )
@@ -64,9 +64,9 @@ export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
       const templateStep = row.original
       const icon =
         templateStep.type === TemplateStepType.ACTION ? (
-          <MousePointer2 className="h-4 w-4" />
+          <MousePointer2 className="size-4" />
         ) : (
-          <CheckCheck className="h-4 w-4" />
+          <CheckCheck className="size-4" />
         )
       return (
         <Badge variant="outline" className="flex w-fit items-center gap-1">
@@ -82,7 +82,10 @@ export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
       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">
+            <Kbd
+              key={parameter.id}
+              className="bg-zinc-200 px-2 text-xs text-zinc-600 dark:bg-zinc-700/55 dark:text-zinc-400"
+            >
               {parameter.name}
             </Kbd>
           ))}

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

@@ -0,0 +1,27 @@
+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'
+
+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>

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

@@ -3,30 +3,21 @@ import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import { Blocks } from 'lucide-react'
 import React from 'react'
 import TemplateTestCaseForm from '../template-test-case-form'
-import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
-import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
 import { createTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
 import { Metadata } from 'next'
 
+import { loadCreateTemplateTestCasePageData } from '../create-template-test-case-page-data'
+
 export const metadata: Metadata = {
   title: 'Appraise | Create Template Test Case',
   description: 'Create a new template test case to quickly create test cases',
 }
 
 const CreateTemplateTestCase = async () => {
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+  const pageData = await loadCreateTemplateTestCasePageData()
 
-  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
-    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
+  if (pageData.status === 'error') {
+    return <div>Error: {pageData.message}</div>
   }
 
   return (
@@ -34,7 +25,7 @@ const CreateTemplateTestCase = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
+            <Blocks className="mr-2 size-8" />
             Create Template Test Case
           </span>
         </PageHeader>
@@ -42,10 +33,12 @@ const CreateTemplateTestCase = async () => {
       </div>
       <TemplateTestCaseForm
         defaultNodesOrder={{}}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
+        templateStepParams={pageData.templateStepParams}
+        templateSteps={pageData.templateSteps}
+        locators={pageData.locators}
+        locatorGroups={pageData.locatorGroups}
+        environments={pageData.environments}
+        modules={pageData.modules}
         onSubmitAction={createTemplateTestCaseAction}
         defaultValueInput={true}
       />

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

@@ -0,0 +1,81 @@
+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 { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+
+import { loadCreateTemplateTestCasePageData } from './create-template-test-case-page-data'
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepParamsAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/locator/locator-actions', () => ({
+  getAllLocatorsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/locator-groups/locator-group-actions', () => ({
+  getAllLocatorGroupsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/environments/environment-actions', () => ({
+  getAllEnvironmentsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/modules/module-actions', () => ({
+  getAllModulesAction: vi.fn(),
+}))
+
+const getAllTemplateStepParamsActionMock = vi.mocked(getAllTemplateStepParamsAction)
+const getAllTemplateStepsActionMock = vi.mocked(getAllTemplateStepsAction)
+const getAllLocatorsActionMock = vi.mocked(getAllLocatorsAction)
+const getAllLocatorGroupsActionMock = vi.mocked(getAllLocatorGroupsAction)
+const getAllEnvironmentsActionMock = vi.mocked(getAllEnvironmentsAction)
+const getAllModulesActionMock = vi.mocked(getAllModulesAction)
+
+describe('loadCreateTemplateTestCasePageData', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns error when template step params fail to load', async () => {
+    getAllTemplateStepParamsActionMock.mockResolvedValue({ data: null, error: 'params failed' })
+
+    await expect(loadCreateTemplateTestCasePageData()).resolves.toEqual({
+      status: 'error',
+      message: 'params failed',
+    })
+  })
+
+  it('returns success when all requests succeed', async () => {
+    const templateStepParams = [{ id: 'param-1', name: 'url', type: 'STRING', templateStepId: 'step-1', order: 0 }]
+    const templateSteps = [{ id: 'step-1', name: 'Navigate', type: 'NAVIGATION', signature: 'navigate' }]
+    const locators = [{ id: 'loc-1', name: 'Submit', locatorGroupId: 'group-1' }]
+    const locatorGroups = [{ id: 'group-1', name: 'Checkout', route: '/checkout', moduleId: 'module-1' }]
+    const environments = [{ id: 'env-1', name: 'Staging' }]
+    const modules = [{ id: 'module-1', name: 'Shop', parentId: null }]
+
+    getAllTemplateStepParamsActionMock.mockResolvedValue({ data: templateStepParams, error: null })
+    getAllTemplateStepsActionMock.mockResolvedValue({ data: templateSteps, error: null })
+    getAllLocatorsActionMock.mockResolvedValue({ data: locators, error: null })
+    getAllLocatorGroupsActionMock.mockResolvedValue({ data: locatorGroups, error: null })
+    getAllEnvironmentsActionMock.mockResolvedValue({ data: environments, error: null })
+    getAllModulesActionMock.mockResolvedValue({ data: modules, error: null })
+
+    await expect(loadCreateTemplateTestCasePageData()).resolves.toEqual({
+      status: 'success',
+      templateStepParams,
+      templateSteps,
+      locators,
+      locatorGroups,
+      environments,
+      modules,
+    })
+  })
+})

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

@@ -0,0 +1,57 @@
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import type { Environment, Locator, LocatorGroup, Module, TemplateStep, TemplateStepParameter } from '@prisma/client'
+
+export type CreateTemplateTestCasePageData =
+  | { status: 'error'; message: string }
+  | {
+      status: 'success'
+      templateStepParams: TemplateStepParameter[]
+      templateSteps: TemplateStep[]
+      locators: Locator[]
+      locatorGroups: LocatorGroup[]
+      environments: Environment[]
+      modules: Module[]
+    }
+
+export async function loadCreateTemplateTestCasePageData(): Promise<CreateTemplateTestCasePageData> {
+  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
+
+  if (templateStepParamsError) {
+    return { status: 'error', message: templateStepParamsError }
+  }
+
+  const [
+    { data: templateSteps, error: templateStepsError },
+    { data: locators, error: locatorsError },
+    { data: locatorGroups, error: locatorGroupsError },
+    { data: environments, error: environmentsError },
+    { data: modules, error: modulesError },
+  ] = await Promise.all([
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllEnvironmentsAction(),
+    getAllModulesAction(),
+  ])
+
+  const secondaryError = templateStepsError || locatorsError || locatorGroupsError || environmentsError || modulesError
+
+  if (secondaryError) {
+    return { status: 'error', message: secondaryError }
+  }
+
+  return {
+    status: 'success',
+    templateStepParams: templateStepParams as TemplateStepParameter[],
+    templateSteps: templateSteps as TemplateStep[],
+    locators: locators as Locator[],
+    locatorGroups: locatorGroups as LocatorGroup[],
+    environments: environments as Environment[],
+    modules: modules as Module[],
+  }
+}