130 lines
4.1 KiB
TypeScript
130 lines
4.1 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 About from '@/spa/pages/About'
|
|
|
|
const viewport = vi.hoisted(() => ({ mobile: false, relevanceStacked: false }))
|
|
|
|
vi.mock('@/spa/hooks/useIsMobile', () => ({
|
|
useIsMobile: (breakpoint = 768) =>
|
|
breakpoint === 1024 ? viewport.relevanceStacked : viewport.mobile,
|
|
}))
|
|
|
|
vi.mock('next/navigation', () => ({
|
|
usePathname: () => '/der-bmp',
|
|
useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
|
|
}))
|
|
|
|
vi.mock('@/spa/components/AwardsGridSection', () => ({
|
|
default: () => <section data-testid="awards-stub" />,
|
|
}))
|
|
|
|
vi.mock('@/spa/components/HomeWinnersSection', () => ({
|
|
default: () => <section data-testid="winners-stub" />,
|
|
}))
|
|
|
|
vi.mock('@/spa/components/TestimonialsSection', () => ({
|
|
default: () => <section data-testid="testimonials-stub" />,
|
|
}))
|
|
|
|
vi.mock('@/spa/components/ui/munich-skyline-bg', () => ({
|
|
default: () => null,
|
|
}))
|
|
|
|
const aboutRoute: CmsRouteData = {
|
|
collection: 'pages',
|
|
doc: {
|
|
id: 'about-page',
|
|
slug: 'der-bmp',
|
|
spaPath: '/der-bmp',
|
|
about: {
|
|
mittelstand: {
|
|
image: {
|
|
url: '/api/media/file/cms-relevance.jpg',
|
|
alt: 'CMS relevance event',
|
|
focalX: 38,
|
|
focalY: 42,
|
|
},
|
|
imageAlt: 'Page-owned fallback alt',
|
|
eyebrow: 'CMS relevance eyebrow',
|
|
heading: 'CMS RELEVANCE\nHEADING',
|
|
body: [
|
|
{ text: 'First CMS relevance paragraph.' },
|
|
{ text: 'Second CMS relevance paragraph.' },
|
|
],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const renderAbout = () =>
|
|
render(
|
|
<CmsRouteProvider value={aboutRoute}>
|
|
<About />
|
|
</CmsRouteProvider>,
|
|
)
|
|
|
|
describe('/der-bmp relevance section', () => {
|
|
beforeEach(() => {
|
|
viewport.mobile = false
|
|
viewport.relevanceStacked = false
|
|
})
|
|
|
|
afterEach(() => cleanup())
|
|
|
|
it('gives the image the larger desktop share and centers a readable copy measure', () => {
|
|
renderAbout()
|
|
|
|
const layout = screen.getByTestId('relevance-layout')
|
|
const copyPanel = screen.getByTestId('relevance-copy-panel')
|
|
const copy = screen.getByTestId('relevance-copy')
|
|
|
|
expect(layout.getAttribute('data-layout')).toBe('split')
|
|
expect(layout.style.gridTemplateColumns).toBe('55% 45%')
|
|
expect(copyPanel.style.padding).toBe('88px 64px')
|
|
expect(copy.style.width).toBe('100%')
|
|
expect(copy.style.maxWidth).toBe('520px')
|
|
expect(copy.style.margin).toBe('0px auto')
|
|
})
|
|
|
|
it('preserves CMS-owned copy and media while honoring the media focal point', () => {
|
|
renderAbout()
|
|
|
|
const section = screen.getByTestId('relevance-section')
|
|
const image = within(section).getByRole('img', { name: 'CMS relevance event' })
|
|
|
|
expect(image.getAttribute('src')).toBe('/api/media/file/cms-relevance.jpg')
|
|
expect(image.style.objectPosition).toBe('38% 42%')
|
|
expect(within(section).getByText('CMS relevance eyebrow')).toBeTruthy()
|
|
expect(within(section).getByRole('heading', { level: 2 }).textContent).toBe(
|
|
'CMS RELEVANCEHEADING',
|
|
)
|
|
expect(within(section).getByText('First CMS relevance paragraph.')).toBeTruthy()
|
|
expect(within(section).getByText('Second CMS relevance paragraph.')).toBeTruthy()
|
|
expect(
|
|
within(section).queryByText(
|
|
'Der Bayerische Mittelstandspreis ist weit mehr als eine Trophäe.',
|
|
),
|
|
).toBeNull()
|
|
})
|
|
|
|
it('keeps the image first with readable padding in the stacked mobile layout', () => {
|
|
viewport.mobile = true
|
|
viewport.relevanceStacked = true
|
|
renderAbout()
|
|
|
|
const layout = screen.getByTestId('relevance-layout')
|
|
const imagePanel = screen.getByTestId('relevance-image-panel')
|
|
const copyPanel = screen.getByTestId('relevance-copy-panel')
|
|
|
|
expect(layout.getAttribute('data-layout')).toBe('stacked')
|
|
expect(layout.style.gridTemplateColumns).toBe('1fr')
|
|
expect(imagePanel.style.minHeight).toBe('280px')
|
|
expect(copyPanel.style.padding).toBe('32px 24px 40px')
|
|
expect(
|
|
imagePanel.compareDocumentPosition(copyPanel) & Node.DOCUMENT_POSITION_FOLLOWING,
|
|
).toBeTruthy()
|
|
})
|
|
})
|