meno-core 1.0.0

package/lib/client/routing/RouteLoader.test.ts

@@ -0,0 +1,635 @@
+import { test, expect, describe, beforeEach, afterEach, mock } from 'bun:test';
+import { RouteLoader, RouteLoaderConfig } from './RouteLoader';
+import { ComponentRegistry } from '../componentRegistry';
+import { API_ROUTES, NOT_FOUND_TIMEOUT_MS } from '../../shared/constants';
+import type { ComponentNode } from '../../shared/types';
+
+describe('RouteLoader', () => {
+  let componentRegistry: ComponentRegistry;
+  let config: RouteLoaderConfig;
+  let routeLoader: RouteLoader;
+  let mockFetch: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    componentRegistry = new ComponentRegistry();
+    config = {
+      componentRegistry,
+    };
+    routeLoader = new RouteLoader(config);
+    
+    // Mock fetch globally
+    mockFetch = mock(() => Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({}),
+      text: () => Promise.resolve('{}'),
+    }));
+    global.fetch = mockFetch as any;
+  });
+
+  afterEach(() => {
+    routeLoader.cancel();
+  });
+
+  describe('loadGlobalComponents', () => {
+    test('should successfully load and merge global components', async () => {
+      const globalComps = {
+        Button: {
+          type: 'component',
+          component: {
+            interface: {},
+            structure: { type: 'node', tag: 'button' },
+          },
+        },
+      };
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve(globalComps),
+      } as any);
+
+      await routeLoader.loadGlobalComponents();
+
+      expect(componentRegistry.get('Button')).toBeDefined();
+      expect(mockFetch).toHaveBeenCalledWith(API_ROUTES.COMPONENTS, {
+        cache: 'no-store',
+      });
+    });
+
+    test('should handle network errors gracefully', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      // Should not throw - errors are caught internally
+      await routeLoader.loadGlobalComponents();
+      // Test passes if no exception is thrown
+    });
+
+    test('should handle invalid JSON gracefully', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.reject(new Error('Invalid JSON')),
+      } as any);
+
+      // Should not throw - errors are caught internally
+      await routeLoader.loadGlobalComponents();
+      // Test passes if no exception is thrown
+    });
+
+    test('should use no-cache header', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({}),
+      } as any);
+
+      await routeLoader.loadGlobalComponents();
+
+      expect(mockFetch).toHaveBeenCalledWith(API_ROUTES.COMPONENTS, {
+        cache: 'no-store',
+      });
+    });
+
+    test('should respect abort signal when loading global components', async () => {
+      const abortController = new AbortController();
+      
+      // Start loading
+      const loadPromise = routeLoader.loadGlobalComponents(abortController.signal);
+      
+      // Abort immediately
+      abortController.abort();
+      
+      await loadPromise;
+      
+      // Should complete without error (abort is handled gracefully)
+      // Test passes if no exception is thrown
+    });
+  });
+
+  describe('loadPages', () => {
+    test('should successfully load pages list', async () => {
+      const pagesData = { pages: ['/', '/about', '/contact'] };
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve(pagesData),
+      } as any);
+
+      const pages = await routeLoader.loadPages();
+
+      expect(pages).toEqual(['/', '/about', '/contact']);
+      expect(mockFetch).toHaveBeenCalledWith(API_ROUTES.PAGES);
+    });
+
+    test('should call onPagesLoaded callback', async () => {
+      const pagesData = { pages: ['/', '/about'] };
+      const onPagesLoaded = mock(() => {});
+
+      config.onPagesLoaded = onPagesLoaded;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve(pagesData),
+      } as any);
+
+      await routeLoader.loadPages();
+
+      expect(onPagesLoaded).toHaveBeenCalledWith(['/', '/about']);
+    });
+
+    test('should return empty array on error', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      const pages = await routeLoader.loadPages();
+
+      expect(pages).toEqual([]);
+    });
+
+    test('should handle invalid response format', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({}),
+      } as any);
+
+      const pages = await routeLoader.loadPages();
+
+      expect(pages).toEqual([]);
+    });
+
+    test('should handle missing pages property', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ other: 'data' }),
+      } as any);
+
+      const pages = await routeLoader.loadPages();
+
+      expect(pages).toEqual([]);
+    });
+  });
+
+  describe('loadComponents', () => {
+    test('should successfully load page with root only', async () => {
+      const pageData = {
+        root: {
+          type: 'node',
+          tag: 'div',
+          children: ['Hello'],
+        },
+      };
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any) // loadGlobalComponents
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve(JSON.stringify(pageData)),
+        } as any); // loadComponents
+
+      const onLoadStart = mock(() => {});
+      const onLoadComplete = mock(() => {});
+
+      config.onLoadStart = onLoadStart;
+      config.onLoadComplete = onLoadComplete;
+      routeLoader = new RouteLoader(config);
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toEqual(pageData.root);
+      expect(onLoadStart).toHaveBeenCalled();
+      expect(onLoadComplete).toHaveBeenCalledWith(pageData.root);
+    });
+
+    test('should successfully load page with components section', async () => {
+      const pageData = {
+        components: {
+          Card: {
+            type: 'component',
+            component: {
+              interface: {},
+              structure: { type: 'node', tag: 'div' },
+            },
+          },
+        },
+        root: {
+          type: 'node',
+          tag: 'div',
+          children: [],
+        },
+      };
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any) // loadGlobalComponents
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve(JSON.stringify(pageData)),
+        } as any); // loadComponents
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toEqual(pageData.root);
+      expect(componentRegistry.get('Card')).toBeDefined();
+    });
+
+    test('should handle legacy format (direct tree)', async () => {
+      const pageData = {
+        type: 'node',
+        tag: 'div',
+        children: ['Legacy'],
+      };
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any) // loadGlobalComponents
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve(JSON.stringify(pageData)),
+        } as any); // loadComponents
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toEqual(pageData);
+    });
+
+    test('should cancel previous request on new load', async () => {
+      const abortSpy = mock(() => {});
+
+      // First request - will be aborted
+      const firstAbortController = new AbortController();
+      firstAbortController.signal.addEventListener('abort', abortSpy);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockImplementationOnce(() => {
+          // Simulate slow request
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                ok: true,
+                text: () => Promise.resolve('{}'),
+              } as any);
+            }, 100);
+          });
+        });
+
+      const promise1 = routeLoader.loadComponents('/page1');
+
+      // Second request - should abort first
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve('{}'),
+        } as any);
+
+      await routeLoader.loadComponents('/page2');
+
+      // First request should be aborted
+      await promise1;
+      // Note: We can't directly test abortController.abort() was called,
+      // but we can verify the second request completed
+    });
+
+    test('should handle 404 errors and call onNotFound after delay', async () => {
+      const onLoadComplete = mock(() => {});
+      const onNotFound = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      config.onNotFound = onNotFound;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any) // loadGlobalComponents
+        .mockResolvedValueOnce({
+          ok: false,
+          status: 404,
+        } as any); // loadComponents
+
+      await routeLoader.loadComponents('/nonexistent');
+
+      expect(onLoadComplete).toHaveBeenCalledWith(null);
+
+      // Wait for timeout
+      await new Promise((resolve) => setTimeout(resolve, NOT_FOUND_TIMEOUT_MS + 50));
+
+      expect(onNotFound).toHaveBeenCalled();
+    });
+
+    test('should handle JSON parse errors and create error tree', async () => {
+      const onLoadComplete = mock(() => {});
+      const onLoadError = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      config.onLoadError = onLoadError;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any) // loadGlobalComponents
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve('invalid json {'),
+        } as any); // loadComponents
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toBeDefined();
+      expect((tree as ComponentNode).type).toBe('node');
+      expect((tree as ComponentNode).tag).toBe('div');
+      expect(onLoadComplete).toHaveBeenCalled();
+      expect(onLoadError).toHaveBeenCalled();
+    });
+
+    test('should handle network errors and create error tree', async () => {
+      const onLoadComplete = mock(() => {});
+      const onLoadError = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      config.onLoadError = onLoadError;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any) // loadGlobalComponents
+        .mockRejectedValueOnce(new Error('Network error')); // loadComponents
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toBeDefined();
+      expect((tree as ComponentNode).type).toBe('node');
+      expect((tree as ComponentNode).tag).toBe('div');
+      expect(onLoadComplete).toHaveBeenCalled();
+      expect(onLoadError).toHaveBeenCalled();
+    });
+
+    test('should ignore abort errors', async () => {
+      const onLoadComplete = mock(() => {});
+      const onLoadError = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      config.onLoadError = onLoadError;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockImplementationOnce(() => {
+          const abortController = new AbortController();
+          abortController.abort();
+          return Promise.reject(new DOMException('Aborted', 'AbortError'));
+        });
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toBeNull();
+      expect(onLoadComplete).not.toHaveBeenCalled();
+      expect(onLoadError).not.toHaveBeenCalled();
+    });
+
+    test('should check abort signal at multiple points', async () => {
+      const onLoadComplete = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      routeLoader = new RouteLoader(config);
+
+      // Start loading
+      const loadPromise = routeLoader.loadComponents('/');
+
+      // Cancel immediately
+      routeLoader.cancel();
+
+      await loadPromise;
+
+      // Should not call onLoadComplete after cancel
+      expect(onLoadComplete).not.toHaveBeenCalled();
+    });
+
+    test('should merge page-specific components correctly', async () => {
+      const globalComps = {
+        Button: {
+          type: 'component',
+          component: {
+            interface: {},
+            structure: { type: 'node', tag: 'button' },
+          },
+        },
+      };
+
+      const pageData = {
+        components: {
+          Card: {
+            type: 'component',
+            component: {
+              interface: {},
+              structure: { type: 'node', tag: 'div' },
+            },
+          },
+        },
+        root: { type: 'node', tag: 'div' },
+      };
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(globalComps),
+        } as any) // loadGlobalComponents
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve(JSON.stringify(pageData)),
+        } as any); // loadComponents
+
+      await routeLoader.loadComponents('/');
+
+      // Both global and page-specific components should be available
+      expect(componentRegistry.get('Button')).toBeDefined();
+      expect(componentRegistry.get('Card')).toBeDefined();
+    });
+
+    test('should not call callbacks after cancel', async () => {
+      const onLoadStart = mock(() => {});
+      const onLoadComplete = mock(() => {});
+
+      config.onLoadStart = onLoadStart;
+      config.onLoadComplete = onLoadComplete;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockImplementationOnce(() => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                ok: true,
+                text: () => Promise.resolve(JSON.stringify({ root: { type: 'node', tag: 'div' } })),
+              } as any);
+            }, 100);
+          });
+        });
+
+      const loadPromise = routeLoader.loadComponents('/');
+      
+      // Cancel immediately
+      routeLoader.cancel();
+      
+      await loadPromise;
+
+      // onLoadStart might have been called before cancel, but onLoadComplete should not be called
+      // Actually, onLoadStart is called synchronously, so it will be called
+      // But onLoadComplete should not be called after cancel
+      expect(onLoadComplete).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('cancel', () => {
+    test('should abort current request', async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockImplementationOnce(() => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                ok: true,
+                text: () => Promise.resolve('{}'),
+              } as any);
+            }, 100);
+          });
+        });
+
+      const loadPromise = routeLoader.loadComponents('/');
+      routeLoader.cancel();
+
+      const result = await loadPromise;
+      expect(result).toBeNull();
+    });
+
+    test('should clear not found timeout', async () => {
+      const onNotFound = mock(() => {});
+
+      config.onNotFound = onNotFound;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockResolvedValueOnce({
+          ok: false,
+          status: 404,
+        } as any);
+
+      await routeLoader.loadComponents('/nonexistent');
+      routeLoader.cancel();
+
+      // Wait for timeout - should not fire because we cancelled
+      await new Promise((resolve) => setTimeout(resolve, NOT_FOUND_TIMEOUT_MS + 50));
+
+      expect(onNotFound).not.toHaveBeenCalled();
+    });
+
+    test('should reset state', () => {
+      routeLoader.cancel();
+      // Should not throw
+      expect(() => routeLoader.cancel()).not.toThrow();
+    });
+  });
+
+  describe('createErrorTree', () => {
+    test('should create properly structured error trees', async () => {
+      const onLoadComplete = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockRejectedValueOnce(new Error('Test error'));
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toBeDefined();
+      const errorTree = tree as ComponentNode;
+      expect(errorTree.type).toBe('node');
+      expect(errorTree.tag).toBe('div');
+      expect(errorTree.children).toBeDefined();
+      expect(Array.isArray(errorTree.children)).toBe(true);
+    });
+
+    test('should include error details in parse errors', async () => {
+      const onLoadComplete = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockResolvedValueOnce({
+          ok: true,
+          text: () => Promise.resolve('invalid json'),
+        } as any);
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toBeDefined();
+      const errorTree = tree as ComponentNode;
+      expect(errorTree.children).toBeDefined();
+      // Should have 3 children: h2, p, pre
+      expect(Array.isArray(errorTree.children) && errorTree.children.length).toBeGreaterThanOrEqual(2);
+    });
+
+    test('should use consistent styling', async () => {
+      const onLoadComplete = mock(() => {});
+
+      config.onLoadComplete = onLoadComplete;
+      routeLoader = new RouteLoader(config);
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as any)
+        .mockRejectedValueOnce(new Error('Test error'));
+
+      const tree = await routeLoader.loadComponents('/');
+
+      expect(tree).toBeDefined();
+      const errorTree = tree as ComponentNode;
+      expect(errorTree.style).toBeDefined();
+      expect((errorTree.style as any).padding).toBe('40px');
+      expect((errorTree.style as any).textAlign).toBe('center');
+    });
+  });
+});
+