External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix emoji message rendering (#938)

Browse Source 
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
Wes
2026-06-09 20:52:37 -07:00
committed by GitHub
co-authored by Pinky
parent ba2fdbf697
commit e08937cdde
6 changed files with 244 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/tests/e2e/custom-emoji-screenshots.spec.ts
+57 -9
View File
@@ -12,16 +12,17 @@ const SHOTS = "test-results/custom-emoji";
test.beforeEach(async ({ page }) => {
await installMockBridge(page);
// The mock emoji sets point at example.com placeholder URLs that don't
// resolve, so the <img> would render broken in screenshots. Serve a real
// 1x1-scaled magenta PNG for any example.com emoji image so the captures
// actually show a rendered glyph. (Screenshot-only; the bridge fixtures stay
// honest for the union/collapse unit + e2e assertions.)
const PNG = Buffer.from(
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
"base64",
);
// resolve, so the <img> would render broken in screenshots. Serve a visible
// square glyph for any example.com emoji image so the captures show the
// custom-emoji sizing/alignment rather than a broken-image icon.
const SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="7" fill="#22c55e"/>
<circle cx="16" cy="12" r="5" fill="#fef3c7"/>
<path d="M8 25c2-7 14-7 16 0" fill="#fef3c7"/>
</svg>`;
await page.route("https://example.com/e2e/**", (route) =>
route.fulfill({ contentType: "image/png", body: PNG }),
route.fulfill({ contentType: "image/svg+xml", body: SVG }),
);
});
@@ -68,3 +69,50 @@ test("settings card splits My emoji from read-only Workspace emoji", async ({
fullPage: true,
});
});
test("message list renders inline and emoji-only messages with Slack-style emoji sizing", async ({
page,
}) => {
await page.goto("/");
await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general");
const input = page.getByTestId("message-input");
await input.click();
await input.pressSequentially(`inline :${SHORTCODE}: message`);
await page.getByTestId("send-message").click();
await input.click();
await input.pressSequentially(`:${SHORTCODE}: 😀 ❤️`);
await page.getByTestId("send-message").click();
const rows = page.getByTestId("message-row");
const inlineRow = rows
.filter({
has: page.locator(`img[data-custom-emoji][alt=":${SHORTCODE}:"]`),
hasText: "inline message",
})
.last();
const emojiOnlyRow = rows
.filter({
has: page.locator(`img[data-custom-emoji][alt=":${SHORTCODE}:"]`),
})
.last();
await expect(inlineRow).toBeVisible();
await expect(emojiOnlyRow).toBeVisible();
const inlineBox = await inlineRow
.locator(`img[data-custom-emoji][alt=":${SHORTCODE}:"]`)
.boundingBox();
const emojiOnlyBox = await emojiOnlyRow
.locator(`img[data-custom-emoji][alt=":${SHORTCODE}:"]`)
.boundingBox();
expect(inlineBox?.height).toBeGreaterThan(10);
expect(emojiOnlyBox?.height).toBeGreaterThan((inlineBox?.height ?? 0) * 1.8);
await page.screenshot({
path: `${SHOTS}/03-message-list-emoji-sizing.png`,
});
});