test(260924-i8v): RED fuer Titel und Serverauswahl der Proxmox-Kachel

- Auswahl-Bauteil: Reihenfolge nach position, Produktwort, Aufraeumen geloeschter Kennungen - Einstellungsformular: Laden, Fehler, Leer, onChange fuer Titel und Auswahl - Einstellungsbereich: Zweig proxmox mit Titel-Zusatz in der Kopfzeile - Kachel im Bearbeitungsmodus: entprellter Titel, Auswahl statt Liste, schliesst beim Verlassen Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-24 13:30:22 +02:00
parent a217d606bb
commit 377b6e37b2
4 changed files with 404 additions and 1 deletions
@@ -0,0 +1,118 @@
+import { cleanup, fireEvent, render as rtlRender, screen } from '@testing-library/react';
+import { NextIntlClientProvider } from 'next-intl';
+import type { ReactElement } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { ProxmoxProductType, ProxmoxServer } from '@/lib/proxmox-api';
+import de from '@/messages/de.json';
+import { ProxmoxServerPicker } from './proxmox-server-picker';
+
+/**
+ * Auswahl-Bauteil der Proxmox-Kachel (quick-260924-i8v) — gemeinsam fuer die
+ * Kachel im Bearbeitungsmodus und Einstellungen > Dashboard.
+ */
+function render(ui: ReactElement) {
+  return rtlRender(
+    <NextIntlClientProvider locale="de" messages={de} timeZone="Europe/Berlin">
+      {ui}
+    </NextIntlClientProvider>,
+  );
+}
+
+function server(id: string, productType: ProxmoxProductType, position: number): ProxmoxServer {
+  return {
+    id,
+    tenantId: 't1',
+    name: id,
+    productType,
+    baseUrl: 'https://x.intern',
+    authMethod: 'token',
+    tokenId: 'a@pam!b',
+    username: null,
+    tlsRejectUnauthorized: true,
+    isActive: true,
+    pollIntervalMin: 5,
+    position,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    updatedAt: '2026-01-01T00:00:00.000Z',
+    status: null,
+  };
+}
+
+// Absichtlich NICHT nach position geliefert.
+const SERVERS = [server('pmg-1', 'pmg', 2), server('pve-1', 'pve', 0), server('pbs-1', 'pbs', 1)];
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('ProxmoxServerPicker (quick-260924-i8v)', () => {
+  it('zeigt je Server ein Kaestchen, sortiert nach position, mit Produktwort', () => {
+    render(<ProxmoxServerPicker servers={SERVERS} selectedIds={[]} onChange={vi.fn()} />);
+
+    const boxes = screen.getAllByRole('checkbox');
+    expect(boxes.map((b) => b.getAttribute('value'))).toEqual(['pve-1', 'pbs-1', 'pmg-1']);
+    expect(screen.getByRole('checkbox', { name: /pve-1.*Virtualisierung/ })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /pbs-1.*Datensicherung/ })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /pmg-1.*Mail-Gateway/ })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: 'Angezeigte Server' })).toBeInTheDocument();
+  });
+
+  it('ausgewaehlte Kennungen sind angehakt', () => {
+    render(<ProxmoxServerPicker servers={SERVERS} selectedIds={['pbs-1']} onChange={vi.fn()} />);
+
+    expect(screen.getByRole('checkbox', { name: /pbs-1/ })).toBeChecked();
+    expect(screen.getByRole('checkbox', { name: /pve-1/ })).not.toBeChecked();
+    expect(screen.getByRole('checkbox', { name: /pmg-1/ })).not.toBeChecked();
+  });
+
+  it('Anhaken liefert die neue Liste in Listenreihenfolge', () => {
+    const onChange = vi.fn();
+    render(<ProxmoxServerPicker servers={SERVERS} selectedIds={['pmg-1']} onChange={onChange} />);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: /pve-1/ }));
+
+    expect(onChange).toHaveBeenCalledWith(['pve-1', 'pmg-1']);
+  });
+
+  it('Kennungen geloeschter Server fallen bei jeder Aenderung heraus', () => {
+    const onChange = vi.fn();
+    render(
+      <ProxmoxServerPicker
+        servers={SERVERS}
+        selectedIds={['geloescht', 'pbs-1']}
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('checkbox', { name: /pmg-1/ }));
+
+    expect(onChange).toHaveBeenCalledWith(['pbs-1', 'pmg-1']);
+  });
+
+  it('alles abhaken ergibt eine leere Liste', () => {
+    const onChange = vi.fn();
+    render(<ProxmoxServerPicker servers={SERVERS} selectedIds={['pve-1']} onChange={onChange} />);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: /pve-1/ }));
+
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it('der Hinweis „Ohne Auswahl zeigt die Kachel alle Server.“ steht sichtbar da', () => {
+    render(<ProxmoxServerPicker servers={SERVERS} selectedIds={[]} onChange={vi.fn()} />);
+
+    expect(screen.getByText('Ohne Auswahl zeigt die Kachel alle Server.')).toBeVisible();
+  });
+
+  it('zwei Instanzen erzeugen eindeutige Feldkennungen', () => {
+    render(
+      <>
+        <ProxmoxServerPicker servers={SERVERS} selectedIds={[]} onChange={vi.fn()} />
+        <ProxmoxServerPicker servers={SERVERS} selectedIds={[]} onChange={vi.fn()} />
+      </>,
+    );
+
+    const ids = screen.getAllByRole('checkbox').map((b) => b.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});