create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/blank/src/app/(base)/test-suites/test-suite-form.test.tsx

@@ -2,7 +2,7 @@
 
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { TestSuiteForm } from './test-suite-form'
 
@@ -81,8 +81,22 @@ vi.mock('@/components/ui/select', async () => {
   }
 })
 
+async function fillAndSubmitForm(user: ReturnType<typeof userEvent.setup>) {
+  await user.type(screen.getByLabelText('Name'), 'Smoke Suite')
+  await user.type(screen.getByLabelText('Description'), 'Important tests')
+  await user.click(screen.getByRole('button', { name: 'Select Cases' }))
+  await user.selectOptions(screen.getByRole('combobox', { name: 'Module' }), 'module-1')
+  await user.click(screen.getByRole('button', { name: 'Select Tags' }))
+  await user.click(screen.getByRole('button', { name: 'Save' }))
+}
+
 describe('TestSuiteForm', () => {
-  it('submits valid values and navigates back to the suites list', async () => {
+  beforeEach(() => {
+    push.mockReset()
+    toast.mockReset()
+  })
+
+  it('submits valid values and navigates back to the suites list in page mode', async () => {
     const user = userEvent.setup()
     const onSubmitAction = vi.fn().mockResolvedValue({ status: 200 })
 
@@ -97,12 +111,7 @@ describe('TestSuiteForm', () => {
       />,
     )
 
-    await user.type(screen.getByLabelText('Name'), 'Smoke Suite')
-    await user.type(screen.getByLabelText('Description'), 'Important tests')
-    await user.click(screen.getByRole('button', { name: 'Select Cases' }))
-    await user.selectOptions(screen.getByRole('combobox', { name: 'Module' }), 'module-1')
-    await user.click(screen.getByRole('button', { name: 'Select Tags' }))
-    await user.click(screen.getByRole('button', { name: 'Save' }))
+    await fillAndSubmitForm(user)
 
     await waitFor(() => {
       expect(onSubmitAction).toHaveBeenCalledWith(
@@ -124,4 +133,44 @@ describe('TestSuiteForm', () => {
     })
     expect(push).toHaveBeenCalledWith('/test-suites')
   })
+
+  it('does not redirect and calls onSuccess with created suite data in dialog mode', async () => {
+    const user = userEvent.setup()
+    const onSuccess = vi.fn()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+      data: {
+        id: 'suite-2',
+        name: 'Inline Suite',
+      },
+    })
+
+    render(
+      <TestSuiteForm
+        successTitle="Suite created"
+        successMessage="Test suite created successfully"
+        onSubmitAction={onSubmitAction}
+        onSuccess={onSuccess}
+        redirectPath={null}
+        testCases={[]}
+        moduleList={[{ id: 'module-1', name: 'Payments' } as never]}
+        tags={[{ id: 'tag-1', name: 'smoke' } as never]}
+      />,
+    )
+
+    await fillAndSubmitForm(user)
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledWith({
+        id: 'suite-2',
+        name: 'Inline Suite',
+      })
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Suite created',
+      description: 'Test suite created successfully',
+    })
+    expect(push).not.toHaveBeenCalled()
+  })
 })

package/templates/blank/src/app/(base)/test-suites/test-suite-form.tsx

@@ -7,11 +7,12 @@ import { Label } from '@/components/ui/label'
 import MultiSelectWithPreview from '@/components/ui/multi-select-with-preview'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
-import { formOpts, type TestSuite } from '@/constants/form-opts/test-suite-form-opts'
+import { testSuiteFormOpts, type TestSuite } from '@/constants/form-opts/test-suite-form-opts'
 import { toast } from '@/hooks/use-toast'
 import type { TestCasePickerRow } from '@/types/test-case-picker'
-import type { Module, Tag } from '@prisma/client'
+import type { Module, Tag, TestSuite as PrismaTestSuite } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import { Info, Save } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 
@@ -19,6 +20,7 @@ import TestCasePicker from '@/components/test-case/test-case-picker'
 
 import {
   getActionErrorMessage,
+  getCreatedTestSuite,
   getFieldErrorMessage,
   getModuleOptions,
   getTagOptions,
@@ -36,6 +38,8 @@ export const TestSuiteForm = ({
   testCases,
   moduleList,
   tags,
+  onSuccess,
+  redirectPath = '/test-suites',
 }: {
   defaultValues?: TestSuite
   successTitle: string
@@ -45,19 +49,38 @@ export const TestSuiteForm = ({
   testCases: TestCasePickerRow[]
   moduleList: Module[]
   tags: Tag[]
+  onSuccess?: (suite: PrismaTestSuite) => void | Promise<void>
+  redirectPath?: string | null
 }) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
+    defaultValues: defaultValues ?? testSuiteFormOpts.defaultValues,
+    validators: testSuiteFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
+        if (onSuccess) {
+          const createdTestSuite = getCreatedTestSuite(res.data)
+          if (!createdTestSuite) {
+            toast({
+              title: 'Error',
+              description: 'Created test suite data was not returned.',
+              variant: 'destructive',
+            })
+            return
+          }
+
+          await onSuccess(createdTestSuite)
+        }
+
         toast({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/test-suites')
+
+        if (redirectPath) {
+          push(redirectPath)
+        }
       }
       if (res.status === 400) {
         toast({
@@ -77,26 +100,20 @@ export const TestSuiteForm = ({
   })
   const moduleOptions = getModuleOptions(moduleList)
   const tagOptions = getTagOptions(tags)
-  const renderError = (error: unknown, index: number) => (
-    <p key={index} className="text-xs text-pink-500">
+  const renderError = (error: unknown) => (
+    <p key={getFieldErrorMessage(error)} className="text-xs text-pink-500">
       {getFieldErrorMessage(error)}
     </p>
   )
   return (
     <div className="flex justify-between gap-20 overflow-x-hidden">
-      <Card className="w-2/3 border-gray-700 bg-gray-500/10">
+      <Card className="w-2/3 border-zinc-700 bg-zinc-500/10">
         <CardHeader>
           <CardTitle className="text-xl font-bold text-primary">Test Suite Details</CardTitle>
           <CardDescription>Enter the details for your test suite</CardDescription>
         </CardHeader>
         <CardContent>
-          <form
-            onSubmit={e => {
-              e.preventDefault()
-              e.stopPropagation()
-              form.handleSubmit()
-            }}
-          >
+          <TanStackForm onSubmit={() => form.handleSubmit()}>
             <form.Field
               name="name"
               validators={{
@@ -213,26 +230,26 @@ export const TestSuiteForm = ({
             <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
               {([canSubmit, isSubmitting]) => (
                 <Button type="submit" disabled={!canSubmit} className="hover:bg-emerald-500">
-                  <Save className="h-4 w-4" />
+                  <Save className="size-4" />
                   <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
                 </Button>
               )}
             </form.Subscribe>
-          </form>
+          </TanStackForm>
         </CardContent>
       </Card>
       <div className="lg:w-1/3">
-        <Card className="border-gray-700 bg-gray-500/10">
+        <Card className="border-zinc-700 bg-zinc-500/10">
           <CardHeader className="mb-2">
             <CardTitle className="flex items-center gap-2 text-xl text-primary">
-              <Info className="h-5 w-5" />
+              <Info className="size-5" />
               <span className="font-bold">Quick Tips</span>
             </CardTitle>
           </CardHeader>
           <CardContent className="flex flex-col gap-6">
             {testSuiteQuickTips.map((tip, index) => (
               <div key={tip.title} className="flex items-start gap-4">
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                <span className="flex size-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
                   {index + 1}
                 </span>
                 <div className="flex flex-col gap-1">

package/templates/blank/src/app/(base)/test-suites/test-suite-helpers.ts

@@ -1,215 +1,25 @@
-import type { Module, Tag, TestCase, TestSuite as PrismaTestSuite } from '@prisma/client'
-
-import { testSuiteSchema, type TestSuite } from '@/constants/form-opts/test-suite-form-opts'
-import { getFilterTags } from '@/lib/tag-utils'
-import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
-import type { TestCasePickerRow } from '@/types/test-case-picker'
-
-export type TestSuiteTableRow = PrismaTestSuite & {
-  tags?: Tag[]
-  module: Module
-  testCases: TestCase[]
-}
-
-export type EditableTestSuite = PrismaTestSuite & {
-  testCases: TestCase[]
-  module: Module
-  tags: Tag[]
-}
-
-export type TestSuiteGroupOption = {
-  id: string
-  name: string
-}
-
-export type TestSuiteFormSubmitAction = (_prev: unknown, value: TestSuite, id?: string) => Promise<ActionResponse>
-
-export const testSuiteFieldValidators = {
-  name: testSuiteSchema.shape.name,
-  moduleId: testSuiteSchema.shape.moduleId,
-}
-
-export const testSuiteQuickTips = [
-  {
-    title: 'Choose a descriptive name',
-    description: 'Use clear, specific names that indicate the purpose',
-  },
-  {
-    title: 'Group related tests',
-    description: 'Organize tests that validate the same feature together',
-  },
-  {
-    title: 'Use meaningful tags',
-    description: 'Tags help filter and categorize effectively',
-  },
-] as const
-
-export type TestSuiteInfoCard = {
-  showHighlightGroup: boolean
-  highlight: string
-  legend: string
-  defaultText: string
-}
-
-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 getModuleOptions(modules: Module[]) {
-  return modules.map(module => ({
-    label: module.name,
-    value: module.id,
-  }))
-}
-
-export function getTagOptions(tags: Tag[]) {
-  return tags.map(tag => ({
-    label: tag.name,
-    value: tag.id,
-  }))
-}
-
-function isNamedRow(value: unknown): value is { id: string; name: string } {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isTagRow(value: unknown): value is Tag {
-  return isNamedRow(value)
-}
-
-function isTestCaseRow(value: unknown): value is TestCase {
-  return typeof value === 'object' && value !== null && 'id' in value && 'title' in value
-}
-
-function isTestSuitePickerRow(value: unknown): value is TestCasePickerRow {
-  return (
-    isTestCaseRow(value) &&
-    'steps' in value &&
-    Array.isArray(value.steps) &&
-    'tags' in value &&
-    Array.isArray(value.tags) &&
-    value.tags.every(isTagRow)
-  )
-}
-
-function isModuleRow(value: unknown): value is Module {
-  return isNamedRow(value)
-}
-
-function isTestSuiteTableRow(value: unknown): value is TestSuiteTableRow {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'name' in value &&
-    'module' in value &&
-    isModuleRow(value.module) &&
-    'testCases' in value &&
-    Array.isArray(value.testCases) &&
-    value.testCases.every(isTestCaseRow) &&
-    (!('tags' in value) || value.tags === undefined || (Array.isArray(value.tags) && value.tags.every(isTagRow)))
-  )
-}
-
-function isEditableTestSuite(value: unknown): value is EditableTestSuite {
-  return (
-    isTestSuiteTableRow(value) &&
-    'tags' in value &&
-    Array.isArray(value.tags) &&
-    value.tags.every(isTagRow)
-  )
-}
-
-function isGroupOption(value: unknown): value is TestSuiteGroupOption {
-  return isNamedRow(value)
-}
-
-export function getTestCasePickerRows(data: ActionResponseData | undefined): TestCasePickerRow[] {
-  return Array.isArray(data) ? data.filter(isTestSuitePickerRow) : []
-}
-
-export function getModuleRows(data: ActionResponseData | undefined): Module[] {
-  return Array.isArray(data) ? data.filter(isModuleRow) : []
-}
-
-export function getTagRows(data: ActionResponseData | undefined): Tag[] {
-  return Array.isArray(data) ? data.filter(isTagRow) : []
-}
-
-export function getTestSuiteTableRows(data: ActionResponseData | undefined): TestSuiteTableRow[] {
-  return Array.isArray(data) ? data.filter(isTestSuiteTableRow) : []
-}
-
-export function buildTestSuiteInfoCards(testSuites: TestSuiteTableRow[]): TestSuiteInfoCard[] {
-  const emptyTestSuites = testSuites.filter(testSuite => testSuite.testCases.length === 0)
-  const latestCreatedTestSuite = [...testSuites].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0]
-  const tagSuiteCountMap = new Map<string, { name: string; suiteCount: number }>()
-
-  for (const testSuite of testSuites) {
-    for (const tag of getFilterTags(testSuite.tags || [])) {
-      const currentTag = tagSuiteCountMap.get(tag.id)
-
-      if (currentTag) {
-        currentTag.suiteCount += 1
-      } else {
-        tagSuiteCountMap.set(tag.id, {
-          name: tag.name,
-          suiteCount: 1,
-        })
-      }
-    }
-  }
-
-  const mostCommonTagWithSuites = [...tagSuiteCountMap.values()].sort((a, b) => {
-    if (b.suiteCount !== a.suiteCount) {
-      return b.suiteCount - a.suiteCount
-    }
-
-    return a.name.localeCompare(b.name)
-  })[0]
-
-  return [
-    {
-      showHighlightGroup: testSuites.length > 0,
-      highlight: emptyTestSuites.length.toString(),
-      legend: 'Empty test suite(s)',
-      defaultText: 'Empty test suites count. Will update when test suites are created.',
-    },
-    {
-      showHighlightGroup: testSuites.length > 0,
-      highlight: latestCreatedTestSuite ? latestCreatedTestSuite.name : 'N/A',
-      legend: 'Latest test suite',
-      defaultText: 'Latest created test suite. Will update when test suites are created.',
-    },
-    ...(mostCommonTagWithSuites
-      ? [
-          {
-            showHighlightGroup: true,
-            highlight: mostCommonTagWithSuites.name,
-            legend: 'Most common tag',
-            defaultText: 'Most common suite tag will appear here when test suites have tags.',
-          },
-        ]
-      : []),
-  ]
-}
-
-export function getEditableTestSuite(data: ActionResponseData | undefined) {
-  return isEditableTestSuite(data) ? data : null
-}
-
-export function getTemplateStepGroupRows(data: ActionResponseData | undefined): TestSuiteGroupOption[] {
-  return Array.isArray(data) ? data.filter(isGroupOption) : []
-}
+export {
+  getActionErrorMessage,
+  getFieldErrorMessage,
+  getModuleOptions,
+  getTagOptions,
+  testSuiteFieldValidators,
+  testSuiteQuickTips,
+} from './test-suite-form-display-helpers'
+export {
+  getCreatedTestSuite,
+  getModuleRows,
+  getTagRows,
+  getTemplateStepGroupRows,
+  getTestCasePickerRows,
+  getTestSuiteTableRows,
+} from './test-suite-row-guards'
+export { getEditableTestSuite } from './editable-test-suite-helpers'
+export { buildTestSuiteInfoCards } from './test-suite-table-helpers'
+export type {
+  EditableTestSuite,
+  TestSuiteFormSubmitAction,
+  TestSuiteGroupOption,
+  TestSuiteInfoCard,
+  TestSuiteTableRow,
+} from './test-suite-types'

package/templates/blank/src/app/(base)/test-suites/test-suite-row-guards.ts

@@ -0,0 +1,80 @@
+import type { Module, Tag, TestCase, TestSuite as PrismaTestSuite } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+
+import type { TestSuiteGroupOption, TestSuiteTableRow } from './test-suite-types'
+
+export function isCreatedTestSuite(value: unknown): value is PrismaTestSuite {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isNamedRow(value: unknown): value is { id: string; name: string } {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+export function isTagRow(value: unknown): value is Tag {
+  return isNamedRow(value)
+}
+
+function isTestCaseRow(value: unknown): value is TestCase {
+  return typeof value === 'object' && value !== null && 'id' in value && 'title' in value
+}
+
+function isTestSuitePickerRow(value: unknown): value is TestCasePickerRow {
+  return (
+    isTestCaseRow(value) &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    'tags' in value &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow)
+  )
+}
+
+export function isModuleRow(value: unknown): value is Module {
+  return isNamedRow(value)
+}
+
+export function isTestSuiteTableRow(value: unknown): value is TestSuiteTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value &&
+    'module' in value &&
+    isModuleRow(value.module) &&
+    'testCases' in value &&
+    Array.isArray(value.testCases) &&
+    value.testCases.every(isTestCaseRow) &&
+    (!('tags' in value) || value.tags === undefined || (Array.isArray(value.tags) && value.tags.every(isTagRow)))
+  )
+}
+
+function isGroupOption(value: unknown): value is TestSuiteGroupOption {
+  return isNamedRow(value)
+}
+
+export function getTestCasePickerRows(data: ActionResponseData | undefined): TestCasePickerRow[] {
+  return Array.isArray(data) ? data.filter(isTestSuitePickerRow) : []
+}
+
+export function getModuleRows(data: ActionResponseData | undefined): Module[] {
+  return Array.isArray(data) ? data.filter(isModuleRow) : []
+}
+
+export function getTagRows(data: ActionResponseData | undefined): Tag[] {
+  return Array.isArray(data) ? data.filter(isTagRow) : []
+}
+
+export function getCreatedTestSuite(data: ActionResponseData | undefined) {
+  return isCreatedTestSuite(data) ? data : null
+}
+
+export function getTestSuiteTableRows(data: ActionResponseData | undefined): TestSuiteTableRow[] {
+  return Array.isArray(data) ? data.filter(isTestSuiteTableRow) : []
+}
+
+export function getTemplateStepGroupRows(data: ActionResponseData | undefined): TestSuiteGroupOption[] {
+  return Array.isArray(data) ? data.filter(isGroupOption) : []
+}

package/templates/blank/src/app/(base)/test-suites/test-suite-table-columns.tsx

@@ -9,7 +9,7 @@ import TableActions from '@/components/table/table-actions'
 import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
 import { formatDateTime } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
-import { getFilterTags } from '@/lib/tag-utils'
+import { getFilterTags } from '@/lib/tag-filters'
 export const testSuiteTableCols: ColumnDef<TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] }>[] = [
   {
     id: 'select',

package/templates/blank/src/app/(base)/test-suites/test-suite-table-helpers.ts

@@ -0,0 +1,57 @@
+import { getFilterTags } from '@/lib/tag-filters'
+
+import type { TestSuiteInfoCard, TestSuiteTableRow } from './test-suite-types'
+
+export function buildTestSuiteInfoCards(testSuites: TestSuiteTableRow[]): TestSuiteInfoCard[] {
+  const emptyTestSuites = testSuites.filter(testSuite => testSuite.testCases.length === 0)
+  const latestCreatedTestSuite = [...testSuites].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0]
+  const tagSuiteCountMap = new Map<string, { name: string; suiteCount: number }>()
+
+  for (const testSuite of testSuites) {
+    for (const tag of getFilterTags(testSuite.tags || [])) {
+      const currentTag = tagSuiteCountMap.get(tag.id)
+
+      if (currentTag) {
+        currentTag.suiteCount += 1
+      } else {
+        tagSuiteCountMap.set(tag.id, {
+          name: tag.name,
+          suiteCount: 1,
+        })
+      }
+    }
+  }
+
+  const mostCommonTagWithSuites = [...tagSuiteCountMap.values()].sort((a, b) => {
+    if (b.suiteCount !== a.suiteCount) {
+      return b.suiteCount - a.suiteCount
+    }
+
+    return a.name.localeCompare(b.name)
+  })[0]
+
+  return [
+    {
+      showHighlightGroup: testSuites.length > 0,
+      highlight: emptyTestSuites.length.toString(),
+      legend: 'Empty test suite(s)',
+      defaultText: 'Empty test suites count. Will update when test suites are created.',
+    },
+    {
+      showHighlightGroup: testSuites.length > 0,
+      highlight: latestCreatedTestSuite ? latestCreatedTestSuite.name : 'N/A',
+      legend: 'Latest test suite',
+      defaultText: 'Latest created test suite. Will update when test suites are created.',
+    },
+    ...(mostCommonTagWithSuites
+      ? [
+          {
+            showHighlightGroup: true,
+            highlight: mostCommonTagWithSuites.name,
+            legend: 'Most common tag',
+            defaultText: 'Most common suite tag will appear here when test suites have tags.',
+          },
+        ]
+      : []),
+  ]
+}

package/templates/blank/src/app/(base)/test-suites/test-suite-types.ts

@@ -0,0 +1,30 @@
+import type { Module, Tag, TestCase, TestSuite as PrismaTestSuite } from '@prisma/client'
+
+import type { TestSuite } from '@/constants/form-opts/test-suite-form-opts'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+export type TestSuiteTableRow = PrismaTestSuite & {
+  tags?: Tag[]
+  module: Module
+  testCases: TestCase[]
+}
+
+export type EditableTestSuite = PrismaTestSuite & {
+  testCases: TestCase[]
+  module: Module
+  tags: Tag[]
+}
+
+export type TestSuiteGroupOption = {
+  id: string
+  name: string
+}
+
+export type TestSuiteFormSubmitAction = (_prev: unknown, value: TestSuite, id?: string) => Promise<ActionResponse>
+
+export type TestSuiteInfoCard = {
+  showHighlightGroup: boolean
+  highlight: string
+  legend: string
+  defaultText: string
+}