New approach to svg-image (#1983)

## Summary:
This PR updates our approach to loading graphie images for svg-image. 

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

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

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, mark-fitzgerald, jeremywiebe

Required Reviewers:

Approved By: jeremywiebe, mark-fitzgerald

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ .github/dependabot.yml

Pull Request URL: #1983

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