create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { TemplateStepGroupForm } from './template-step-group-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+describe('TemplateStepGroupForm', () => {
+  it('submits valid values and navigates back to the template step groups list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+    })
+
+    render(
+      <TemplateStepGroupForm
+        successTitle="Group created"
+        successMessage="Template step group created successfully"
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'API checks')
+    await user.type(screen.getByLabelText('Description'), 'Validations for API responses')
+    await user.click(screen.getByRole('combobox', { name: 'Type' }))
+    await user.click(screen.getByRole('option', { name: 'VALIDATION' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        {
+          name: 'API checks',
+          description: 'Validations for API responses',
+          type: 'VALIDATION',
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Group created',
+      description: 'Template step group created successfully',
+    })
+    expect(push).toHaveBeenCalledWith('/template-step-groups')
+  })
+
+  it('shows validation feedback when the name is too short and does not submit', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <TemplateStepGroupForm
+        successTitle="Group created"
+        successMessage="Template step group created successfully"
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'ab')
+
+    expect(screen.getByText('Name must be at least 3 characters')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+    expect(onSubmitAction).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,181 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import ErrorMessage from '@/components/form/error-message'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts, type TemplateStepGroup } from '@/constants/form-opts/template-step-group-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+import {
+  getActionErrorMessage,
+  templateStepGroupFieldValidators,
+  templateStepGroupTypes,
+  type TemplateStepGroupFormSubmitAction,
+  type TemplateStepGroupType,
+} from './template-step-group-helpers'
+
+type TemplateStepGroupFormProps = {
+  defaultValues?: TemplateStepGroup
+  successTitle: string
+  successMessage: string
+  id?: string
+  onSubmitAction: TemplateStepGroupFormSubmitAction
+}
+
+type TemplateStepGroupFieldErrorsProps = {
+  errors: unknown[]
+  isTouched: boolean
+}
+
+function getErrorMessage(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)
+}
+
+function TemplateStepGroupFieldErrors({ errors, isTouched }: TemplateStepGroupFieldErrorsProps) {
+  if (!isTouched) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-1" aria-live="polite">
+      {errors.map((error, index) => (
+        <ErrorMessage key={`${String(error)}-${index}`} message={getErrorMessage(error)} visible={true} />
+      ))}
+    </div>
+  )
+}
+
+export const TemplateStepGroupForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+}: TemplateStepGroupFormProps) => {
+  const router = useRouter()
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts.defaultValues,
+    validators: formOpts.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/template-step-groups')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: templateStepGroupFieldValidators.name,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+              />
+              <TemplateStepGroupFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field name="description">
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Description</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+              />
+              <TemplateStepGroupFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="type"
+        validators={{
+          onChange: templateStepGroupFieldValidators.type,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Type</Label>
+              <Select
+                onValueChange={value => {
+                  field.handleChange(value as TemplateStepGroupType)
+                }}
+                value={field.state.value}
+              >
+                <SelectTrigger id={field.name}>
+                  <SelectValue placeholder="Select a type" />
+                </SelectTrigger>
+                <SelectContent>
+                  {templateStepGroupTypes.map(type => (
+                    <SelectItem key={type} value={type}>
+                      {type}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <TemplateStepGroupFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}

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

@@ -0,0 +1,54 @@
+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
+
+export type TemplateStepGroupType = (typeof templateStepGroupTypes)[number]
+
+export type TemplateStepGroupTableRow = {
+  id: string
+  name: string
+  description: string | null
+  type: TemplateStepGroupType
+  createdAt: Date
+  updatedAt: Date
+}
+
+export type TemplateStepGroupFormSubmitAction = (
+  _prev: unknown,
+  value: TemplateStepGroupFormValues,
+  id?: string,
+) => Promise<ActionResponse>
+
+export const templateStepGroupFieldValidators = {
+  name: templateStepGroupSchema.shape.name,
+  description: templateStepGroupSchema.shape.description,
+  type: templateStepGroupSchema.shape.type,
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save template step group.'
+}
+
+function isTemplateStepGroupRow(value: unknown): value is TemplateStepGroupTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string' &&
+    'description' in value &&
+    (typeof value.description === 'string' || value.description === null) &&
+    'type' in value &&
+    (value.type === 'ACTION' || value.type === 'VALIDATION') &&
+    'createdAt' in value &&
+    value.createdAt instanceof Date &&
+    'updatedAt' in value &&
+    value.updatedAt instanceof Date
+  )
+}
+
+export function getTemplateStepGroupRows(data: ActionResponseData | undefined): TemplateStepGroupTableRow[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepGroupRow) : []
+}

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

@@ -0,0 +1,89 @@
+'use client'
+
+import { deleteTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import TableActions from '@/components/table/table-actions'
+import { formatDateTime } from '@/lib/utils'
+import { CheckCheck, MousePointer2 } from 'lucide-react'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { type TemplateStepGroupTableRow } from './template-step-group-helpers'
+
+export const templateStepGroupTableCols: ColumnDef<TemplateStepGroupTableRow>[] = [
+  {
+    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: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => {
+      const templateStepGroup = row.original
+      const icon =
+        templateStepGroup.type === '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}
+          {templateStepGroup.type.charAt(0).toUpperCase() + templateStepGroup.type.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    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 templateStepGroup = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-step-groups/modify/${templateStepGroup.id}`}
+          deleteHandler={() => deleteTemplateStepGroupAction([templateStepGroup.id])}
+        />
+      )
+    },
+  },
+]

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

@@ -0,0 +1,34 @@
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { templateStepGroupTableCols } from './template-step-group-table-columns'
+import {
+  getAllTemplateStepGroupsAction,
+  deleteTemplateStepGroupAction,
+} from '@/actions/template-step-group/template-step-group-actions'
+import { getTemplateStepGroupRows } from './template-step-group-helpers'
+
+const TemplateStepGroupTable = async () => {
+  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
+
+  if (templateStepGroupsError) {
+    return <div>Error: {templateStepGroupsError}</div>
+  }
+
+  const templateStepGroupRows = getTemplateStepGroupRows(templateStepGroups)
+
+  return (
+    <>
+      <DataTable
+        columns={templateStepGroupTableCols}
+        data={templateStepGroupRows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-step-groups/create"
+        modifyLink="/template-step-groups/modify"
+        deleteAction={deleteTemplateStepGroupAction}
+      />
+    </>
+  )
+}
+
+export default TemplateStepGroupTable

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { TemplateStepForm } from '../template-step-form'
+import { createTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Metadata } from 'next'
+
+import { getTemplateStepGroupRows } from '../template-step-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Step',
+  description: 'Create a new template step to be used in test cases',
+}
+
+const CreateTemplateStep = async () => {
+  const response = await getAllTemplateStepGroupsAction()
+  const templateStepGroups = getTemplateStepGroupRows(response.data)
+
+  if (response.error) {
+    return <div>Error: {response.error}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Template Step</PageHeader>
+        <HeaderSubtitle>Create a new template step to be used in test cases</HeaderSubtitle>
+      </div>
+      <TemplateStepForm
+        successTitle="Template Step Created"
+        successMessage="The template step has been created successfully"
+        onSubmitAction={createTemplateStepAction}
+        templateStepGroups={templateStepGroups}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateStep

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

@@ -0,0 +1,54 @@
+import { updateTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { getTemplateStepByIdAction } from '@/actions/template-step/template-step-actions'
+import { TemplateStepForm } from '../../template-step-form'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Metadata } from 'next'
+
+import { getEditableTemplateStep, getTemplateStepGroupRows } from '../../template-step-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Step',
+  description: 'Update template step configuration',
+}
+
+export default async function ModifyTemplateStepPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const [templateStepResponse, templateStepGroupsResponse] = await Promise.all([
+    getTemplateStepByIdAction(id),
+    getAllTemplateStepGroupsAction(),
+  ])
+
+  if (templateStepResponse.error || templateStepGroupsResponse.error) {
+    return <div>Error: {templateStepResponse.error || templateStepGroupsResponse.error}</div>
+  }
+
+  const templateStep = getEditableTemplateStep(templateStepResponse.data)
+  const templateStepGroups = getTemplateStepGroupRows(templateStepGroupsResponse.data)
+  if (!templateStep) {
+    return <div>Error: Invalid template step</div>
+  }
+  return (
+    <TemplateStepForm
+      successTitle="Template step modified"
+      successMessage="The template step has been modified"
+      onSubmitAction={updateTemplateStepAction}
+      defaultValues={{
+        name: templateStep.name,
+        type: templateStep.type,
+        signature: templateStep.signature,
+        icon: templateStep.icon,
+        description: templateStep.description || '',
+        functionDefinition: templateStep.functionDefinition || '',
+        params: templateStep.parameters.map(param => ({
+          id: param.id,
+          name: param.name,
+          type: param.type,
+          order: param.order,
+        })),
+        templateStepGroupId: templateStep.templateStepGroupId || '',
+      }}
+      id={id}
+      templateStepGroups={templateStepGroups}
+    />
+  )
+}

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

@@ -0,0 +1,59 @@
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+import TemplateStepTable from './template-step-table'
+import { LayoutTemplate } from 'lucide-react'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Metadata } from 'next'
+
+import { getTemplateStepRows } from './template-step-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Template Steps',
+  description: 'Manage template steps for reusable test steps',
+}
+
+const TemplateSteps = async () => {
+  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
+
+  if (templateStepsError) {
+    return <div>Error: {templateStepsError}</div>
+  }
+
+  const templateStepsData = getTemplateStepRows(templateSteps)
+
+  if (!templateStepsData || templateStepsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<LayoutTemplate className="h-8 w-8" />}
+          title="No template steps found"
+          description="Get started by creating a template step to define reusable test steps"
+          createRoute="/template-steps/create"
+          createText="Create Template Step"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <LayoutTemplate className="mr-2 h-8 w-8" />
+            Template Steps
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Define reusable test steps for consistent and efficient test authoring</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TemplateStepTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TemplateSteps