Stabilize drop media

__tests__/components/drops/view/part/DropPartMarkdown.test.tsx

@@ -355,13 +355,21 @@ describe("DropPartMarkdown", () => {
   });
 
   it("renders YouTube previews with thumbnail and iframe interaction", async () => {
+    let resolvePreview:
+      | ((value: YoutubeOEmbedResponse | null) => void)
+      | undefined;
+    const previewPromise = new Promise<YoutubeOEmbedResponse | null>(
+      (resolve) => {
+        resolvePreview = resolve;
+      }
+    );
     const preview: YoutubeOEmbedResponse = {
       title: "Sample Video",
       author_name: "Sample Creator",
       thumbnail_url: "https://img.youtube.com/vi/sample/hqdefault.jpg",
       html: '<iframe title="Sample Video" src="https://www.youtube.com/embed/sample"></iframe>',
     };
-    mockFetchYoutubePreview.mockResolvedValue(preview);
+    mockFetchYoutubePreview.mockReturnValue(previewPromise);
 
     const content = "Watch this https://youtu.be/sample";
     render(
@@ -374,12 +382,22 @@ describe("DropPartMarkdown", () => {
       />
     );
 
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame).toBeInTheDocument();
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    resolvePreview?.(preview);
+
     const previewButton = await screen.findByRole("button", {
       name: /sample video/i,
     });
-    expect(
-      await screen.findByRole("img", { name: /sample video/i })
-    ).toHaveAttribute("src", preview.thumbnail_url);
+    const thumbnailImage = await screen.findByRole("img", {
+      name: /sample video/i,
+    });
+    expect(thumbnailImage.getAttribute("src")).toContain(
+      encodeURIComponent(preview.thumbnail_url)
+    );
 
     await userEvent.click(previewButton);
 
@@ -388,6 +406,11 @@ describe("DropPartMarkdown", () => {
     expect(mockFetchYoutubePreview.mock.calls[0]?.[0]).toBe(
       "https://www.youtube.com/watch?v=sample"
     );
+
+    const title = screen.getByText("Sample Video");
+    const author = screen.getByText("Sample Creator");
+    expect(title.className).toContain("tw-line-clamp-2");
+    expect(author.className).toContain("tw-line-clamp-1");
   });
 
   it("normalizes YouTube URLs before fetching preview data", async () => {
@@ -467,8 +490,15 @@ describe("DropPartMarkdown", () => {
       />
     );
 
-    const fallbackLink = await screen.findByRole("link", { name: url });
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    const fallbackLink = await screen.findByTestId(
+      "youtube-preview-fallback-link"
+    );
     expect(fallbackLink).toHaveAttribute("href", url);
+    expect(fallbackLink).toHaveTextContent(/failed to load youtube preview/i);
   });
 
   it("falls back to a link when YouTube preview rejects", async () => {
@@ -485,8 +515,15 @@ describe("DropPartMarkdown", () => {
       />
     );
 
-    const fallbackLink = await screen.findByRole("link", { name: url });
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    const fallbackLink = await screen.findByTestId(
+      "youtube-preview-fallback-link"
+    );
     expect(fallbackLink).toHaveAttribute("href", url);
+    expect(fallbackLink).toHaveTextContent(/failed to load youtube preview/i);
   });
 
   it("falls back to a link when YouTube preview returns null", async () => {
@@ -503,8 +540,15 @@ describe("DropPartMarkdown", () => {
       />
     );
 
-    const fallbackLink = await screen.findByRole("link", { name: url });
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    const fallbackLink = await screen.findByTestId(
+      "youtube-preview-fallback-link"
+    );
     expect(fallbackLink).toHaveAttribute("href", url);
+    expect(fallbackLink).toHaveTextContent(/youtube preview unavailable/i);
   });
 
   it("lazy loads tweet embeds with a loading skeleton", async () => {

__tests__/components/waves/LinkPreviewCard.test.tsx

@@ -4,15 +4,21 @@ import React from "react";
 import LinkPreviewCard from "@/components/waves/LinkPreviewCard";
 
 const mockOpenGraphPreview = jest.fn(({ href, preview }: any) => (
-  <div data-testid="open-graph" data-href={href} data-preview={preview ? "ready" : "loading"} />
+  <div
+    data-testid="open-graph"
+    data-href={href}
+    data-preview={preview ? "ready" : "loading"}
+  />
 ));
 
 const mockEnsPreviewCard = jest.fn(({ preview }: any) => (
   <div data-testid="ens-card" data-type={preview?.type ?? "none"} />
 ));
 
 jest.mock("@/components/waves/OpenGraphPreview", () => {
-  const actual = jest.requireActual("../../../components/waves/OpenGraphPreview");
+  const actual = jest.requireActual(
+    "../../../components/waves/OpenGraphPreview"
+  );
   return {
     __esModule: true,
     ...actual,
@@ -31,6 +37,18 @@ jest.mock("@/services/api/link-preview-api", () => ({
 
 describe("LinkPreviewCard", () => {
   const { fetchLinkPreview } = require("@/services/api/link-preview-api");
+  const assertStableFrame = () => {
+    const frame = screen.getByTestId("link-preview-card-stable-frame");
+    expect(frame).toHaveClass(
+      "tw-h-[10rem]",
+      "tw-min-h-[10rem]",
+      "tw-max-h-[10rem]",
+      "md:tw-h-[11rem]",
+      "md:tw-min-h-[11rem]",
+      "md:tw-max-h-[11rem]"
+    );
+    return frame;
+  };
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -50,8 +68,12 @@ describe("LinkPreviewCard", () => {
       />
     );
 
+    assertStableFrame();
     expect(mockOpenGraphPreview).toHaveBeenCalledWith(
-      expect.objectContaining({ href: "https://example.com/article", preview: undefined })
+      expect.objectContaining({
+        href: "https://example.com/article",
+        preview: undefined,
+      })
     );
 
     await waitFor(() =>
@@ -63,8 +85,11 @@ describe("LinkPreviewCard", () => {
       )
     );
 
-    expect(fetchLinkPreview).toHaveBeenCalledWith("https://example.com/article");
+    expect(fetchLinkPreview).toHaveBeenCalledWith(
+      "https://example.com/article"
+    );
     expect(screen.queryByTestId("fallback")).toBeNull();
+    assertStableFrame();
   });
 
   it("renders fallback when preview lacks useful content", async () => {
@@ -80,6 +105,7 @@ describe("LinkPreviewCard", () => {
     await waitFor(() => {
       expect(screen.getByTestId("fallback")).toBeInTheDocument();
     });
+    assertStableFrame();
   });
 
   it("renders fallback when request fails", async () => {
@@ -95,10 +121,14 @@ describe("LinkPreviewCard", () => {
     await waitFor(() => {
       expect(screen.getByTestId("fallback")).toBeInTheDocument();
     });
+    assertStableFrame();
   });
 
   it("renders ENS previews when ENS data is returned", async () => {
-    fetchLinkPreview.mockResolvedValue({ type: "ens.name", name: "vitalik.eth" });
+    fetchLinkPreview.mockResolvedValue({
+      type: "ens.name",
+      name: "vitalik.eth",
+    });
 
     render(
       <LinkPreviewCard
@@ -109,10 +139,31 @@ describe("LinkPreviewCard", () => {
 
     await waitFor(() => {
       expect(mockEnsPreviewCard).toHaveBeenCalledWith(
-        expect.objectContaining({ preview: expect.objectContaining({ type: "ens.name" }) })
+        expect.objectContaining({
+          preview: expect.objectContaining({ type: "ens.name" }),
+        })
       );
     });
 
     expect(screen.queryByTestId("fallback")).toBeNull();
+    assertStableFrame();
+  });
+
+  it("does not enforce chat stable frame for home variant", async () => {
+    fetchLinkPreview.mockResolvedValue({});
+
+    render(
+      <LinkPreviewCard
+        href="https://example.com/article"
+        variant="home"
+        renderFallback={() => <div data-testid="fallback">fallback</div>}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("fallback")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId("link-preview-card-stable-frame")).toBeNull();
   });
 });