create-appraisejs 0.1.7 → 0.1.8

package/templates/default/src/app/(base)/reports/report-view-table-columns.tsx

@@ -1,131 +1,131 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import {
-  ReportTestCase,
-  TestRunTestCase,
-  TestCase,
-  Tag,
-  ReportScenario,
-  StepStatus,
-  TestRunTestCaseResult,
-} from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-import { Badge } from '@/components/ui/badge'
-import { ViewLogsButton } from './view-logs-button'
-import { CheckCircle, XCircle, Clock } from 'lucide-react'
-
-type ReportTestCaseWithRelations = ReportTestCase & {
-  testRunTestCase: TestRunTestCase & {
-    testCase: TestCase & { tags?: Tag[] }
-  }
-  reportScenario:
-    | (ReportScenario & {
-        tags: Array<{ tagName: string }>
-        steps: Array<{
-          id: string
-          keyword: string
-          name: string
-          status: StepStatus
-          duration: string
-          errorMessage: string | null
-          errorTrace: string | null
-          order: number
-        }>
-        hooks: Array<{
-          id: string
-          keyword: string
-          status: StepStatus
-          duration: string
-          errorMessage: string | null
-          errorTrace: string | null
-        }>
-      })
-    | null
-}
-
-const testRunTestCaseResultToBadge = (result: TestRunTestCaseResult) => {
-  switch (result) {
-    case TestRunTestCaseResult.PASSED:
-      return (
-        <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
-          Passed
-        </Badge>
-      )
-    case TestRunTestCaseResult.FAILED:
-      return (
-        <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Failed
-        </Badge>
-      )
-    case TestRunTestCaseResult.UNTESTED:
-      return (
-        <Badge className="bg-yellow-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
-          Untested
-        </Badge>
-      )
-    default:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
-          Unknown
-        </Badge>
-      )
-  }
-}
-
-export const reportViewTableCols: ColumnDef<ReportTestCaseWithRelations>[] = [
-  {
-    id: 'result',
-    accessorFn: row => row.testRunTestCase.result || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Result" />,
-    cell: ({ row }) => {
-      return testRunTestCaseResultToBadge(row.original.testRunTestCase.result)
-    },
-  },
-  {
-    id: 'testCaseTitle',
-    accessorFn: row => row.testRunTestCase.testCase.title || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
-    cell: ({ row }) => {
-      return <div className="font-medium">{row.original.testRunTestCase.testCase.title}</div>
-    },
-  },
-  {
-    id: 'duration',
-    accessorFn: row => (row.duration ? Number(row.duration) : 0),
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Duration" />,
-    cell: ({ row }) => {
-      if (!row.original.duration) return <div>-</div>
-      const durationMs = Math.round(Number(row.original.duration) / 1000000)
-      const durationSeconds = (durationMs / 1000).toFixed(2)
-      return <div>{durationSeconds}s</div>
-    },
-  },
-  {
-    id: 'tags',
-    accessorFn: row => {
-      const tags = row.testRunTestCase.testCase.tags || []
-      return tags.map(tag => tag.name).join(' ')
-    },
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
-    cell: ({ row }) => {
-      const tags = row.original.testRunTestCase.testCase.tags || []
-      return (
-        <div className="flex flex-wrap gap-1">
-          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
-        </div>
-      )
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const reportTestCase = row.original
-      return <ViewLogsButton reportScenario={reportTestCase.reportScenario} />
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import {
+  ReportTestCase,
+  TestRunTestCase,
+  TestCase,
+  Tag,
+  ReportScenario,
+  StepStatus,
+  TestRunTestCaseResult,
+} from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+import { Badge } from '@/components/ui/badge'
+import { ViewLogsButton } from './view-logs-button'
+import { CheckCircle, XCircle, Clock } from 'lucide-react'
+
+type ReportTestCaseWithRelations = ReportTestCase & {
+  testRunTestCase: TestRunTestCase & {
+    testCase: TestCase & { tags?: Tag[] }
+  }
+  reportScenario:
+    | (ReportScenario & {
+        tags: Array<{ tagName: string }>
+        steps: Array<{
+          id: string
+          keyword: string
+          name: string
+          status: StepStatus
+          duration: string
+          errorMessage: string | null
+          errorTrace: string | null
+          order: number
+        }>
+        hooks: Array<{
+          id: string
+          keyword: string
+          status: StepStatus
+          duration: string
+          errorMessage: string | null
+          errorTrace: string | null
+        }>
+      })
+    | null
+}
+
+const testRunTestCaseResultToBadge = (result: TestRunTestCaseResult) => {
+  switch (result) {
+    case TestRunTestCaseResult.PASSED:
+      return (
+        <Badge className="bg-primary">
+          <CheckCircle className="mr-1 h-4 w-4" />
+          Passed
+        </Badge>
+      )
+    case TestRunTestCaseResult.FAILED:
+      return (
+        <Badge className="bg-pink-500 text-white">
+          <XCircle className="mr-1 h-4 w-4" />
+          Failed
+        </Badge>
+      )
+    case TestRunTestCaseResult.UNTESTED:
+      return (
+        <Badge className="bg-yellow-500 text-white">
+          <Clock className="mr-1 h-4 w-4" />
+          Untested
+        </Badge>
+      )
+    default:
+      return (
+        <Badge className="bg-gray-500 text-white">
+          <Clock className="mr-1 h-4 w-4" />
+          Unknown
+        </Badge>
+      )
+  }
+}
+
+export const reportViewTableCols: ColumnDef<ReportTestCaseWithRelations>[] = [
+  {
+    id: 'result',
+    accessorFn: row => row.testRunTestCase.result || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Result" />,
+    cell: ({ row }) => {
+      return testRunTestCaseResultToBadge(row.original.testRunTestCase.result)
+    },
+  },
+  {
+    id: 'testCaseTitle',
+    accessorFn: row => row.testRunTestCase.testCase.title || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
+    cell: ({ row }) => {
+      return <div className="font-medium">{row.original.testRunTestCase.testCase.title}</div>
+    },
+  },
+  {
+    id: 'duration',
+    accessorFn: row => (row.duration ? Number(row.duration) : 0),
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Duration" />,
+    cell: ({ row }) => {
+      if (!row.original.duration) return <div>-</div>
+      const durationMs = Math.round(Number(row.original.duration) / 1000000)
+      const durationSeconds = (durationMs / 1000).toFixed(2)
+      return <div>{durationSeconds}s</div>
+    },
+  },
+  {
+    id: 'tags',
+    accessorFn: row => {
+      const tags = row.testRunTestCase.testCase.tags || []
+      return tags.map(tag => tag.name).join(' ')
+    },
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const tags = row.original.testRunTestCase.testCase.tags || []
+      return (
+        <div className="flex flex-wrap gap-1">
+          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const reportTestCase = row.original
+      return <ViewLogsButton reportScenario={reportTestCase.reportScenario} />
+    },
+  },
+]

package/templates/default/src/app/(base)/reports/report-view-table.tsx

@@ -1,82 +1,82 @@
-import { DataTable } from '@/components/ui/data-table'
-import { reportViewTableCols } from './report-view-table-columns'
-import { Prisma } from '@prisma/client'
-
-type ReportDetailWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    features: {
-      include: {
-        tags: true
-        scenarios: {
-          include: {
-            tags: true
-            steps: true
-            hooks: true
-          }
-        }
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            tags: true
-            steps: {
-              orderBy: {
-                order: 'asc'
-              }
-            }
-            hooks: true
-          }
-        }
-      }
-    }
-  }
-}>
-
-interface ReportViewTableProps {
-  report: ReportDetailWithRelations
-}
-
-const ReportViewTable = ({ report }: ReportViewTableProps) => {
-  // Type guard to validate the data structure
-  const isValidReportTestCaseData = (testCases: unknown): testCases is ReportDetailWithRelations['testCases'] => {
-    if (!Array.isArray(testCases)) return false
-    return testCases.every(
-      item => item && typeof item === 'object' && 'id' in item && 'testRunTestCase' in item && 'reportScenario' in item,
-    )
-  }
-
-  if (!isValidReportTestCaseData(report.testCases)) {
-    return <div>Error: Invalid report test case data format</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={reportViewTableCols}
-        data={report.testCases}
-        filterColumn="testCaseTitle"
-        filterPlaceholder="Filter by test case title..."
-        showSelectedRows={false}
-      />
-    </>
-  )
-}
-
-export default ReportViewTable
+import { DataTable } from '@/components/ui/data-table'
+import { reportViewTableCols } from './report-view-table-columns'
+import { Prisma } from '@prisma/client'
+
+type ReportDetailWithRelations = Prisma.ReportGetPayload<{
+  include: {
+    testRun: {
+      include: {
+        environment: true
+        tags: true
+      }
+    }
+    features: {
+      include: {
+        tags: true
+        scenarios: {
+          include: {
+            tags: true
+            steps: true
+            hooks: true
+          }
+        }
+      }
+    }
+    testCases: {
+      include: {
+        testRunTestCase: {
+          include: {
+            testCase: {
+              include: {
+                tags: true
+              }
+            }
+          }
+        }
+        reportScenario: {
+          include: {
+            tags: true
+            steps: {
+              orderBy: {
+                order: 'asc'
+              }
+            }
+            hooks: true
+          }
+        }
+      }
+    }
+  }
+}>
+
+interface ReportViewTableProps {
+  report: ReportDetailWithRelations
+}
+
+const ReportViewTable = ({ report }: ReportViewTableProps) => {
+  // Type guard to validate the data structure
+  const isValidReportTestCaseData = (testCases: unknown): testCases is ReportDetailWithRelations['testCases'] => {
+    if (!Array.isArray(testCases)) return false
+    return testCases.every(
+      item => item && typeof item === 'object' && 'id' in item && 'testRunTestCase' in item && 'reportScenario' in item,
+    )
+  }
+
+  if (!isValidReportTestCaseData(report.testCases)) {
+    return <div>Error: Invalid report test case data format</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={reportViewTableCols}
+        data={report.testCases}
+        filterColumn="testCaseTitle"
+        filterPlaceholder="Filter by test case title..."
+        showSelectedRows={false}
+      />
+    </>
+  )
+}
+
+export default ReportViewTable

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

@@ -1,42 +1,42 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Code } from 'lucide-react'
-import { Suspense } from 'react'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { Metadata } from 'next'
-import TestCasesMetricTable from './test-cases-metric-table'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Test Cases Metrics Report',
-  description: 'Manage test cases report for identifying elements on pages',
-}
-
-const TestCasesMetricsReport = async ({searchParams}: {searchParams: Promise<{filter?: string}>}) => {
-  const resolvedSearchParams = await searchParams
-  const filter = resolvedSearchParams?.filter as 'repeatedlyFailing' | 'flaky' | undefined
-
-  return (
-    <>
-      <div className="mb-8">
-        <div className="flex items-center justify-between">
-          <div>
-            <PageHeader>
-              <span className="flex items-center">
-                <Code className="mr-2 h-8 w-8" />
-                Test Cases Report
-              </span>
-            </PageHeader>
-            <HeaderSubtitle>
-              Test cases are the individual tests that are used to test a specific feature or functionality
-            </HeaderSubtitle>
-          </div>
-        </div>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestCasesMetricTable filter={filter || 'repeatedlyFailing'} />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestCasesMetricsReport
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Code } from 'lucide-react'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { Metadata } from 'next'
+import TestCasesMetricTable from './test-cases-metric-table'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Cases Metrics Report',
+  description: 'Manage test cases report for identifying elements on pages',
+}
+
+const TestCasesMetricsReport = async ({searchParams}: {searchParams: Promise<{filter?: string}>}) => {
+  const resolvedSearchParams = await searchParams
+  const filter = resolvedSearchParams?.filter as 'repeatedlyFailing' | 'flaky' | undefined
+
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <PageHeader>
+              <span className="flex items-center">
+                <Code className="mr-2 h-8 w-8" />
+                Test Cases Report
+              </span>
+            </PageHeader>
+            <HeaderSubtitle>
+              Test cases are the individual tests that are used to test a specific feature or functionality
+            </HeaderSubtitle>
+          </div>
+        </div>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestCasesMetricTable filter={filter || 'repeatedlyFailing'} />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestCasesMetricsReport