121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
|
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
|
|
|
|
import { CmsRouteProvider, type CmsRouteData, type CmsRouteDoc } from '@/spa/cmsRoute'
|
|
import { netzwerkContent } from '@/spa/netzwerkContent'
|
|
import Netzwerk from '@/spa/pages/Netzwerk'
|
|
|
|
vi.mock('next/navigation', () => ({
|
|
usePathname: () => '/netzwerk',
|
|
useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
|
|
}))
|
|
|
|
const homePage = (videoUrl: string): CmsRouteDoc => ({
|
|
id: `home-${videoUrl}`,
|
|
slug: 'startseite',
|
|
spaPath: '/',
|
|
home: {
|
|
hero: { videoLabel: 'Homepage film' },
|
|
videoModal: {
|
|
video: { url: videoUrl },
|
|
title: 'Homepage video',
|
|
closeLabel: 'Homepage video close',
|
|
},
|
|
},
|
|
})
|
|
|
|
const networkRoute = (video?: { url: string; label: string; title: string }): CmsRouteData => ({
|
|
collection: 'pages',
|
|
doc: {
|
|
id: 'network-page',
|
|
slug: 'netzwerk',
|
|
spaPath: '/netzwerk',
|
|
netzwerk: {
|
|
patronage: {
|
|
...(video
|
|
? {
|
|
greetingVideo: { url: video.url },
|
|
greetingVideoButtonLabel: video.label,
|
|
greetingVideoTitle: video.title,
|
|
greetingVideoDescription: `${video.title} description`,
|
|
greetingVideoCloseLabel: `${video.title} close`,
|
|
}
|
|
: {}),
|
|
},
|
|
},
|
|
},
|
|
lists: {
|
|
pages: [homePage('/api/media/file/homepage.mp4')],
|
|
partners: [],
|
|
'jury-mitglieder': [],
|
|
},
|
|
})
|
|
|
|
describe('Netzwerk greeting video', () => {
|
|
beforeAll(() => {
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
configurable: true,
|
|
value: vi.fn().mockImplementation((query: string) => ({
|
|
addEventListener: vi.fn(),
|
|
matches: false,
|
|
media: query,
|
|
removeEventListener: vi.fn(),
|
|
})),
|
|
})
|
|
vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined)
|
|
})
|
|
|
|
afterEach(() => cleanup())
|
|
|
|
it('does not fall back to the homepage video when Netzwerk media is empty', () => {
|
|
render(
|
|
<CmsRouteProvider value={networkRoute()}>
|
|
<Netzwerk />
|
|
</CmsRouteProvider>,
|
|
)
|
|
|
|
expect(screen.queryByRole('button', { name: netzwerkContent.patronage.greetingVideoButtonLabel })).toBeNull()
|
|
expect(screen.queryByLabelText('Homepage video')).toBeNull()
|
|
})
|
|
|
|
it('resolves the page-owned Netzwerk media independently of homepage changes', () => {
|
|
const firstNetworkVideo = {
|
|
url: '/api/media/file/network-first.mp4',
|
|
label: 'Play Netzwerk greeting',
|
|
title: 'Netzwerk greeting one',
|
|
}
|
|
const secondNetworkVideo = {
|
|
url: '/api/media/file/network-second.mp4',
|
|
label: 'Play second Netzwerk greeting',
|
|
title: 'Netzwerk greeting two',
|
|
}
|
|
const { rerender } = render(
|
|
<CmsRouteProvider value={networkRoute(firstNetworkVideo)}>
|
|
<Netzwerk />
|
|
</CmsRouteProvider>,
|
|
)
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: firstNetworkVideo.label }))
|
|
expect(screen.getByRole('dialog').querySelector('video')?.getAttribute('src')).toBe(firstNetworkVideo.url)
|
|
|
|
const homeChanged = networkRoute(firstNetworkVideo)
|
|
homeChanged.lists = {
|
|
...homeChanged.lists,
|
|
pages: [homePage('/api/media/file/homepage-changed.mp4')],
|
|
}
|
|
rerender(
|
|
<CmsRouteProvider value={homeChanged}>
|
|
<Netzwerk />
|
|
</CmsRouteProvider>,
|
|
)
|
|
expect(screen.getByRole('dialog').querySelector('video')?.getAttribute('src')).toBe(firstNetworkVideo.url)
|
|
|
|
rerender(
|
|
<CmsRouteProvider value={networkRoute(secondNetworkVideo)}>
|
|
<Netzwerk />
|
|
</CmsRouteProvider>,
|
|
)
|
|
expect(screen.getByRole('dialog').querySelector('video')?.getAttribute('src')).toBe(secondNetworkVideo.url)
|
|
})
|
|
})
|