122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
|
import { render, screen, waitFor } from '@testing-library/react';
|
|
import UploadPage from '../UploadPage';
|
|
|
|
vi.mock('react-router-dom', () => ({
|
|
useNavigate: () => vi.fn(),
|
|
useParams: () => ({ token: 'demo' }),
|
|
useSearchParams: () => [new URLSearchParams(), vi.fn()],
|
|
}));
|
|
|
|
vi.mock('../../hooks/useGuestTaskProgress', () => ({
|
|
useGuestTaskProgress: () => ({
|
|
markCompleted: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../context/GuestIdentityContext', () => ({
|
|
useGuestIdentity: () => ({
|
|
name: 'Guest',
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../hooks/useEventData', () => ({
|
|
useEventData: () => ({
|
|
event: {
|
|
guest_upload_visibility: 'immediate',
|
|
demo_read_only: false,
|
|
engagement_mode: 'photo_only',
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../context/EventStatsContext', () => ({
|
|
useEventStats: () => ({
|
|
latestPhotoAt: null,
|
|
onlineGuests: 2,
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../context/EventBrandingContext', () => ({
|
|
useEventBranding: () => ({
|
|
branding: {
|
|
primaryColor: '#f43f5e',
|
|
secondaryColor: '#fb7185',
|
|
buttons: { radius: 12 },
|
|
typography: {},
|
|
fontFamily: 'Montserrat',
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../i18n/useTranslation', () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string, fallback?: string) => fallback ?? key,
|
|
locale: 'de',
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../services/eventApi', () => ({
|
|
getEventPackage: vi.fn().mockResolvedValue(null),
|
|
}));
|
|
|
|
vi.mock('../../services/photosApi', () => ({
|
|
uploadPhoto: vi.fn(),
|
|
}));
|
|
|
|
describe('UploadPage bottom nav visibility', () => {
|
|
beforeEach(() => {
|
|
document.body.classList.remove('guest-nav-visible');
|
|
document.body.classList.remove('guest-immersive');
|
|
vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
|
|
cb(0);
|
|
return 0;
|
|
});
|
|
vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
|
|
});
|
|
|
|
it('shows the nav after the KPI chips are scrolled past', async () => {
|
|
render(<UploadPage />);
|
|
|
|
const chips = screen.getByTestId('upload-kpi-chips');
|
|
const sentinel = screen.getByTestId('nav-visibility-sentinel');
|
|
let bottom = 20;
|
|
let top = 20;
|
|
vi.spyOn(chips, 'getBoundingClientRect').mockImplementation(() => ({
|
|
bottom,
|
|
top: bottom - 40,
|
|
left: 0,
|
|
right: 0,
|
|
width: 0,
|
|
height: 0,
|
|
x: 0,
|
|
y: 0,
|
|
toJSON: () => ({}),
|
|
}) as DOMRect);
|
|
vi.spyOn(sentinel, 'getBoundingClientRect').mockImplementation(() => ({
|
|
bottom: top,
|
|
top,
|
|
left: 0,
|
|
right: 0,
|
|
width: 0,
|
|
height: 0,
|
|
x: 0,
|
|
y: 0,
|
|
toJSON: () => ({}),
|
|
}) as DOMRect);
|
|
|
|
// nav is on by default now
|
|
expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
|
|
|
|
bottom = -1;
|
|
top = -10;
|
|
window.dispatchEvent(new Event('scroll'));
|
|
await waitFor(() => {
|
|
expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
|
|
});
|
|
|
|
// Nav stays visible by design now
|
|
});
|
|
});
|