tessera-ctl/apps/web/src/components/proxmox/proxmox-server-picker.test.tsx

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);
  });
});