feat: enhance ObjectDataTable to handle API response structure and add DOM simulation tests

Author: hotlong

examples/app-react-crud/src/components/ObjectDataTable.tsx

@@ -22,8 +22,11 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
             if (!client) return;
             try {
                 // Get definition via proper API
-                const found = await client.meta.getItem('object', objectApiName);
-                if (mounted && found) setDef(found);
+                const found: any = await client.meta.getItem('object', objectApiName);
+                if (mounted && found) {
+                    const def = found.data || found;
+                    setDef(def);
+                }
             } catch (err) {
                 console.error('Failed to load definition', err);
             }

examples/app-react-crud/test/verify-dom.test.ts

@@ -0,0 +1,61 @@
+
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { simulateBrowser } from '../src/mocks/simulateBrowser';
+
+describe('DOM Simulation', () => {
+    let env: any;
+
+    beforeAll(async () => {
+        env = await simulateBrowser();
+        await env.client.connect();
+    });
+
+    afterAll(() => {
+        if (env) env.cleanup();
+    });
+
+    it('simulates ObjectDataTable structure verifying columns exist', async () => {
+        const { client } = env;
+        
+        // 1. Fetch Definition
+        const result: any = await client.meta.getItem('object', 'todo_task');
+        const def = result.data || result;
+        
+        console.log('Definition Check:', {
+            hasData: !!result.data,
+            name: def.name,
+            fieldCount: Object.keys(def.fields || {}).length
+        });
+        
+        expect(def.name).toBe('todo_task');
+        expect(Object.keys(def.fields).length).toBeGreaterThan(0);
+
+        // 2. Fetch Data
+        const dataResult: any = await client.data.find('todo_task');
+        let records = [];
+        if (dataResult.success && dataResult.data) records = dataResult.data;
+        else if (Array.isArray(dataResult)) records = dataResult;
+        
+        console.log('Data Check:', {
+            recordCount: records.length,
+            firstRecord: records[0]
+        });
+
+        // 3. Simulate Render Logic (pure JS, matching React)
+        const fields = def.fields || {};
+        const columns = Object.keys(fields).map(key => {
+            const f = fields[key];
+            return {
+                name: f.name || key,
+                label: f.label || key
+            };
+        }).filter(c => !['formatted_summary', 'password'].includes(c.name));
+
+        const headers = columns.map(c => c.label);
+        console.log('Resolved Columns:', headers);
+
+        // Fail if no columns (would result in empty table body)
+        expect(columns.length).toBeGreaterThan(0);
+        expect(headers).toContain('Subject'); // Assuming Field.text({ label }) works or fallback uses key
+    });
+});