feat: enhance ContainerRenderer and SchemaRenderer to support properties wrapper and add system integration test for help page rendering

Author: hotlong

apps/console/src/__tests__/BrowserSimulation.test.tsx

@@ -0,0 +1,61 @@
+
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import React from 'react';
+import appConfig from '../../objectstack.config';
+
+// -----------------------------------------------------------------------------
+// SYSTEM INTEGRATION TEST
+// -----------------------------------------------------------------------------
+// This test simulates the exact browser runtime environment of the Console App.
+// It verifies that the configuration loaded from 'kitchen-sink' is correctly
+// processed by the router and the 'PageRenderer' component we just fixed.
+// -----------------------------------------------------------------------------
+
+// 1. Mock the DataSource to avoid real network calls
+class MockDataSource {
+    async retrieve() { return {}; }
+    async find() { return []; }
+}
+const mockClient = {
+    connect: vi.fn().mockResolvedValue(true)
+};
+
+// 2. Mock App Dependencies that are outside the scope of UI rendering
+vi.mock('@objectstack/client', () => ({
+    ObjectStackClient: vi.fn(() => mockClient)
+}));
+vi.mock('../dataSource', () => ({
+    ObjectStackDataSource: vi.fn(() => new MockDataSource())
+}));
+
+// 3. Import Components under test
+import { PageView } from '../components/PageView';
+
+describe('System Integration: Help Page Rendering', () => {
+    
+    it('should successfully locate and render the "help_page" from kitchen-sink config', async () => {
+        // A. Verify Configuration Integrity
+        const helpPage = appConfig.pages?.find((p: any) => p.name === 'help_page');
+        expect(helpPage).toBeDefined();
+
+        // B. Simulate Browser Navigation
+        // IMPORTANT: We must setup the Route path so :pageName param is captured
+        render(
+            <MemoryRouter initialEntries={['/page/help_page']}>
+                 <Routes>
+                    <Route path="/page/:pageName" element={<PageView />} />
+                 </Routes>
+            </MemoryRouter>
+        );
+
+        // C. Verify Visual Output
+        await waitFor(() => {
+            expect(screen.getByText(/Application Guide/i)).toBeInTheDocument();
+        });
+
+        expect(screen.getByText(/Welcome to the ObjectStack Console/i)).toBeInTheDocument();
+        expect(screen.getByText(/Dynamic Object CRUD/i)).toBeInTheDocument();
+    });
+});

packages/components/src/renderers/layout/container.tsx

@@ -52,23 +52,29 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
       className
     );
 
-    // Extract designer-related props
+    // Extract designer-related properties
     const { 
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
         style, 
+        properties, // Handle properties wrapper if it exists (legacy/config fix)
         ...containerProps 
     } = props;
 
+    // Merge properties if they exist (handling the properties wrapper issue)
+    const mergedProps = { ...containerProps, ...properties };
+
     return (
       <div 
         ref={ref}
         className={containerClass} 
-        {...containerProps}
+        {...mergedProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
       >
         {schema.children && renderChildren(schema.children)}
+        {/* Support properties.children which comes from objectstack.config wrapper */}
+        {properties?.children && renderChildren(properties.children)}
       </div>
     );
   }

packages/react/src/SchemaRenderer.tsx

@@ -19,8 +19,15 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
     if (!schema || typeof schema === 'string') return schema;
 
     const evaluator = new ExpressionEvaluator({ data: dataSource });
+    // Shallow copy
     const newSchema = { ...schema };
 
+    // COMPAT: Hoist 'properties' up to schema level
+    // This allows support for strict configs that wrap all props in 'properties'
+    if (newSchema.properties) {
+        Object.assign(newSchema, newSchema.properties);
+    }
+
     // Evaluate 'content' (common in Text, Button)
     if (typeof newSchema.content === 'string') {
       newSchema.content = evaluator.evaluate(newSchema.content);