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

package/templates/default/src/app/(base)/test-cases/test-case-route-helpers.test.ts

@@ -0,0 +1,95 @@
+import { StepParameterType, TemplateStepIcon } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildNodeOrderFromTestCaseSteps,
+  getEditableTestCase,
+  getTestCaseRows,
+} from './test-case-route-helpers'
+
+describe('test-case route helpers', () => {
+  it('narrows test case list rows from action data', () => {
+    expect(
+      getTestCaseRows([
+        {
+          id: 'case-1',
+          title: 'Login flow',
+          steps: [],
+          tags: [{ id: 'tag-1', name: 'smoke' }],
+        },
+        {
+          id: 'broken-case',
+          title: 'Broken row',
+          steps: [],
+          tags: ['bad-tag'],
+        },
+      ]),
+    ).toEqual([
+      {
+        id: 'case-1',
+        title: 'Login flow',
+        steps: [],
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+      },
+    ])
+  })
+
+  it('narrows editable test cases and converts steps into node order', () => {
+    const editableTestCase = getEditableTestCase({
+      id: 'case-1',
+      title: 'Login flow',
+      description: 'Checks login',
+      testSuiteIds: ['suite-1'],
+      tagIds: ['tag-1'],
+      steps: [
+        {
+          id: 'step-1',
+          order: 1,
+          label: 'Fill email',
+          gherkinStep: 'fill email',
+          icon: TemplateStepIcon.INPUT,
+          templateStepId: 'template-step-1',
+          parameters: [
+            {
+              name: 'email',
+              value: 'qa@appraise.dev',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+        },
+      ],
+    })
+
+    expect(editableTestCase).not.toBeNull()
+    expect(buildNodeOrderFromTestCaseSteps(editableTestCase!.steps)).toEqual({
+      'step-1': {
+        order: 1,
+        label: 'Fill email',
+        gherkinStep: 'fill email',
+        icon: TemplateStepIcon.INPUT,
+        parameters: [
+          {
+            name: 'email',
+            value: 'qa@appraise.dev',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'template-step-1',
+      },
+    })
+  })
+
+  it('rejects malformed editable test case data', () => {
+    expect(
+      getEditableTestCase({
+        id: 'case-1',
+        title: 'Broken flow',
+        steps: [{ id: 'step-1', label: 'Missing params array' }],
+        testSuiteIds: ['suite-1'],
+        tagIds: ['tag-1'],
+      }),
+    ).toBeNull()
+  })
+})

package/templates/default/src/app/(base)/test-cases/test-case-route-helpers.ts

@@ -0,0 +1,147 @@
+import type {
+  Locator,
+  LocatorGroup,
+  Tag,
+  TestCase,
+  TestCaseStep,
+  TestCaseStepParameter,
+  TestSuite,
+  TemplateStep,
+  TemplateStepParameter,
+} from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+import type { NodeOrderMap } from '@/types/diagram/diagram'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+
+export type EditableTestCase = TestCase & {
+  steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
+  testSuiteIds: string[]
+  tagIds: string[]
+}
+
+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 isTestCaseStepParameterRow(value: unknown): value is TestCaseStepParameter {
+  return typeof value === 'object' && value !== null && 'name' in value && 'value' in value && 'type' in value
+}
+
+function isTestCaseStepRow(value: unknown): value is TestCaseStep & { parameters: TestCaseStepParameter[] } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'label' in value &&
+    'templateStepId' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTestCaseStepParameterRow)
+  )
+}
+
+function isTestCaseRow(value: unknown): value is TestCasePickerRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    'tags' in value &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow)
+  )
+}
+
+function isEditableTestCase(value: unknown): value is EditableTestCase {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    value.steps.every(isTestCaseStepRow) &&
+    'testSuiteIds' in value &&
+    Array.isArray(value.testSuiteIds) &&
+    'tagIds' in value &&
+    Array.isArray(value.tagIds)
+  )
+}
+
+function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
+  return typeof value === 'object' && value !== null && 'id' in value && 'templateStepId' in value
+}
+
+function isTemplateStepRow(value: unknown): value is TemplateStep {
+  return isNamedRow(value)
+}
+
+function isLocatorRow(value: unknown): value is Locator {
+  return isNamedRow(value)
+}
+
+function isTestSuiteRow(value: unknown): value is TestSuite {
+  return isNamedRow(value)
+}
+
+function isLocatorGroupRow(value: unknown): value is LocatorGroup {
+  return isNamedRow(value)
+}
+
+export function getTestCaseRows(data: ActionResponseData | undefined): TestCasePickerRow[] {
+  return Array.isArray(data) ? data.filter(isTestCaseRow) : []
+}
+
+export function getEditableTestCase(data: ActionResponseData | undefined) {
+  return isEditableTestCase(data) ? data : null
+}
+
+export function buildNodeOrderFromTestCaseSteps(steps: EditableTestCase['steps']): NodeOrderMap {
+  return steps.reduce<NodeOrderMap>((acc, step) => {
+    acc[step.id] = {
+      order: step.order,
+      label: step.label,
+      gherkinStep: step.gherkinStep,
+      icon: step.icon,
+      parameters: (step.parameters || []).map(parameter => ({
+        name: parameter.name,
+        value: parameter.value,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: step.templateStepId,
+    }
+    return acc
+  }, {})
+}
+
+export function getTemplateStepParamRows(data: ActionResponseData | undefined): TemplateStepParameter[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepParameterRow) : []
+}
+
+export function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStep[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepRow) : []
+}
+
+export function getLocatorRows(data: ActionResponseData | undefined): Locator[] {
+  return Array.isArray(data) ? data.filter(isLocatorRow) : []
+}
+
+export function getTestSuiteRows(data: ActionResponseData | undefined): TestSuite[] {
+  return Array.isArray(data) ? data.filter(isTestSuiteRow) : []
+}
+
+export function getLocatorGroupRows(data: ActionResponseData | undefined): LocatorGroup[] {
+  return Array.isArray(data) ? data.filter(isLocatorGroupRow) : []
+}
+
+export function getTagRows(data: ActionResponseData | undefined): Tag[] {
+  return Array.isArray(data) ? data.filter(isTagRow) : []
+}

package/templates/default/src/app/(base)/test-cases/test-case-table.tsx

@@ -1,17 +1,19 @@
 import { deleteTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
 import { DataTable } from '@/components/ui/data-table'
-import { TestCasePickerRow } from '@/types/test-case-picker'
 import { testCaseTableCols } from './test-case-table-columns'
 import { Cog, LayoutPanelTop } from 'lucide-react'
 
+import { getTestCaseRows } from './test-case-route-helpers'
+
 export default async function TestCaseTable() {
   const { data: testCases } = await getAllTestCasesAction()
+  const testCaseRows = getTestCaseRows(testCases)
 
   return (
     <>
       <DataTable
         columns={testCaseTableCols}
-        data={testCases as TestCasePickerRow[]}
+        data={testCaseRows}
         filterColumn="title"
         filterPlaceholder="Filter by title..."
         modifyLink="/test-cases/modify"

package/templates/default/src/app/(base)/test-runs/[id]/page.tsx

@@ -1,9 +1,9 @@
 import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
 import { TestRunDetails } from '@/components/test-run/test-run-details'
 import { TestRunHeader } from '@/components/test-run/test-run-header'
+import { getTestRunDetailsData } from '@/components/test-run/test-run-details-helpers'
 import { LogViewer } from '@/components/test-run/log-viewer'
 import { Separator } from '@/components/ui/separator'
-import { TestRun, TestRunTestCase, Tag, Environment, Report } from '@prisma/client'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -32,15 +32,16 @@ export default async function TestRunDetailPage({ params }: TestRunDetailPagePro
     )
   }
 
-  // TypeScript now knows response.data is defined
-  const testRun = response.data as TestRun & {
-    testCases: (TestRunTestCase & {
-      testCase: { title: string; description: string }
-      testSuite: { id: string; name: string } | null
-    })[]
-    tags: Tag[]
-    environment: Environment
-    reports: Report[]
+  const testRun = getTestRunDetailsData(response.data)
+  if (!testRun) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold">Test Run Not Found</h2>
+          <p className="mt-2 text-muted-foreground">The test run data could not be parsed.</p>
+        </div>
+      </div>
+    )
   }
 
   return (

package/templates/default/src/app/(base)/test-runs/create/page.tsx

@@ -1,14 +1,13 @@
 import { createTestRunAction } from '@/actions/test-run/test-run-actions'
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Environment, Tag } from '@prisma/client'
 import React from 'react'
 import TestRunForm from '../test-run-form'
 import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
 import { getAllTagsAction } from '@/actions/tags/tag-actions'
 import { Metadata } from 'next'
 import { getAllTestSuiteTestCasesAction } from '@/actions/test-run/test-run-actions'
-import { TestSuitePickerRow } from '@/types/test-suite-picker'
+import { getEnvironmentRows, getTagRows, getTestSuitePickerRows } from '../test-run-form-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Run',
@@ -24,9 +23,9 @@ const CreateTestRun = async () => {
     return <div>Error: {testSuitesError || environmentsError || tagsError}</div>
   }
 
-  const testSuitesData = testSuites as TestSuitePickerRow[]
-  const environmentsData = environments as Environment[]
-  const tagsData = tags as Tag[]
+  const testSuitesData = getTestSuitePickerRows(testSuites)
+  const environmentsData = getEnvironmentRows(environments)
+  const tagsData = getTagRows(tags)
 
   return (
     <>

package/templates/default/src/app/(base)/test-runs/page.tsx

@@ -1,60 +1,60 @@
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { ListChecks } from 'lucide-react'
-import React, { Suspense } from 'react'
-import TestRunTable from './test-run-table'
-import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { Environment, Tag, TestRun, TestRunTestCase } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Test Runs',
-  description: 'Manage test runs and their execution results',
-}
-
-const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
-  const resolvedSearchParams = await searchParams
-  const filter = resolvedSearchParams?.filter
-  const { data: testRuns, error: testRunsError } = await getAllTestRunsAction(filter)
-
-  if (testRunsError) {
-    return <div>Error: {testRunsError}</div>
-  }
-
-  const testRunsData = testRuns as (TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment })[]
-
-  if (!testRunsData || testRunsData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<ListChecks className="h-8 w-8" />}
-          title="No test runs found"
-          description="Get started by creating a test run to execute your test cases"
-          createRoute="/test-runs/create"
-          createText="Create Test Run"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <ListChecks className="mr-2 h-8 w-8" />
-            Test Runs
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Orchestrate tests and track the execution progress with detailed results</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestRunTable initialData={testRunsData} filter={filter as 'recentFailed' | 'all'} />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestRuns
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { ListChecks } from 'lucide-react'
+import React, { Suspense } from 'react'
+import TestRunTable from './test-run-table'
+import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Environment, Tag, TestRun, TestRunTestCase } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Runs',
+  description: 'Manage test runs and their execution results',
+}
+
+const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
+  const resolvedSearchParams = await searchParams
+  const filter = resolvedSearchParams?.filter
+  const { data: testRuns, error: testRunsError } = await getAllTestRunsAction(filter)
+
+  if (testRunsError) {
+    return <div>Error: {testRunsError}</div>
+  }
+
+  const testRunsData = testRuns as (TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment })[]
+
+  if (!testRunsData || testRunsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<ListChecks className="h-8 w-8" />}
+          title="No test runs found"
+          description="Get started by creating a test run to execute your test cases"
+          createRoute="/test-runs/create"
+          createText="Create Test Run"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <ListChecks className="mr-2 h-8 w-8" />
+            Test Runs
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Orchestrate tests and track the execution progress with detailed results</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestRunTable initialData={testRunsData} filter={filter as 'recentFailed' | 'all'} />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestRuns

package/templates/default/src/app/(base)/test-runs/test-run-form-helpers.test.ts

@@ -0,0 +1,50 @@
+import { BrowserEngine } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildTestRunSubmitValue,
+  getTestRunSuccessPath,
+  testSelectionTypes,
+  validateTagSelections,
+  validateTestSuiteSelections,
+} from './test-run-form-helpers'
+
+describe('test-run-form helpers', () => {
+  it('strips tags when the test suite selection mode is active', () => {
+    expect(
+      buildTestRunSubmitValue(
+        {
+          name: 'Nightly',
+          environmentId: 'env-1',
+          tags: ['tag-1'],
+          testWorkersCount: 1,
+          browserEngine: BrowserEngine.CHROMIUM,
+          testSuites: [{ testSuiteId: 'suite-1', runAll: true, testCaseIds: [] }],
+        },
+        testSelectionTypes.TEST_SUITES,
+      ),
+    ).toEqual({
+      name: 'Nightly',
+      environmentId: 'env-1',
+      tags: [],
+      testWorkersCount: 1,
+      browserEngine: BrowserEngine.CHROMIUM,
+      testSuites: [{ testSuiteId: 'suite-1', runAll: true, testCaseIds: [] }],
+    })
+  })
+
+  it('returns validation messages for empty tags and invalid partial suite selections', () => {
+    expect(validateTagSelections([], testSelectionTypes.TAGS)).toBe('Tags are required')
+    expect(
+      validateTestSuiteSelections(
+        [{ testSuiteId: 'suite-1', runAll: false, testCaseIds: [] }],
+        testSelectionTypes.TEST_SUITES,
+      ),
+    ).toBe('Partial suite selections must include at least one test case')
+  })
+
+  it('builds the success route from returned action data', () => {
+    expect(getTestRunSuccessPath({ id: 'run-1' })).toBe('/test-runs/run-1')
+    expect(getTestRunSuccessPath(undefined)).toBe('/test-runs')
+  })
+})

package/templates/default/src/app/(base)/test-runs/test-run-form-helpers.ts

@@ -0,0 +1,168 @@
+import { BrowserEngine, type Environment, type Tag } from '@prisma/client'
+
+import { testRunSchema, type TestRun } from '@/constants/form-opts/test-run-form-opts'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+
+export const testSelectionTypes = {
+  TAGS: 'tags',
+  TEST_SUITES: 'testSuites',
+} as const
+
+export type TestSelectionType = (typeof testSelectionTypes)[keyof typeof testSelectionTypes]
+
+export type TestRunFormSubmitAction = (_prev: unknown, value: TestRun, id?: string) => Promise<ActionResponse>
+
+export const testRunFieldValidators = {
+  name: testRunSchema.shape.name,
+  environmentId: testRunSchema.shape.environmentId,
+  testWorkersCount: testRunSchema.shape.testWorkersCount.unwrap(),
+  browserEngine: testRunSchema.shape.browserEngine,
+}
+
+export const testRunQuickTips = [
+  {
+    title: 'Choose a descriptive name',
+    description: 'Use clear, specific names that indicate the purpose for your test run',
+  },
+  {
+    title: 'Select the environment for your test run',
+    description: 'Choose the environment that best suits your selected tests',
+  },
+  {
+    title: 'Select the browser engine for your test run',
+    description: 'Select the browser engine that is compatible with your selected test cases',
+  },
+  {
+    title: 'Select the test suites or tags for your test run',
+    description: 'You can filter by tags or browse suites and choose full suites or child subsets',
+  },
+  {
+    title: 'Select the test workers count for your test run',
+    description: 'Parallel workers can be used to run your test cases in parallel to speed up the test execution',
+  },
+] as const
+
+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 || response.message || 'Unable to save test run.'
+}
+
+export function buildTestRunSubmitValue(value: TestRun, selectionType: TestSelectionType): TestRun {
+  return {
+    ...value,
+    tags: selectionType === testSelectionTypes.TAGS ? value.tags : [],
+    testSuites: selectionType === testSelectionTypes.TEST_SUITES ? value.testSuites : [],
+  }
+}
+
+export function validateTagSelections(value: string[], selectionType: TestSelectionType) {
+  if (selectionType === testSelectionTypes.TAGS && (!Array.isArray(value) || value.length === 0)) {
+    return 'Tags are required'
+  }
+
+  return undefined
+}
+
+export function validateTestSuiteSelections(value: TestSuiteSelection[], selectionType: TestSelectionType) {
+  if (selectionType !== testSelectionTypes.TEST_SUITES) {
+    return undefined
+  }
+
+  if (!Array.isArray(value) || value.length === 0) {
+    return 'At least one test suite is required'
+  }
+
+  const invalidSuite = value.find(suiteSelection => !suiteSelection.runAll && suiteSelection.testCaseIds.length === 0)
+  if (invalidSuite) {
+    return 'Partial suite selections must include at least one test case'
+  }
+
+  return undefined
+}
+
+export function getTestRunSuccessPath(data: ActionResponseData | undefined) {
+  if (typeof data === 'object' && data !== null && 'id' in data && typeof data.id === 'string') {
+    return `/test-runs/${data.id}`
+  }
+
+  return '/test-runs'
+}
+
+function isEnvironmentRow(value: unknown): value is Environment {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTagRow(value: unknown): value is Tag {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isModuleRow(value: unknown) {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTestCaseRow(value: unknown) {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    'tags' in value &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow)
+  )
+}
+
+function isTestSuitePickerRow(value: unknown): value is TestSuitePickerRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value &&
+    'module' in value &&
+    isModuleRow(value.module) &&
+    'tags' in value &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow) &&
+    'testCases' in value &&
+    Array.isArray(value.testCases) &&
+    value.testCases.every(isTestCaseRow)
+  )
+}
+
+export function getEnvironmentRows(data: ActionResponseData | undefined): Environment[] {
+  return Array.isArray(data) ? data.filter(isEnvironmentRow) : []
+}
+
+export function getTagRows(data: ActionResponseData | undefined): Tag[] {
+  return Array.isArray(data) ? data.filter(isTagRow) : []
+}
+
+export function getTestSuitePickerRows(data: ActionResponseData | undefined): TestSuitePickerRow[] {
+  return Array.isArray(data) ? data.filter(isTestSuitePickerRow) : []
+}
+
+export function getInitialTestSelectionType(defaultValues?: TestRun): TestSelectionType {
+  return defaultValues?.testSuites?.length ? testSelectionTypes.TEST_SUITES : testSelectionTypes.TAGS
+}
+
+export function getBrowserEngineOptions() {
+  return [
+    { label: 'Chromium', value: BrowserEngine.CHROMIUM },
+    { label: 'Firefox', value: BrowserEngine.FIREFOX },
+    { label: 'WebKit', value: BrowserEngine.WEBKIT },
+  ] as const
+}