diff --git a/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx b/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx index 785f490a69..f754afcaec 100644 --- a/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx +++ b/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx @@ -1,16 +1,36 @@ import { render, screen } from "@testing-library/react"; import { WaveDropAdditionalInfo } from "@/components/waves/drop/WaveDropAdditionalInfo"; import { MemesSubmissionAdditionalInfoKey } from "@/components/waves/memes/submission/types/OperationalData"; +import { FallbackImage } from "@/components/common/FallbackImage"; jest.mock("next/image", () => ({ __esModule: true, default: (props: any) => {props.alt, })); +jest.mock("@/components/common/FallbackImage", () => ({ + FallbackImage: jest.fn((props: any) => ( + {props.alt + )), +})); + +jest.mock("@/components/ipfs/IPFSContext", () => ({ + resolveIpfsUrlSync: (url: string) => + url.startsWith("ipfs://") + ? `https://ipfs-gateway.test/ipfs/${url.slice(7)}` + : url, +})); + const buildDrop = (metadata: { data_key: string; data_value: string }[]) => - ({ metadata } as any); + ({ metadata }) as any; + +const fallbackImageMock = FallbackImage as jest.Mock; describe("WaveDropAdditionalInfo", () => { + beforeEach(() => { + fallbackImageMock.mockClear(); + }); + it("does not render when there is no commentary or media", () => { const { container } = render( @@ -104,4 +124,35 @@ describe("WaveDropAdditionalInfo", () => { expect(screen.queryByText("Promo Video")).not.toBeInTheDocument(); }); + + it("uses original preview image as fallback", () => { + const previewImage = "ipfs://preview-image"; + const resolvedPreviewImage = "https://ipfs-gateway.test/ipfs/preview-image"; + const additionalMedia = JSON.stringify({ + artist_profile_media: [], + artwork_commentary_media: [], + preview_image: previewImage, + }); + + render( + + ); + + const previewImageCall = fallbackImageMock.mock.calls.find( + ([props]) => props.alt === "Preview image" + ); + + expect(previewImageCall?.[0]).toEqual( + expect.objectContaining({ + fallbackSrc: resolvedPreviewImage, + }) + ); + }); }); diff --git a/__tests__/helpers/waves/drop.helpers.test.ts b/__tests__/helpers/waves/drop.helpers.test.ts index 0bc14893d9..695d2b8525 100644 --- a/__tests__/helpers/waves/drop.helpers.test.ts +++ b/__tests__/helpers/waves/drop.helpers.test.ts @@ -7,6 +7,13 @@ import { } from "@/helpers/waves/drop.helpers"; import { MemesSubmissionAdditionalInfoKey } from "@/components/waves/memes/submission/types/OperationalData"; +jest.mock("@/components/ipfs/IPFSContext", () => ({ + resolveIpfsUrlSync: (url: string) => + url.startsWith("ipfs://") + ? `https://ipfs-gateway.test/ipfs/${url.slice(7)}` + : url, +})); + const baseDrop: any = { id: "d1", serial_no: 1, @@ -64,7 +71,7 @@ describe("drop.helpers", () => { }, ]; const result = getDropPreviewImageUrl(metadata as any); - expect(result).toContain(ipfsHash); + expect(result).toBe(`https://ipfs-gateway.test/ipfs/${ipfsHash}`); }); it("returns null when JSON parsing fails", () => { @@ -111,7 +118,7 @@ describe("drop.helpers", () => { }, ]; const result = getDropPromoVideoUrl(metadata as any); - expect(result).toContain(ipfsHash); + expect(result).toBe(`https://ipfs-gateway.test/ipfs/${ipfsHash}`); }); it("returns null when JSON parsing fails", () => { diff --git a/components/waves/drop/WaveDropAdditionalInfo.tsx b/components/waves/drop/WaveDropAdditionalInfo.tsx index 4444116efc..323a3fca7d 100644 --- a/components/waves/drop/WaveDropAdditionalInfo.tsx +++ b/components/waves/drop/WaveDropAdditionalInfo.tsx @@ -4,11 +4,11 @@ import { AdditionalMedia, MemesSubmissionAdditionalInfoKey, } from "@/components/waves/memes/submission/types/OperationalData"; +import { FallbackImage } from "@/components/common/FallbackImage"; +import { resolveIpfsUrlSync } from "@/components/ipfs/IPFSContext"; import { getFileInfoFromUrl } from "@/helpers/file.helpers"; -import { parseIpfsUrl } from "@/helpers/Helpers"; import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers"; -import { ExtendedDrop } from "@/helpers/waves/drop.helpers"; -import Image from "next/image"; +import type { ExtendedDrop } from "@/helpers/waves/drop.helpers"; import { useMemo } from "react"; const MAX_MEDIA = 4; @@ -87,11 +87,11 @@ export const WaveDropAdditionalInfo = ({ ); const previewImageValue = additionalMedia.preview_image - ? parseIpfsUrl(additionalMedia.preview_image) + ? resolveIpfsUrlSync(additionalMedia.preview_image) : ""; const promoVideoValue = additionalMedia.promo_video - ? parseIpfsUrl(additionalMedia.promo_video) + ? resolveIpfsUrlSync(additionalMedia.promo_video) : ""; const mediaItemsValue = additionalMedia.artwork_commentary_media @@ -99,7 +99,7 @@ export const WaveDropAdditionalInfo = ({ (url): url is string => typeof url === "string" && url.trim().length > 0 ) - .map((url) => parseIpfsUrl(url)) + .map((url) => resolveIpfsUrlSync(url)) .filter((url): url is string => url.length > 0) .map((url) => { const isVideo = isVideoUrl(url); @@ -139,8 +139,12 @@ export const WaveDropAdditionalInfo = ({
- Preview image ) : ( -