New tests!

packages/perseus/src/widgets/image/image.test.ts

@@ -1,30 +1,37 @@
 import {describe, beforeEach, it} from "@jest/globals";
+import {act, screen, waitFor} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
 import {scorePerseusItemTesting} from "../../util/test-utils";
 import {isAccessible} from "../../widgets";
 import {renderQuestion} from "../__testutils__/renderQuestion";
 
-import {question} from "./image.testdata";
+import {question, questionWithZoom} from "./image.testdata";
 
 import type {APIOptions} from "../../types";
 
 describe.each([true, false])("image widget - isMobile %b", (isMobile) => {
     const apiOptions: APIOptions = {isMobile};
+    const images: Array<Record<any, any>> = [];
+    let originalImage;
 
     beforeEach(() => {
+        jest.clearAllMocks();
+        originalImage = window.Image;
+        // Mock HTML Image so we can trigger onLoad callbacks and see full
+        // image rendering.
+        // @ts-expect-error - TS2322 - Type 'Mock<Record<string, any>, [], any>' is not assignable to type 'new (width?: number | undefined, height?: number | undefined) => HTMLImageElement'.
+        window.Image = jest.fn(() => {
+            const img: Record<string, any> = {};
+            images.push(img);
+            return img;
+        });
+
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );
-
-        // Mocked for loading graphie in svg-image
-        global.fetch = jest.fn(() =>
-            Promise.resolve({
-                text: () => "",
-                ok: true,
-            }),
-        ) as jest.Mock;
     });
 
     it("should snapshot", () => {
@@ -71,4 +78,76 @@ describe.each([true, false])("image widget - isMobile %b", (isMobile) => {
         // Act and Assert
         expect(isAccessible(inaccessibleWidgetInfo)).toBe(false);
     });
+
+    it("should zoom on click for applicable images", async () => {
+        // Arrange
+        const altText = questionWithZoom.widgets["image 1"].options.alt!;
+        renderQuestion(questionWithZoom, apiOptions);
+
+        // Tells the image loader 1, or all, of our images loaded
+        const markImagesAsLoaded = (imageIndex?: number) => {
+            if (imageIndex != null) {
+                const img = images[imageIndex];
+                if (img?.onload) {
+                    act(() => img.onload());
+                }
+            } else {
+                images.forEach((i) => {
+                    if (i?.onload) {
+                        act(() => i.onload());
+                    }
+                });
+            }
+        };
+
+        // Act
+        // Act
+        markImagesAsLoaded(); // Tell the ImageLoader that our images are loaded
+        await waitFor(async () => {
+            await screen.getByAltText(altText).focus();
+            screen.getByAltText(altText).click();
+        });
+
+        // Assert
+        // The image should have the zoomed class
+        await waitFor(() => {
+            expect(screen.getByTestId("zoomed-image")).toBeVisible();
+        });
+    });
+
+    it("should zoom on keyboard interaction for applicable images", async () => {
+        // Arrange
+        const altText = questionWithZoom.widgets["image 1"].options.alt!;
+        renderQuestion(questionWithZoom, apiOptions);
+
+        // Tells the image loader 1, or all, of our images loaded
+        const markImagesAsLoaded = (imageIndex?: number) => {
+            if (imageIndex != null) {
+                const img = images[imageIndex];
+                if (img?.onload) {
+                    act(() => img.onload());
+                }
+            } else {
+                images.forEach((i) => {
+                    if (i?.onload) {
+                        act(() => i.onload());
+                    }
+                });
+            }
+        };
+
+        // Act
+        // Act
+        markImagesAsLoaded(); // Tell the ImageLoader that our images are loaded
+        await waitFor(async () => {
+            await screen.getByAltText(altText).focus();
+            await userEvent.keyboard("{enter}");
+        });
+
+        // Assert
+        // The image should have the zoomed class
+        await waitFor(() => {
+            expect(screen.getByTestId("zoomed-image")).toBeVisible();
+        });
+    });
 });

packages/perseus/src/zoom.ts

@@ -376,6 +376,8 @@ Zoom.prototype.zoomImage = function () {
 
 Zoom.prototype._zoomOriginal = function () {
     this.$zoomedImage.addClass("zoom-img").attr("data-action", "zoom-out");
+
+    this.$zoomedImage.attr("data-test-id", "zoomed-image");
     $(this._targetImage).css("visibility", "hidden");
 
     this._backdrop = document.createElement("div");