feat: ✨ added test params related changes (#33)

* feat: ✨ added test params related changes * feat: ✨ updated for test parameters
WasiqB · Oct 1, 2024 · 9efacb7 · 9efacb7
1 parent 22e9dd8
commit 9efacb7
Show file tree

Hide file tree

Showing 14 changed files with 1,375 additions and 104 deletions.
diff --git a/components/data-table/columns.tsx b/components/data-table/columns.tsx
@@ -2,7 +2,15 @@ import * as React from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 import { statuses, TestResultData } from './data';
 import { Button } from '@/components/ui/button';
-import { CircleAlert, Link, Tag, Tags, TestTube } from 'lucide-react';
+import {
+  CircleAlert,
+  Link,
+  Table2,
+  Tag,
+  Tags,
+  TestTube,
+  TestTubes,
+} from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
 import { TestException, TestLog } from '@/types/types';
@@ -63,9 +71,53 @@ export const columns: ColumnDef<TestResultData>[] = [
       <SortableHeader column={column} header='Method Name' />
     ),
   },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <SortableHeader column={column} header='Status' />,
+    cell: ({ row }) => {
+      const foundStatus = statuses.find(
+        (status) => status.value === row.getValue('status')
+      );
+      if (!foundStatus) {
+        return null;
+      }
+      return (
+        <div className='flex items-center'>
+          {foundStatus && (
+            <Badge className={foundStatus.badge_style}>
+              <foundStatus.icon
+                className={cn('mr-2 h-4 w-4', foundStatus.label_style)}
+              />
+              {foundStatus.label}
+            </Badge>
+          )}
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: 'duration_ms',
+    header: ({ column }) => (
+      <SortableHeader column={column} header='Duration' />
+    ),
+    cell: ({ row }) => {
+      const duration = parseInt(row.getValue('duration_ms'));
+      const value = formatDuration(duration);
+      return <CellData value={value} align='right' />;
+    },
+  },
   {
     accessorKey: 'is_config',
-    header: 'Type',
+    header: () => (
+      <div className='flex max-w-10 justify-center'>
+        <TooltipWrapper text='Test Type'>
+          <TestTubes className='h-5 w-5' />
+        </TooltipWrapper>
+      </div>
+    ),
     cell: ({ row }) => {
       const value = row.getValue('is_config');
       return (
@@ -83,7 +135,13 @@ export const columns: ColumnDef<TestResultData>[] = [
   },
   {
     accessorKey: 'tags',
-    header: 'Groups',
+    header: () => (
+      <div className='flex max-w-10 justify-center'>
+        <TooltipWrapper text='Groups'>
+          <Tags className='h-5 w-5' />
+        </TooltipWrapper>
+      </div>
+    ),
     cell: ({ row }) => {
       const value: string[] = row.getValue('tags');
       return (
@@ -101,38 +159,13 @@ export const columns: ColumnDef<TestResultData>[] = [
       );
     },
   },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <SortableHeader column={column} header='Status' />,
-    cell: ({ row }) => {
-      const foundStatus = statuses.find(
-        (status) => status.value === row.getValue('status')
-      );
-      if (!foundStatus) {
-        return null;
-      }
-      return (
-        <div className='flex items-center'>
-          {foundStatus && (
-            <Badge className={foundStatus.badge_style}>
-              <foundStatus.icon
-                className={cn('mr-2 h-4 w-4', foundStatus.label_style)}
-              />
-              {foundStatus.label}
-            </Badge>
-          )}
-        </div>
-      );
-    },
-    filterFn: (row, id, value) => {
-      return value.includes(row.getValue(id));
-    },
-  },
   {
     accessorKey: 'exception',
     header: () => (
-      <div className='items-center'>
-        <CircleAlert className='h-4 w-4' />
+      <div className='flex max-w-10 justify-center'>
+        <TooltipWrapper text='Exception'>
+          <CircleAlert className='h-4 w-4' />
+        </TooltipWrapper>
       </div>
     ),
     cell: ({ row }) => {
@@ -195,7 +228,13 @@ export const columns: ColumnDef<TestResultData>[] = [
   },
   {
     accessorKey: 'attachment',
-    header: () => <Link className='h-4 w-4' />,
+    header: () => (
+      <div className='flex max-w-10 justify-center'>
+        <TooltipWrapper text='Attachments'>
+          <Link className='h-4 w-4' />
+        </TooltipWrapper>
+      </div>
+    ),
     cell: ({ row }) => {
       const attachment = row.getValue('attachment') as TestLog;
       const content = attachment.line?.trim();
@@ -210,6 +249,63 @@ export const columns: ColumnDef<TestResultData>[] = [
       );
     },
   },
+  {
+    accessorKey: 'parameters',
+    header: () => (
+      <div className='flex max-w-10 justify-center'>
+        <TooltipWrapper text='Parameters'>
+          <Table2 className='h-4 w-4' />
+        </TooltipWrapper>
+      </div>
+    ),
+    cell: ({ row }) => {
+      const params = row.getValue('parameters') as string[];
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        params &&
+        params.length > 1 && (
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+              <Button
+                variant='link'
+                onClick={() => setIsOpen(true)}
+                className='w-15'
+              >
+                <Table2 className='h-4 w-4' />
+              </Button>
+            </DialogTrigger>
+            <DialogContent className='flex flex-col sm:max-h-[90vh] sm:max-w-[90vw]'>
+              <DialogHeader>
+                <DialogTitle>Parameters</DialogTitle>
+                <DialogDescription>
+                  Here you can see the Test related Parameters
+                </DialogDescription>
+              </DialogHeader>
+              <div className='grid gap-4 py-4'>
+                <div className='grid grid-cols-1 items-center gap-4'>
+                  {params ? (
+                    <Card>
+                      <CardContent>
+                        <div className='mockup-code max-h-[300px] overflow-auto'>
+                          {params.map((line, index) => (
+                            <pre key={index} data-prefix={index + 1}>
+                              <code className='pl-2'>{line.trim()}</code>
+                            </pre>
+                          ))}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ) : (
+                    <p>No exception for this test</p>
+                  )}
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        )
+      );
+    },
+  },
   {
     accessorKey: 'started_at',
     header: ({ column }) => (
@@ -232,15 +328,4 @@ export const columns: ColumnDef<TestResultData>[] = [
       return <CellData value={value} align='right' />;
     },
   },
-  {
-    accessorKey: 'duration_ms',
-    header: ({ column }) => (
-      <SortableHeader column={column} header='Duration' />
-    ),
-    cell: ({ row }) => {
-      const duration = parseInt(row.getValue('duration_ms'));
-      const value = formatDuration(duration);
-      return <CellData value={value} align='right' />;
-    },
-  },
 ];
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @stylistic/ts/indent */
 'use client';
 
+import * as React from 'react';
 import {
   ColumnDef,
   ColumnFiltersState,

diff --git a/components/data-table/data.ts b/components/data-table/data.ts
@@ -8,6 +8,7 @@ export type TestResultData = {
   method_name: string;
   is_config: boolean;
   tags: string[];
+  parameters: string[];
   status: string;
   exception?: TestException;
   attachment?: TestLog;
@@ -26,10 +27,11 @@ export const getData = (data: TestResult): TestResultData[] => {
           result.push({
             suite_name: suite.name,
             test_name: test.name,
-            class_name: cls.name?.substring(cls.name.lastIndexOf('.')),
+            class_name: cls.name?.substring(cls.name.lastIndexOf('.') + 1),
             method_name: method.description || method.name,
             is_config: method.is_config,
             tags: method.tags || [],
+            parameters: method.parameters || [],
             status: method.status.toLowerCase(),
             exception: method.exception,
             attachment: method.log,

diff --git a/components/ui/table.tsx b/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'h-10 border border-gray-100 bg-gray-200 px-2 text-left align-middle font-bold text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'border border-gray-200 p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}

diff --git a/lib/formatting.ts b/lib/formatting.ts
@@ -15,7 +15,7 @@ export const formatDuration = (duration: number): string => {
 };
 
 export const formatTime = (dateTime: string): string => {
-  const TIME_FORMAT = 'hh:mm:ss bb';
+  const TIME_FORMAT = 'hh:mm:ss aa';
   if (dateTime.endsWith('AST')) {
     const cleanedDateString = dateTime.replace('AST', 'UTC');
     const parsedDate = parse(

diff --git a/lib/xml-parser.ts b/lib/xml-parser.ts
@@ -53,6 +53,24 @@ const getTags = (
   return result;
 };
 
+const getParams = (params: any): string[] => {
+  const result: string[] = [];
+  if (!params) return result;
+
+  const processParam = (param: any): void => {
+    result.push(param.value.trim());
+  };
+
+  const param = params.param;
+  if (Array.isArray(param)) {
+    param.forEach(processParam);
+  } else {
+    processParam(param);
+  }
+
+  return result;
+};
+
 const getTestMethods = (
   methods: any,
   className: string,
@@ -71,6 +89,7 @@ const getTestMethods = (
       finished_at: method['finished-at'],
       duration_ms: method['duration-ms'],
       tags: getTags(className, method.name, groups),
+      parameters: getParams(method.params),
       status: method.status,
       exception: getTestException(method.exception),
       log: getTestLog(method['reporter-output']),

diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.13",
     "typescript": "^5",
-    "typescript-eslint": "^8.7.0"
+    "typescript-eslint": "^8.8.0"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [