create-appraisejs 0.2.0 → 0.3.0-alpha.0

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

@@ -1,22 +1,31 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
-import TestCasePicker from '@/components/test-case/test-case-picker'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 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, TestSuite } from '@/constants/form-opts/test-suite-form-opts'
+import { formOpts, type TestSuite } from '@/constants/form-opts/test-suite-form-opts'
 import { toast } from '@/hooks/use-toast'
-import { TestCasePickerRow } from '@/types/test-case-picker'
-import { ActionResponse } from '@/types/form/actionHandler'
-import { Module, Tag } from '@prisma/client'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+import type { Module, Tag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
 import { Info, Save } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { z } from 'zod'
+
+import TestCasePicker from '@/components/test-case/test-case-picker'
+
+import {
+  getActionErrorMessage,
+  getFieldErrorMessage,
+  getModuleOptions,
+  getTagOptions,
+  testSuiteFieldValidators,
+  testSuiteQuickTips,
+  type TestSuiteFormSubmitAction,
+} from './test-suite-helpers'
 
 export const TestSuiteForm = ({
   defaultValues,
@@ -32,7 +41,7 @@ export const TestSuiteForm = ({
   successTitle: string
   successMessage: string
   id?: string
-  onSubmitAction: (_prev: unknown, value: TestSuite, id?: string) => Promise<ActionResponse>
+  onSubmitAction: TestSuiteFormSubmitAction
   testCases: TestCasePickerRow[]
   moduleList: Module[]
   tags: Tag[]
@@ -53,19 +62,26 @@ export const TestSuiteForm = ({
       if (res.status === 400) {
         toast({
           title: 'Error',
-          description: res.error,
+          description: getActionErrorMessage(res),
           variant: 'destructive',
         })
       }
       if (res.status === 500) {
         toast({
           title: 'Error',
-          description: res.error,
+          description: getActionErrorMessage(res),
           variant: 'destructive',
         })
       }
     },
   })
+  const moduleOptions = getModuleOptions(moduleList)
+  const tagOptions = getTagOptions(tags)
+  const renderError = (error: unknown, index: number) => (
+    <p key={index} 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">
@@ -84,7 +100,7 @@ export const TestSuiteForm = ({
             <form.Field
               name="name"
               validators={{
-                onChange: z.string().min(3, { message: 'Name must be at least 3 characters' }),
+                onChange: testSuiteFieldValidators.name,
               }}
             >
               {field => {
@@ -101,11 +117,7 @@ export const TestSuiteForm = ({
                       onChange={e => field.handleChange(e.target.value)}
                       placeholder="Enter name for your test suite"
                     />
-                    {field.state.meta.errors.map((error, index) => (
-                      <p key={index} className="text-xs text-pink-500">
-                        {typeof error === 'string' ? error : error?.message || String(error)}
-                      </p>
-                    ))}
+                    {field.state.meta.errors.map(renderError)}
                   </div>
                 )
               }}
@@ -125,11 +137,7 @@ export const TestSuiteForm = ({
                       onChange={e => field.handleChange(e.target.value)}
                       placeholder="Enter description for your test suite"
                     />
-                    {field.state.meta.errors.map((error, index) => (
-                      <p key={index} className="text-xs text-pink-500">
-                        {typeof error === 'string' ? error : error?.message || String(error)}
-                      </p>
-                    ))}
+                    {field.state.meta.errors.map(renderError)}
                   </div>
                 )
               }}
@@ -150,11 +158,7 @@ export const TestSuiteForm = ({
                       dialogDescription="Search and select the test cases to include in this suite."
                       selectedLabel="Selected test case(s)"
                     />
-                    {field.state.meta.errors.map((error, index) => (
-                      <p key={index} className="text-xs text-pink-500">
-                        {typeof error === 'string' ? error : error?.message || String(error)}
-                      </p>
-                    ))}
+                    {field.state.meta.errors.map(renderError)}
                   </div>
                 )
               }}
@@ -167,27 +171,24 @@ export const TestSuiteForm = ({
                       Module
                     </Label>
                     <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
-                      <SelectTrigger className="w-full bg-background">
+                      <SelectTrigger id={field.name} className="w-full bg-background">
                         <SelectValue placeholder="Select a module" />
                       </SelectTrigger>
-                      <SelectContent className="w-full" isEmpty={moduleList.length === 0}>
-                        {moduleList.map(module => (
-                          <SelectItem key={module.id} value={module.id}>
-                            {module.name}
+                      <SelectContent className="w-full" isEmpty={moduleOptions.length === 0}>
+                        {moduleOptions.map(moduleOption => (
+                          <SelectItem key={moduleOption.value} value={moduleOption.value}>
+                            {moduleOption.label}
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
+                    {field.state.meta.errors.map(renderError)}
                   </div>
                 )
               }}
             </form.Field>
             <form.Field name="tagIds">
               {field => {
-                const tagsOptions = tags.map(tag => ({
-                  value: tag.id,
-                  label: tag.name,
-                }))
                 return (
                   <div className="mb-6 flex flex-col gap-2">
                     <Label htmlFor={field.name} className="font-bold">
@@ -195,7 +196,7 @@ export const TestSuiteForm = ({
                     </Label>
                     <MultiSelectWithPreview
                       id={field.name}
-                      options={tagsOptions}
+                      options={tagOptions}
                       onSelectChange={value => {
                         field.handleChange(value)
                       }}
@@ -229,37 +230,17 @@ export const TestSuiteForm = ({
             </CardTitle>
           </CardHeader>
           <CardContent className="flex flex-col gap-6">
-            <div 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">
-                1
-              </span>
-              <div className="flex flex-col gap-1">
-                <span className="text-base font-bold">Choose a descriptive name</span>
-                <span className="text-sm text-muted-foreground">
-                  Use clear, specific names that indicate the purpose
-                </span>
-              </div>
-            </div>
-            <div 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">
-                2
-              </span>
-              <div className="flex flex-col gap-1">
-                <span className="text-base font-bold">Group related tests</span>
-                <span className="text-sm text-muted-foreground">
-                  Organize tests that validate the same feature together
+            {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">
+                  {index + 1}
                 </span>
+                <div className="flex flex-col gap-1">
+                  <span className="text-base font-bold">{tip.title}</span>
+                  <span className="text-sm text-muted-foreground">{tip.description}</span>
+                </div>
               </div>
-            </div>
-            <div 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">
-                3
-              </span>
-              <div className="flex flex-col gap-1">
-                <span className="text-base font-bold">Use meaningful tags</span>
-                <span className="text-sm text-muted-foreground">Tags help filter and categorize effectively</span>
-              </div>
-            </div>
+            ))}
           </CardContent>
         </Card>
       </div>

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

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildTestSuiteInfoCards,
+  getEditableTestSuite,
+  getModuleOptions,
+  getTestCasePickerRows,
+  getTestSuiteTableRows,
+} from './test-suite-helpers'
+
+describe('test-suite helpers', () => {
+  it('formats module options and narrows test case picker rows', () => {
+    expect(getModuleOptions([{ id: 'module-1', name: 'Payments' } as never])).toEqual([
+      { label: 'Payments', value: 'module-1' },
+    ])
+
+    expect(
+      getTestCasePickerRows([
+        {
+          id: 'case-1',
+          title: 'Login',
+          steps: [],
+          tags: [{ id: 'tag-1', name: 'smoke' }],
+        },
+        {
+          id: 'broken',
+          title: 'Broken',
+          steps: [],
+          tags: ['bad'],
+        },
+      ]),
+    ).toEqual([
+      {
+        id: 'case-1',
+        title: 'Login',
+        steps: [],
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+      },
+    ])
+  })
+
+  it('narrows test suite table and editable rows', () => {
+    const tableRows = getTestSuiteTableRows([
+      {
+        id: 'suite-1',
+        name: 'Smoke',
+        module: { id: 'module-1', name: 'Payments' },
+        testCases: [{ id: 'case-1', title: 'Login' }],
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+      },
+    ])
+
+    expect(tableRows).toHaveLength(1)
+    expect(buildTestSuiteInfoCards(tableRows).map(card => card.legend)).toContain('Latest test suite')
+
+    expect(
+      getEditableTestSuite({
+        id: 'suite-1',
+        name: 'Smoke',
+        module: { id: 'module-1', name: 'Payments' },
+        moduleId: 'module-1',
+        testCases: [{ id: 'case-1', title: 'Login' }],
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+      }),
+    ).not.toBeNull()
+  })
+})

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

@@ -0,0 +1,215 @@
+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) : []
+}

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

@@ -1,29 +1,32 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { testSuiteTableCols } from './test-suite-table-columns'
-import { getAllTestSuitesAction, deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-import { Module, TestCase, TestSuite, Tag } from '@prisma/client'
-
-const TestSuiteTable = async () => {
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-
-  if (testSuitesError) {
-    return <div>Error: {testSuitesError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testSuiteTableCols}
-        data={testSuites as (TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/test-suites/create"
-        modifyLink="/test-suites/modify"
-        deleteAction={deleteTestSuiteAction}
-      />
-    </>
-  )
-}
-
-export default TestSuiteTable
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { testSuiteTableCols } from './test-suite-table-columns'
+import { getAllTestSuitesAction, deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+
+import { getTestSuiteTableRows } from './test-suite-helpers'
+
+const TestSuiteTable = async () => {
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+
+  if (testSuitesError) {
+    return <div>Error: {testSuitesError}</div>
+  }
+
+  const rows = getTestSuiteTableRows(testSuites)
+
+  return (
+    <>
+      <DataTable
+        columns={testSuiteTableCols}
+        data={rows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/test-suites/create"
+        modifyLink="/test-suites/modify"
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuiteTable