364 lines
11 KiB
TypeScript
364 lines
11 KiB
TypeScript
import React from 'react';
|
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
import { render, screen, waitFor } from '@testing-library/react';
|
|
import { ADMIN_EVENTS_PATH } from '../../constants';
|
|
|
|
const fixtures = vi.hoisted(() => ({
|
|
event: {
|
|
id: 1,
|
|
name: 'Demo Wedding',
|
|
slug: 'demo-event',
|
|
event_date: '2026-02-19',
|
|
status: 'published' as const,
|
|
settings: { location: 'Berlin' },
|
|
tasks_count: 4,
|
|
photo_count: 12,
|
|
active_invites_count: 3,
|
|
total_invites_count: 5,
|
|
member_permissions: ['photos:moderate', 'tasks:manage', 'join-tokens:manage'],
|
|
},
|
|
activePackage: {
|
|
id: 1,
|
|
package_id: 1,
|
|
package_name: 'Standard',
|
|
package_type: 'reseller',
|
|
included_package_slug: null,
|
|
active: true,
|
|
used_events: 2,
|
|
remaining_events: 3,
|
|
price: null,
|
|
currency: null,
|
|
purchased_at: null,
|
|
expires_at: null,
|
|
package_limits: null,
|
|
branding_allowed: true,
|
|
watermark_allowed: true,
|
|
features: [],
|
|
},
|
|
}));
|
|
|
|
const navigateMock = vi.fn();
|
|
const authState = {
|
|
status: 'authenticated',
|
|
user: { role: 'tenant_admin' },
|
|
};
|
|
const paramsState = {
|
|
slug: fixtures.event.slug as string | undefined,
|
|
};
|
|
const eventContext = {
|
|
events: [fixtures.event],
|
|
activeEvent: fixtures.event,
|
|
hasEvents: true,
|
|
hasMultipleEvents: false,
|
|
isLoading: false,
|
|
};
|
|
|
|
vi.mock('react-router-dom', () => ({
|
|
useNavigate: () => navigateMock,
|
|
useLocation: () => ({ search: '', pathname: '/event-admin/mobile/dashboard' }),
|
|
useParams: () => paramsState,
|
|
}));
|
|
|
|
vi.mock('react-i18next', () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string, fallback?: string | Record<string, unknown>, options?: Record<string, unknown>) => {
|
|
let text = key;
|
|
let resolvedOptions = options;
|
|
if (typeof fallback === 'string') {
|
|
text = fallback;
|
|
} else if (fallback && typeof fallback === 'object') {
|
|
resolvedOptions = fallback;
|
|
if (typeof fallback.defaultValue === 'string') {
|
|
text = fallback.defaultValue;
|
|
}
|
|
}
|
|
if (!resolvedOptions || typeof text !== 'string') {
|
|
return text;
|
|
}
|
|
return text.replace(/\{\{(\w+)\}\}/g, (_, token) => String(resolvedOptions?.[token] ?? ''));
|
|
},
|
|
i18n: {
|
|
language: 'de',
|
|
},
|
|
}),
|
|
initReactI18next: {
|
|
type: '3rdParty',
|
|
init: () => undefined,
|
|
},
|
|
}));
|
|
|
|
vi.mock('@tanstack/react-query', () => ({
|
|
useQuery: ({ queryKey }: { queryKey: unknown }) => {
|
|
const keyParts = Array.isArray(queryKey) ? queryKey : [queryKey];
|
|
const key = keyParts.map(String).join(':');
|
|
if (key.includes('packages-overview')) {
|
|
return { data: { packages: [], activePackage: fixtures.activePackage }, isLoading: false, isError: false };
|
|
}
|
|
if (key.includes('onboarding') && key.includes('status')) {
|
|
return { data: { steps: { summary_seen_package_id: fixtures.activePackage.id } }, isLoading: false };
|
|
}
|
|
if (key.includes('dashboard') && key.includes('events')) {
|
|
return { data: [fixtures.event], isLoading: false };
|
|
}
|
|
if (key.includes('dashboard') && key.includes('stats')) {
|
|
return { data: null, isLoading: false };
|
|
}
|
|
return { data: null, isLoading: false, isError: false };
|
|
},
|
|
}));
|
|
|
|
vi.mock('../../context/EventContext', () => ({
|
|
useEventContext: () => ({
|
|
...eventContext,
|
|
selectEvent: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../auth/context', () => ({
|
|
useAuth: () => authState,
|
|
}));
|
|
|
|
vi.mock('../hooks/useInstallPrompt', () => ({
|
|
useInstallPrompt: () => ({ isInstalled: true, canInstall: false, isIos: false, promptInstall: vi.fn() }),
|
|
}));
|
|
|
|
vi.mock('../hooks/useAdminPushSubscription', () => ({
|
|
useAdminPushSubscription: () => ({ supported: true, subscribed: true, permission: 'granted', loading: false, enable: vi.fn() }),
|
|
}));
|
|
|
|
vi.mock('../hooks/useDevicePermissions', () => ({
|
|
useDevicePermissions: () => ({ storage: 'unavailable', loading: false, requestPersistentStorage: vi.fn() }),
|
|
}));
|
|
|
|
vi.mock('../lib/mobileTour', () => ({
|
|
getTourSeen: () => true,
|
|
resolveTourStepKeys: () => [],
|
|
setTourSeen: vi.fn(),
|
|
}));
|
|
|
|
vi.mock('../components/MobileShell', () => ({
|
|
MobileShell: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('../components/Sheet', () => ({
|
|
MobileSheet: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('../components/Primitives', () => ({
|
|
MobileCard: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
CTAButton: ({ label }: { label: string }) => <button type="button">{label}</button>,
|
|
KpiStrip: ({ items }: { items: Array<{ label: string; value: string | number }> }) => (
|
|
<div>
|
|
{items.map((item) => (
|
|
<span key={item.label}>{item.label}</span>
|
|
))}
|
|
</div>
|
|
),
|
|
KpiTile: ({ label, value }: { label: string; value: string | number }) => (
|
|
<div>
|
|
<span>{label}</span>
|
|
<span>{value}</span>
|
|
</div>
|
|
),
|
|
ActionTile: ({ label, note }: { label: string; note?: string }) => (
|
|
<div>
|
|
<span>{label}</span>
|
|
{note ? <span>{note}</span> : null}
|
|
</div>
|
|
),
|
|
PillBadge: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
SkeletonCard: () => <div>Loading...</div>,
|
|
}));
|
|
|
|
vi.mock('@tamagui/card', () => ({
|
|
Card: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('@tamagui/progress', () => ({
|
|
Progress: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
|
|
Indicator: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
|
|
}),
|
|
}));
|
|
|
|
vi.mock('@tamagui/group', () => ({
|
|
XGroup: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
|
|
Item: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}),
|
|
YGroup: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
|
|
Item: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}),
|
|
}));
|
|
|
|
vi.mock('@tamagui/stacks', () => ({
|
|
YStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('@tamagui/button', () => ({
|
|
Button: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
|
|
<button type="button" onClick={onPress}>
|
|
{children}
|
|
</button>
|
|
),
|
|
}));
|
|
|
|
vi.mock('@tamagui/list-item', () => ({
|
|
ListItem: ({
|
|
title,
|
|
subTitle,
|
|
iconAfter,
|
|
onPress,
|
|
}: {
|
|
title?: React.ReactNode;
|
|
subTitle?: React.ReactNode;
|
|
iconAfter?: React.ReactNode;
|
|
onPress?: () => void;
|
|
}) => (
|
|
<button type="button" onClick={onPress}>
|
|
{title}
|
|
{subTitle}
|
|
{iconAfter}
|
|
</button>
|
|
),
|
|
}));
|
|
|
|
vi.mock('tamagui', () => ({
|
|
Separator: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('@tamagui/text', () => ({
|
|
SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
|
|
}));
|
|
|
|
vi.mock('@tamagui/react-native-web-lite', () => ({
|
|
Pressable: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
|
|
<button type="button" onClick={onPress}>
|
|
{children}
|
|
</button>
|
|
),
|
|
}));
|
|
|
|
vi.mock('../theme', () => ({
|
|
ADMIN_ACTION_COLORS: {
|
|
settings: '#10b981',
|
|
tasks: '#f59e0b',
|
|
qr: '#6366f1',
|
|
images: '#ec4899',
|
|
liveShow: '#f97316',
|
|
liveShowSettings: '#38bdf8',
|
|
guests: '#22c55e',
|
|
guestMessages: '#f97316',
|
|
branding: '#0ea5e9',
|
|
photobooth: '#f43f5e',
|
|
recap: '#94a3b8',
|
|
analytics: '#22c55e',
|
|
},
|
|
ADMIN_MOTION: {
|
|
tileStaggerMs: 0,
|
|
},
|
|
useAdminTheme: () => ({
|
|
textStrong: '#0f172a',
|
|
text: '#0f172a',
|
|
muted: '#64748b',
|
|
border: '#e2e8f0',
|
|
surface: '#ffffff',
|
|
accentSoft: '#eef2ff',
|
|
primary: '#ff5a5f',
|
|
surfaceMuted: '#f8fafc',
|
|
shadow: 'rgba(15,23,42,0.12)',
|
|
success: '#16a34a',
|
|
successText: '#166534',
|
|
dangerBg: '#fee2e2',
|
|
dangerText: '#b91c1c',
|
|
warningBg: '#fef9c3',
|
|
warningBorder: '#fef08a',
|
|
warningText: '#92400e',
|
|
}),
|
|
}));
|
|
|
|
vi.mock('../../lib/events', () => ({
|
|
resolveEventDisplayName: () => fixtures.event.name,
|
|
resolveEngagementMode: () => 'full',
|
|
isBrandingAllowed: () => true,
|
|
formatEventDate: () => '19. Feb. 2026',
|
|
}));
|
|
|
|
vi.mock('../eventDate', () => ({
|
|
isPastEvent: () => false,
|
|
}));
|
|
|
|
import MobileDashboardPage from '../DashboardPage';
|
|
|
|
describe('MobileDashboardPage', () => {
|
|
afterEach(() => {
|
|
eventContext.events = [fixtures.event];
|
|
eventContext.activeEvent = fixtures.event;
|
|
eventContext.hasEvents = true;
|
|
eventContext.hasMultipleEvents = false;
|
|
paramsState.slug = fixtures.event.slug;
|
|
|
|
fixtures.activePackage.package_type = 'reseller';
|
|
fixtures.activePackage.remaining_events = 3;
|
|
fixtures.event.tasks_count = 4;
|
|
fixtures.event.engagement_mode = undefined;
|
|
navigateMock.mockClear();
|
|
window.sessionStorage.clear();
|
|
});
|
|
|
|
it('redirects to the event selector when no event is active', async () => {
|
|
eventContext.activeEvent = null as unknown as typeof fixtures.event;
|
|
eventContext.events = [fixtures.event];
|
|
eventContext.hasEvents = true;
|
|
paramsState.slug = undefined;
|
|
|
|
render(<MobileDashboardPage />);
|
|
|
|
await waitFor(() => {
|
|
expect(navigateMock).toHaveBeenCalledWith(ADMIN_EVENTS_PATH, { replace: true });
|
|
});
|
|
});
|
|
|
|
it('shows the next-step CTA when tasks are missing', () => {
|
|
fixtures.event.tasks_count = 0;
|
|
fixtures.event.engagement_mode = 'tasks';
|
|
window.sessionStorage.setItem(`tasksDecisionPrompt:${fixtures.event.id}`, 'pending');
|
|
|
|
render(<MobileDashboardPage />);
|
|
|
|
expect(screen.getByText('Fotoaufgaben hinzufügen')).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not redirect endcustomer packages without remaining event quota', () => {
|
|
eventContext.events = [];
|
|
eventContext.activeEvent = null as unknown as typeof fixtures.event;
|
|
eventContext.hasEvents = false;
|
|
eventContext.hasMultipleEvents = false;
|
|
|
|
fixtures.activePackage.package_type = 'endcustomer';
|
|
fixtures.activePackage.remaining_events = 0;
|
|
|
|
render(<MobileDashboardPage />);
|
|
|
|
expect(navigateMock).not.toHaveBeenCalledWith('/event-admin/mobile/billing#packages', { replace: true });
|
|
});
|
|
|
|
it('shows the activity pulse strip', () => {
|
|
render(<MobileDashboardPage />);
|
|
|
|
expect(screen.getAllByText('Photos').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('Guests').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('Pending').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('shows shortcut sections for members', () => {
|
|
authState.user = { role: 'member' };
|
|
|
|
render(<MobileDashboardPage />);
|
|
|
|
expect(screen.getByText('Experience')).toBeInTheDocument();
|
|
expect(screen.getByText('Settings')).toBeInTheDocument();
|
|
|
|
authState.user = { role: 'tenant_admin' };
|
|
});
|
|
});
|