Phase 3: Plugin-UI-System (WordPress-Style)

Backend: - PluginManifest um 5 neue UI-Felder erweitert: menu_items, page_routes, detail_tabs, settings_pages, dashboard_widgets (FrontendMenuItem, FrontendPageRoute, FrontendDetailTab, FrontendSettingsPage, FrontendDashboardWidget) - GET /api/v1/plugins/active-manifests Endpoint liefert UI-Manifeste aller aktiven Plugins - Registry.get_active_manifests() + PluginService.get_active_manifests() - 12 Built-in Plugins mit UI-Manifest-Daten gefuellt (menu_items, page_routes, detail_tabs, settings_pages) - Plugin-Install-System: POST /upload (ZIP), POST /install-url (URL) mit Validierung (Manifest, dangerous imports, SQL migrations) Frontend: - pluginStore.ts (Zustand) mit PluginUiManifest Typen + Selektoren - useActivePluginManifests() React Query Hook - PluginRegistry.tsx — fetcht Manifeste beim App-Start - PluginLoader.tsx — dynamisches React.lazy() mit ErrorBoundary - PluginRouteRenderer.tsx — Catch-all fuer Plugin-Routes - routes/index.tsx — Catch-all Routes fuer Plugin-Pages + Settings - Sidebar.tsx — dynamische Plugin Menu-Items mit Grouping + Icons - Settings.tsx — dynamische Plugin Settings-Pages - ContactDetail.tsx — dynamische Plugin Detail-Tabs mit Permissions - AppShell.tsx — PluginRegistry Provider eingebunden - SettingsPlugins.tsx — Install-UI (ZIP Upload + URL Install) - plugins.ts — useUploadPlugin() + useInstallPluginFromUrl() Hooks Docs & Templates: - docs/plugin-development-guide.md — komplette Entwickler-Doku - templates/plugin-template/ — Boilerplate mit allen Manifest-Feldern Tests: - 34 Vitest-Tests (PluginRegistry, PluginLoader, PluginRouteRenderer, pluginStore) — alle bestanden - TSC: keine neuen Errors (nur pre-existing Dms.tsx)
2026-07-23 19:01:18 +02:00
parent 4f70c1d912
commit fc96a2f86c
43 changed files with 3005 additions and 204 deletions
@@ -0,0 +1,120 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { PluginRouteRenderer } from '../PluginRouteRenderer';
+import { usePluginStore } from '@/store/pluginStore';
+import type { PluginUiManifest } from '@/store/pluginStore';
+
+// Mock PluginPage to avoid lazy loading issues in tests
+vi.mock('../PluginLoader', () => ({
+  PluginPage: ({ component, pluginName }: { component: string; pluginName: string }) => (
+    <div data-testid="plugin-page" data-component={component} data-plugin={pluginName}>
+      Plugin: {pluginName}
+    </div>
+  ),
+}));
+
+const mockManifests: PluginUiManifest[] = [
+  {
+    name: 'mail_plugin',
+    display_name: 'Mail',
+    version: '1.0.0',
+    is_core: true,
+    menu_items: [],
+    page_routes: [
+      { path: '/mail', component: '@/pages/Mail', parent: '', protected: true, order: 100 },
+      { path: '/mail/settings', component: '@/pages/MailSettings', parent: '/mail', protected: true, order: 200 },
+    ],
+    detail_tabs: [],
+    settings_pages: [],
+    dashboard_widgets: [],
+  },
+  {
+    name: 'calendar_plugin',
+    display_name: 'Calendar',
+    version: '1.0.0',
+    is_core: false,
+    menu_items: [],
+    page_routes: [
+      { path: '/calendar', component: '@/pages/Calendar', parent: '', protected: true, order: 200 },
+    ],
+    detail_tabs: [],
+    settings_pages: [],
+    dashboard_widgets: [],
+  },
+];
+
+describe('PluginRouteRenderer', () => {
+  beforeEach(() => {
+    usePluginStore.getState().reset();
+  });
+
+  it('renders plugin page for a matching route', () => {
+    usePluginStore.setState({
+      manifests: mockManifests,
+      loaded: true,
+    });
+    render(
+      <MemoryRouter initialEntries={['/mail']}>
+        <PluginRouteRenderer />
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('plugin-page')).toBeInTheDocument();
+    expect(screen.getByText('Plugin: Mail')).toBeInTheDocument();
+  });
+
+  it('renders plugin page for a nested route', () => {
+    usePluginStore.setState({
+      manifests: mockManifests,
+      loaded: true,
+    });
+    render(
+      <MemoryRouter initialEntries={['/mail/settings']}>
+        <PluginRouteRenderer />
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('plugin-page')).toBeInTheDocument();
+    expect(screen.getByText('Plugin: Mail')).toBeInTheDocument();
+  });
+
+  it('shows Not Found for unmatched URLs', () => {
+    usePluginStore.setState({
+      manifests: mockManifests,
+      loaded: true,
+    });
+    render(
+      <MemoryRouter initialEntries={['/unknown']}>
+        <PluginRouteRenderer />
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Page Not Found')).toBeInTheDocument();
+    expect(screen.getByText(/unknown/)).toBeInTheDocument();
+  });
+
+  it('renders nothing when manifests have not loaded yet', () => {
+    usePluginStore.setState({
+      manifests: [],
+      loaded: false,
+    });
+    const { container } = render(
+      <MemoryRouter initialEntries={['/mail']}>
+        <PluginRouteRenderer />
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('matches the first route when multiple match', () => {
+    usePluginStore.setState({
+      manifests: mockManifests,
+      loaded: true,
+    });
+    render(
+      <MemoryRouter initialEntries={['/calendar']}>
+        <PluginRouteRenderer />
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Plugin: Calendar')).toBeInTheDocument();
+  });
+});