diff --git a/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx b/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx
index 28fd47ae23..e7c5373280 100644
--- a/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx
+++ b/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx
@@ -40,7 +40,13 @@ const useIsMobileScreenMock = useIsMobileScreen as jest.MockedFunction<
typeof useIsMobileScreen
>;
-const createDrop = (serialNo: number) =>
+const createDrop = (
+ serialNo: number,
+ mediaOverrides?: Partial<{
+ mime_type: string;
+ url: string;
+ }>
+) =>
({
id: `drop-${serialNo}`,
serial_no: serialNo,
@@ -73,6 +79,7 @@ const createDrop = (serialNo: number) =>
{
mime_type: "image/png",
url: "https://example.com/drop.png",
+ ...mediaOverrides,
},
],
},
@@ -106,6 +113,27 @@ describe("MemesQuickVoteDialog", () => {
...overrides,
});
+ const createDialogProps = (
+ overrides: Partial> = {}
+ ): React.ComponentProps => ({
+ activeDrop,
+ hasDiscoveryError: false,
+ isExhausted: false,
+ isOpen: true,
+ latestUsedAmount: 250,
+ nextDrop: null,
+ onClose: jest.fn(),
+ recentAmounts: [250, 500],
+ remainingCount: 9,
+ retryDiscovery: jest.fn(),
+ sessionId: 1,
+ skipDrop: jest.fn(),
+ submitVote: jest.fn().mockResolvedValue(true),
+ uncastPower: 5_000,
+ votingLabel: "votes",
+ ...overrides,
+ });
+
beforeAll(() => {
Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
configurable: true,
@@ -435,6 +463,67 @@ describe("MemesQuickVoteDialog", () => {
});
});
+ it("renders a hidden preloaded next card for preload-safe media", () => {
+ render(
+
+ );
+
+ expect(
+ screen.getByTestId("quick-vote-preview-card-next")
+ ).toBeInTheDocument();
+ expect(
+ screen.getByTestId("quick-vote-preview-card-preloaded")
+ ).toBeInTheDocument();
+ });
+
+ it("removes the hidden preloaded next card when the dialog closes", () => {
+ const nextDrop = createDrop(43);
+ const { rerender } = render(
+
+ );
+
+ expect(
+ screen.getByTestId("quick-vote-preview-card-next")
+ ).toBeInTheDocument();
+
+ rerender(
+
+ );
+
+ expect(
+ screen.queryByTestId("quick-vote-preview-card-next")
+ ).not.toBeInTheDocument();
+ });
+
+ it("does not preload hidden GLB next drops", () => {
+ render(
+
+ );
+
+ expect(
+ screen.queryByTestId("quick-vote-preview-card-next")
+ ).not.toBeInTheDocument();
+ expect(
+ screen.queryByTestId("quick-vote-preview-card-preloaded")
+ ).not.toBeInTheDocument();
+ });
+
it("submits the visible quick amount from the mobile action row", async () => {
useIsMobileScreenMock.mockReturnValue(true);
const submitVote = jest.fn().mockResolvedValue(true);
@@ -456,7 +545,56 @@ describe("MemesQuickVoteDialog", () => {
it("resets dialog-local controls when the session id changes", () => {
const { rerender } = render(
-
+
+ );
+
+ fireEvent.click(
+ screen.getByRole("button", {
+ name: "Custom amount",
+ })
+ );
+ fireEvent.change(screen.getByRole("textbox"), {
+ target: { value: "777" },
+ });
+
+ expect(screen.getByRole("textbox")).toHaveValue("777");
+
+ rerender();
+
+ expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+ });
+
+ it("resets dialog-local controls when the dialog closes and reopens", () => {
+ const onClose = jest.fn();
+ const { rerender } = render(
+
+ );
+
+ fireEvent.click(
+ screen.getByRole("button", {
+ name: "Custom amount",
+ })
+ );
+ fireEvent.change(screen.getByRole("textbox"), {
+ target: { value: "777" },
+ });
+
+ expect(screen.getByRole("textbox")).toHaveValue("777");
+
+ rerender(
+
+ );
+ rerender();
+
+ expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+ });
+
+ it("resets dialog-local controls when the active drop changes", () => {
+ const nextActiveDrop = createDrop(43);
+ const { rerender } = render(
+
);
fireEvent.click(
@@ -471,7 +609,12 @@ describe("MemesQuickVoteDialog", () => {
expect(screen.getByRole("textbox")).toHaveValue("777");
rerender(
-
+
);
expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
diff --git a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx
index 87a52ff5bd..a3927c9aa7 100644
--- a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx
+++ b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx
@@ -3,10 +3,12 @@
import { useCallback, useEffect, useRef, useState } from "react";
interface MemesQuickVoteDescriptionProps {
+ readonly allowToggle?: boolean | undefined;
readonly description: string;
}
export default function MemesQuickVoteDescription({
+ allowToggle = true,
description,
}: MemesQuickVoteDescriptionProps) {
const [isExpanded, setIsExpanded] = useState(false);
@@ -97,7 +99,7 @@ export default function MemesQuickVoteDescription({
>
{description}
- {isOverflowing && (
+ {allowToggle && isOverflowing && (