jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-31 22:41:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wait for emoji picker overrides before asserting control styling

Browse Source 
The new picker assertions read overridden properties (48px control heights,
the resting search background) immediately after the search input becomes
visible. The Buzz stylesheet is appended from a `requestAnimationFrame` loop
that only starts once `em-emoji-picker` has attached its shadow root, so it
can land a frame or more later. An instrumented probe caught that gap: on 2
of 5 runs the shadow root had no `#buzz-emoji-mart-style` at that read point
and the input measured Emoji Mart's un-overridden 36px instead of 48px.

The shipped tests passed only because incidental round-trips bought enough
time. `expect(...).toBe(48)` does not retry, so the race was live.

Add `expectEmojiMartStylesInstalled` to the CSS helpers, polling for the
style element, and gate both specs on it before their un-retried reads. The
install loop itself predates this branch and is unchanged.

Also documents the second probe finding, which needed no fix: the resting
background samples as transparent right after install because Emoji Mart puts
a 225ms `background-color` transition on the input. It settles to
`rgb(229, 229, 230)`, and the override does win the cascade over the vendor
`var(--em-color-border)` rule.

Co-authored-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: kenny lopez <klopez4212@gmail.com>
This commit is contained in:
Honey
2026-08-05 17:45:23 +01:00
parent c1c88ca623
commit 1f8368d661
3 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/tests/e2e/onboarding-avatar-skip.spec.ts
View File

@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/test";
import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";
import { waitForAnimations } from "../helpers/animations";
import { expectEmojiMartStylesInstalled } from "../helpers/css";
import { seedActiveIdentity } from "../helpers/onboarding";
const BLANK_TYLER_IDENTITY = {
@@ -51,6 +52,7 @@ test("avatar step shares the profile emoji picker controls", async ({
const picker = page.locator("em-emoji-picker");
await expect(picker.locator("input[type='search']")).toBeVisible();
await expectEmojiMartStylesInstalled(picker);
await expect(page.getByTestId("onboarding-avatar-emoji-picker")).toHaveCSS(
"height",
"384px",

2
desktop/tests/e2e/profile.spec.ts
View File

@@ -5,6 +5,7 @@ import {
installMockBridge,
TEST_IDENTITIES,
} from "../helpers/bridge";
import { expectEmojiMartStylesInstalled } from "../helpers/css";
import { openProfileMenu, openSettings } from "../helpers/settings";
async function expectHomeView(page: import("@playwright/test").Page) {
@@ -597,6 +598,7 @@ test("offers emoji search and skin-tone controls for profile avatars", async ({
const picker = page.locator("em-emoji-picker");
const searchInput = picker.locator("input[type='search']");
await expect(searchInput).toBeVisible();
await expectEmojiMartStylesInstalled(picker);
await expect(page.getByTestId("profile-avatar-emoji-picker")).toHaveCSS(
"height",
"384px",

20
desktop/tests/helpers/css.ts
View File

@@ -99,3 +99,23 @@ export async function expectSmoothCorners(
)
.toBe(true);
}
/**
* Waits for the Buzz emoji-picker overrides to be present in the Emoji Mart
* shadow root.
*
* The stylesheet is appended from a `requestAnimationFrame` loop that starts
* only once the `em-emoji-picker` custom element has attached its shadow root,
* so it can land a frame or more after the search input becomes visible. Any
* assertion on an overridden property (control heights, resting background)
* must wait for this, otherwise it can read Emoji Mart's un-overridden defaults.
*/
export async function expectEmojiMartStylesInstalled(picker: Locator) {
await expect
.poll(async () =>
picker.evaluate((element) =>
Boolean(element.shadowRoot?.querySelector("#buzz-emoji-mart-style")),
),
)
.toBe(true);
}