fix: load error can also be caused by cors

Open-Attestation · Apr 23, 2024 · a226891 · a226891
1 parent 680d416
commit a226891
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/components/renderer/SvgRenderer.test.tsx b/src/components/renderer/SvgRenderer.test.tsx
@@ -148,7 +148,7 @@ describe("svgRenderer component", () => {
     });
   });
 
-  it("should render svg malformed template when img load event is fired", async () => {
+  it("should render svg svg load error template when img load event is fired", async () => {
     const svgRef = React.createRef<HTMLImageElement>();
     const mockHandleResult = jest.fn();
 
@@ -159,10 +159,10 @@ describe("svgRenderer component", () => {
     fireEvent.error(getByAltText("Svg image of the verified document"));
 
     const defaultTemplate = await findByTestId("default-template");
-    expect(defaultTemplate.textContent).toContain("The resolved SVG is malformedThe resolved SVG is malformed");
+    expect(defaultTemplate.textContent).toContain("The resolved SVG could not be loaded");
     expect(queryByTestId("Svg image of the verified document")).not.toBeInTheDocument();
     expect(mockHandleResult).toHaveBeenCalledWith({
-      status: "MALFORMED_SVG_ERROR",
+      status: "SVG_LOAD_ERROR",
       svgDataUri: "data:image/svg+xml,",
     });
   });

diff --git a/src/components/renderer/SvgRenderer.tsx b/src/components/renderer/SvgRenderer.tsx
@@ -49,7 +49,7 @@ type ValidSvgTemplateDisplayResult =
       svgDataUri: string;
     }
   | {
-      status: "MALFORMED_SVG_ERROR";
+      status: "SVG_LOAD_ERROR";
       svgDataUri: string;
     };
 
@@ -117,8 +117,9 @@ const SvgRenderer = React.forwardRef<HTMLImageElement, SvgRendererProps>(
       };
 
       /** we have everything we need to generate the svg data uri, but we do not know if
-       * it is malformed or not until it is loaded by the image element, hence we do not
-       * call onResult here, instead we call it in the img onLoad and onError handlers
+       * it is malformed/blocked by CORS or not until it is loaded by the image element,
+       * hence we do not call onResult here, instead we call it in the img onLoad and
+       * onError handlers
        */
       const handleValidSvgTemplate = (rawSvgTemplate: string) => {
         setToDisplay({
@@ -188,11 +189,11 @@ const SvgRenderer = React.forwardRef<HTMLImageElement, SvgRendererProps>(
     switch (toDisplay.status) {
       case "LOADING":
         return loadingComponent ? <>{loadingComponent}</> : null;
-      case "MALFORMED_SVG_ERROR":
+      case "SVG_LOAD_ERROR":
         return (
           <DefaultTemplate
-            title="The resolved SVG is malformed"
-            description={<>The resolved SVG is malformed. Please contact the issuer.</>}
+            title="The resolved SVG could not be loaded"
+            description={<>The resolved SVG is either blocked or malformed. Please contact the issuer.</>}
             document={document}
           />
         );
@@ -217,7 +218,7 @@ const SvgRenderer = React.forwardRef<HTMLImageElement, SvgRendererProps>(
             ref={ref}
             alt="Svg image of the verified document"
             onLoad={handleImgResolved({ status: "OK", svgDataUri: toDisplay.svgDataUri })}
-            onError={handleImgResolved({ status: "MALFORMED_SVG_ERROR", svgDataUri: toDisplay.svgDataUri })}
+            onError={handleImgResolved({ status: "SVG_LOAD_ERROR", svgDataUri: toDisplay.svgDataUri })}
           />
         );
       }