feat(260923-lrr): Web — versionierte Symbol-Adresse, Datei-Auswahl, Entfernen-Knopf

- favorites-api.ts: FavoriteRequestError (Grund iconUrlUnreachable/iconTooLarge/ iconInvalidType/iconUploadFailed), uploadFavoriteIcon/removeFavoriteIcon, FAVORITE_ICON_MAX_BYTES, Felder uploadedIconMime/iconVersion - favorites-widget.tsx: Proxy-Bild traegt ?v=<iconVersion> (Cache-Bust nach Aenderung), Remount-Key um iconVersion/uploadedIconMime erweitert, eigenes Symbol im Hinzufuegen- und Bearbeitungsformular waehlen, Entfernen-Knopf, Fehlermeldung (role=alert) im Formular, Platzhalter jetzt uebersetzbar - de.json/en.json: neun neue Texte unter widgets.favorites - CHANGELOG.md und Anwenderhandbuch ergaenzt Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-23 16:13:05 +02:00
parent 7704372c3c
commit 61f95c8c52
8 changed files with 749 additions and 22 deletions
@@ -6,17 +6,31 @@ vi.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
 }));

-// Mock favorites-api — all 5 functions as controllable vi.fn() spies
+// Mock favorites-api — all functions as controllable vi.fn() spies
 // (reorderFavorites hinzugefuegt, 260917-jdd — ohne diesen Eintrag
 // importiert das Widget undefined und der Klick auf einen Sortierpfeil
 // wirft TypeError.)
-vi.mock('@/lib/favorites-api', () => ({
-  fetchFavorites: vi.fn(),
-  createFavorite: vi.fn(),
-  updateFavorite: vi.fn(),
-  deleteFavorite: vi.fn(),
-  reorderFavorites: vi.fn(),
-}));
+//
+// 260923-lrr: die Fabrik ist jetzt ASYNCHRON und uebernimmt per
+// `vi.importActual` die ECHTE `FavoriteRequestError`-Klasse und
+// `FAVORITE_ICON_MAX_BYTES` — ein `instanceof FavoriteRequestError` im
+// Widget muss gegen dieselbe Klasse pruefen, die die Tests werfen, sonst
+// faellt `favoriteErrorKey` immer auf `favorites.error` zurueck.
+// `uploadFavoriteIcon`/`removeFavoriteIcon` kommen als `vi.fn()` dazu.
+vi.mock('@/lib/favorites-api', async () => {
+  const actual = await vi.importActual<typeof import('@/lib/favorites-api')>('@/lib/favorites-api');
+  return {
+    FavoriteRequestError: actual.FavoriteRequestError,
+    FAVORITE_ICON_MAX_BYTES: actual.FAVORITE_ICON_MAX_BYTES,
+    fetchFavorites: vi.fn(),
+    createFavorite: vi.fn(),
+    updateFavorite: vi.fn(),
+    deleteFavorite: vi.fn(),
+    reorderFavorites: vi.fn(),
+    uploadFavoriteIcon: vi.fn(),
+    removeFavoriteIcon: vi.fn(),
+  };
+});

 // Mock dashboard-api for updateWidgetConfig (view mode persistence)
 vi.mock('@/lib/dashboard-api', () => ({
@@ -24,11 +38,14 @@ vi.mock('@/lib/dashboard-api', () => ({
 }));

 import {
+  FavoriteRequestError,
  fetchFavorites,
  createFavorite,
  updateFavorite,
  deleteFavorite,
  reorderFavorites,
+  uploadFavoriteIcon,
+  removeFavoriteIcon,
 } from '@/lib/favorites-api';
 import { updateWidgetConfig } from '@/lib/dashboard-api';

@@ -41,6 +58,8 @@ const mockCreate = createFavorite as ReturnType<typeof vi.fn>;
 const mockUpdate = updateFavorite as ReturnType<typeof vi.fn>;
 const mockDelete = deleteFavorite as ReturnType<typeof vi.fn>;
 const mockReorder = reorderFavorites as ReturnType<typeof vi.fn>;
+const mockUploadIcon = uploadFavoriteIcon as ReturnType<typeof vi.fn>;
+const mockRemoveIcon = removeFavoriteIcon as ReturnType<typeof vi.fn>;
 const mockUpdateWidgetConfig = updateWidgetConfig as ReturnType<typeof vi.fn>;

 const BASE_FAVORITES = [
@@ -450,7 +469,8 @@ describe('FavoritesWidget', () => {
      });

      const proxyImg = screen.getByTestId('icon-proxy-fav-id-1') as HTMLImageElement;
-      expect(proxyImg.getAttribute('src')).toBe('/api-proxy/favorites/fav-id-1/icon');
+      // 260923-lrr: die Proxy-Adresse traegt jetzt ?v=<iconVersion> (Cache-Bust).
+      expect(proxyImg.getAttribute('src')).toBe('/api-proxy/favorites/fav-id-1/icon?v=0');
      expect(screen.queryByTestId('icon-direct-fav-id-1')).not.toBeInTheDocument();

      act(() => {
@@ -573,4 +593,288 @@ describe('FavoritesWidget', () => {

    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1));
  });
+
+  // 260923-lrr: eigenes Symbol hochladen, Zwischenspeicher nach Aenderung
+  // erneuern (versionierte Symbol-Adresse, Datei-Auswahl beim Bearbeiten
+  // und Hinzufuegen, Entfernen-Knopf, Meldungen im Formular).
+  describe('Eigenes Symbol (quick-260923-lrr)', () => {
+    function openEditForGitHub() {
+      const editButtons = screen.getAllByRole('button', { name: /favorites\.editButton/i });
+      act(() => {
+        fireEvent.click(editButtons[0]);
+      });
+    }
+
+    it('Proxy-Bild traegt ?v=<iconVersion>; Zeile ohne iconVersion -> ?v=0', async () => {
+      mockFetch.mockResolvedValue([{ ...BASE_FAVORITES[0], iconVersion: 3 }, BASE_FAVORITES[1]]);
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      const proxyImg = screen.getByTestId('icon-proxy-fav-id-1') as HTMLImageElement;
+      expect(proxyImg.getAttribute('src')).toBe('/api-proxy/favorites/fav-id-1/icon?v=3');
+    });
+
+    it('Zeile nur mit uploadedIconMime (iconUrl null) -> Proxy-Bild statt Direktbild', async () => {
+      mockFetch.mockResolvedValue([
+        {
+          id: 'fav-id-4',
+          widgetId: 'fav-1',
+          title: 'Eigenes',
+          url: 'https://eigenes.invalid',
+          iconUrl: null,
+          uploadedIconMime: 'image/png',
+          iconVersion: 1,
+          position: 0,
+        },
+      ]);
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Eigenes')).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('icon-proxy-fav-id-4')).toBeInTheDocument();
+      expect(screen.queryByTestId('icon-direct-fav-id-4')).not.toBeInTheDocument();
+    });
+
+    it('Logo-Adress-Feld zeigt den Platzhalter favorites.iconUrlPlaceholder (kein fest verdrahteter Text mehr)', async () => {
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      expect(screen.getByPlaceholderText('favorites.iconUrlPlaceholder')).toBeInTheDocument();
+    });
+
+    it('Speichern mit neuer Logo-Adresse, updateFavorite liefert iconVersion 1 -> src des Proxy-Bildes endet danach auf ?v=1', async () => {
+      mockUpdate.mockResolvedValue({
+        ...BASE_FAVORITES[0],
+        iconUrl: 'https://neu.invalid/icon.png',
+        iconVersion: 1,
+      });
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      const iconUrlField = screen.getByPlaceholderText('favorites.iconUrlPlaceholder');
+      act(() => {
+        fireEvent.change(iconUrlField, { target: { value: 'https://neu.invalid/icon.png' } });
+      });
+
+      const saveButton = screen.getByRole('button', { name: /favorites\.saveButton/i });
+      act(() => {
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(mockUpdate).toHaveBeenCalledWith(
+          'fav-id-1',
+          expect.objectContaining({ iconUrl: 'https://neu.invalid/icon.png' }),
+        );
+      });
+
+      await waitFor(() => {
+        const proxyImg = screen.getByTestId('icon-proxy-fav-id-1') as HTMLImageElement;
+        expect(proxyImg.getAttribute('src')).toBe('/api-proxy/favorites/fav-id-1/icon?v=1');
+      });
+    });
+
+    it('Datei im Bearbeitungsformular waehlen, Speichern -> updateFavorite, danach uploadFavoriteIcon(\'fav-id-1\', Datei); Formular schliesst', async () => {
+      mockUpdate.mockResolvedValue({ ...BASE_FAVORITES[0], iconVersion: 1 });
+      mockUploadIcon.mockResolvedValue({
+        ...BASE_FAVORITES[0],
+        uploadedIconMime: 'image/png',
+        iconVersion: 2,
+      });
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      const fileField = screen.getByTestId('favorite-icon-upload-fav-id-1');
+      const file = new File([new Uint8Array([1, 2, 3])], 'icon.png', { type: 'image/png' });
+      act(() => {
+        fireEvent.change(fileField, { target: { files: [file] } });
+      });
+
+      const saveButton = screen.getByRole('button', { name: /favorites\.saveButton/i });
+      act(() => {
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(mockUpdate).toHaveBeenCalledWith('fav-id-1', expect.objectContaining({ title: 'GitHub' }));
+      });
+      await waitFor(() => {
+        expect(mockUploadIcon).toHaveBeenCalledWith('fav-id-1', file);
+      });
+      await waitFor(() => {
+        expect(screen.queryByTestId('favorite-icon-upload-fav-id-1')).not.toBeInTheDocument();
+      });
+    });
+
+    it('updateFavorite wirft FavoriteRequestError(iconUrlUnreachable) -> Meldung im Formular (role alert), Formular bleibt offen, uploadFavoriteIcon NICHT aufgerufen', async () => {
+      mockUpdate.mockRejectedValue(new FavoriteRequestError('iconUrlUnreachable'));
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      const fileField = screen.getByTestId('favorite-icon-upload-fav-id-1');
+      const file = new File([new Uint8Array([1])], 'icon.png', { type: 'image/png' });
+      act(() => {
+        fireEvent.change(fileField, { target: { files: [file] } });
+      });
+
+      const saveButton = screen.getByRole('button', { name: /favorites\.saveButton/i });
+      act(() => {
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('alert')).toHaveTextContent('favorites.iconUrlUnreachable');
+      });
+      expect(mockUploadIcon).not.toHaveBeenCalled();
+      expect(screen.getByTestId('favorite-icon-upload-fav-id-1')).toBeInTheDocument();
+    });
+
+    it('Upload wirft FavoriteRequestError(iconTooLarge) -> favorites.iconTooLarge im Formular, Formular bleibt offen', async () => {
+      mockUpdate.mockResolvedValue({ ...BASE_FAVORITES[0] });
+      mockUploadIcon.mockRejectedValue(new FavoriteRequestError('iconTooLarge'));
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      const fileField = screen.getByTestId('favorite-icon-upload-fav-id-1');
+      const file = new File([new Uint8Array([1])], 'icon.png', { type: 'image/png' });
+      act(() => {
+        fireEvent.change(fileField, { target: { files: [file] } });
+      });
+
+      const saveButton = screen.getByRole('button', { name: /favorites\.saveButton/i });
+      act(() => {
+        fireEvent.click(saveButton);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('alert')).toHaveTextContent('favorites.iconTooLarge');
+      });
+      expect(screen.getByTestId('favorite-icon-upload-fav-id-1')).toBeInTheDocument();
+    });
+
+    it('Knopf favorites.iconRemoveButton nur bei gesetztem uploadedIconMime; Klick -> removeFavoriteIcon(\'fav-id-1\'), danach verschwindet der Knopf, Formular bleibt offen', async () => {
+      mockFetch.mockResolvedValue([
+        { ...BASE_FAVORITES[0], uploadedIconMime: 'image/png', iconVersion: 1 },
+        BASE_FAVORITES[1],
+      ]);
+      mockRemoveIcon.mockResolvedValue({ ...BASE_FAVORITES[0], uploadedIconMime: null, iconVersion: 2 });
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      const removeButton = screen.getByRole('button', { name: 'favorites.iconRemoveButton' });
+      act(() => {
+        fireEvent.click(removeButton);
+      });
+
+      await waitFor(() => {
+        expect(mockRemoveIcon).toHaveBeenCalledWith('fav-id-1');
+      });
+      await waitFor(() => {
+        expect(screen.queryByRole('button', { name: 'favorites.iconRemoveButton' })).not.toBeInTheDocument();
+      });
+      expect(screen.getByTestId('favorite-icon-upload-fav-id-1')).toBeInTheDocument();
+    });
+
+    it('kein Entfernen-Knopf ohne hochgeladenes Symbol', async () => {
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('GitHub')).toBeInTheDocument();
+      });
+
+      openEditForGitHub();
+
+      expect(screen.queryByRole('button', { name: 'favorites.iconRemoveButton' })).not.toBeInTheDocument();
+    });
+
+    it('Hinzufuegen mit gewaehlter Datei -> createFavorite, danach uploadFavoriteIcon(created.id, Datei)', async () => {
+      mockFetch.mockResolvedValue([]);
+      mockUploadIcon.mockResolvedValue({
+        id: 'fav-id-new',
+        widgetId: 'fav-1',
+        title: 'New Link',
+        url: 'https://example.com',
+        iconUrl: null,
+        uploadedIconMime: 'image/png',
+        iconVersion: 1,
+        position: 2,
+      });
+
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('favorites.empty')).toBeInTheDocument();
+      });
+
+      const titleInput = screen.getByPlaceholderText('favorites.addTitle');
+      const urlInput = screen.getByPlaceholderText('favorites.addUrl');
+      const fileInput = screen.getByTestId('favorite-add-icon-upload');
+      const file = new File([new Uint8Array([1, 2, 3])], 'icon.png', { type: 'image/png' });
+
+      act(() => {
+        fireEvent.change(titleInput, { target: { value: 'New Link' } });
+        fireEvent.change(urlInput, { target: { value: 'https://example.com' } });
+        fireEvent.change(fileInput, { target: { files: [file] } });
+      });
+
+      const addButton = screen.getByRole('button', { name: /favorites\.addButton/i });
+      act(() => {
+        fireEvent.click(addButton);
+      });
+
+      await waitFor(() => {
+        expect(mockCreate).toHaveBeenCalledWith(
+          expect.objectContaining({ widgetId: 'fav-1', title: 'New Link', url: 'https://example.com' }),
+        );
+      });
+      await waitFor(() => {
+        expect(mockUploadIcon).toHaveBeenCalledWith('fav-id-new', file);
+      });
+      await waitFor(() => {
+        expect(screen.getByText('New Link')).toBeInTheDocument();
+      });
+    });
+  });
 });