From d6a9b4b9907cd0141f380ab05483bf46fba27b16 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:43:12 -0400
Subject: [PATCH] fix: mock next/image for denom image test

---
 .../components/__tests__/DenomImage.test.tsx  | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/components/factory/components/__tests__/DenomImage.test.tsx b/components/factory/components/__tests__/DenomImage.test.tsx
index 39b0bc84..a0cfeaba 100644
--- a/components/factory/components/__tests__/DenomImage.test.tsx
+++ b/components/factory/components/__tests__/DenomImage.test.tsx
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, test, fireEvent } from "bun:test";
+import { afterEach, describe, expect, test, fireEvent, mock } from "bun:test";
 import React from "react";
 import { screen, cleanup, waitFor } from "@testing-library/react";
 import { DenomImage } from "@/components/factory/components/DenomImage";
@@ -7,11 +7,22 @@ import { renderWithChainProvider } from "@/tests/render";
 
 expect.extend(matchers);
 
+// A cute little candle gif
+const uri = 'https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHg1aHVqa3NoMG45bzYwbHR5ODk3b2JqbHhnemlmcXpjOXB0enExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zHcirZSkw8RSDhawFl/giphy.gif';
+
+// Mock next/image
+mock.module('next/image', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    return <img {...props} />
+  },
+}))
+
 const renderWithProps = (props = {}) => {
   const defaultProps = {
     denom: {
       base: "umfx",
-      uri: "https://example.com/token.png",
+      uri: uri,
     },
   };
   return renderWithChainProvider(<DenomImage {...defaultProps} {...props} />);
@@ -25,11 +36,10 @@ describe("DenomImage", () => {
     expect(screen.getByLabelText("denom image skeleton")).toBeInTheDocument();
   });
 
-  // TODO: Make this work with Bun + Next.js Statis Images
-  // test("renders MFX token image correctly", async () => {
-  //   renderWithProps();
-  //   await waitFor(() => expect(screen.getByAltText("MFX Token Icon")).toBeInTheDocument());
-  // });
+  test("renders MFX token image correctly", async () => {
+    renderWithProps();
+    await waitFor(() => expect(screen.getByAltText("MFX Token Icon")).toBeInTheDocument(), { timeout: 2000 });
+  });
 
   test("renders ProfileAvatar for unsupported URL", async () => {
     renderWithProps({ denom: { base: "unsupported", uri: "https://unsupported.com/token.png" } });
@@ -37,10 +47,8 @@ describe("DenomImage", () => {
   });
 
 
-  // TODO: Make this work with Bun
-  // test("renders image from supported URL", async () => {
-  //   const uri = 'https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHg1aHVqa3NoMG45bzYwbHR5ODk3b2JqbHhnemlmcXpjOXB0enExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zHcirZSkw8RSDhawFl/giphy.gif';
-  //   renderWithProps({ denom: { base: "supported", uri: uri } });
-  //   await waitFor(() => expect(screen.getByAltText("Token Icon")).toBeInTheDocument(), { timeout: 2000 });
-  // });
-});
\ No newline at end of file
+  test("renders image from supported URL", async () => {
+    renderWithProps({ denom: { base: "supported", uri: uri } });
+    await waitFor(() => expect(screen.getByAltText("Token Icon")).toBeInTheDocument(), { timeout: 2000 });
+  });
+});