Fix for svg-image loading (#2004)

## Summary:
This PR updates our approach to loading graphie images for svg-image + a fix for a bug that was introduced while addressing PR feedback. 

An error will be thrown if the labels are not found, but should not impede users. Many tests were added using the failed cases provided on the ticket, in order to ensure that this new approach works for nearly all use cases. 

Issue: [LEMS-2524](https://khanacademy.atlassian.net/browse/LEMS-2524)

## Test plan:
- New svg-image tests + test mocking error logger 
- New graphie-utils tests that include (most) of the test cases provided.

[LEMS-2524]: https://khanacademy.atlassian.net/browse/LEMS-2524?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, mark-fitzgerald, jeremywiebe

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Cypress (ubuntu-latest, 20.x), ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ⏹️  [cancelled] Check builds for changes in size (ubuntu-latest, 20.x), ⏹️  [cancelled] Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ⏹️  [cancelled] Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Check builds for changes in size (ubuntu-latest, 20.x), ⏹️  [cancelled] Cypress (ubuntu-latest, 20.x), ⏹️  [cancelled] Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x)

Pull Request URL: #2004

.changeset/tiny-fireants-bake.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Fix for svg-image loading issues.

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();
+    });
+});