test: fix tests and added a new test for malformed svg

src/components/renderer/SvgRenderer.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable jest/prefer-spy-on */
 // Disable the spyOn check due to known issues with mocking fetch in jsDom env
 // https://stackoverflow.com/questions/74945569/cannot-access-built-in-node-js-fetch-function-from-jest-tests
-import { render } from "@testing-library/react";
-import { DisplayResult, SvgRenderer } from "./SvgRenderer";
+import { fireEvent, render } from "@testing-library/react";
+import { SvgRenderer } from "./SvgRenderer";
 import fs from "fs";
 import { Blob } from "buffer";
 import React from "react";
@@ -13,6 +13,7 @@ import {
   v2WithSvgUrlAndDigestMultibase,
   v4WithOnlyTamperedEmbeddedSvg,
   v4WithNoRenderMethod,
+  v4MalformedEmbeddedSvg,
 } from "./fixtures/svgRendererSamples";
 import { __unsafe__not__for__production__v2__SvgRenderer } from "./SvgV2Adapter";
 
@@ -114,7 +115,7 @@ describe("svgRenderer component", () => {
     const defaultTemplate = await findByTestId("default-template");
     expect(defaultTemplate.textContent).toContain("The remote content for this document has been modified");
     expect(defaultTemplate.textContent).toContain(`URL: “http://mockbucket.com/static/svg_test.svg”`);
-    expect(mockHandleResult).toHaveBeenCalledWith(DisplayResult.DIGEST_ERROR, undefined);
+    expect(mockHandleResult).toHaveBeenCalledWith({ status: "DIGEST_ERROR" });
   });
 
   it("should render default template when document.RenderMethod is undefined", async () => {
@@ -141,10 +142,29 @@ describe("svgRenderer component", () => {
     const defaultTemplate = await findByTestId("default-template");
     expect(defaultTemplate.textContent).toContain("This document might be having loading issues");
     expect(defaultTemplate.textContent).toContain(`URL: “http://mockbucket.com/static/svg_test.svg”`);
-    expect(mockHandleResult).toHaveBeenCalledWith(
-      DisplayResult.CONNECTION_ERROR,
-      new Error("Failed to fetch remote SVG")
+    expect(mockHandleResult).toHaveBeenCalledWith({
+      error: new Error("Failed to fetch remote SVG"),
+      status: "FETCH_SVG_ERROR",
+    });
+  });
+
+  it("should render svg malformed template when img load event is fired", async () => {
+    const svgRef = React.createRef<HTMLImageElement>();
+    const mockHandleResult = jest.fn();
+
+    const { findByTestId, getByAltText, queryByTestId } = render(
+      <SvgRenderer document={v4MalformedEmbeddedSvg} ref={svgRef} onResult={mockHandleResult} />
     );
+
+    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(queryByTestId("Svg image of the verified document")).not.toBeInTheDocument();
+    expect(mockHandleResult).toHaveBeenCalledWith({
+      status: "MALFORMED_SVG_ERROR",
+      svgDataUri: "data:image/svg+xml,",
+    });
   });
 });
 /* eslint-enable jest/prefer-spy-on */

src/components/renderer/fixtures/svgRendererSamples.ts

@@ -165,6 +165,34 @@ export const v4WithOnlyTamperedEmbeddedSvg = {
   },
 };
 
+export const v4MalformedEmbeddedSvg = {
+  "@context": [
+    "https://www.w3.org/2018/credentials/v1",
+    "https://schemata.openattestation.com/com/openattestation/4.0/alpha-context.json",
+  ],
+  issuer: {
+    id: "did:ethr:0xB26B4941941C51a4885E5B7D3A1B861E54405f90",
+    type: "OpenAttestationIssuer",
+    name: "Government Technology Agency of Singapore (GovTech)",
+    // identityProof: { identityProofType: v4.IdentityProofType.DNSDid, identifier: "example.openattestation.com" },
+    identityProof: { identityProofType: v2.IdentityProofType.DNSDid, identifier: "example.openattestation.com" },
+  },
+  // credentialStatus: { type: "OpenAttestationCredentialStatus", credentialStatusType: v4.CredentialStatusType.None },
+  credentialStatus: { type: "OpenAttestationCredentialStatus", credentialStatusType: "NONE" },
+  renderMethod: [
+    {
+      id: "",
+      type: "SvgRenderingTemplate2023",
+    },
+  ],
+  credentialSubject: {
+    id: "urn:uuid:a013fb9d-bb03-4056-b696-05575eceaf42",
+    type: ["SvgExample"],
+    course: { name: "SVG Basics Workshop", fromDate: "01/01/2024", endDate: "16/01/2024" },
+    recipient: { name: "TAN CHEN CHEN" },
+  },
+};
+
 export const v2WithSvgUrlAndDigestMultibase = {
   issuers: [
     {