create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/reports/test-suites/test-suites-metric-table-columns.tsx

@@ -1,79 +1,79 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-import TableActions from '@/components/table/table-actions'
-import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
-import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-
-export const testSuitesMetricTableCols: ColumnDef<TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }>[] =
-  [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-          className="mr-2"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={value => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="mr-2"
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    },
-    {
-      id: 'testSuite.name',
-      accessorKey: 'testSuite.name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.name}</div>
-      },
-    },
-    {
-      accessorKey: 'testSuite.description',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.description}</div>
-      },
-    },
-    {
-      accessorKey: 'testSuite.testCases.length',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.testCases.length}</div>
-      },
-    },
-    {
-      accessorKey: 'lastExecutedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
-      cell: ({ row }) => {
-        const testSuiteMetrics = row.original
-        return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
-      },
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return (
-          <TableActions
-            modifyLink={`/test-suites/modify/${testSuite.id}`}
-            deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
-          />
-        )
-      },
-    },
-  ]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import TableActions from '@/components/table/table-actions'
+import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { Checkbox } from '@/components/ui/checkbox'
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+
+export const testSuitesMetricTableCols: ColumnDef<TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }>[] =
+  [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+          className="mr-2"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={value => row.toggleSelected(!!value)}
+          aria-label="Select row"
+          className="mr-2"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      id: 'testSuite.name',
+      accessorKey: 'testSuite.name',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return <div>{testSuite.name}</div>
+      },
+    },
+    {
+      accessorKey: 'testSuite.description',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return <div>{testSuite.description}</div>
+      },
+    },
+    {
+      accessorKey: 'testSuite.testCases.length',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return <div>{testSuite.testCases.length}</div>
+      },
+    },
+    {
+      accessorKey: 'lastExecutedAt',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
+      cell: ({ row }) => {
+        const testSuiteMetrics = row.original
+        return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
+      },
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return (
+          <TableActions
+            modifyLink={`/test-suites/modify/${testSuite.id}`}
+            deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
+          />
+        )
+      },
+    },
+  ]

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

@@ -1,27 +1,27 @@
-import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
-import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
-import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
-
-const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
-  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
-
-  if (testSuiteMetricsError) {
-    return <div>Error: {testSuiteMetricsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testSuitesMetricTableCols}
-        data={testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]}
-        filterColumn="testSuite.name"
-        filterPlaceholder="Filter by name..."
-        deleteAction={deleteTestSuiteAction}
-      />
-    </>
-  )
-}
-
-export default TestSuitesMetricTable
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
+import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
+import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
+
+const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
+  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
+
+  if (testSuiteMetricsError) {
+    return <div>Error: {testSuiteMetricsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testSuitesMetricTableCols}
+        data={testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]}
+        filterColumn="testSuite.name"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuitesMetricTable

package/templates/default/src/app/(base)/reports/view-logs-button.tsx

@@ -1,58 +1,58 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Eye } from 'lucide-react'
-import { TestCaseLogsModal } from '@/components/reports/test-case-logs-modal'
-import { ReportScenario, StepStatus } from '@prisma/client'
-
-type ReportScenarioWithDetails =
-  | (ReportScenario & {
-      tags: Array<{ tagName: string }>
-      steps: Array<{
-        id: string
-        keyword: string
-        name: string
-        status: StepStatus
-        duration: string
-        errorMessage: string | null
-        errorTrace: string | null
-        screenshotPath?: string | null
-        order: number
-      }>
-      hooks: Array<{
-        id: string
-        keyword: string
-        status: StepStatus
-        duration: string
-        errorMessage: string | null
-        errorTrace: string | null
-      }>
-    })
-  | null
-
-interface ViewLogsButtonProps {
-  reportScenario: ReportScenarioWithDetails
-}
-
-export function ViewLogsButton({ reportScenario }: ViewLogsButtonProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        size="sm"
-        className="flex items-center gap-2"
-        onClick={() => setIsModalOpen(true)}
-        disabled={!reportScenario}
-      >
-        <Eye className="h-4 w-4" />
-        View Logs
-      </Button>
-      {reportScenario && (
-        <TestCaseLogsModal open={isModalOpen} onOpenChange={setIsModalOpen} reportScenario={reportScenario} />
-      )}
-    </>
-  )
-}
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Eye } from 'lucide-react'
+import { TestCaseLogsModal } from '@/components/reports/test-case-logs-modal'
+import { ReportScenario, StepStatus } from '@prisma/client'
+
+type ReportScenarioWithDetails =
+  | (ReportScenario & {
+      tags: Array<{ tagName: string }>
+      steps: Array<{
+        id: string
+        keyword: string
+        name: string
+        status: StepStatus
+        duration: string
+        errorMessage: string | null
+        errorTrace: string | null
+        screenshotPath?: string | null
+        order: number
+      }>
+      hooks: Array<{
+        id: string
+        keyword: string
+        status: StepStatus
+        duration: string
+        errorMessage: string | null
+        errorTrace: string | null
+      }>
+    })
+  | null
+
+interface ViewLogsButtonProps {
+  reportScenario: ReportScenarioWithDetails
+}
+
+export function ViewLogsButton({ reportScenario }: ViewLogsButtonProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        className="flex items-center gap-2"
+        onClick={() => setIsModalOpen(true)}
+        disabled={!reportScenario}
+      >
+        <Eye className="h-4 w-4" />
+        View Logs
+      </Button>
+      {reportScenario && (
+        <TestCaseLogsModal open={isModalOpen} onOpenChange={setIsModalOpen} reportScenario={reportScenario} />
+      )}
+    </>
+  )
+}

package/templates/default/src/app/(base)/settings/settings-sync-panel-helpers.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatExecutionSummary,
+  formatFailureSummary,
+  formatExecutionOrder,
+} from './settings-sync-panel-helpers'
+
+describe('settings-sync-panel helpers', () => {
+  it('formats the sync-all execution summary', () => {
+    expect(
+      formatExecutionSummary({
+        requestedScriptId: 'sync-all',
+        executedScriptIds: ['sync-modules', 'sync-tags'],
+        success: true,
+        durationMs: 12,
+      }),
+    ).toBe('Completed 2 sync scripts successfully.')
+  })
+
+  it('formats a failed script summary with the failed script id and exit code', () => {
+    expect(
+      formatFailureSummary({
+        requestedScriptId: 'sync-test-cases',
+        executedScriptIds: ['sync-modules', 'sync-test-cases'],
+        success: false,
+        durationMs: 12,
+        failedScriptId: 'sync-test-cases',
+        exitCode: 1,
+        cause: 'Step parsing failed',
+      }),
+    ).toBe('sync-test-cases (exit code 1) failed: Step parsing failed')
+  })
+
+  it('formats the requested execution order labels', () => {
+    expect(formatExecutionOrder('sync-test-cases')).toBe('Modules -> Tags -> Test Suites -> Template Step Groups -> Template Steps -> Test Cases')
+  })
+})

package/templates/default/src/app/(base)/settings/settings-sync-panel-helpers.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react'
+import {
+  CircleHelp,
+  Code,
+  Component,
+  Group,
+  LayoutTemplate,
+  Puzzle,
+  Server,
+  Tag,
+  TestTubeDiagonal,
+  TestTubes,
+} from 'lucide-react'
+
+import { AppDrawerItemColor } from '@/app/(dashboard-components)/app-drawer'
+import {
+  SYNC_ALL_REQUEST_ID,
+  getSyncScriptDefinition,
+  resolveRequestedSyncExecutionOrder,
+  type SyncRequestId,
+  type SyncScriptId,
+} from '@/lib/sync/sync-registry'
+
+type SyncTileColor = keyof typeof AppDrawerItemColor
+
+export type SyncRunResult = {
+  requestedScriptId: string
+  executedScriptIds: string[]
+  success: boolean
+  durationMs: number
+  cause?: string
+  exitCode?: number
+  failedScriptId?: string
+}
+
+export const syncPresentation: Record<SyncScriptId, { icon: ReactNode; colorKey: SyncTileColor }> = {
+  'sync-modules': {
+    icon: <Puzzle />,
+    colorKey: 'indigo',
+  },
+  'sync-environments': {
+    icon: <Server />,
+    colorKey: 'sky',
+  },
+  'sync-tags': {
+    icon: <Tag />,
+    colorKey: 'yellow',
+  },
+  'sync-template-step-groups': {
+    icon: <Component />,
+    colorKey: 'violet',
+  },
+  'sync-template-steps': {
+    icon: <LayoutTemplate />,
+    colorKey: 'purple',
+  },
+  'sync-locator-groups': {
+    icon: <Group />,
+    colorKey: 'blue',
+  },
+  'sync-locators': {
+    icon: <Code />,
+    colorKey: 'emerald',
+  },
+  'sync-test-suites': {
+    icon: <TestTubes />,
+    colorKey: 'orange',
+  },
+  'sync-test-cases': {
+    icon: <TestTubeDiagonal />,
+    colorKey: 'rose',
+  },
+}
+
+export function formatExecutionSummary(result: SyncRunResult): string {
+  if (result.requestedScriptId === SYNC_ALL_REQUEST_ID) {
+    return `Completed ${result.executedScriptIds.length} sync scripts successfully.`
+  }
+
+  if (result.executedScriptIds.length <= 1) {
+    return `${result.requestedScriptId} completed successfully.`
+  }
+
+  return `${result.requestedScriptId} completed after running ${result.executedScriptIds.join(' -> ')}.`
+}
+
+export function formatFailureSummary(result: SyncRunResult): string {
+  if (result.failedScriptId) {
+    const exitCode = typeof result.exitCode === 'number' ? ` (exit code ${result.exitCode})` : ''
+    const cause = result.cause ?? 'No cause was reported.'
+    return `${result.failedScriptId}${exitCode} failed: ${cause}`
+  }
+
+  return result.cause ?? `Unable to run ${result.requestedScriptId}.`
+}
+
+export function formatExecutionOrder(requestId: SyncRequestId): string {
+  return resolveRequestedSyncExecutionOrder(requestId)
+    .map(scriptId => getSyncScriptDefinition(scriptId).orderLabel)
+    .join(' -> ')
+}
+
+export function getSyncTooltipCopy(requestId: SyncRequestId) {
+  const prefix = requestId === SYNC_ALL_REQUEST_ID ? 'Runs synchronization in order:' : 'Runs synchronization in order:'
+  return `${prefix} ${formatExecutionOrder(requestId)}`
+}
+
+export const syncPanelInfo = {
+  helpIcon: <CircleHelp className="h-4 w-4" />,
+}

package/templates/default/src/app/(base)/settings/settings-sync-panel.test.tsx

@@ -0,0 +1,127 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { SettingsSyncPanel } from './settings-sync-panel'
+
+const { refresh, toast, runSyncAction, getSyncPendingCountsAction } = vi.hoisted(() => ({
+  refresh: vi.fn(),
+  toast: vi.fn(),
+  runSyncAction: vi.fn(),
+  getSyncPendingCountsAction: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    refresh,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('@/actions/settings/sync-actions', () => ({
+  runSyncAction,
+  getSyncPendingCountsAction,
+}))
+
+describe('SettingsSyncPanel', () => {
+  it('runs sync all, refreshes pending counts, and shows a success toast', async () => {
+    const user = userEvent.setup()
+
+    runSyncAction.mockResolvedValue({
+      requestedScriptId: 'sync-all',
+      executedScriptIds: ['sync-modules', 'sync-tags'],
+      success: true,
+      durationMs: 12,
+    })
+    getSyncPendingCountsAction.mockResolvedValue({
+      'sync-all': 0,
+      'sync-modules': 0,
+      'sync-environments': 0,
+      'sync-tags': 0,
+      'sync-template-step-groups': 0,
+      'sync-template-steps': 0,
+      'sync-locator-groups': 0,
+      'sync-locators': 0,
+      'sync-test-suites': 0,
+      'sync-test-cases': 0,
+    })
+
+    render(
+      <SettingsSyncPanel
+        pendingCounts={{
+          'sync-all': 2,
+          'sync-modules': 1,
+          'sync-environments': 0,
+          'sync-tags': 1,
+          'sync-template-step-groups': 0,
+          'sync-template-steps': 0,
+          'sync-locator-groups': 0,
+          'sync-locators': 0,
+          'sync-test-suites': 0,
+          'sync-test-cases': 0,
+        }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Sync All' }))
+
+    await waitFor(() => {
+      expect(runSyncAction).toHaveBeenCalledWith('sync-all')
+    })
+
+    expect(getSyncPendingCountsAction).toHaveBeenCalled()
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Sync completed',
+      description: 'Completed 2 sync scripts successfully.',
+    })
+    expect(refresh).toHaveBeenCalled()
+  })
+
+  it('shows a destructive toast when sync fails', async () => {
+    const user = userEvent.setup()
+
+    runSyncAction.mockResolvedValue({
+      requestedScriptId: 'sync-tags',
+      executedScriptIds: [],
+      success: false,
+      durationMs: 12,
+      cause: 'Sync failed at runtime',
+    })
+
+    render(
+      <SettingsSyncPanel
+        pendingCounts={{
+          'sync-all': 1,
+          'sync-modules': 0,
+          'sync-environments': 0,
+          'sync-tags': 1,
+          'sync-template-step-groups': 0,
+          'sync-template-steps': 0,
+          'sync-locator-groups': 0,
+          'sync-locators': 0,
+          'sync-test-suites': 0,
+          'sync-test-cases': 0,
+        }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Sync Tags' }))
+
+    await waitFor(() => {
+      expect(runSyncAction).toHaveBeenCalledWith('sync-tags')
+    })
+
+    expect(getSyncPendingCountsAction).not.toHaveBeenCalled()
+    expect(toast).toHaveBeenCalledWith({
+      variant: 'destructive',
+      title: 'Sync failed',
+      description: 'Sync failed at runtime',
+    })
+    expect(refresh).toHaveBeenCalled()
+  })
+})