tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(image-modal): enhance gesture handling and improve pinch zoom functionality

Browse Source
This commit is contained in:
ncoronel
2026-09-02 14:52:55 -03:00
parent 1d54cb1c48
commit 71ef09b413
4 changed files with 178 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/shared/components/image-modal/image-modal.component.spec.ts
View File

@@ -76,7 +76,7 @@ describe('ImageModalComponent', () => {
expect(zoomOut.disabled).toBe(true);
});
it('supports pinch zoom through touch pointer events', () => {
it('supports pinch zoom through touch pointer events', async () => {
const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement;
const zoom = fixture.nativeElement.querySelector(
'[aria-label="Restablecer zoom"]',
@@ -85,17 +85,19 @@ describe('ImageModalComponent', () => {
viewport.dispatchEvent(pointerEvent('pointerdown', 1, 100, 100));
viewport.dispatchEvent(pointerEvent('pointerdown', 2, 200, 100));
viewport.dispatchEvent(pointerEvent('pointermove', 2, 250, 100));
await renderNextFrame();
fixture.detectChanges();
expect(zoom.textContent).toContain('150%');
});
it('dismisses with a downward swipe while the image is at its base zoom', () => {
it('dismisses with a downward swipe while the image is at its base zoom', async () => {
const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement;
const modal = fixture.nativeElement.querySelector('.image-modal') as HTMLElement;
viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100));
viewport.dispatchEvent(pointerEvent('pointermove', 1, 155, 230));
await renderNextFrame();
fixture.detectChanges();
expect(modal.style.transform).toBe('translate3d(0, 130px, 0)');
@@ -106,12 +108,13 @@ describe('ImageModalComponent', () => {
expect(modalRef.dismiss).toHaveBeenCalledWith('swipe');
});
it('returns smoothly to its position when the swipe is too short', () => {
it('returns smoothly to its position when the swipe is too short', async () => {
const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement;
const modal = fixture.nativeElement.querySelector('.image-modal') as HTMLElement;
viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100));
viewport.dispatchEvent(pointerEvent('pointermove', 1, 150, 160));
await renderNextFrame();
fixture.detectChanges();
expect(modal.style.transform).toBe('translate3d(0, 60px, 0)');
@@ -156,3 +159,7 @@ function pointerEvent(type: string, pointerId: number, clientX: number, clientY:
});
return event;
}
async function renderNextFrame(): Promise<void> {
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
}