test: target image element in zoom and close tests

Zoom gestures and double-click zoom should target the slide image, not
the slide container or portal backdrop. Pointer events on .yarll__slide
and .yarll__portal trigger backdrop close, which races with the exit
animation fallback timeout on slower CI runners (Windows).

Also make expectLightboxToBeClosed resilient to the portal already being
unmounted by the fallback timeout before transitionEnd can be fired.

Author: igordanchenko

test/Lightbox.spec.tsx

@@ -70,6 +70,12 @@ async function testNavigation(
   await expectLightboxToBeClosed();
 }
 
+// Pointer events on .yarll__slide and .yarll__portal trigger backdrop close,
+// so zoom and gesture tests must target the slide image element instead.
+//
+// The portal exit animation has a fallback timeout that resolves without
+// transitionEnd (which never fires in jsdom). expectLightboxToBeClosed
+// handles the portal already being unmounted before transitionEnd is fired.
 describe("Lightbox", () => {
   it("supports mouse navigation", async () => {
     await testNavigation(clickButtonPrev, clickButtonNext, clickButtonClose);
@@ -171,7 +177,7 @@ describe("Lightbox", () => {
 
     renderLightbox({ controller: { closeOnPullUp: false } });
 
-    await pointerSwipe(user, getCurrentSlide(), 0, -120);
+    await pointerSwipe(user, getCurrentSlideImage(), 0, -120);
     await expectLightboxToBeOpen();
   });
 
@@ -180,7 +186,7 @@ describe("Lightbox", () => {
 
     renderLightbox({ controller: { closeOnPullDown: false } });
 
-    await pointerSwipe(user, getCurrentSlide(), 0, 120);
+    await pointerSwipe(user, getCurrentSlideImage(), 0, 120);
     await expectLightboxToBeOpen();
   });
 
@@ -465,7 +471,7 @@ describe("Lightbox", () => {
 
     renderLightbox();
 
-    const target = getCurrentSlide();
+    const target = getCurrentSlideImage();
 
     await user.pointer([
       { keys: "[TouchA>]", target, coords: { x: 100, y: 100 } },
@@ -496,7 +502,7 @@ describe("Lightbox", () => {
 
     renderLightbox();
 
-    const target = getCurrentSlide();
+    const target = getCurrentSlideImage();
 
     await user.pointer([
       { keys: "[TouchA>]", target, coords: { x: 100, y: 100 } },
@@ -538,11 +544,11 @@ describe("Lightbox", () => {
 
     renderLightbox();
 
-    await user.dblClick(getController());
+    await user.dblClick(getCurrentSlideImage());
     expectToBeZoomedIn();
 
     for (let i = 0; i < 3; i += 1) {
-      await user.dblClick(getController());
+      await user.dblClick(getCurrentSlideImage());
     }
     expectToBeZoomedOut();
   });
@@ -552,7 +558,7 @@ describe("Lightbox", () => {
 
     renderLightbox({ zoom: { disabled: true } });
 
-    await user.dblClick(getController());
+    await user.dblClick(getCurrentSlideImage());
     expectToBeZoomedOut();
   });
 

test/test-utils.tsx

@@ -124,9 +124,12 @@ export async function expectLightboxToBeOpen() {
 }
 
 export async function expectLightboxToBeClosed() {
-  await act(async () => {
-    fireEvent.transitionEnd(getController());
-  });
+  const controller = querySelector(".yarll__portal");
+  if (controller) {
+    await act(async () => {
+      fireEvent.transitionEnd(controller);
+    });
+  }
 
   expect(querySelector(".yarll__portal")).toBeNull();
 }