revert(frontend): Frontend auf letzten funktionierenden Stand 5680179 zurückgesetzt — i18n-Massen-Batch brach Dashboard-Shell in Produktion; Render-Loop-Fix und DSGVO-Antrags-UI liegen sicher in Historie für kontrollierten Wiedereinspiel

frontend/src/__tests__/PWAInstallPrompt.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * PWA Install Prompt tests — Task 5.24.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { PWAInstallPrompt } from '@/components/PWAInstallPrompt';
+import { getNotificationPermission, isPWAInstalled } from '@/utils/notifications';
+
+// Mock i18n
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+describe('PWAInstallPrompt', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('renders nothing when no beforeinstallprompt event fires', () => {
+    render(<PWAInstallPrompt />);
+    expect(screen.queryByTestId('pwa-install-prompt')).toBeNull();
+  });
+
+  it('shows install prompt when beforeinstallprompt fires', async () => {
+    render(<PWAInstallPrompt />);
+
+    const event = new Event('beforeinstallprompt');
+    Object.assign(event, {
+      prompt: vi.fn().mockResolvedValue(undefined),
+      userChoice: Promise.resolve({ outcome: 'accepted' }),
+    });
+
+    window.dispatchEvent(event);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('pwa-install-prompt')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('pwa-install-btn')).toBeInTheDocument();
+    expect(screen.getByTestId('pwa-dismiss-btn')).toBeInTheDocument();
+  });
+
+  it('hides when dismiss button is clicked', async () => {
+    render(<PWAInstallPrompt />);
+
+    const event = new Event('beforeinstallprompt');
+    Object.assign(event, {
+      prompt: vi.fn().mockResolvedValue(undefined),
+      userChoice: Promise.resolve({ outcome: 'dismissed' }),
+    });
+
+    window.dispatchEvent(event);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('pwa-install-prompt')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('pwa-dismiss-btn'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('pwa-install-prompt')).toBeNull();
+    });
+
+    // Should not show again after dismiss (localStorage)
+    expect(localStorage.getItem('leocrm_pwa_install_dismissed')).toBe('1');
+  });
+
+  it('does not show when already dismissed', () => {
+    localStorage.setItem('leocrm_pwa_install_dismissed', '1');
+    render(<PWAInstallPrompt />);
+
+    const event = new Event('beforeinstallprompt');
+    Object.assign(event, {
+      prompt: vi.fn(),
+      userChoice: Promise.resolve({ outcome: 'dismissed' }),
+    });
+
+    window.dispatchEvent(event);
+
+    expect(screen.queryByTestId('pwa-install-prompt')).toBeNull();
+  });
+});
+
+describe('Notification helpers', () => {
+  it('getNotificationPermission returns unsupported when Notification API missing', () => {
+    const original = (window as any).Notification;
+    delete (window as any).Notification;
+    expect(getNotificationPermission()).toBe('unsupported');
+    (window as any).Notification = original;
+  });
+
+  it('isPWAInstalled returns false in browser mode', () => {
+    expect(isPWAInstalled()).toBe(false);
+  });
+});

frontend/src/__tests__/Tasks.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { TasksPage } from '@/pages/Tasks';
 import * as tasksApi from '@/api/tasks';
 
@@ -12,8 +12,6 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 
-import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
-
 // Mock toast
 vi.mock('@/components/ui/Toast', () => ({
   useToast: () => ({
@@ -116,24 +114,20 @@ vi.mock('@/api/tasks', () => ({
 describe('TasksPage', () => {
   it('renders the tasks page with header', () => {
     render(<TasksPage />);
-    expect(screen.getAllByTestId('tasks-page')[0]).toBeInTheDocument();
-    // Header + Detail-Karte beide nutzen tasks.title seit 3-Spalten-Layout
-    expect(screen.getAllByText('tasks.title').length).toBeGreaterThan(0);
+    expect(screen.getByTestId('tasks-page')).toBeInTheDocument();
+    expect(screen.getByText('tasks.title')).toBeInTheDocument();
   });
 
   it('renders task items from API', () => {
     render(<TasksPage />);
-    expect(screen.getAllByText('Test Task').length).toBeGreaterThan(0);
-    expect(screen.getAllByText('Test description').length).toBeGreaterThan(0);
+    expect(screen.getByText('Test Task')).toBeInTheDocument();
+    expect(screen.getByText('Test description')).toBeInTheDocument();
   });
 
   it('opens create modal when create button is clicked', () => {
     render(<TasksPage />);
-    // Seit UI-Overhaul Phase 4 lebt der Create-Button im PluginToolbarStore,
-    // nicht mehr als inline gerenderter Button.
-    const item = usePluginToolbarStore.getState().items.find((i) => i.id === 'new-task');
-    expect(item).toBeDefined();
-    act(() => { item!.onClick(); });
+    const createBtn = screen.getByText('tasks.create');
+    fireEvent.click(createBtn);
     expect(screen.getByTestId('modal')).toBeInTheDocument();
     expect(screen.getByTestId('task-title-input')).toBeInTheDocument();
   });

frontend/src/__tests__/comm/BlockRenderer.test.tsx

@@ -19,14 +19,6 @@ import ContactCardBlock from '@/components/comm/blocks/ContactCardBlock';
 import MiniAppBlock from '@/components/comm/blocks/MiniAppBlock';
 import type { MessageBlock } from '@/store/commStore';
 
-// Mock apiClient für MiniAppBlock (fetcht Mini-App-Definitionen on mount)
-const miniappsMock = [
-  { app_id: 'my-mini-app', name: 'My Mini App', icon: 'grid', description: 'Demo', plugin_name: 'demo', render_schema: {} },
-];
-vi.mock('@/api/client', () => ({
-  apiClient: { get: vi.fn(() => Promise.resolve({ data: miniappsMock })) },
-}));
-
 // ─── Mock Data Helpers ───
 
 function makeBlock(
@@ -146,11 +138,10 @@ describe('BlockRenderer', () => {
     expect(screen.getByText('John Doe')).toBeInTheDocument();
   });
 
-  it('renders miniapp block via BlockRenderer', async () => {
+  it('renders miniapp block via BlockRenderer', () => {
     const blocks = [makeBlock('b1', 'miniapp', { app_id: 'my-app' })];
     render(<BlockRenderer blocks={blocks} />);
-    // Async-Fetch: unresolvierte app_id faellt auf den Rohtext zurueck
-    expect(await screen.findByText('my-app')).toBeInTheDocument();
+    expect(screen.getByText(/Mini-App: my-app/)).toBeInTheDocument();
   });
 });
 
@@ -248,7 +239,7 @@ describe('HtmlBlock', () => {
     });
     const { container } = render(<HtmlBlock block={block} />);
     const link = container.querySelector('a');
-    expect(link?.getAttribute('href') ?? '').not.toContain('javascript:');
+    expect(link?.getAttribute('href')).not.toContain('javascript:');
   });
 
   it('renders div with dangerouslySetInnerHTML', () => {
@@ -582,40 +573,42 @@ describe('ContactCardBlock', () => {
 // ─── MiniAppBlock Tests ───
 
 describe('MiniAppBlock', () => {
-  it('shows the registered app name when app_id resolves', async () => {
+  it('renders app_id in label', () => {
     const block = makeBlock('b1', 'miniapp', { app_id: 'my-mini-app' });
     render(<MiniAppBlock block={block} />);
-    expect(await screen.findByText('My Mini App')).toBeInTheDocument();
+    expect(screen.getByText(/Mini-App: my-mini-app/)).toBeInTheDocument();
   });
 
-  it('falls back to the raw app_id when unknown', async () => {
-    const block = makeBlock('b1', 'miniapp', { app_id: 'some-other-app' });
-    render(<MiniAppBlock block={block} />);
-    expect(await screen.findByText('some-other-app')).toBeInTheDocument();
-  });
-
-  it('shows a placeholder label when app_id missing', () => {
+  it('uses default app_id when not provided', () => {
     const block = makeBlock('b1', 'miniapp', {});
     render(<MiniAppBlock block={block} />);
-    expect(screen.getByText('Unbekannt')).toBeInTheDocument();
+    expect(screen.getByText(/Mini-App: Unbekannt/)).toBeInTheDocument();
   });
 
-  it('shows config key-value pairs when no schema exists', async () => {
-    const block = makeBlock('b1', 'miniapp', {
-      app_id: 'test',
-      config: { environment: 'production', region: 'eu-central' },
-    });
-    render(<MiniAppBlock block={block} />);
-    expect(await screen.findByText('environment')).toBeInTheDocument();
-    expect(screen.getByText('production')).toBeInTheDocument();
-    expect(screen.getByText('region')).toBeInTheDocument();
-    expect(screen.getByText('eu-central')).toBeInTheDocument();
-  });
-
-  it('shows empty hint when no config', async () => {
+  it('renders info message about mini-apps', () => {
     const block = makeBlock('b1', 'miniapp', { app_id: 'test' });
     render(<MiniAppBlock block={block} />);
-    await screen.findByText('test');
-    expect(screen.queryByText('environment')).not.toBeInTheDocument();
+    expect(screen.getByText(/Mini-Apps werden in Zukunft/)).toBeInTheDocument();
+  });
+
+  it('shows config details when config is provided', () => {
+    const block = makeBlock('b1', 'miniapp', {
+      app_id: 'test',
+      config: { key: 'value', nested: { data: 123 } },
+    });
+    render(<MiniAppBlock block={block} />);
+    expect(screen.getByText('Konfiguration')).toBeInTheDocument();
+  });
+
+  it('does not show config details when config is empty', () => {
+    const block = makeBlock('b1', 'miniapp', { app_id: 'test', config: {} });
+    render(<MiniAppBlock block={block} />);
+    expect(screen.queryByText('Konfiguration')).not.toBeInTheDocument();
+  });
+
+  it('does not show config details when config is not an object', () => {
+    const block = makeBlock('b1', 'miniapp', { app_id: 'test', config: 'not-an-object' });
+    render(<MiniAppBlock block={block} />);
+    expect(screen.queryByText('Konfiguration')).not.toBeInTheDocument();
   });
 });

frontend/src/__tests__/contacts/ContactEditModal.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+// ContactEditModal imports UI components that transitively load lucide-react.
+// To avoid OOM in the vitest worker, we test via a stub that validates the
+// component's interface contract (props, rendering, callbacks).
+vi.mock('@/components/contacts/ContactEditModal', () => ({
+  ContactEditModal: ({ open, onClose, contact, onSaved }: any) => {
+    if (!open) return null;
+    const isEdit = !!contact;
+    return (
+      <div data-testid="modal-stub">
+        <h2>{isEdit ? 'Kontakt bearbeiten' : 'Kontakt erstellen'}</h2>
+        <select data-testid="contact-type-select" defaultValue="company">
+          <option value="company">Firmen</option>
+          <option value="person">Personen</option>
+        </select>
+        <input data-testid="contact-name-input" placeholder="Firmenname" />
+        <input data-testid="contact-first-name-input" placeholder="Vorname" style={{ display: 'none' }} />
+        <input data-testid="contact-last-name-input" placeholder="Nachname" style={{ display: 'none' }} />
+        <input data-testid="contact-submit-btn" type="submit" value={isEdit ? 'Speichern' : 'Erstellen'} />
+        <button onClick={onClose}>Abbrechen</button>
+      </div>
+    );
+  },
+}));
+
+import { ContactEditModal } from '@/components/contacts/ContactEditModal';
+
+const defaultProps = {
+  open: true,
+  onClose: vi.fn(),
+  contact: null,
+  onSaved: vi.fn(),
+};
+
+describe('ContactEditModal', () => {
+  it('renders modal when open', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    expect(screen.getByTestId('modal-stub')).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    render(<ContactEditModal {...defaultProps} open={false} />);
+    expect(screen.queryByTestId('modal-stub')).not.toBeInTheDocument();
+  });
+
+  it('renders type select', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    expect(screen.getByTestId('contact-type-select')).toBeInTheDocument();
+  });
+
+  it('renders name input for company type', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    expect(screen.getByTestId('contact-name-input')).toBeInTheDocument();
+  });
+
+  it('renders submit button', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    expect(screen.getByTestId('contact-submit-btn')).toBeInTheDocument();
+  });
+
+  it('renders cancel button', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    expect(screen.getByText(/abbrechen/i)).toBeInTheDocument();
+  });
+
+  it('calls onClose when cancel button clicked', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    fireEvent.click(screen.getByText(/abbrechen/i));
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('renders create title for new contact', () => {
+    render(<ContactEditModal {...defaultProps} />);
+    expect(screen.getByText('Kontakt erstellen')).toBeInTheDocument();
+  });
+
+  it('renders edit title when editing existing contact', () => {
+    render(<ContactEditModal {...defaultProps} contact={{ id: 'c1', type: 'company' } as any} />);
+    expect(screen.getByText('Kontakt bearbeiten')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/shell/Router.test.tsx

@@ -4,12 +4,6 @@ import { render, screen, act } from '@testing-library/react';
 import { MemoryRouter, Route, Routes, Navigate } from 'react-router-dom';
 import { ProtectedRoute } from '@/routes/ProtectedRoute';
 import { useAuthStore } from '@/store/authStore';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-function withProviders(ui: React.ReactElement) {
-  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  return <QueryClientProvider client={client}>{ui}</QueryClientProvider>;
-}
 
 function ProtectedTest() {
   return (
@@ -29,7 +23,7 @@ function ProtectedTest() {
 describe('Router & ProtectedRoute', () => {
   it('redirects to /login when not authenticated', () => {
     useAuthStore.setState({ isAuthenticated: false, user: null });
-    render(withProviders(<ProtectedTest />));
+    render(<ProtectedTest />);
     expect(screen.getByTestId('login-page')).toBeInTheDocument();
     expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
   });
@@ -40,7 +34,7 @@ describe('Router & ProtectedRoute', () => {
       user: { id: '1', email: 'test@test.de', first_name: 'Test', last_name: 'User', role: 'admin', avatar_url: null, tenants: [{ id: 't1', name: 'Test Tenant', slug: 'test' }] },
       currentTenant: { id: 't1', name: 'Test Tenant', slug: 'test' },
     });
-    render(withProviders(<ProtectedTest />));
+    render(<ProtectedTest />);
     expect(screen.getByTestId('protected-content')).toBeInTheDocument();
     expect(screen.queryByTestId('login-page')).not.toBeInTheDocument();
     useAuthStore.setState({ isAuthenticated: false, user: null });

frontend/src/__tests__/tags/BulkTagDialog.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+vi.mock('@/api/tags', () => ({
+  fetchTags: vi.fn(),
+  bulkAssignTags: vi.fn(),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }),
+}));
+
+import { BulkTagDialog } from '@/components/tags/BulkTagDialog';
+import { fetchTags, bulkAssignTags } from '@/api/tags';
+
+const mockTags = [
+  { id: 't1', name: 'VIP-Kunde', color: '#EF4444', created_by: 'u1', usage_count: 5 },
+  { id: 't2', name: 'Lead', color: '#3B82F6', created_by: 'u1', usage_count: 12 },
+];
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.mocked(fetchTags).mockResolvedValue(mockTags);
+  vi.mocked(bulkAssignTags).mockResolvedValue(undefined);
+});
+
+describe('BulkTagDialog', () => {
+  it('renders dialog when open', async () => {
+    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1', 'c2']} onClose={vi.fn()} onAssigned={vi.fn()} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('shows selected entity count', async () => {
+    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1', 'c2', 'c3']} onClose={vi.fn()} onAssigned={vi.fn()} />);
+    expect(screen.getByText('3 ausgewaehlte Eintraege')).toBeInTheDocument();
+  });
+
+  it('loads and displays available tags', async () => {
+    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1']} onClose={vi.fn()} onAssigned={vi.fn()} />);
+    await waitFor(() => {
+      expect(fetchTags).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /VIP-Kunde/ })).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: /Lead/ })).toBeInTheDocument();
+  });
+
+  it('toggles tag selection on click', async () => {
+    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1']} onClose={vi.fn()} onAssigned={vi.fn()} />);
+    await waitFor(() => {
+      expect(fetchTags).toHaveBeenCalled();
+    });
+    const tagBtn = await screen.findByRole('button', { name: /VIP-Kunde/ });
+    fireEvent.click(tagBtn);
+    await waitFor(() => {
+      expect(screen.getByText('1 Tags auswaehlen')).toBeInTheDocument();
+    });
+  });
+
+  it('calls bulkAssignTags on assign button click', async () => {
+    const onAssigned = vi.fn();
+    const onClose = vi.fn();
+    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1', 'c2']} onClose={onClose} onAssigned={onAssigned} />);
+    await waitFor(() => {
+      expect(fetchTags).toHaveBeenCalled();
+    });
+    const tagBtn = await screen.findByRole('button', { name: /VIP-Kunde/ });
+    fireEvent.click(tagBtn);
+    const assignBtn = screen.getByRole('button', { name: 'Tags zuweisen' });
+    fireEvent.click(assignBtn);
+    await waitFor(() => {
+      expect(bulkAssignTags).toHaveBeenCalledWith({
+        tag_ids: ['t1'],
+        entity_type: 'contact',
+        entity_ids: ['c1', 'c2'],
+      });
+    });
+  });
+
+  it('does not render when closed', () => {
+    render(<BulkTagDialog open={false} entityType="contact" entityIds={['c1']} onClose={vi.fn()} onAssigned={vi.fn()} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});

frontend/src/__tests__/tags/TagPicker.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+
+const mockFetchTags = vi.fn();
+const mockAssignTag = vi.fn();
+const mockUnassignTag = vi.fn();
+const mockCreateTag = vi.fn();
+
+vi.mock('@/api/tags', () => ({
+  fetchTags: (...args: any[]) => mockFetchTags(...args),
+  assignTag: (...args: any[]) => mockAssignTag(...args),
+  unassignTag: (...args: any[]) => mockUnassignTag(...args),
+  createTag: (...args: any[]) => mockCreateTag(...args),
+}));
+
+import { TagPicker } from '@/components/tags/TagPicker';
+
+const mockTags = [
+  { id: 't1', name: 'VIP-Kunde', color: '#10B981', created_by: 'u1' },
+  { id: 't2', name: 'Lead', color: '#3B82F6', created_by: 'u1' },
+  { id: 't3', name: 'Archiv', color: '#6B7280', created_by: 'u1' },
+];
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockFetchTags.mockResolvedValue(mockTags);
+  mockAssignTag.mockResolvedValue({ id: 'a1', tag_id: 't1', entity_type: 'contact', entity_id: 'c1' });
+  mockUnassignTag.mockResolvedValue(undefined);
+  mockCreateTag.mockResolvedValue({ id: 't4', name: 'Neu', color: '#F59E0B', created_by: 'u1' });
+});
+
+describe('TagPicker', () => {
+  it('renders the tag picker container', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    expect(screen.getByTestId('tag-picker')).toBeInTheDocument();
+  });
+
+  it('renders assigned tags section', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    expect(screen.getByText('Zugewiesene Tags')).toBeInTheDocument();
+  });
+
+  it('shows no tags assigned message when empty', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    await waitFor(() => {
+      expect(screen.getByText('Keine Tags zugewiesen')).toBeInTheDocument();
+    });
+  });
+
+  it('loads and displays available tags', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    await waitFor(() => {
+      expect(mockFetchTags).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('available-tags-list')).toBeInTheDocument();
+    });
+    expect(screen.getByText('VIP-Kunde')).toBeInTheDocument();
+    expect(screen.getByText('Lead')).toBeInTheDocument();
+  });
+
+  it('assigns a tag when clicking available tag', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    await waitFor(() => {
+      expect(screen.getByText('VIP-Kunde')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('VIP-Kunde'));
+    await waitFor(() => {
+      expect(mockAssignTag).toHaveBeenCalledWith({ tag_id: 't1', entity_type: 'contact', entity_id: 'c1' });
+    });
+  });
+
+  it('shows create tag form when clicking create button', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    await waitFor(() => {
+      expect(screen.getByText('Neues Tag')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Neues Tag'));
+    await waitFor(() => {
+      expect(screen.getByTestId('create-tag-form')).toBeInTheDocument();
+    });
+  });
+
+  it('renders search input for tags', async () => {
+    render(<TagPicker entityType="contact" entityId="c1" />);
+    expect(screen.getByLabelText('Tag suchen')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/tags/TagPicker.validation.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+vi.mock('@/api/tags', () => ({
+  fetchTags: vi.fn().mockResolvedValue([]),
+  assignTag: vi.fn().mockResolvedValue({}),
+  unassignTag: vi.fn().mockResolvedValue({}),
+  createTag: vi.fn().mockResolvedValue({ id: 't1', name: 'NewTag', color: '#3B82F6' }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }),
+}));
+
+import { TagPicker } from '@/components/tags/TagPicker';
+import { createTag } from '@/api/tags';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('TagPicker validation (RHF + Zod)', () => {
+  it('shows validation error when tag name is empty', async () => {
+    render(<TagPicker entityType="contact" entityId="e1" />);
+    // Wait for loading to finish and find create button
+    await waitFor(() => {
+      expect(screen.getByTestId('tag-picker')).toBeInTheDocument();
+    }, { timeout: 3000 });
+    // Click create button to show form (German: 'Neues Tag')
+    const createBtn = screen.getByText(/neues tag|create/i);
+    fireEvent.click(createBtn);
+    // Submit empty form
+    await waitFor(() => {
+      expect(screen.getByTestId('create-tag-form')).toBeInTheDocument();
+    });
+    const form = screen.getByTestId('create-tag-form').querySelector('form');
+    expect(form).toBeTruthy();
+    fireEvent.submit(form!);
+    await waitFor(() => {
+      const errors = screen.getAllByText(/erforderlich|required/i);
+      expect(errors.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('calls createTag when form is valid', async () => {
+    render(<TagPicker entityType="contact" entityId="e1" />);
+    await waitFor(() => {
+      expect(screen.getByTestId('tag-picker')).toBeInTheDocument();
+    }, { timeout: 3000 });
+    const createBtn = screen.getByText(/neues tag|create/i);
+    fireEvent.click(createBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('create-tag-form')).toBeInTheDocument();
+    });
+    // Fill in tag name
+    const form = screen.getByTestId('create-tag-form').querySelector('form');
+    const input = form!.querySelector('input');
+    expect(input).toBeTruthy();
+    fireEvent.change(input!, { target: { value: 'Important' } });
+    fireEvent.submit(form!);
+    await waitFor(() => {
+      expect(createTag).toHaveBeenCalledWith(expect.objectContaining({ name: 'Important' }));
+    }, { timeout: 3000 });
+  });
+});