fix: update MSW plugin configuration in msw-browser; enhance objectStackLoader to manage dynamic handlers in Storybook

Author: hotlong

.storybook/msw-browser.ts

@@ -13,11 +13,13 @@ import { config as crmConfig } from '@object-ui/example-crm';
 import { http, HttpResponse } from 'msw';
 
 let kernel: ObjectKernel | null = null;
+let mswPlugin: MSWPlugin | null = null;
 
 export async function startMockServer() {
   if (kernel) return kernel;
 
   console.log('[Storybook MSW] Starting ObjectStack Runtime (Browser Mode)...');
+
   console.log('[Storybook MSW] Loaded Config:', crmConfig ? 'Found' : 'Missing', crmConfig?.apps?.length);
 
   if (crmConfig && crmConfig.objects) {
@@ -40,8 +42,8 @@ export async function startMockServer() {
         console.error('❌ CRM Config is missing! Skipping AppPlugin.');
     }
 
-    kernel.use(new MSWPlugin({
-        enableBrowser: true,
+    mswPlugin = new MSWPlugin({
+        enableBrowser: false, // Disable auto-start, let msw-storybook-addon handle it
         baseUrl: '/api/v1', 
         logRequests: true,
         customHandlers: [
@@ -70,7 +72,9 @@ export async function startMockServer() {
                 });
             })
         ]
-    }));
+    });
+
+    kernel.use(mswPlugin);
 
     console.log('[Storybook MSW] Bootstrapping kernel...');
     await kernel.bootstrap();
@@ -105,4 +109,8 @@ async function initializeMockData(driver: InMemoryDriver) {
     }
 }
 
+export function getHandlers() {
+    return mswPlugin?.getHandlers() || [];
+}
+
 export { kernel };

.storybook/preview.ts

@@ -1,8 +1,9 @@
-import type { Preview } from '@storybook/react-vite'
+import type { Preview, LoaderFunction } from '@storybook/react-vite'
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { handlers } from './mocks';
-import { startMockServer } from './msw-browser';
+import { startMockServer, getHandlers } from './msw-browser';
 import '../packages/components/src/index.css';
+
 import { ComponentRegistry } from '@object-ui/core';
 import * as components from '../packages/components/src/index';
 
@@ -11,17 +12,46 @@ initialize({
   onUnhandledRequest: 'bypass'
 });
 
-// Start MSW runtime with ObjectStack kernel
-// This must be called during Storybook initialization
-if (typeof window !== 'undefined') {
-  startMockServer().catch(err => {
-    console.error('Failed to start MSW runtime:', err);
-  });
-}
+// Custom loader to ensure ObjectStack kernel is ready and handlers are active
+const objectStackLoader: LoaderFunction = async (context) => {
+  // Ensure kernel is started
+  if (typeof window !== 'undefined') {
+    await startMockServer().catch(err => {
+      console.error('Failed to start MSW runtime:', err);
+    });
+  }
+
+  // Get dynamic handlers from the ObjectStack kernel
+  const kernelHandlers = getHandlers();
+  
+  // Inject kernel handlers into parameters for mswLoader to pick up.
+  // We prepend them so specific story handlers can override them if needed,
+  // OR we append them if we want kernel to be fallback.
+  // Generally, specific mocks should win, so kernel handlers should be 'after' or 'fallback'.
+  // But msw-storybook-addon applies handlers in order.
+  
+  // If we assume MSW standard: first matching handler wins.
+  // So specific story handlers (from parameters.msw.handlers) should come FIRST.
+  // Kernel handlers (generic) should come LAST.
+  
+  const existingHandlers = context.parameters.msw?.handlers || [];
+  
+  // Careful: existingHandlers might be a single handler or array.
+  const existingArray = Array.isArray(existingHandlers) ? existingHandlers : [existingHandlers].filter(Boolean);
+  
+  context.parameters.msw = {
+    ...context.parameters.msw,
+    handlers: [...existingArray, ...kernelHandlers]
+  };
+
+  // Now run the standard mswLoader which will use the updated parameters
+  return mswLoader(context);
+};
 
 // Register all base components for Storybook
 Object.values(components);
 
+
 // Import and register all plugin components for Storybook
 // This ensures plugin components are available for the plugin stories
 import '@object-ui/plugin-aggrid';
@@ -42,7 +72,7 @@ import '@object-ui/layout';
 import '@object-ui/fields';
 
 const preview: Preview = {
-  loaders: [mswLoader],
+  loaders: [objectStackLoader],
   parameters: {
     msw: {
        handlers: handlers

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

@@ -42,11 +42,11 @@ describe('ObjectGrid MSW Integration', () => {
 
       // Wait for data to load
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
       }, { timeout: 5000 });
 
-      expect(screen.getByText('jane.smith@example.com')).toBeInTheDocument();
-      expect(screen.getByText('Tech Solutions')).toBeInTheDocument();
+      expect(screen.getByText('alice@example.com')).toBeInTheDocument();
+      expect(screen.getByText('TechCorp')).toBeInTheDocument();
     });
 
     it('should render all columns specified in schema', async () => {
@@ -55,20 +55,20 @@ describe('ObjectGrid MSW Integration', () => {
           schema={{
             type: 'object-grid',
             objectName: 'contact',
-            columns: ['name', 'email', 'phone', 'company', 'priority'],
+            columns: ['name', 'email', 'phone', 'company', 'status'],
           }}
           dataSource={dataSource}
         />
       );
 
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
       }, { timeout: 5000 });
 
       // Check that all specified columns are rendered
-      expect(screen.getByText('+1234567890')).toBeInTheDocument();
-      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      expect(screen.getByText('8')).toBeInTheDocument();
+      expect(screen.getByText('555-0101')).toBeInTheDocument();
+      expect(screen.getByText('TechCorp')).toBeInTheDocument();
+      expect(screen.getByText('Active')).toBeInTheDocument();
     });
 
     it('should handle empty data gracefully', async () => {
@@ -90,7 +90,7 @@ describe('ObjectGrid MSW Integration', () => {
 
       // Should not show any contact data
       await waitFor(() => {
-        expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+        expect(screen.queryByText('Alice Johnson')).not.toBeInTheDocument();
       });
     });
   });
@@ -139,7 +139,7 @@ describe('ObjectGrid MSW Integration', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
       }, { timeout: 5000 });
 
       // Note: Row selection UI depends on the actual grid implementation
@@ -163,7 +163,7 @@ describe('ObjectGrid MSW Integration', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
       }, { timeout: 5000 });
 
       // Look for edit buttons (implementation-specific)
@@ -187,7 +187,7 @@ describe('ObjectGrid MSW Integration', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
       }, { timeout: 5000 });
 
       // Look for delete buttons (implementation-specific)
@@ -211,7 +211,7 @@ describe('ObjectGrid MSW Integration', () => {
       // Check for loading indicator (implementation-specific)
       // The grid should eventually show data
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
       }, { timeout: 5000 });
     });
 
@@ -228,9 +228,9 @@ describe('ObjectGrid MSW Integration', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
-        expect(screen.getByText('Jane Smith')).toBeInTheDocument();
-        expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
+        expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+        expect(screen.getByText('Bob Smith')).toBeInTheDocument();
+        expect(screen.getByText('Charlie Brown')).toBeInTheDocument();
       }, { timeout: 5000 });
     });
   });

packages/components/src/__tests__/complex-disclosure-renderers.test.tsx

@@ -178,10 +178,11 @@ describe('Complex Renderers - Display Issue Detection', () => {
     it('should render scrollable area', () => {
       const { container } = renderComponent({
         type: 'scroll-area',
-        content: [{ type: 'text', content: 'Scrollable content' }],
+        children: [{ type: 'text', content: 'Scrollable content' }],
       });
 
       // ScrollArea renders content
+
       expect(container.textContent).toContain('Scrollable content');
     });
   });