feat(cms): add press contact image

tests/int/press-contact-image.int.spec.tsx

@@ -0,0 +1,123 @@
+import { cleanup, render, screen, within } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { CmsRouteProvider, type CmsRouteData } from '@/spa/cmsRoute'
+import { pressIndexContent } from '@/spa/pressIndexContent'
+import Press from '@/spa/pages/Press'
+
+const viewport = vi.hoisted(() => ({ mobile: false }))
+
+vi.mock('@/spa/hooks/useIsMobile', () => ({
+  useIsMobile: () => viewport.mobile,
+}))
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/presse',
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+}))
+
+const pressRoute = (contactImage?: unknown, contactImageAlt?: string): CmsRouteData => ({
+  collection: 'pages',
+  doc: {
+    id: 'press-page',
+    slug: 'presse',
+    spaPath: '/presse',
+    pressIndex: {
+      downloads: {
+        contactImage,
+        contactImageAlt,
+      },
+    },
+  },
+  lists: {
+    events: [],
+    posts: [],
+  },
+})
+
+describe('Presse contact image', () => {
+  beforeEach(() => {
+    viewport.mobile = false
+  })
+
+  afterEach(() => cleanup())
+
+  it('renders selected media and page-owned alt text in the desktop right column', () => {
+    render(
+      <CmsRouteProvider
+        value={pressRoute(
+          { url: '/api/media/file/press-contact.jpg', alt: 'Media default alt' },
+          'Press team portrait',
+        )}
+      >
+        <Press />
+      </CmsRouteProvider>,
+    )
+
+    const layout = screen.getByTestId('press-contact-layout')
+    const imageColumn = screen.getByTestId('press-contact-image')
+    const image = within(imageColumn).getByRole('img', { name: 'Press team portrait' })
+
+    expect(layout.getAttribute('data-layout')).toBe('two-column')
+    expect(layout.style.gridTemplateColumns).toBe('minmax(0, 1fr) minmax(320px, 1fr)')
+    expect(image.getAttribute('src')).toBe('/api/media/file/press-contact.jpg')
+    expect(
+      screen.getByTestId('press-contact-copy').compareDocumentPosition(imageColumn) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy()
+  })
+
+  it('clears only the visual and keeps the contact copy in a compact fallback-free layout', () => {
+    const { rerender } = render(
+      <CmsRouteProvider
+        value={pressRoute({ url: '/api/media/file/press-contact.jpg' }, 'Press contact')}
+      >
+        <Press />
+      </CmsRouteProvider>,
+    )
+
+    expect(screen.getByTestId('press-contact-image')).toBeTruthy()
+
+    rerender(
+      <CmsRouteProvider value={pressRoute(undefined, '')}>
+        <Press />
+      </CmsRouteProvider>,
+    )
+
+    const layout = screen.getByTestId('press-contact-layout')
+    expect(screen.queryByTestId('press-contact-image')).toBeNull()
+    expect(layout.getAttribute('data-layout')).toBe('copy-only')
+    expect(layout.style.gridTemplateColumns).toBe('1fr')
+    expect(
+      within(screen.getByTestId('press-contact-copy')).getByText(
+        pressIndexContent.downloads.contactName,
+      ),
+    ).toBeTruthy()
+    expect(within(layout).queryByRole('img')).toBeNull()
+  })
+
+  it('stacks copy before the selected image on mobile', () => {
+    viewport.mobile = true
+
+    render(
+      <CmsRouteProvider
+        value={pressRoute({ filename: 'press-contact-mobile.jpg' }, 'Mobile press contact')}
+      >
+        <Press />
+      </CmsRouteProvider>,
+    )
+
+    const layout = screen.getByTestId('press-contact-layout')
+    const copy = screen.getByTestId('press-contact-copy')
+    const imageColumn = screen.getByTestId('press-contact-image')
+
+    expect(layout.getAttribute('data-layout')).toBe('stacked')
+    expect(layout.style.gridTemplateColumns).toBe('1fr')
+    expect(
+      within(imageColumn).getByRole('img', { name: 'Mobile press contact' }).getAttribute('src'),
+    ).toBe('/api/media/file/press-contact-mobile.jpg')
+    expect(
+      copy.compareDocumentPosition(imageColumn) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy()
+  })
+})