Fix foldable background layout

resources/js/admin/mobile/__tests__/QrLayoutCustomizePage.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { getEventQrInvites } from '../../api';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { getEventQrInvites, updateEventQrInvite } from '../../api';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../invite-layout/schema';
 
 const fixtures = vi.hoisted(() => ({
   event: {
@@ -28,6 +29,25 @@ const fixtures = vi.hoisted(() => ({
   ],
 }));
 
+const exportUtilsMock = vi.hoisted(() => ({
+  generatePdfBytes: vi.fn(),
+  generatePngDataUrl: vi.fn().mockResolvedValue('data:image/png;base64,abc'),
+  triggerDownloadFromBlob: vi.fn(),
+  triggerDownloadFromDataUrl: vi.fn(),
+}));
+
+const translationMock = vi.hoisted(() => ({
+  t: (key: string, fallback?: string | Record<string, unknown>) => {
+    if (typeof fallback === 'string') {
+      return fallback;
+    }
+    if (fallback && typeof fallback === 'object' && typeof fallback.defaultValue === 'string') {
+      return fallback.defaultValue;
+    }
+    return key;
+  },
+}));
+
 vi.mock('react-router-dom', () => ({
   useNavigate: () => vi.fn(),
   useParams: () => ({ slug: fixtures.event.slug, tokenId: '1' }),
@@ -35,17 +55,7 @@ vi.mock('react-router-dom', () => ({
 }));
 
 vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string | Record<string, unknown>) => {
-      if (typeof fallback === 'string') {
-        return fallback;
-      }
-      if (fallback && typeof fallback === 'object' && typeof fallback.defaultValue === 'string') {
-        return fallback.defaultValue;
-      }
-      return key;
-    },
-  }),
+  useTranslation: () => translationMock,
 }));
 
 vi.mock('../hooks/useBackNavigation', () => ({
@@ -78,12 +88,7 @@ vi.mock('react-hot-toast', () => ({
   },
 }));
 
-vi.mock('./invite-layout/export-utils', () => ({
-  generatePdfBytes: vi.fn(),
-  generatePngDataUrl: vi.fn().mockResolvedValue('data:image/png;base64,abc'),
-  triggerDownloadFromBlob: vi.fn(),
-  triggerDownloadFromDataUrl: vi.fn(),
-}));
+vi.mock('../invite-layout/export-utils', () => exportUtilsMock);
 
 vi.mock('../components/MobileShell', () => ({
   MobileShell: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -92,7 +97,19 @@ vi.mock('../components/MobileShell', () => ({
 
 vi.mock('../components/Primitives', () => ({
   MobileCard: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  CTAButton: ({ label }: { label: string }) => <button type="button">{label}</button>,
+  CTAButton: ({
+    label,
+    onPress,
+    disabled,
+  }: {
+    label: string;
+    onPress?: () => void;
+    disabled?: boolean;
+  }) => (
+    <button type="button" disabled={disabled} onClick={onPress}>
+      {label}
+    </button>
+  ),
   PillBadge: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
 
@@ -185,9 +202,65 @@ describe('MobileQrLayoutCustomizePage', () => {
     };
 
     vi.mocked(getEventQrInvites).mockResolvedValueOnce([foldableInvite]);
+    vi.mocked(updateEventQrInvite).mockResolvedValue(foldableInvite as any);
 
     render(<MobileQrLayoutCustomizePage />);
 
     expect(await screen.findByText('Blue Floral')).toBeInTheDocument();
   });
+
+  it('scales foldable background panels to A5 halves', async () => {
+    const foldableInvite = {
+      ...fixtures.invites[0],
+      metadata: {
+        layout_customization: {
+          background_preset: 'blue-floral',
+        },
+      },
+      layouts: [
+        {
+          ...fixtures.invites[0].layouts[0],
+          orientation: 'landscape',
+          panel_mode: 'double-mirror',
+        },
+      ],
+    };
+
+    vi.mocked(getEventQrInvites).mockResolvedValueOnce([foldableInvite]);
+    exportUtilsMock.generatePngDataUrl.mockResolvedValue('data:image/png;base64,abc');
+    exportUtilsMock.generatePngDataUrl.mockClear();
+
+    render(<MobileQrLayoutCustomizePage />);
+
+    const presetButton = await screen.findByText('Blue Floral');
+    fireEvent.click(presetButton);
+
+    const nextButton = await screen.findByText('Weiter');
+    fireEvent.click(nextButton);
+    const previewButton = await screen.findByText('Vorschau');
+    fireEvent.click(previewButton);
+
+    await waitFor(() => expect(exportUtilsMock.generatePngDataUrl).toHaveBeenCalled());
+
+    const options = exportUtilsMock.generatePngDataUrl.mock.calls.at(-1)?.[0];
+
+    expect(options).toBeDefined();
+    expect(options.backgroundImagePanels).toHaveLength(2);
+    expect(options.backgroundImagePanels[0]).toMatchObject({
+      centerX: CANVAS_HEIGHT / 4,
+      centerY: CANVAS_WIDTH / 2,
+      width: CANVAS_HEIGHT / 2,
+      height: CANVAS_WIDTH,
+      rotation: 0,
+      mirrored: false,
+    });
+    expect(options.backgroundImagePanels[1]).toMatchObject({
+      centerX: (CANVAS_HEIGHT / 4) * 3,
+      centerY: CANVAS_WIDTH / 2,
+      width: CANVAS_HEIGHT / 2,
+      height: CANVAS_WIDTH,
+      rotation: 0,
+      mirrored: true,
+    });
+  });
 });