diff --git a/desktop/src/shared/ui/link-preview-attachment.tsx b/desktop/src/shared/ui/link-preview-attachment.tsx index 84340d12d..53e5cc34e 100644 --- a/desktop/src/shared/ui/link-preview-attachment.tsx +++ b/desktop/src/shared/ui/link-preview-attachment.tsx @@ -126,7 +126,10 @@ export function LinkPreviewAttachment({ return (
@@ -156,7 +159,7 @@ export function LinkPreviewAttachment({ )} - +
{preview.provider}
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts index e6aaecfc6..07fe1a292 100644 --- a/desktop/tests/e2e/messaging.spec.ts +++ b/desktop/tests/e2e/messaging.spec.ts @@ -302,15 +302,38 @@ test("link preview image geometry stays stable while loading", async ({ path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-pending.png`, }); } - const pending = await card.evaluate((element) => ({ - height: element.getBoundingClientRect().height, - textLeft: element + const pending = await card.evaluate((element) => { + const cardRect = element.getBoundingClientRect(); + const contentRect = element .querySelector('[data-slot="attachment-content"]') - ?.getBoundingClientRect().left, - thumbnailWidth: element + ?.getBoundingClientRect(); + const thumbnailRect = element .querySelector("[data-link-preview-thumbnail]") - ?.getBoundingClientRect().width, - })); + ?.getBoundingClientRect(); + return { + height: cardRect.height, + imageBottomInset: thumbnailRect + ? cardRect.bottom - thumbnailRect.bottom + : undefined, + imageLeftInset: thumbnailRect + ? thumbnailRect.left - cardRect.left + : undefined, + imageTopInset: thumbnailRect + ? thumbnailRect.top - cardRect.top + : undefined, + textInset: contentRect + ? Number.parseFloat( + getComputedStyle( + element.querySelector( + '[data-slot="attachment-content"]', + ) as Element, + ).paddingLeft, + ) + : undefined, + textLeft: contentRect?.left, + thumbnailWidth: thumbnailRect?.width, + }; + }); await expect(card).toHaveAttribute("data-image-state", "image"); if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) { @@ -333,6 +356,10 @@ test("link preview image geometry stays stable while loading", async ({ expect(loaded.textLeft).toBe(pending.textLeft); expect(loaded.thumbnailWidth).toBe(pending.thumbnailWidth); expect(loaded.thumbnailWidth).toBe(width < 640 ? 64 : 107); + expect(pending.imageBottomInset).toBeCloseTo(1, 1); + expect(pending.imageLeftInset).toBeCloseTo(1, 1); + expect(pending.imageTopInset).toBeCloseTo(1, 1); + expect(pending.textInset).toBe(12); } });