124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
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()
|
|
})
|
|
})
|