feat: ✨ adding drill down support for the tests

CHANGELOG.md

@@ -1,17 +1,17 @@
-
-
-
 ## 0.4.0 (2024-10-27)
 
 #### :rocket: New Feature
-* [#61](https://github.com/WasiqB/ultra-reporter-app/pull/61) feat: :sparkles: updated landing page ([@WasiqB](https://github.com/WasiqB))
-* [#60](https://github.com/WasiqB/ultra-reporter-app/pull/60) feat: :sparkles: added config method filter toggle ([@WasiqB](https://github.com/WasiqB))
-* [#57](https://github.com/WasiqB/ultra-reporter-app/pull/57) feat: :sparkles: added test execution trend chart ([@WasiqB](https://github.com/WasiqB))
+
+- [#61](https://github.com/WasiqB/ultra-reporter-app/pull/61) feat: :sparkles: updated landing page ([@WasiqB](https://github.com/WasiqB))
+- [#60](https://github.com/WasiqB/ultra-reporter-app/pull/60) feat: :sparkles: added config method filter toggle ([@WasiqB](https://github.com/WasiqB))
+- [#57](https://github.com/WasiqB/ultra-reporter-app/pull/57) feat: :sparkles: added test execution trend chart ([@WasiqB](https://github.com/WasiqB))
 
 #### :bug: Bug Fix
-* [#62](https://github.com/WasiqB/ultra-reporter-app/pull/62) fix: :bug: added support for multiple attachments for single test ([@WasiqB](https://github.com/WasiqB))
+
+- [#62](https://github.com/WasiqB/ultra-reporter-app/pull/62) fix: :bug: added support for multiple attachments for single test ([@WasiqB](https://github.com/WasiqB))
 
 #### Committers: 1
+
 - Wasiq Bhamla ([@WasiqB](https://github.com/WasiqB))
 
 ## 0.3.0 (2024-10-15)

apps/web/app/(app)/not-found.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@ultra-reporter/ui/components/button';
+import Link from 'next/link';
+
+const NotFound = (): JSX.Element => {
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center px-4 text-center'>
+      <h1 className='text-6xl font-bold text-gray-900 dark:text-gray-100'>
+        404
+      </h1>
+      <h2 className='mt-4 text-2xl font-semibold text-gray-700 dark:text-gray-300'>
+        Page Not Found
+      </h2>
+      <p className='mt-2 text-gray-600 dark:text-gray-400'>
+        The page you're looking for doesn't exist or has been moved.
+      </p>
+      <Button asChild className='mt-8'>
+        <Link href='/'>Return Home</Link>
+      </Button>
+    </div>
+  );
+};
+
+export default NotFound;

apps/web/app/(app)/results/page.tsx

@@ -6,6 +6,7 @@ import {
   VisibilityState,
 } from '@tanstack/react-table';
 import { AreaChartComponent } from '@ultra-reporter/ui/charts/area-chart';
+import { barConfig, chartConfig } from '@ultra-reporter/ui/charts/chart-props';
 import { DoughNutComponent } from '@ultra-reporter/ui/charts/dough-nut-chart';
 import { PieComponent } from '@ultra-reporter/ui/charts/pie-chart';
 import {
@@ -15,63 +16,50 @@ import {
   CardHeader,
   CardTitle,
 } from '@ultra-reporter/ui/components/card';
-import { ChartConfig } from '@ultra-reporter/ui/components/chart';
 import { Skeleton } from '@ultra-reporter/ui/components/skeleton';
-import { getFormattedData, TestResultData } from '@ultra-reporter/ui/data';
+import { getFormattedData } from '@ultra-reporter/ui/data';
 import { DataTable } from '@ultra-reporter/ui/data-table/data-table';
-import { columns } from '@ultra-reporter/ui/data-table/table/columns';
+import { suiteColumns } from '@ultra-reporter/ui/data-table/table/suite-columns';
 import { NavBar } from '@ultra-reporter/ui/home/nav-bar';
+import { BreadcrumbNav } from '@ultra-reporter/ui/results/breadcrumb-nav';
 import { cn } from '@ultra-reporter/utils/cn';
-import { FormattedData } from '@ultra-reporter/utils/types';
+import {
+  FormattedData,
+  ProcessedData,
+  TestClassResultData,
+  TestMethodResultData,
+  TestResultData,
+  TestSuiteResultData,
+} from '@ultra-reporter/utils/types';
 import { useEffect, useState } from 'react';
 
-const chartConfig: ChartConfig = {
-  total: {
-    label: 'Test Cases',
-  },
-  pass: {
-    label: 'Passes',
-    color: 'hsl(var(--passed))',
-  },
-  fail: {
-    label: 'Failed',
-    color: 'hsl(var(--failed))',
-  },
-  skip: {
-    label: 'Skipped',
-    color: 'hsl(var(--skipped))',
-  },
-  ignored: {
-    label: 'Ignored',
-    color: 'hsl(var(--ignored))',
-  },
-};
-
-const barConfig: ChartConfig = {
-  property: {
-    label: 'Method',
-    color: 'hsl(var(--failed))',
-  },
-};
-
 const ResultsPage = (): JSX.Element => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [result, setResult] = useState<TestResultData[]>([]);
+  const [suites, setSuites] = useState<TestSuiteResultData[]>([]);
+  const [tests, setTests] = useState<TestResultData[]>([]);
+  const [classes, setClasses] = useState<TestClassResultData[]>([]);
+  const [methods, setMethods] = useState<TestMethodResultData[]>([]);
   const [formattedData, setFormattedData] = useState<FormattedData>();
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const resultData = localStorage.getItem('json-data') as string;
     if (resultData) {
-      const testResult: TestResultData[] = JSON.parse(resultData);
-      setResult(testResult);
-      setFormattedData(getFormattedData(testResult));
+      const { suites, tests, classes, methods }: ProcessedData =
+        JSON.parse(resultData);
+      setSuites(suites);
+      setTests(tests);
+      setClasses(classes);
+      setMethods(methods);
+      setFormattedData(getFormattedData(suites));
     }
     setIsLoading(false);
   }, []);
 
+  const breadcrumbItems = [{ label: 'All Suites', href: '/results' }];
+
   const {
     passed,
     failed,
@@ -90,7 +78,8 @@ const ResultsPage = (): JSX.Element => {
         cta='Generate new Report'
         showFeedback
       />
-      <main className='flex-grow pt-16'>
+      <main className='flex-grow'>
+        <BreadcrumbNav items={breadcrumbItems} />
         <section className='container mx-auto space-y-6 p-4'>
           <Card className='bg-card text-card-foreground'>
             <CardHeader className='items-center pb-5'>
@@ -183,22 +172,24 @@ const ResultsPage = (): JSX.Element => {
               </>
             )}
           </div>
-          <div className='grid grid-cols-1 gap-6'>
-            {isLoading ? (
-              <>
-                <Skeleton className='h-[300px] w-full' />
-              </>
-            ) : (
-              <>
-                <AreaChartComponent
-                  title='Test Execution Trends (in seconds)'
-                  description='Displays the test execution time trends'
-                  config={barConfig}
-                  data={areaChartData || []}
-                />
-              </>
-            )}
-          </div>
+          {areaChartData && areaChartData.length > 0 && (
+            <div className='grid grid-cols-1 gap-6'>
+              {isLoading ? (
+                <>
+                  <Skeleton className='h-[300px] w-full' />
+                </>
+              ) : (
+                <>
+                  <AreaChartComponent
+                    title='Test Execution Trends (in seconds)'
+                    description='Displays the test execution time trends'
+                    config={barConfig}
+                    data={areaChartData || []}
+                  />
+                </>
+              )}
+            </div>
+          )}
           <Card>
             <CardHeader className='items-center pb-5'>
               <CardTitle className='text-xl'>Test Details</CardTitle>
@@ -209,11 +200,11 @@ const ResultsPage = (): JSX.Element => {
             <CardContent>
               {isLoading ? (
                 <Skeleton className='h-[400px] w-full' />
-              ) : result ? (
+              ) : suites ? (
                 <DataTable
-                  columns={columns}
-                  data={result}
-                  filterColumn='method_name'
+                  columns={suiteColumns}
+                  data={suites}
+                  filterColumn='suite_name'
                   columnFilters={columnFilters}
                   columnVisibility={columnVisibility}
                   sorting={sorting}

apps/web/package.json

@@ -14,7 +14,7 @@
     "@tanstack/react-table": "^8.20.5",
     "@ultra-reporter/ui": "workspace:*",
     "@ultra-reporter/utils": "workspace:*",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.454.0",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18"

package.json

@@ -27,19 +27,19 @@
     "@eslint/compat": "^1.2.2",
     "@next/eslint-plugin-next": "^14.2.15",
     "@release-it-plugins/lerna-changelog": "^7.0.0",
-    "@stylistic/eslint-plugin-js": "^2.9.0",
-    "@stylistic/eslint-plugin-ts": "^2.9.0",
-    "@types/node": "^22.8.7",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
+    "@stylistic/eslint-plugin-js": "^2.10.1",
+    "@stylistic/eslint-plugin-ts": "^2.10.1",
+    "@types/node": "^22.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "@vercel/style-guide": "^6.0.0",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "2.2.3",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "globals": "^15.11.0",
+    "globals": "^15.12.0",
     "husky": "^9.1.6",
     "lerna-changelog": "^2.2.0",
     "lint-staged": "^15.2.10",
@@ -50,7 +50,7 @@
     "release-it-pnpm": "^4.6.3",
     "turbo": "^2.2.3",
     "typescript": "^5",
-    "typescript-eslint": "^8.11.0"
+    "typescript-eslint": "^8.13.0"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [

packages/tailwind-config/package.json

@@ -14,9 +14,9 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "postcss": "^8",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.14",
+    "postcss": "^8",
     "tailwindcss": "^3.4.14"
   }
 }