create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/blank/src/app/(base)/test-cases/test-case-resource-rows.ts

@@ -0,0 +1,9 @@
+export {
+  getEnvironmentRows,
+  getLocatorGroupRows,
+  getLocatorRows,
+  getModuleRows,
+  getTagRows,
+  getTestSuiteRows,
+} from './test-case-shared-resource-rows'
+export { getTemplateStepParamRows, getTemplateStepRows } from './test-case-template-resource-rows'

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

@@ -4,8 +4,10 @@ import { describe, expect, it } from 'vitest'
 import {
   buildNodeOrderFromTestCaseSteps,
   getEditableTestCase,
+} from './editable-test-case-helpers'
+import {
   getTestCaseRows,
-} from './test-case-route-helpers'
+} from './test-case-row-helpers'
 
 describe('test-case route helpers', () => {
   it('narrows test case list rows from action data', () => {
@@ -64,6 +66,7 @@ describe('test-case route helpers', () => {
     expect(editableTestCase).not.toBeNull()
     expect(buildNodeOrderFromTestCaseSteps(editableTestCase!.steps)).toEqual({
       'step-1': {
+        nodeId: 'step-1',
         order: 1,
         label: 'Fill email',
         gherkinStep: 'fill email',

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

@@ -1,147 +1,3 @@
-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) : []
-}
+export * from './editable-test-case-helpers'
+export * from './test-case-resource-rows'
+export * from './test-case-row-helpers'

package/templates/blank/src/app/(base)/test-cases/test-case-row-helpers.ts

@@ -0,0 +1,30 @@
+import type { Tag } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
+
+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 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)
+  )
+}
+
+export function getTestCaseRows(data: ActionResponseData | undefined): TestCasePickerRow[] {
+  return Array.isArray(data) ? data.filter(isTestCaseRow) : []
+}

package/templates/blank/src/app/(base)/test-cases/test-case-shared-resource-rows.ts

@@ -0,0 +1,55 @@
+import type { Environment, Locator, LocatorGroup, Module, Tag, TestSuite } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+export function isNamedRow(value: unknown): value is { id: string; name: string } {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isLocatorRow(value: unknown): value is Locator {
+  return isNamedRow(value)
+}
+
+function isModuleRow(value: unknown): value is Module {
+  return isNamedRow(value)
+}
+
+function isTestSuiteRow(value: unknown): value is TestSuite {
+  return isNamedRow(value)
+}
+
+function isLocatorGroupRow(value: unknown): value is LocatorGroup {
+  return isNamedRow(value)
+}
+
+function isEnvironmentRow(value: unknown): value is Environment {
+  return isNamedRow(value)
+}
+
+function isTagRow(value: unknown): value is Tag {
+  return isNamedRow(value)
+}
+
+export function getLocatorRows(data: ActionResponseData | undefined): Locator[] {
+  return Array.isArray(data) ? data.filter(isLocatorRow) : []
+}
+
+export function getModuleRows(data: ActionResponseData | undefined): Module[] {
+  return Array.isArray(data) ? data.filter(isModuleRow) : []
+}
+
+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 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) : []
+}

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

@@ -3,7 +3,7 @@ import { DataTable } from '@/components/ui/data-table'
 import { testCaseTableCols } from './test-case-table-columns'
 import { Cog, LayoutPanelTop } from 'lucide-react'
 
-import { getTestCaseRows } from './test-case-route-helpers'
+import { getTestCaseRows } from './test-case-row-helpers'
 
 export default async function TestCaseTable() {
   const { data: testCases } = await getAllTestCasesAction()
@@ -23,12 +23,12 @@ export default async function TestCaseTable() {
           {
             label: 'From Scratch',
             link: '/test-cases/create',
-            icon: <Cog className="h-4 w-4" />,
+            icon: <Cog className="size-4" />,
           },
           {
             label: 'From Template',
             link: '/test-cases/create-from-template',
-            icon: <LayoutPanelTop className="h-4 w-4" />,
+            icon: <LayoutPanelTop className="size-4" />,
           },
         ]}
       />

package/templates/blank/src/app/(base)/test-cases/test-case-template-resource-rows.ts

@@ -0,0 +1,21 @@
+import type { TemplateStep, TemplateStepParameter } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import { isNamedRow } from './test-case-shared-resource-rows'
+
+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)
+}
+
+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) : []
+}

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

@@ -3,11 +3,9 @@ import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 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 { getEnvironmentRows, getTagRows, getTestSuitePickerRows } from '../test-run-form-helpers'
+
+import { loadCreateTestRunPageData } from '../create-test-run-page-data'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Run',
@@ -15,18 +13,12 @@ export const metadata: Metadata = {
 }
 
 const CreateTestRun = async () => {
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuiteTestCasesAction()
-  const { data: environments, error: environmentsError } = await getAllEnvironmentsAction()
-  const { data: tags, error: tagsError } = await getAllTagsAction()
+  const pageData = await loadCreateTestRunPageData()
 
-  if (testSuitesError || environmentsError || tagsError) {
-    return <div>Error: {testSuitesError || environmentsError || tagsError}</div>
+  if (pageData.status === 'error') {
+    return <div>Error: {pageData.message}</div>
   }
 
-  const testSuitesData = getTestSuitePickerRows(testSuites)
-  const environmentsData = getEnvironmentRows(environments)
-  const tagsData = getTagRows(tags)
-
   return (
     <>
       <div className="mb-8">
@@ -34,9 +26,9 @@ const CreateTestRun = async () => {
         <HeaderSubtitle>Create a new test run to execute selected suites or tagged tests</HeaderSubtitle>
       </div>
       <TestRunForm
-        testSuites={testSuitesData}
-        environments={environmentsData}
-        tags={tagsData}
+        testSuites={pageData.testSuites}
+        environments={pageData.environments}
+        tags={pageData.tags}
         onSubmitAction={createTestRunAction}
         successTitle="Test Run Created"
         successMessage="The test run has been created successfully"

package/templates/blank/src/app/(base)/test-runs/create-test-run-page-data.test.ts

@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllTestSuiteTestCasesAction } from '@/actions/test-run/test-run-actions'
+
+import { loadCreateTestRunPageData } from './create-test-run-page-data'
+
+vi.mock('@/actions/environments/environment-actions', () => ({
+  getAllEnvironmentsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/tags/tag-actions', () => ({
+  getAllTagsAction: vi.fn(),
+}))
+
+vi.mock('@/actions/test-run/test-run-actions', () => ({
+  getAllTestSuiteTestCasesAction: vi.fn(),
+}))
+
+const getAllEnvironmentsActionMock = vi.mocked(getAllEnvironmentsAction)
+const getAllTagsActionMock = vi.mocked(getAllTagsAction)
+const getAllTestSuiteTestCasesActionMock = vi.mocked(getAllTestSuiteTestCasesAction)
+
+describe('loadCreateTestRunPageData', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns error when environment loading fails', async () => {
+    getAllEnvironmentsActionMock.mockResolvedValue({ data: null, error: 'env failed' })
+    getAllTagsActionMock.mockResolvedValue({ data: [], error: null })
+
+    await expect(loadCreateTestRunPageData()).resolves.toEqual({
+      status: 'error',
+      message: 'env failed',
+    })
+  })
+
+  it('returns success when all loaders succeed', async () => {
+    getAllEnvironmentsActionMock.mockResolvedValue({
+      data: [{ id: 'env-1', name: 'Staging', createdAt: new Date(), updatedAt: new Date() }],
+      error: null,
+    })
+    getAllTagsActionMock.mockResolvedValue({
+      data: [{ id: 'tag-1', name: 'smoke', createdAt: new Date(), updatedAt: new Date() }],
+      error: null,
+    })
+    getAllTestSuiteTestCasesActionMock.mockResolvedValue({ data: [], error: null })
+
+    const result = await loadCreateTestRunPageData()
+
+    expect(result.status).toBe('success')
+    if (result.status === 'success') {
+      expect(result.environments).toHaveLength(1)
+      expect(result.tags).toHaveLength(1)
+      expect(result.testSuites).toEqual([])
+    }
+  })
+})

package/templates/blank/src/app/(base)/test-runs/create-test-run-page-data.ts

@@ -0,0 +1,38 @@
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllTestSuiteTestCasesAction } from '@/actions/test-run/test-run-actions'
+
+import { getEnvironmentRows, getTagRows, getTestSuitePickerRows } from './test-run-form-helpers'
+
+export type CreateTestRunPageData =
+  | { status: 'error'; message: string }
+  | {
+      status: 'success'
+      testSuites: ReturnType<typeof getTestSuitePickerRows>
+      environments: ReturnType<typeof getEnvironmentRows>
+      tags: ReturnType<typeof getTagRows>
+    }
+
+export async function loadCreateTestRunPageData(): Promise<CreateTestRunPageData> {
+  const [{ data: environments, error: environmentsError }, { data: tags, error: tagsError }] = await Promise.all([
+    getAllEnvironmentsAction(),
+    getAllTagsAction(),
+  ])
+
+  if (environmentsError || tagsError) {
+    return { status: 'error', message: environmentsError || tagsError || 'Failed to load page data' }
+  }
+
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuiteTestCasesAction()
+
+  if (testSuitesError) {
+    return { status: 'error', message: testSuitesError }
+  }
+
+  return {
+    status: 'success',
+    testSuites: getTestSuitePickerRows(testSuites),
+    environments: getEnvironmentRows(environments),
+    tags: getTagRows(tags),
+  }
+}

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

@@ -29,7 +29,7 @@ const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: str
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<ListChecks className="h-8 w-8" />}
+          icon={<ListChecks className="size-8" />}
           title="No test runs found"
           description="Get started by creating a test run to execute your test cases"
           createRoute="/test-runs/create"
@@ -44,7 +44,7 @@ const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: str
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <ListChecks className="mr-2 h-8 w-8" />
+            <ListChecks className="mr-2 size-8" />
             Test Runs
           </span>
         </PageHeader>

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

@@ -0,0 +1,71 @@
+import type { Environment, Tag } from '@prisma/client'
+
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+import type { TestSuitePickerRow } from '@/types/test-suite-picker'
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save test run.'
+}
+
+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) : []
+}

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

@@ -0,0 +1,44 @@
+import { BrowserEngine } from '@prisma/client'
+
+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 getBrowserEngineOptions() {
+  return [
+    { label: 'Chromium', value: BrowserEngine.CHROMIUM },
+    { label: 'Firefox', value: BrowserEngine.FIREFOX },
+    { label: 'WebKit', value: BrowserEngine.WEBKIT },
+  ] as const
+}
+
+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