Add tests for ObjectGridTable component and setup testing environment

- Created a new test file for the ObjectGridTable component to verify rendering and basic functionality.
- Added a mock configuration and data for testing purposes.
- Implemented a setup file for Jest to include necessary configurations and mock the ResizeObserver.
- Configured Vitest to use jsdom environment and specified setup files for testing.

Author: hotlong

apps/web/package.json

@@ -14,6 +14,8 @@
   "dependencies": {
     "@objectos/ui": "workspace:*",
     "@objectql/types": "^1.6.1",
+    "ag-grid-community": "^35.0.0",
+    "ag-grid-react": "^35.0.0",
     "better-auth": "^1.4.10",
     "clsx": "^2.1.0",
     "lucide-react": "^0.344.0",

apps/web/src/App.tsx

@@ -48,7 +48,8 @@ function AppContent() {
             <Route path={paths.APP_ROOT} element={<AppDashboard />} />
 
             {/* Object Routes */}
-            <Route path={paths.APP_OBJECT_LIST} element={<ObjectListRoute />} />
+            <Route path={paths.APP_OBJECT_LIST} element={<ObjectListRoute isCreating={false} />} />
+            <Route path={paths.APP_OBJECT_NEW} element={<ObjectListRoute isCreating={true} />} />
             <Route path={paths.APP_OBJECT_DETAIL} element={<ObjectDetailRoute />} />
             {/* Legacy/Compat routes support */}
             <Route path="/app/:appName/object/:objectName/:recordId" element={<ObjectDetailRoute />} />

apps/web/src/components/dashboard/ObjectListView.tsx

@@ -41,11 +41,19 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
 
         const params = new URLSearchParams();
         if (searchTerm) {
-             const textFields = objectSchema?.fields ? 
-                Object.entries(objectSchema.fields)
-                    .filter(([_, field]: [string, any]) => !field.type || field.type === 'string')
-                    .map(([key]) => key) 
-                : ['name', 'title', 'description', 'email'];
+             let textFields: string[] = [];
+             
+             if (objectSchema?.fields) {
+               const fieldsArr = Array.isArray(objectSchema.fields) 
+                 ? objectSchema.fields 
+                 : Object.values(objectSchema.fields);
+                 
+               textFields = fieldsArr
+                 .filter((field: any) => !field.type || field.type === 'string')
+                 .map((field: any) => field.name);
+             } else {
+               textFields = ['name', 'title', 'description', 'email'];
+             }
 
             if (textFields.length > 0) {
                  const searchFilters: any[] = [];
@@ -67,7 +75,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                 return res.json();
             })
             .then(result => {
-                const items = Array.isArray(result) ? result : (result.list || []);
+                const items = Array.isArray(result) ? result : (result.list || result.data || result.value || []);
                 setData(items);
             })
             .catch(err => {
@@ -92,19 +100,19 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
             return res.json();
         })
         .then(() => {
-            navigate(`/object/${objectName}`);
+            navigate('..');
             fetchData();
         })
         .catch(err => alert(err.message));
     }
 
     const onRowClick = (event: any) => {
         const id = event.data?.id || event.data?._id;
-        if (id) navigate(`/object/${objectName}/${id}`);
+        if (id) navigate(`${id}`);
     };
 
     return (
-        <div className="h-full flex flex-col space-y-4 p-4 overflow-hidden">
+        <div className="h-full flex flex-col space-y-4 overflow-hidden">
             <div className="flex items-center justify-between shrink-0">
                 <div className="flex items-center space-x-2">
                     <h1 className="text-2xl font-bold tracking-tight">{label}</h1>
@@ -127,7 +135,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                         <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
                         Refresh
                     </Button>
-                    <Button onClick={() => navigate(`/object/${objectName}/new`)} size="sm">
+                    <Button onClick={() => navigate('new')} size="sm">
                         <Plus className="h-4 w-4 mr-2" />
                         New
                     </Button>
@@ -153,7 +161,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
 
             <Dialog 
                 open={isCreating} 
-                onOpenChange={(open) => !open && navigate(`/object/${objectName}`)}
+                onOpenChange={(open) => !open && navigate('..')}
             >
                 <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
@@ -164,7 +172,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                         initialValues={{}}
                         headers={getHeaders()}
                         onSubmit={handleCreate} 
-                        onCancel={() => navigate(`/object/${objectName}`)} 
+                        onCancel={() => navigate('..')} 
                     />
                 </DialogContent>
             </Dialog>

apps/web/src/hooks/useObjectSchema.ts

@@ -35,15 +35,22 @@ export function useObjectSchema(objectName: string) {
             })
             .then(data => {
                 if (data) {
+                    // Normalize fields from Array to Record if needed
+                    if (data.fields && Array.isArray(data.fields)) {
+                        const fieldRecord: Record<string, any> = {};
+                        data.fields.forEach((f: any) => {
+                            if (f.name) fieldRecord[f.name] = f;
+                        });
+                        data.fields = fieldRecord;
+                    }
+
                     schemaCache[objectName] = data;
                     setSchema(data);
+                    setLoading(false);
                 } else {
-                    // Try bulk fetch fallback if 404/error on single? 
-                    // Assuming 404 meant endponit doesn't exist, not object.
-                    // But actually, if object doesn't exist, we want null.
-                     setError(new Error('Object not found'));
+                    // Trigger fallback
+                    throw new Error('Not found');
                 }
-                setLoading(false);
             })
             .catch(() => {
                 // Fallback: Fetch all

apps/web/src/main.tsx

@@ -2,6 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
+import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
+
+// Register AG Grid Modules
+ModuleRegistry.registerModules([ AllCommunityModule ]);
+
+import 'ag-grid-community/styles/ag-grid.css'
+import 'ag-grid-community/styles/ag-theme-alpine.css'
 import '@objectos/ui/dist/index.css'
 import './index.css'
 

apps/web/src/pages/objects/ObjectListRoute.tsx

@@ -6,7 +6,7 @@ import { ObjectNotFound } from '../../components/dashboard/ObjectNotFound';
 import { Spinner } from '@objectos/ui';
 import { useRouter } from '../../hooks/useRouter';
 
-export function ObjectListRoute() {
+export function ObjectListRoute({ isCreating = false }: { isCreating?: boolean }) {
     const { objectName, appName } = useParams();
     const { schema, loading, error } = useObjectSchema(objectName || '');
     const { user } = useAuth();
@@ -21,7 +21,7 @@ export function ObjectListRoute() {
         <ObjectListView 
             objectName={objectName!} 
             user={user}
-            isCreating={false}
+            isCreating={isCreating}
             navigate={navigate}
             objectSchema={schema}
         />

packages/ui/package.json

@@ -12,22 +12,28 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint src/**",
-    "test": "echo \"No tests specified\" && exit 0"
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "autoprefixer": "^10.4.0",
+    "jsdom": "^27.4.0",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",

packages/ui/src/components/__tests__/object-grid-table.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { ObjectGridTable } from '../object-grid-table'
+import { ObjectConfig } from '@objectql/types'
+import { describe, it, expect } from 'vitest'
+
+const mockConfig: ObjectConfig = {
+  name: 'testObject',
+  fields: {
+    name: { type: 'string', label: 'Name' },
+    age: { type: 'integer', label: 'Age' }
+  }
+}
+
+const mockData = [
+  { id: '1', name: 'Alice', age: 30 },
+  { id: '2', name: 'Bob', age: 25 }
+]
+
+describe('ObjectGridTable', () => {
+  it('renders the grid container', () => {
+    const { container } = render(
+      <div style={{ height: 500, width: 800 }}>
+        <ObjectGridTable objectConfig={mockConfig} data={mockData} />
+      </div>
+    )
+    // Check for the theme class which we apply to the wrapper
+    expect(container.querySelector('.ag-theme-alpine')).toBeInTheDocument()
+  })
+
+  // Testing AG Grid internals in JSDOM is notoriously flaky because it virtualizes everything
+  // and relies on real layout calculation. We mainly check if the component mounts.
+})

packages/ui/src/components/object-grid-table.tsx

@@ -1,12 +1,18 @@
 import * as React from "react"
 import { AgGridReact } from "ag-grid-react"
-import type { 
-  ColDef, 
-  GridReadyEvent, 
-  CellClickedEvent,
-  GridApi,
-  ICellRendererParams
+import { 
+  ModuleRegistry, 
+  AllCommunityModule,
+  type ColDef, 
+  type GridReadyEvent, 
+  type CellClickedEvent,
+  type GridApi,
+  type ICellRendererParams
 } from "ag-grid-community"
+
+// Register AG Grid Modules
+ModuleRegistry.registerModules([ AllCommunityModule ]);
+
 import "ag-grid-community/styles/ag-grid.css"
 import "ag-grid-community/styles/ag-theme-alpine.css"
 import { format } from "date-fns"
@@ -79,25 +85,19 @@ const BooleanCellRenderer = (props: ICellRendererParams) => {
 /**
  * Cell renderer for date/datetime fields
  */
-const DateCellRenderer = (props: ICellRendererParams) => {
-  const { value, colDef } = props
+const DateCellRenderer = (props: ICellRendererParams & { fieldType?: FieldType }) => {
+  const { value, fieldType } = props
 
   if (!value) {
     return <span className="text-muted-foreground">-</span>
   }
 
   try {
-    const date = value instanceof Date ? value : new Date(value)
-    
-    // Check if date is valid
+    const date = new Date(value)
     if (isNaN(date.getTime())) {
       return <span className="text-muted-foreground">{String(value)}</span>
     }
 
-    // Format based on field type from colDef
-    const extendedColDef = colDef as ExtendedColDef
-    const fieldType = extendedColDef.fieldType
-    
     if (fieldType === 'datetime') {
       return (
         <div className="flex items-center gap-1.5">
@@ -121,15 +121,13 @@ const DateCellRenderer = (props: ICellRendererParams) => {
 /**
  * Cell renderer for number fields (including currency and percent)
  */
-const NumberCellRenderer = (props: ICellRendererParams) => {
-  const { value, colDef } = props
+const NumberCellRenderer = (props: ICellRendererParams & { fieldType?: FieldType }) => {
+  const { value, fieldType } = props
 
   if (value === null || value === undefined) {
     return <span className="text-muted-foreground">-</span>
   }
 
-  const extendedColDef = colDef as ExtendedColDef
-  const fieldType = extendedColDef.fieldType
   const num = Number(value)
 
   if (isNaN(num)) {
@@ -158,10 +156,9 @@ const NumberCellRenderer = (props: ICellRendererParams) => {
 /**
  * Cell renderer for select fields with options
  */
-const SelectCellRenderer = (props: ICellRendererParams) => {
-  const { value, colDef } = props
-  const extendedColDef = colDef as ExtendedColDef
-  const options = extendedColDef.fieldOptions || []
+const SelectCellRenderer = (props: ICellRendererParams & { fieldOptions?: any[] }) => {
+  const { value, fieldOptions } = props
+  const options = fieldOptions || []
 
   if (!value) {
     return <span className="text-muted-foreground">-</span>
@@ -337,26 +334,32 @@ function getCellRendererForFieldType(fieldType: FieldType): any {
 /**
  * Generate AG Grid column definitions from ObjectQL object metadata
  */
-function generateColumnDefs(objectConfig: ObjectConfig): ExtendedColDef[] {
-  const columnDefs: ExtendedColDef[] = []
+function generateColumnDefs(objectConfig: ObjectConfig): ColDef[] {
+  const columnDefs: ColDef[] = []
 
   const fields = objectConfig.fields || {}
 
-  Object.entries(fields).forEach(([fieldName, fieldConfig]: [string, FieldConfig]) => {
+  const entries: [string, FieldConfig][] = Array.isArray(fields) 
+    ? fields.map((f: any) => [f.name, f])
+    : Object.entries(fields);
+
+  entries.forEach(([fieldName, fieldConfig]: [string, FieldConfig]) => {
     // Skip hidden fields
     if (fieldConfig.hidden) {
       return
     }
 
-    const colDef: ExtendedColDef = {
+    const colDef: ColDef = {
       field: fieldName,
       headerName: fieldConfig.label || fieldName,
       sortable: true,
       filter: true,
       resizable: true,
       // Store field type and options for cell renderers
-      fieldType: fieldConfig.type,
-      fieldOptions: fieldConfig.options,
+      cellRendererParams: {
+        fieldType: fieldConfig.type,
+        fieldOptions: fieldConfig.options,
+      }
     }
 
     // Set appropriate cell renderer based on field type
@@ -435,24 +438,33 @@ export function ObjectGridTable({
     onSelectionChanged(selectedRows)
   }, [gridApi, onSelectionChanged])
 
+  const selection = React.useMemo(() => {
+      if (!rowSelection) return undefined;
+      return {
+          mode: rowSelection === true || rowSelection === 'multiple' ? 'multiRow' : 'singleRow',
+          enableClickSelection: false,
+      } as const;
+  }, [rowSelection]);
+
   return (
     <div 
       className="ag-theme-alpine dark:ag-theme-alpine-dark overflow-hidden rounded-lg border"
       style={{ height: typeof height === 'number' ? `${height}px` : height, width: '100%' }}
     >
       <AgGridReact
+        theme="legacy"
         ref={gridRef}
         rowData={data}
         columnDefs={columnDefs}
         defaultColDef={defaultColDef}
         onGridReady={handleGridReady}
         onCellClicked={onCellClicked}
         onSelectionChanged={handleSelectionChanged}
-        rowSelection={rowSelection === true ? 'multiple' : rowSelection || undefined}
-        suppressRowClickSelection={true}
+        rowSelection={selection}
         animateRows={true}
         pagination={pagination}
         paginationPageSize={pageSize}
+        paginationPageSizeSelector={[10, 20, 50, 100]}
         getRowId={(params) => params.data._id || params.data.id}
       />
     </div>

packages/ui/test/setup.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom'
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}