1a48c9458e
when not zoomed and double‑tap/double‑click to toggle zoom. I also added a guest haptics toggle in settings (sheet + /settings) backed by localStorage.
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { beforeAll, vi } from 'vitest';
|
|
import { MemoryRouter } from 'react-router-dom';
|
|
import PhotoLightbox from '../PhotoLightbox';
|
|
import { EventBrandingProvider } from '../../context/EventBrandingContext';
|
|
import { LocaleProvider } from '../../i18n/LocaleContext';
|
|
import { ToastProvider } from '../../components/ToastHost';
|
|
|
|
const photo = {
|
|
id: 1,
|
|
file_path: '/test.jpg',
|
|
likes_count: 0,
|
|
};
|
|
|
|
describe('PhotoLightbox zoom gestures', () => {
|
|
beforeAll(() => {
|
|
if (!window.matchMedia) {
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
configurable: true,
|
|
value: vi.fn().mockReturnValue({
|
|
matches: false,
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
}),
|
|
});
|
|
}
|
|
});
|
|
|
|
it('toggles zoom state on double click', () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<LocaleProvider>
|
|
<EventBrandingProvider>
|
|
<ToastProvider>
|
|
<PhotoLightbox photos={[photo]} currentIndex={0} token="event-token" />
|
|
</ToastProvider>
|
|
</EventBrandingProvider>
|
|
</LocaleProvider>
|
|
</MemoryRouter>
|
|
);
|
|
|
|
const zoomSurface = screen.getByTestId('lightbox-zoom');
|
|
const container = zoomSurface.closest('[data-zoomed]');
|
|
expect(container).toHaveAttribute('data-zoomed', 'false');
|
|
|
|
fireEvent.doubleClick(zoomSurface);
|
|
expect(container).toHaveAttribute('data-zoomed', 'true');
|
|
|
|
fireEvent.doubleClick(zoomSurface);
|
|
expect(container).toHaveAttribute('data-zoomed', 'false');
|
|
});
|
|
});
|