Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 73 additions & 28 deletions __tests__/components/waves/MarketplaceItemPreviewCard.test.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { act, fireEvent, render, screen } from "@testing-library/react";
import React from "react";

import MarketplaceItemPreviewCard from "@/components/waves/MarketplaceItemPreviewCard";
import { LinkPreviewProvider } from "@/components/waves/LinkPreviewContext";
import MarketplaceItemPreviewCard from "@/components/waves/MarketplaceItemPreviewCard";

const mockClipboardWriteText = jest.fn<Promise<void>, [string]>();

Expand Down Expand Up @@ -46,7 +45,8 @@ describe("MarketplaceItemPreviewCard", () => {
mediaUrl="https://arweave.net/test-image"
mediaMimeType="image/*"
title=" Wave Artifact "
price=" 1.25 ETH "
price=" 1.25 "
priceCurrency=" ETH "
/>
</LinkPreviewProvider>
);
Expand All @@ -73,9 +73,12 @@ describe("MarketplaceItemPreviewCard", () => {
expect(screen.getByTestId("marketplace-item-title")).toHaveTextContent(
"Wave Artifact"
);
expect(screen.getByTestId("manifold-item-price")).toHaveTextContent(
"1.25 ETH"
expect(screen.getByTestId("marketplace-item-price")).toHaveTextContent(
"1.25"
);
expect(
screen.getByTestId("marketplace-item-price-currency")
).toHaveTextContent("ETH");
expect(
screen.getByTestId("marketplace-item-copy-button")
).toBeInTheDocument();
Expand Down Expand Up @@ -103,16 +106,20 @@ describe("MarketplaceItemPreviewCard", () => {
href={href}
mediaUrl="https://arweave.net/test-image"
mediaMimeType="image/*"
price=" 0.77 ETH "
price=" 0.77 "
priceCurrency=" ETH "
/>
</LinkPreviewProvider>
);

const foundationLogo = screen.getByAltText("Foundation logo");
expect(foundationLogo).toHaveAttribute("src", "/foundation-icon.jpg");
expect(screen.getByTestId("manifold-item-price")).toHaveTextContent(
"0.77 ETH"
expect(foundationLogo).toHaveAttribute("src", "/foundation.png");
expect(screen.getByTestId("marketplace-item-price")).toHaveTextContent(
"0.77"
);
expect(
screen.getByTestId("marketplace-item-price-currency")
).toHaveTextContent("ETH");
expect(screen.getByTestId("marketplace-item-cta-link")).toHaveAttribute(
"aria-label",
"Open on Foundation - 0.77 ETH"
Expand Down Expand Up @@ -158,7 +165,8 @@ describe("MarketplaceItemPreviewCard", () => {
href="https://example.com/item/3"
mediaUrl="https://arweave.net/test-image"
mediaMimeType="image/*"
price=" 0.42 ETH "
price=" 0.42 "
priceCurrency=" USDC "
/>
</LinkPreviewProvider>
);
Expand All @@ -167,14 +175,40 @@ describe("MarketplaceItemPreviewCard", () => {
expect(ctaLink.className).toContain("tw-bg-[#E5E5E5]");
expect(ctaLink.className).toContain("tw-text-[#0A0A0A]");
expect(ctaLink.className).toContain("tw-border-white");
expect(ctaLink).toHaveAttribute("aria-label", "Open listing - 0.42 ETH");
expect(ctaLink).toHaveAttribute("aria-label", "Open listing - 0.42 USDC");
expect(screen.queryByTestId("marketplace-item-cta-open-icon")).toBeNull();
expect(screen.getByTestId("manifold-item-price")).toHaveTextContent(
"0.42 ETH"
expect(screen.getByTestId("marketplace-item-price")).toHaveTextContent(
"0.42"
);
expect(
screen.getByTestId("marketplace-item-price-currency")
).toHaveTextContent("USDC");
expect(screen.queryByAltText(/logo$/i)).toBeNull();
});

it("strips trailing currency token from price when price_currency matches", () => {
render(
<LinkPreviewProvider variant="home">
<MarketplaceItemPreviewCard
href="https://example.com/item/eth-cleanup"
mediaUrl="https://arweave.net/test-image"
mediaMimeType="image/*"
price=" 1.25 ETH "
priceCurrency=" ETH "
/>
</LinkPreviewProvider>
);

const ctaLink = screen.getByTestId("marketplace-item-cta-link");
expect(ctaLink).toHaveAttribute("aria-label", "Open listing - 1.25 ETH");
expect(screen.getByTestId("marketplace-item-price")).toHaveTextContent(
"1.25"
);
expect(
screen.getByTestId("marketplace-item-price-currency")
).toHaveTextContent("ETH");
});

it("renders full-mode light brand CTA when price is missing but marketplace is known", () => {
render(
<LinkPreviewProvider variant="home">
Expand All @@ -186,14 +220,16 @@ describe("MarketplaceItemPreviewCard", () => {
</LinkPreviewProvider>
);

const ctaLink = screen.getByTestId("marketplace-item-cta-link");
const ctaLink = screen.getByRole("link", {
name: "Open on Manifold",
});
expect(ctaLink).toHaveAttribute("aria-label", "Open on Manifold");
expect(ctaLink.className).toContain("tw-bg-[#E5E5E5]");
expect(ctaLink.className).toContain("tw-text-[#0A0A0A]");
expect(ctaLink.className).toContain("tw-border-white");
expect(ctaLink).not.toHaveClass("tw-size-8");
expect(screen.getByAltText("Manifold logo")).toBeInTheDocument();
expect(screen.queryByTestId("manifold-item-price")).toBeNull();
expect(screen.queryByTestId("marketplace-item-price")).toBeNull();
});

it("hides copy action in full mode when hideActions is true", () => {
Expand Down Expand Up @@ -227,7 +263,7 @@ describe("MarketplaceItemPreviewCard", () => {
expect(ctaLink).toHaveAttribute("aria-label", "Open listing");
expect(ctaLink).toHaveClass("tw-size-8", "tw-bg-black/50", "tw-text-white");
expect(screen.queryByAltText(/logo$/i)).toBeNull();
expect(screen.queryByTestId("manifold-item-price")).toBeNull();
expect(screen.queryByTestId("marketplace-item-price")).toBeNull();
});

it("keeps compact mode CTA style with overlay actions when hideActions is false", () => {
Expand All @@ -238,23 +274,29 @@ describe("MarketplaceItemPreviewCard", () => {
mediaUrl="https://arweave.net/test-image"
mediaMimeType="image/*"
compact={true}
price=" 1.25 ETH "
price=" 1.25 "
priceCurrency=" ETH "
/>
</LinkPreviewProvider>
);

expect(screen.queryByTestId("marketplace-item-footer")).toBeNull();

const ctaLink = screen.getByTestId("marketplace-item-cta-link");
const ctaLink = screen.getByRole("link", {
name: "Open on Manifold - 1.25 ETH",
});
expect(ctaLink).toHaveClass("tw-absolute", "tw-right-3", "tw-top-[5.5rem]");
expect(ctaLink).toHaveAttribute(
"aria-label",
"Open on Manifold - 1.25 ETH"
);
expect(screen.getByAltText("Manifold logo")).toBeInTheDocument();
expect(screen.getByTestId("manifold-item-price")).toHaveTextContent(
"1.25 ETH"
expect(screen.getByTestId("marketplace-item-price")).toHaveTextContent(
"1.25"
);
expect(
screen.getByTestId("marketplace-item-price-currency")
).toHaveTextContent("ETH");
expect(
screen.getByTestId("marketplace-item-overlay-copy-button")
).toBeInTheDocument();
Expand Down Expand Up @@ -282,7 +324,7 @@ describe("MarketplaceItemPreviewCard", () => {
expect(
screen.queryByTestId("marketplace-item-overlay-open-link")
).toBeNull();
expect(screen.getByTestId("marketplace-item-cta-link")).toHaveClass(
expect(screen.getByRole("link", { name: "Open on Manifold" })).toHaveClass(
"tw-top-3"
);
});
Expand All @@ -295,21 +337,24 @@ describe("MarketplaceItemPreviewCard", () => {
mediaUrl="https://arweave.net/test-image"
mediaMimeType="image/*"
compact={true}
price=" 0.42 ETH "
price=" 0.42 "
priceCurrency=" ETH "
/>
</LinkPreviewProvider>
);

expect(
screen.getByTestId("marketplace-item-cta-fallback-icon")
).toBeInTheDocument();
expect(screen.getByTestId("marketplace-item-cta-link")).toHaveAttribute(
"aria-label",
"Open listing - 0.42 ETH"
);
expect(screen.getByTestId("manifold-item-price")).toHaveTextContent(
"0.42 ETH"
expect(
screen.getByRole("link", { name: "Open listing - 0.42 ETH" })
).toBeInTheDocument();
expect(screen.getByTestId("marketplace-item-price")).toHaveTextContent(
"0.42"
);
expect(
screen.getByTestId("marketplace-item-price-currency")
).toHaveTextContent("ETH");
expect(screen.queryByAltText(/logo$/i)).toBeNull();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ describe("MarketplaceManifoldListingPreview", () => {
media_uri: "https://cdn.example.com/nft-image.png",
last_error_message: null,
price: "1.25 ETH",
price_currency: "ETH",
last_successfully_updated: 1735689600,
failed_since: null,
},
Expand All @@ -86,6 +87,7 @@ describe("MarketplaceManifoldListingPreview", () => {
mediaUrl: "https://cdn.example.com/nft-image.png",
mediaMimeType: "image/png",
price: "1.25 ETH",
priceCurrency: "ETH",
title: "Wave Artifact",
compact: true,
hideActions: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ describe("MarketplaceOpenseaAssetPreview", () => {
media_uri: "https://cdn.example.com/nft-image.png",
last_error_message: null,
price: "0.5 ETH",
price_currency: "ETH",
last_successfully_updated: 1735689600,
failed_since: null,
},
Expand All @@ -120,6 +121,7 @@ describe("MarketplaceOpenseaAssetPreview", () => {
mediaUrl: "https://cdn.example.com/nft-image.png",
mediaMimeType: "image/png",
price: "0.5 ETH",
priceCurrency: "ETH",
title: "OpenSea Asset #42",
})
)
Expand Down
4 changes: 4 additions & 0 deletions __tests__/components/waves/marketplace/common.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const DEFAULT_NFT_LINK_DATA: NonNullable<ApiDropNftLink["data"]> = {
media_uri: "https://cdn.example.com/nft.png",
last_error_message: null,
price: "0.5 ETH",
price_currency: "ETH",
last_successfully_updated: 1735689600,
failed_since: null,
media_preview: null,
Expand Down Expand Up @@ -104,6 +105,7 @@ describe("primeMarketplacePreviewCacheFromNftLinks", () => {
platform: "opensea",
title: "Seeded NFT",
price: "0.5 ETH",
priceCurrency: "ETH",
media: {
url: "https://cdn.example.com/nft.png",
mimeType: "image/png",
Expand Down Expand Up @@ -290,6 +292,7 @@ describe("primeMarketplacePreviewCacheFromNftLinks", () => {
description: null,
media: null,
price: null,
priceCurrency: null,
}
);

Expand All @@ -310,6 +313,7 @@ describe("primeMarketplacePreviewCacheFromNftLinks", () => {
title: "Existing title",
description: "Seeded from drop nft_links",
price: "0.5 ETH",
priceCurrency: "ETH",
media: {
url: "https://cdn.example.com/nft.png",
mimeType: "image/png",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ describe("useMarketplacePreviewState", () => {
media_uri: "https://cdn.example.com/nft-image.png",
last_error_message: null,
price: "1.25 ETH",
price_currency: "ETH",
last_successfully_updated: 1735689600,
failed_since: null,
},
Expand All @@ -71,6 +72,7 @@ describe("useMarketplacePreviewState", () => {
href,
resolvedTitle: "Wave Artifact",
resolvedPrice: "1.25 ETH",
resolvedPriceCurrency: "ETH",
resolvedMedia: {
url: "https://cdn.example.com/nft-image.png",
mimeType: "image/png",
Expand All @@ -97,6 +99,7 @@ describe("useMarketplacePreviewState", () => {
media_uri: "https://cdn.example.com/nft-image.png",
last_error_message: null,
price: "0.42 ETH",
price_currency: "ETH",
last_successfully_updated: 1735689600,
failed_since: null,
},
Expand Down Expand Up @@ -125,6 +128,7 @@ describe("useMarketplacePreviewState", () => {
mimeType: "image/png",
},
resolvedPrice: "0.42 ETH",
resolvedPriceCurrency: "ETH",
})
)
);
Expand All @@ -147,6 +151,7 @@ describe("useMarketplacePreviewState", () => {
media_uri: "https://cdn.example.com/nft-image.png",
last_error_message: null,
price: "0.42 ETH",
price_currency: "ETH",
last_successfully_updated: 1735689600,
failed_since: null,
},
Expand All @@ -169,6 +174,7 @@ describe("useMarketplacePreviewState", () => {
mimeType: "image/png",
},
resolvedPrice: "0.42 ETH",
resolvedPriceCurrency: "ETH",
})
)
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const createMediaLinkUpdatedEvent = (
media_uri: "https://cdn.example.com/updated-image.jpg",
last_error_message: null,
price: "1.5",
price_currency: "ETH",
last_successfully_updated: "1771516351724",
failed_since: null,
...overrides,
Expand Down Expand Up @@ -75,6 +76,7 @@ describe("MarketplacePreviewWebSocketSync", () => {
mimeType: "image/jpeg",
},
price: "1.0",
priceCurrency: "ETH",
});
queryClient.setQueryData<MarketplacePreviewData>(nonMatchingQueryKey, {
href: "https://example.com/2",
Expand All @@ -87,6 +89,7 @@ describe("MarketplacePreviewWebSocketSync", () => {
mimeType: "image/jpeg",
},
price: "3.0",
priceCurrency: "USDC",
});

render(
Expand Down Expand Up @@ -114,6 +117,7 @@ describe("MarketplacePreviewWebSocketSync", () => {
mimeType: "image/jpeg",
},
price: "1.5",
priceCurrency: "ETH",
});

expect(
Expand All @@ -129,6 +133,7 @@ describe("MarketplacePreviewWebSocketSync", () => {
mimeType: "image/jpeg",
},
price: "3.0",
priceCurrency: "USDC",
});
});

Expand All @@ -150,6 +155,7 @@ describe("MarketplacePreviewWebSocketSync", () => {
mimeType: "image/jpeg",
},
price: "2.0",
priceCurrency: "ETH",
});

render(
Expand Down
Loading