fix(quick-260921-jt4): calendar-settings-panel Loeschdialog-Hintergrund wird echte Schaltflaeche

- Zentrierbehaelter verliert den e.target===e.currentTarget-Handler, die Hintergrundfarbe wandert auf eine eigene benannte <button> (D-01) - Muss abbrechen, darf niemals loeschen (T-JT4-04): Beschriftung nennt ausdruecklich das Abbrechen (widgets.calendar.deleteDialogCancel) - Dialogkarte bekommt relative, aria-label des alertdialog aus dem Katalog statt fest verdrahtetem Englisch (deleteDialogLabel) - Neue Testdatei belegt per Klick UND echter Tastaturbetaetigung, dass der Hintergrundweg abbricht und deleteSource nie aufgerufen wird; eigener Test fuer den tatsaechlichen Loeschweg ueber die CTA Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TPPB4ApQxzSU1rwV2Ffj9J
2026-09-21 14:43:36 +02:00
parent 3d0bc0bfaa
commit 0c89c13bb2
4 changed files with 149 additions and 10 deletions
@@ -0,0 +1,131 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('next-intl', () => ({
+  useTranslations: (namespace: string) => (key: string) => {
+    const translations: Record<string, Record<string, string>> = {
+      widgets: {
+        'calendar.sourceEmpty':
+          'Keine Kalenderquellen eingerichtet. Fügen Sie eine Quelle hinzu, um Termine anzuzeigen.',
+        'calendar.addSource': 'Quelle hinzufügen',
+        'calendar.deleteDialogCancel': 'Löschen abbrechen',
+        'calendar.deleteDialogLabel': 'Löschen bestätigen',
+        'calendar.saveError': 'Fehler beim Speichern',
+        'calendar.saveSuccess': 'Gespeichert',
+      },
+      settings: {
+        sourceDeleteCta: 'Quelle löschen',
+        sourceDeleteConfirm: 'Möchten Sie diese Kalenderquelle wirklich löschen?',
+        cancel: 'Abbrechen',
+      },
+    };
+    return translations[namespace]?.[key] ?? key;
+  },
+}));
+
+vi.mock('@/lib/calendar-api', () => ({
+  fetchSources: vi.fn(),
+  addSource: vi.fn(),
+  updateSource: vi.fn(),
+  deleteSource: vi.fn(),
+  testSource: vi.fn(),
+}));
+
+vi.mock('./calendar-source-form', () => ({
+  CalendarSourceForm: () => <div data-testid="calendar-source-form" />,
+}));
+
+import { fetchSources, deleteSource } from '@/lib/calendar-api';
+import type { CalendarSource } from '@/lib/calendar-api';
+import { CalendarSettingsPanel } from './calendar-settings-panel';
+
+const baseSource: CalendarSource = {
+  id: 'src-1',
+  userId: 'user-1',
+  tenantId: 'tenant-1',
+  name: 'Firmenkalender',
+  type: 'caldav',
+  url: 'https://example.test/dav',
+  isVisible: true,
+  syncIntervalMin: 15,
+  createdAt: '2026-01-01T00:00:00Z',
+  updatedAt: '2026-01-01T00:00:00Z',
+};
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+async function renderWithOneSource() {
+  vi.mocked(fetchSources).mockResolvedValue([baseSource]);
+  render(<CalendarSettingsPanel />);
+  await screen.findByText('Firmenkalender');
+}
+
+describe('CalendarSettingsPanel — delete confirmation dialog (D-01, T-JT4-04)', () => {
+  it('opens the delete confirmation dialog when clicking the delete icon', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+
+    expect(
+      screen.getByRole('alertdialog', { name: 'Löschen bestätigen' }),
+    ).toBeInTheDocument();
+  });
+
+  it('mouse-clicking the backdrop aborts: the source is NOT deleted and the dialog closes', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+    await user.click(screen.getByRole('button', { name: 'Löschen abbrechen' }));
+
+    expect(deleteSource).not.toHaveBeenCalled();
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    // Source is still listed — the abort path never removed it.
+    expect(screen.getByText('Firmenkalender')).toBeInTheDocument();
+  });
+
+  it('a real keyboard activation (Enter on the focused backdrop button) also aborts, never deletes', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+
+    const backdrop = screen.getByRole('button', { name: 'Löschen abbrechen' });
+    backdrop.focus();
+    await user.keyboard('{Enter}');
+
+    expect(deleteSource).not.toHaveBeenCalled();
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(screen.getByText('Firmenkalender')).toBeInTheDocument();
+  });
+
+  it('clicking the explicit delete CTA inside the dialog deletes the source', async () => {
+    vi.mocked(deleteSource).mockResolvedValue(undefined);
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+    await user.click(screen.getByRole('button', { name: 'Quelle löschen' }));
+
+    await waitFor(() => expect(deleteSource).toHaveBeenCalledWith('src-1'));
+    await waitFor(() =>
+      expect(screen.queryByText('Firmenkalender')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('clicking inside the dialog card itself does not close it or delete anything', async () => {
+    const user = userEvent.setup();
+    await renderWithOneSource();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Firmenkalender' }));
+    await user.click(screen.getByRole('alertdialog', { name: 'Löschen bestätigen' }));
+
+    expect(deleteSource).not.toHaveBeenCalled();
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+  });
+});
@@ -370,17 +370,21 @@ export function CalendarSettingsPanel() {

      {/* Delete confirmation dialog (UI-SPEC destructive pattern) */}
      {deletingId && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-          onClick={(e) => {
-            if (e.target === e.currentTarget) setDeletingId(null);
-          }}
-        >
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Hintergrund — jetzt eine echte, benannte Schaltflaeche. Sie MUSS
+              abbrechen und darf unter keinen Umstaenden loeschen (T-JT4-04). */}
+          <button
+            type="button"
+            onClick={() => setDeletingId(null)}
+            aria-label={t('calendar.deleteDialogCancel')}
+            className="fixed inset-0 bg-black/50"
+          />
+
          <div
-            className="mx-4 max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+            className="relative mx-4 max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
            role="alertdialog"
            aria-modal="true"
-            aria-label="Confirm deletion"
+            aria-label={t('calendar.deleteDialogLabel')}
          >
            <h3 className="mb-2 text-lg font-semibold text-foreground">
              {ts('sourceDeleteCta')}