New approach to svg-image

.changeset/gentle-ties-drum.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Updating how svg-image loads data

packages/perseus/src/__tests__/renderer.test.tsx

@@ -63,6 +63,14 @@ describe("renderer", () => {
         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;
     });
 
     afterEach(() => {

packages/perseus/src/components/__tests__/__snapshots__/svg-image.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SvgImage should load and render a localized graphie svg 1`] = `
+<div>
+  <div
+    class="unresponsive-svg-image"
+  >
+    <img
+      alt="svg image"
+      src="mockStaticUrl(https://ka-perseus-graphie.s3.amazonaws.com/ccefe63aa1bd05f1d11123f72790a49378d2e42b.svg)"
+    />
+  </div>
+</div>
+`;
+
+exports[`SvgImage should load and render a normal graphie svg 1`] = `
+<div>
+  <div
+    class="unresponsive-svg-image"
+  >
+    <img
+      alt="svg image"
+      src="mockStaticUrl(https://ka-perseus-graphie.s3.amazonaws.com/ccefe63aa1bd05f1d11123f72790a49378d2e42b.svg)"
+    />
+  </div>
+</div>
+`;
+
+exports[`SvgImage should load and render a png 1`] = `
+<div>
+  <img
+    alt="png image"
+    src="mockStaticUrl(http://localhost/sample.png)"
+  />
+</div>
+`;
+
+exports[`SvgImage should render a spinner initially 1`] = `
+<div>
+  <span
+    style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
+  >
+    <div
+      class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+    >
+      <svg
+        height="48"
+        viewBox="0 0 48 48"
+        width="48"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+          d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
+          fill-rule="nonzero"
+        />
+      </svg>
+    </div>
+  </span>
+</div>
+`;

packages/perseus/src/components/__tests__/svg-image.test.tsx

@@ -0,0 +1,122 @@
+import {act, render} from "@testing-library/react";
+import * as React from "react";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import * as Dependencies from "../../dependencies";
+import {typicalCase} from "../../util/graphie-utils.testdata";
+import SvgImage from "../svg-image";
+
+describe("SvgImage", () => {
+    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;
+        });
+
+        global.fetch = jest.fn((url) => {
+            return Promise.resolve({
+                text: () => Promise.resolve(typicalCase.jsonpString),
+                ok: true,
+            });
+        }) as jest.Mock;
+    });
+
+    afterEach(() => {
+        window.Image = originalImage;
+    });
+
+    // 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());
+                }
+            });
+        }
+    };
+    it("should render a spinner initially", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+
+        // Act
+        const {container} = render(
+            <SvgImage src="http://localhost/sample.png" alt="png image" />,
+        );
+
+        // Assert
+        expect(
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            container.querySelector("div[class*=spinnerContainer]"),
+        ).toBeVisible();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should load and render a png", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+
+        // Act
+        const {container} = render(
+            <SvgImage src="http://localhost/sample.png" alt="png image" />,
+        );
+
+        markImagesAsLoaded(); // Tell the ImageLoader that our images are loaded
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should load and render a normal graphie svg", async () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+
+        // Act
+        const {container} = render(
+            <SvgImage src={typicalCase.url} alt="svg image" />,
+        );
+
+        markImagesAsLoaded(); // Tell the ImageLoader that our images are loaded
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should load and render a localized graphie svg", async () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            kaLocale: "es",
+        });
+
+        // Act
+        const {container} = render(
+            <SvgImage src={typicalCase.url} alt="svg image" />,
+        );
+
+        markImagesAsLoaded(); // Tell the ImageLoader that our images are loaded
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+});