diff --git a/src/components/renderer/SvgRenderer.test.tsx b/src/components/renderer/SvgRenderer.test.tsx index 7dd9b5c..b242458 100644 --- 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(); 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 index c60fe8a..199b698 100644 --- 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( }; /** 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( switch (toDisplay.status) { case "LOADING": return loadingComponent ? <>{loadingComponent} : null; - case "MALFORMED_SVG_ERROR": + case "SVG_LOAD_ERROR": return ( 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( 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 })} /> ); }