create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,25 @@
+'use client'
+
+import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
+import { testCaseDataColumns, testCaseSelectionColumn } from '@/components/test-case/test-case-columns'
+import TableActions from '@/components/table/table-actions'
+import { TestCasePickerRow } from '@/types/test-case-picker'
+import { ColumnDef } from '@tanstack/react-table'
+
+export const testCaseTableCols: ColumnDef<TestCasePickerRow>[] = [
+  testCaseSelectionColumn,
+  ...testCaseDataColumns,
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testCase = row.original
+
+      return (
+        <TableActions
+          modifyLink={`/test-cases/modify/${testCase.id}`}
+          deleteHandler={() => deleteTestCaseAction([testCase.id])}
+        />
+      )
+    },
+  },
+]

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

@@ -0,0 +1,37 @@
+import { deleteTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+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'
+
+export default async function TestCaseTable() {
+  const { data: testCases } = await getAllTestCasesAction()
+  const testCaseRows = getTestCaseRows(testCases)
+
+  return (
+    <>
+      <DataTable
+        columns={testCaseTableCols}
+        data={testCaseRows}
+        filterColumn="title"
+        filterPlaceholder="Filter by title..."
+        modifyLink="/test-cases/modify"
+        deleteAction={deleteTestCaseAction}
+        multiOptionCreateButton={true}
+        createButtonOptions={[
+          {
+            label: 'From Scratch',
+            link: '/test-cases/create',
+            icon: <Cog className="h-4 w-4" />,
+          },
+          {
+            label: 'From Template',
+            link: '/test-cases/create-from-template',
+            icon: <LayoutPanelTop className="h-4 w-4" />,
+          },
+        ]}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,60 @@
+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 { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Run Details',
+  description: 'View test run execution details and live logs',
+}
+
+interface TestRunDetailPageProps {
+  params: Promise<{ id: string }>
+}
+
+export default async function TestRunDetailPage({ params }: TestRunDetailPageProps) {
+  const { id } = await params
+  const response = await getTestRunByIdAction(id)
+
+  if (response.error || !response.data) {
+    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">
+            {response.error || 'The test run you are looking for does not exist.'}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  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 (
+    <>
+      <TestRunHeader initialTestRun={testRun} />
+
+      <div className="space-y-6">
+        <TestRunDetails testRun={testRun} />
+
+        <Separator />
+
+        <LogViewer testRunId={testRun.runId} status={testRun.status} />
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,48 @@
+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 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'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Test Run',
+  description: 'Create a new test run to execute your selected suites or tagged tests',
+}
+
+const CreateTestRun = async () => {
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuiteTestCasesAction()
+  const { data: environments, error: environmentsError } = await getAllEnvironmentsAction()
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (testSuitesError || environmentsError || tagsError) {
+    return <div>Error: {testSuitesError || environmentsError || tagsError}</div>
+  }
+
+  const testSuitesData = getTestSuitePickerRows(testSuites)
+  const environmentsData = getEnvironmentRows(environments)
+  const tagsData = getTagRows(tags)
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Test Run</PageHeader>
+        <HeaderSubtitle>Create a new test run to execute selected suites or tagged tests</HeaderSubtitle>
+      </div>
+      <TestRunForm
+        testSuites={testSuitesData}
+        environments={environmentsData}
+        tags={tagsData}
+        onSubmitAction={createTestRunAction}
+        successTitle="Test Run Created"
+        successMessage="The test run has been created successfully"
+      />
+    </>
+  )
+}
+
+export default CreateTestRun

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

@@ -0,0 +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

package/templates/starter/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/starter/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
+}

package/templates/starter/src/app/(base)/test-runs/test-run-form.test.tsx

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+
+import { BrowserEngine } from '@prisma/client'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import TestRunForm from './test-run-form'
+
+const { push, toast, checkTestRunNameUniqueAction } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+  checkTestRunNameUniqueAction: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('@/actions/test-run/test-run-actions', () => ({
+  checkTestRunNameUniqueAction,
+}))
+
+vi.mock('@/components/test-suite/test-suite-picker', () => ({
+  default: ({
+    onSave,
+  }: {
+    onSave: (value: Array<{ testSuiteId: string; runAll: boolean; testCaseIds: string[] }>) => void
+  }) => (
+    <button
+      type="button"
+      onClick={() =>
+        onSave([
+          {
+            testSuiteId: 'suite-1',
+            runAll: true,
+            testCaseIds: [],
+          },
+        ])
+      }
+    >
+      Pick test suites
+    </button>
+  ),
+}))
+
+describe('TestRunForm', () => {
+  it('submits test-suite scoped values and navigates to the created run', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+      data: { id: 'run-1' },
+    })
+
+    checkTestRunNameUniqueAction.mockResolvedValue({
+      status: 200,
+      data: { isUnique: true },
+    })
+
+    render(
+      <TestRunForm
+        defaultValues={{
+          name: 'Nightly Smoke',
+          environmentId: 'env-1',
+          tags: ['tag-1'],
+          testWorkersCount: 1,
+          browserEngine: BrowserEngine.CHROMIUM,
+          testSuites: [{ testSuiteId: 'suite-1', runAll: true, testCaseIds: [] }],
+        }}
+        successTitle="Test Run Created"
+        successMessage="The test run has been created successfully"
+        testSuites={[]}
+        environments={[{ id: 'env-1', name: 'Staging' } as never]}
+        tags={[{ id: 'tag-1', name: 'Smoke' } as never]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Pick test suites' }))
+    await user.click(screen.getByRole('button', { name: 'Start' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        {
+          name: 'Nightly Smoke',
+          environmentId: 'env-1',
+          tags: [],
+          testWorkersCount: 1,
+          browserEngine: BrowserEngine.CHROMIUM,
+          testSuites: [{ testSuiteId: 'suite-1', runAll: true, testCaseIds: [] }],
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Test Run Created',
+      description: 'The test run has been created successfully',
+    })
+    expect(push).toHaveBeenCalledWith('/test-runs/run-1')
+  })
+
+  it('shows a validation message when tags mode is active without selected tags', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <TestRunForm
+        defaultValues={{
+          name: 'Tag Run',
+          environmentId: 'env-1',
+          tags: [],
+          testWorkersCount: 1,
+          browserEngine: BrowserEngine.CHROMIUM,
+          testSuites: [],
+        }}
+        successTitle="Test Run Created"
+        successMessage="The test run has been created successfully"
+        testSuites={[]}
+        environments={[{ id: 'env-1', name: 'Staging' } as never]}
+        tags={[{ id: 'tag-1', name: 'Smoke' } as never]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Start' }))
+
+    expect(screen.getByText('Tags are required')).toBeInTheDocument()
+    expect(onSubmitAction).not.toHaveBeenCalled()
+  })
+})