import { hexToBytes } from "@noble/hashes/utils.js"; import { expect, test, type Locator, type Page } from "@playwright/test"; import { npubEncode, nsecEncode } from "nostr-tools/nip19"; import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge"; import { E2E_IDENTITY_OVERRIDE_STORAGE_KEY, seedActiveIdentity, } from "../helpers/onboarding"; type RelayConnectionState = | "connected" | "connecting" | "disconnected" | "idle" | "reconnecting" | "stalled"; /** * Drive the mock relay connection state via the E2E bridge seam. * When targeting a degraded state, waits for baseline "connected" first so * the mock auth handshake can't race the override back to "connected". */ async function setRelayConnectionState( page: Page, state: RelayConnectionState, ) { if (state !== "connected") { await page.waitForFunction(() => { const win = window as Window & { __BUZZ_E2E_GET_RELAY_CONNECTION_STATE__?: () => string; __BUZZ_E2E_SET_RELAY_CONNECTION_STATE__?: unknown; }; return ( typeof win.__BUZZ_E2E_SET_RELAY_CONNECTION_STATE__ === "function" && typeof win.__BUZZ_E2E_GET_RELAY_CONNECTION_STATE__ === "function" && win.__BUZZ_E2E_GET_RELAY_CONNECTION_STATE__() === "connected" ); }); } else { await page.waitForFunction( () => typeof ( window as Window & { __BUZZ_E2E_SET_RELAY_CONNECTION_STATE__?: unknown; } ).__BUZZ_E2E_SET_RELAY_CONNECTION_STATE__ === "function", ); } await page.evaluate((nextState) => { const testWindow = window as Window & { __BUZZ_E2E_SET_RELAY_CONNECTION_STATE__?: ( state: RelayConnectionState, ) => void; }; const setConnectionState = testWindow.__BUZZ_E2E_SET_RELAY_CONNECTION_STATE__; if (!setConnectionState) { throw new Error("Mock relay connection state helper is not installed."); } setConnectionState(nextState); }, state); } const HOME_SEEN_STORAGE_KEY_PREFIX = "buzz-home-feed-seen.v1:"; const DEFAULT_MOCK_PUBKEY = "deadbeef".repeat(8); const BLANK_TYLER_IDENTITY = { ...TEST_IDENTITIES.tyler, username: "", }; const BLANK_AVATAR_PLACEHOLDER_IDENTITY = { ...TEST_IDENTITIES.tyler, pubkey: "1".repeat(64), username: "", }; const BLANK_AVATAR_EMOJI_IDENTITY = { ...TEST_IDENTITIES.tyler, pubkey: "2".repeat(64), username: "", }; const FIRST_RUN_ALICE = { ...TEST_IDENTITIES.alice, username: "", }; async function seedOnboardingCompletion(page: Page, pubkey: string) { await page.addInitScript( ({ storageKey }) => { window.localStorage.setItem(storageKey, "true"); }, { storageKey: `buzz-onboarding-complete.v1:${pubkey}`, }, ); } async function readHomeSeenStorageKeys(page: Page) { return page.evaluate((prefix) => { return Object.keys(window.localStorage).filter((key) => key.startsWith(prefix), ); }, HOME_SEEN_STORAGE_KEY_PREFIX); } async function expectNoHomeSeenEntries(page: Page) { await expect.poll(async () => readHomeSeenStorageKeys(page)).toEqual([]); } async function selectFirstEmojiFromPicker(page: Page) { const picker = page.locator("em-emoji-picker"); await expect(picker).toBeVisible(); await expect .poll(() => picker.evaluate((element) => Boolean(element.shadowRoot?.querySelector(".scroll button")), ), ) .toBe(true); await picker.evaluate((element) => { const button = element.shadowRoot?.querySelector(".scroll button"); if (!(button instanceof HTMLElement)) { throw new Error("Emoji picker did not render an emoji button."); } button.click(); }); } async function expectShellHidden(page: Page) { await expect(page.getByTestId("app-sidebar")).toHaveCount(0); await expect(page.getByTestId("chat-title")).toHaveCount(0); } async function expectHomeView(page: Page) { await expect(page.getByTestId("home-inbox-list")).toBeVisible(); } async function expectWiderThanTall(locator: Locator) { const box = await locator.boundingBox(); if (!box) { throw new Error("Could not measure welcome intro action card"); } expect(box.width).toBeGreaterThan(box.height); } async function expectIntroActionIconStackedAboveTitle( action: Locator, title: string, ) { const iconBox = await action.locator("svg").first().boundingBox(); const titleBox = await action.getByText(title, { exact: true }).boundingBox(); if (!iconBox || !titleBox) { throw new Error("Could not measure welcome intro action content"); } expect(titleBox.y).toBeGreaterThan(iconBox.y + iconBox.height); } async function expectWelcomeComposerBannerLayout(page: Page) { const banner = page.getByTestId("welcome-composer-guide-banner"); const personaMention = page.getByTestId("welcome-composer-persona-mention"); const composer = page.getByTestId("message-composer"); const bannerBox = await banner.boundingBox(); const personaMentionBox = await personaMention.boundingBox(); const composerBox = await composer.boundingBox(); if (!bannerBox || !personaMentionBox || !composerBox) { throw new Error("Could not measure welcome composer banner layout"); } expect( await composer.getByTestId("welcome-composer-guide-banner").count(), ).toBe(0); expect(bannerBox.y).toBeLessThan(composerBox.y); expect(bannerBox.y + bannerBox.height).toBeGreaterThan(composerBox.y); const radii = await banner.evaluate((element) => { const styles = window.getComputedStyle(element); return { bottomLeft: styles.borderBottomLeftRadius, bottomRight: styles.borderBottomRightRadius, topLeft: styles.borderTopLeftRadius, topRight: styles.borderTopRightRadius, }; }); expect(radii.topLeft).toBe(radii.topRight); expect(radii.bottomLeft).toBe("0px"); expect(radii.bottomRight).toBe("0px"); expect(personaMentionBox.width).toBeGreaterThan(0); } async function expectWelcomePersonaMention(page: Page) { const banner = page.getByTestId("welcome-composer-guide-banner"); const personaMention = page.getByTestId("welcome-composer-persona-mention"); await expect(personaMention).toBeVisible(); await expect(personaMention).toHaveAttribute("data-persona-options", "Fizz"); await expect(personaMention).toHaveAttribute("data-active-persona", "Fizz"); await expect(personaMention).toHaveAttribute( "data-animation-target", "per-character", ); const activePersona = await personaMention.getAttribute( "data-active-persona", ); expect(activePersona).not.toBeNull(); await expect(personaMention).toContainText(`@${activePersona}`); expect( await personaMention .getByTestId("welcome-composer-persona-character") .count(), ).toBeGreaterThanOrEqual(4); const transition = await personaMention.evaluate((element) => { const styles = window.getComputedStyle(element); const durationMs = Number( element.getAttribute("data-width-animation-duration-ms"), ); return { duration: styles.transitionDuration, durationMs, property: styles.transitionProperty, }; }); expect(transition.durationMs).toBeGreaterThanOrEqual(700); expect(transition.durationMs).toBeLessThanOrEqual(740); expect(Math.round(Number.parseFloat(transition.duration) * 1000)).toBe( transition.durationMs, ); expect(transition.property).toContain("width"); const alignment = await personaMention.evaluate((element) => { const mentionStyles = window.getComputedStyle(element); const bannerStyles = window.getComputedStyle( element.closest('[data-testid="welcome-composer-guide-banner"]') ?? element, ); return { display: mentionStyles.display, lineHeightMatchesBanner: mentionStyles.lineHeight === bannerStyles.lineHeight, verticalAlign: mentionStyles.verticalAlign, }; }); expect(alignment.display).toBe("inline-block"); expect(alignment.verticalAlign).toBe("baseline"); expect(alignment.lineHeightMatchesBanner).toBe(true); await expect(banner).toContainText("Try mentioning"); } async function expectWelcomeView(page: Page) { await expect(page).toHaveURL(/#\/channels\/[^/?#]+$/); await expect(page.getByTestId("channel-general")).toBeVisible(); await expect(page.getByTestId("channel-welcome-everyone")).toBeVisible(); await expect(page.getByTestId("chat-title")).toContainText( "welcome-everyone", ); await expect(page.getByTestId("channel-ephemeral-Welcome")).toHaveCount(0); await expect(page.getByTestId("chat-ephemeral-badge")).toHaveCount(0); await expect(page.getByTestId("message-unread-pill")).toHaveCount(0); await expect(page.getByTestId("message-channel-intro")).toBeVisible(); await expect(page.getByTestId("message-channel-intro")).toContainText( "This is the beginning of the regular channel.", ); await expect( page.getByTestId("message-channel-intro").getByRole("button"), ).toHaveText(["Browse channels", "Create a channel", "Create an agent"]); await expect( page.getByTestId("welcome-intro-action-browse-channels"), ).toBeVisible(); await expectWiderThanTall( page.getByTestId("welcome-intro-action-browse-channels"), ); await expectIntroActionIconStackedAboveTitle( page.getByTestId("welcome-intro-action-browse-channels"), "Browse channels", ); await page.getByTestId("welcome-intro-action-browse-channels").click(); await expect(page.getByTestId("channel-browser-dialog")).toBeVisible(); await expect(page.getByTestId("channel-browser-search")).toBeFocused(); await expect(page.getByRole("tab", { name: "All channels" })).toHaveAttribute( "data-state", "active", ); await page.keyboard.press("Escape"); await expect(page.getByTestId("channel-browser-dialog")).toHaveCount(0); await expect( page.getByTestId("welcome-intro-action-create-channel"), ).toBeVisible(); await expectWiderThanTall( page.getByTestId("welcome-intro-action-create-channel"), ); await expectIntroActionIconStackedAboveTitle( page.getByTestId("welcome-intro-action-create-channel"), "Create a channel", ); await expect( page .getByTestId("welcome-intro-action-create-channel") .getByText("Create a channel", { exact: true }), ).toHaveCSS("white-space", "normal"); await expect( page.getByTestId("welcome-intro-action-create-agent"), ).toBeVisible(); await expectWiderThanTall( page.getByTestId("welcome-intro-action-create-agent"), ); await expectIntroActionIconStackedAboveTitle( page.getByTestId("welcome-intro-action-create-agent"), "Create an agent", ); await expect(page.getByTestId("message-composer")).toBeVisible(); await expect(page.getByTestId("welcome-composer-guide-banner")).toBeVisible(); await expect(page.getByTestId("welcome-composer-guide-banner")).toContainText( "Try mentioning", ); await expect(page.getByTestId("welcome-composer-guide-banner")).toContainText( "to chat with an agent in this channel.", ); await expectWelcomePersonaMention(page); await expectWelcomeComposerBannerLayout(page); } async function expectWelcomeComposerBannerCompletesAfterPersonaMention( page: Page, ) { const banner = page.getByTestId("welcome-composer-guide-banner"); const channelIntro = page.getByTestId("message-channel-intro"); await page.getByTestId("message-input").fill("Thanks @Fizz"); await page.getByTestId("send-message").click(); await expect(banner).toHaveAttribute("data-state", "complete"); await expect(banner).toHaveAttribute("data-tone", "success"); await expect( banner.getByTestId("welcome-composer-complete-icon"), ).toBeVisible(); await expect( banner.locator('[data-animation-target="success-icon"]'), ).toBeVisible(); await expect( banner.locator('[data-animation-target="success-copy"]'), ).toBeVisible(); await expect(banner).toContainText("Nice work."); await expect(banner).not.toContainText("Try mentioning"); await expect(channelIntro).toBeVisible(); } async function getMockChannels(page: Page) { return page.evaluate(async () => { const bridgeWindow = window as Window & { __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: ( command: string, payload?: Record, ) => Promise; __TAURI_INTERNALS__?: { invoke?: ( command: string, payload?: Record, ) => Promise; }; }; const invoke = bridgeWindow.__BUZZ_E2E_INVOKE_MOCK_COMMAND__ ?? bridgeWindow.__TAURI_INTERNALS__?.invoke; if (!invoke) { throw new Error("Mock invoke bridge is unavailable."); } return (await invoke("get_channels")) as Array<{ id: string; name: string; channel_type: string; visibility: "open" | "private"; member_count: number; is_member: boolean; ttl_seconds: number | null; }>; }); } async function invokeMockCommand( page: Page, command: string, payload?: Record, ) { return page.evaluate( async ({ command, payload }) => { const bridgeWindow = window as Window & { __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: ( command: string, payload?: Record, ) => Promise; __TAURI_INTERNALS__?: { invoke?: ( command: string, payload?: Record, ) => Promise; }; }; const invoke = bridgeWindow.__BUZZ_E2E_INVOKE_MOCK_COMMAND__ ?? bridgeWindow.__TAURI_INTERNALS__?.invoke; if (!invoke) { throw new Error("Mock invoke bridge is unavailable."); } return (await invoke(command, payload)) as T; }, { command, payload }, ); } async function getWelcomeChannelId(page: Page) { const channels = await getMockChannels(page); return ( channels.find( (channel) => channel.name === "welcome-everyone" && channel.visibility === "open", )?.id ?? null ); } async function expectStarterChannels(page: Page) { await expect .poll(async () => { const channels = await getMockChannels(page); return ["general", "welcome-everyone"].map((name) => { const channel = channels.find( (candidate) => candidate.name === name && candidate.visibility === "open", ); if (!channel) { return null; } return { channelType: channel.channel_type, isMember: channel.is_member, memberCountAtLeastOne: channel.member_count >= 1, ttlSeconds: channel.ttl_seconds, visibility: channel.visibility, }; }); }) .toEqual([ { channelType: "stream", isMember: true, memberCountAtLeastOne: true, ttlSeconds: null, visibility: "open", }, { channelType: "stream", isMember: true, memberCountAtLeastOne: true, ttlSeconds: null, visibility: "open", }, ]); } async function expectWelcomeGuideIntro( page: Page, { expectVisible = true }: { expectVisible?: boolean } = {}, ) { await expect .poll(async () => { const channelId = await getWelcomeChannelId(page); if (!channelId) { return null; } const [members, agents, introSearch] = await Promise.all([ invokeMockCommand<{ members: Array<{ pubkey: string; role: string; is_agent: boolean }>; }>(page, "get_channel_members", { channelId }), invokeMockCommand< Array<{ pubkey: string; name: string; persona_id: string | null }> >(page, "list_managed_agents"), invokeMockCommand<{ hits: Array<{ pubkey: string; content: string }>; }>(page, "search_messages", { q: "Hi, I'm Fizz", limit: 10, }), ]); const fizz = agents.find( (agent) => agent.name === "Fizz" && agent.persona_id === "builtin:fizz", ); const fizzMember = fizz ? members.members.find((member) => member.pubkey === fizz.pubkey) : null; const intro = fizz ? introSearch.hits.find((hit) => hit.pubkey === fizz.pubkey) : null; const fizzWelcomeHits = fizz ? introSearch.hits.filter((hit) => hit.pubkey === fizz.pubkey) : []; const profileAvatarUrl = fizz ? ( await invokeMockCommand<{ profiles: Record; }>(page, "get_users_batch", { pubkeys: [fizz.pubkey], }) ).profiles[fizz.pubkey]?.avatar_url : null; return { fizzIsBot: fizzMember?.role === "bot" && fizzMember.is_agent, fizzPersonaId: fizz?.persona_id ?? null, introContent: intro?.content ?? null, introMatchesFizz: Boolean(fizz && intro?.pubkey === fizz.pubkey), fizzWelcomeHitCount: fizzWelcomeHits.length, profileAvatarUrl, }; }) .toEqual({ fizzIsBot: true, fizzPersonaId: "builtin:fizz", introContent: "Hi, I'm Fizz. Welcome to Buzz.\n\nI can help you get oriented, answer questions, and make the first few steps feel less mysterious.\n\nFeel free to ask me what else you can do in Buzz, or just talk through what you want to build.", introMatchesFizz: true, fizzWelcomeHitCount: 1, profileAvatarUrl: null, }); if (expectVisible) { await expect(page.getByTestId("message-timeline")).toContainText( "Hi, I'm Fizz. Welcome to Buzz.", ); await expect(page.getByTestId("message-timeline")).toContainText( "Feel free to ask me what else you can do in Buzz", ); await expect( page.getByTestId("message-timeline-day-divider"), ).toBeVisible(); await expect(page.getByTestId("system-message-row")).toHaveCount(0); } } async function expectIncompleteOnboarding(page: Page) { await expect(page.getByTestId("onboarding-gate")).toBeVisible(); await expectShellHidden(page); await expect(page.getByTestId("onboarding-page-1")).toBeVisible(); await expect(page.getByTestId("onboarding-display-name")).toHaveValue(""); } async function completeProfileOnboarding(page: Page) { await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); await page .getByTestId("onboarding-avatar-url") .fill("https://example.com/onboarding-avatar.png"); await page.getByTestId("onboarding-next").click(); } test("completed users skip the loading gate while profile is still settling", async ({ page, }) => { await seedOnboardingCompletion(page, DEFAULT_MOCK_PUBKEY); await installMockBridge(page, { profileReadDelayMs: 3_000, }); await page.goto("/"); await expect(page.getByTestId("onboarding-gate")).toHaveCount(0); await expectHomeView(page); }); test("first-community choices expose npub and invite input", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await page.addInitScript((pubkey) => { window.localStorage.setItem( `buzz-machine-onboarding-complete.v2:${pubkey}`, "true", ); }, BLANK_TYLER_IDENTITY.pubkey); await installMockBridge(page, undefined, { relayWsUrl: "wss://default.example.com", skipOnboardingSeed: true, skipCommunitySeed: true, }); await page.route( "https://default.example.com/api/join-policy", async (route) => { await route.fulfill({ status: 200, contentType: "application/json", body: "{}", }); }, ); await page.goto("/"); await expect( page.getByRole("button", { name: "Join default community" }), ).toBeVisible(); await expect( page.getByRole("button", { name: "Join a community" }), ).toBeVisible(); await expect( page.getByRole("button", { name: "I have an invite link" }), ).toBeVisible(); await expect( page.getByRole("button", { name: "Create a community" }), ).toBeVisible(); await page.getByRole("button", { name: "Create a community" }).click(); await expect .poll(() => page.evaluate(() => { const log = ( window as Window & { __BUZZ_E2E_COMMAND_LOG__?: Array<{ command: string; payload: unknown; }>; } ).__BUZZ_E2E_COMMAND_LOG__; return log?.find((entry) => entry.command === "plugin:opener|open_url") ?.payload; }), ) .toMatchObject({ url: "https://buzz.xyz" }); await page.getByRole("button", { name: "Join a community" }).click(); await expect(page.getByTestId("welcome-join-npub")).toHaveText( npubEncode(BLANK_TYLER_IDENTITY.pubkey), ); await page.getByRole("button", { name: "Back" }).click(); await page.getByRole("button", { name: "I have an invite link" }).click(); await expect( page.getByRole("heading", { name: "I have an invite link" }), ).toBeVisible(); await expect(page.getByTestId("invite-redeem-input")).toBeVisible(); }); test("first-community hides the default option for localhost", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await page.addInitScript((pubkey) => { window.localStorage.setItem( `buzz-machine-onboarding-complete.v2:${pubkey}`, "true", ); }, BLANK_TYLER_IDENTITY.pubkey); await installMockBridge(page, undefined, { relayWsUrl: "ws://localhost:3000", skipOnboardingSeed: true, skipCommunitySeed: true, }); await page.goto("/"); await expect( page.getByRole("button", { name: "Join default community" }), ).toHaveCount(0); await expect( page.getByRole("button", { name: "Join a community" }), ).toBeVisible(); }); test("identity fallback text does not count as a real onboarding name", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); await expectIncompleteOnboarding(page); await expect(page.getByTestId("onboarding-next")).toBeDisabled(); }); // Regression test for the H2 predicate fix (PR #1508). // A blank first-run identity (no kind:0 event on the relay) must see // onboarding even when the mock bridge returns display_name: "" — the gate // must depend on `hasProfileEvent`, not on `typeof displayName === "string"`. test("first-run blank identity with no profile event sees onboarding", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); // Do NOT seed searchProfiles for tyler's pubkey, so ensureMockProfile // constructs a synthesised profile with has_profile_event: false. await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); await expectIncompleteOnboarding(page); }); // Regression test for the H2 predicate fix (PR #1508). // A returning user who has a real kind:0 profile event with an empty // display_name must skip onboarding — they are already onboarded. test("returning user with blank display name and real profile event skips onboarding", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); // Seed tyler's pubkey into searchProfiles with an empty displayName. // seedMockSearchProfiles stores this into mockProfiles with // has_profile_event: true, simulating a real kind:0 event with no name. await installMockBridge( page, { searchProfiles: [ { pubkey: TEST_IDENTITIES.tyler.pubkey, displayName: "", }, ], }, { skipOnboardingSeed: true }, ); await page.goto("/"); // Profile event exists → onboarding is skipped, app renders. await expect(page.getByTestId("onboarding-gate")).toHaveCount(0); await expectHomeView(page); }); // Regression test for the cache-seed defect (PR #1508 CRITICAL fix). // Sequence: no-event profile fetched and cached with hasProfileEvent absent → // reload with cache present → onboarding must still show. Previously the // initialData seed hardcoded hasProfileEvent: true for any updatedAt > 0 // entry, reopening the original bug on the second app load. test("no-event profile cached then reloaded still sees onboarding", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); // Seed a stale v1 cache entry WITHOUT hasProfileEvent (simulating a cache // written by the old code path or a no-event fallback). updatedAt > 0 so // the seed is eligible, but hasProfileEvent is absent → conservative false. const SELF_PROFILE_CACHE_KEY = `buzz-self-profile.v1:ws://localhost:3000:${TEST_IDENTITIES.tyler.pubkey}`; await page.addInitScript( ({ key, cache }) => { window.localStorage.setItem(key, JSON.stringify(cache)); }, { key: SELF_PROFILE_CACHE_KEY, cache: { version: 1, displayName: null, avatarUrl: null, avatarDataUrl: null, updatedAt: 1_700_000_000_000, // hasProfileEvent deliberately absent — legacy/no-event entry. }, }, ); // No profile event on the relay either — ensureMockProfile uses false. await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); // Cache seed must NOT promote hasProfileEvent to true. Onboarding shows. await expectIncompleteOnboarding(page); }); test("avatar step uses an add-image placeholder before an avatar is chosen", async ({ page, }) => { await seedActiveIdentity(page, BLANK_AVATAR_PLACEHOLDER_IDENTITY); await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); const preview = page.getByTestId("onboarding-avatar-preview"); await expect(preview).toBeVisible(); await expect(preview).toHaveAttribute("aria-label", "Add a display image"); await expect(preview).toHaveClass(/border-dashed/); }); test("avatar step reveals preset backgrounds after the first emoji pick", async ({ page, }) => { await seedActiveIdentity(page, BLANK_AVATAR_EMOJI_IDENTITY); await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); await page.getByRole("tab", { name: "Emoji" }).click(); const colorGridShell = page.getByTestId("onboarding-avatar-color-grid-shell"); await expect(colorGridShell).toHaveAttribute("aria-hidden", "true"); await selectFirstEmojiFromPicker(page); await expect(colorGridShell).toHaveAttribute("aria-hidden", "false"); await expect(page.getByTestId("onboarding-avatar-color-grid")).toBeVisible(); await expect(page.getByTestId("onboarding-avatar-preview")).not.toHaveCSS( "background-color", "rgb(255, 255, 255)", ); }); test("avatar step accepts an avatar URL before completing onboarding", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); await page .getByTestId("onboarding-avatar-url") .fill("https://example.com/morty.png"); const preview = page.getByTestId("onboarding-avatar-preview"); await expect(preview).toBeVisible(); const box = await preview.boundingBox(); expect(box?.width).toBeCloseTo(192, 0); expect(box?.height).toBeCloseTo(192, 0); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-gate")).toHaveCount(0); await expectWelcomeView(page); }); test("failed avatar saves can continue without saving the avatar", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge(page, {}, { skipOnboardingSeed: true }); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); await page .getByTestId("onboarding-avatar-url") .fill("https://example.com/morty.png"); await page.evaluate(() => { const testWindow = window as Window & { __BUZZ_E2E__?: { mock?: { profileUpdateError?: string } }; }; if (testWindow.__BUZZ_E2E__?.mock) { testWindow.__BUZZ_E2E__.mock.profileUpdateError = "Temporary avatar sync failure."; } }); await page.getByTestId("onboarding-next").click(); await expect(page.getByText("Temporary avatar sync failure.")).toBeVisible(); await expect( page.getByTestId("onboarding-next-without-saving"), ).toBeVisible(); await page.getByTestId("onboarding-next-without-saving").click(); await expect(page.getByTestId("onboarding-gate")).toHaveCount(0); await expectWelcomeView(page); }); test("avatar upload rejects a file whose server-detected MIME is not an image", async ({ page, }) => { // Models a spoofed/blank picker MIME: the picked file claims to be an image // (passes the browser-side accept filter) but the shared generic upload path // returns a non-image descriptor. The post-upload backstop must reject it so // a non-image can't become an avatar (regression guard — the shared upload // path no longer rejects non-images server-side). await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge( page, { uploadDescriptors: [ { url: `https://mock.relay/media/${"b".repeat(64)}.pdf`, sha256: "b".repeat(64), size: 4096, type: "application/pdf", uploaded: Math.floor(Date.now() / 1000), filename: "not-an-image.pdf", }, ], }, { skipOnboardingSeed: true }, ); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); await page.getByTestId("onboarding-avatar-input").setInputFiles({ name: "looks-like.png", mimeType: "image/png", buffer: Buffer.from("not really a png"), }); await expect(page.getByRole("alert")).toContainText( "Choose a PNG, JPG, GIF, or WebP image.", ); await expect(page.getByTestId("onboarding-avatar-url")).toHaveValue(""); }); test("avatar upload accepts a file whose server-detected MIME is an image", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); const url = `https://mock.relay/media/${"c".repeat(64)}.png`; await installMockBridge( page, { uploadDescriptors: [ { url, sha256: "c".repeat(64), size: 2048, type: "image/png", uploaded: Math.floor(Date.now() / 1000), }, ], }, { skipOnboardingSeed: true }, ); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await page.getByTestId("onboarding-next").click(); await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible(); await page.getByTestId("onboarding-avatar-input").setInputFiles({ name: "avatar.png", mimeType: "image/png", buffer: Buffer.from("png bytes"), }); await expect(page.getByTestId("onboarding-avatar-url")).toHaveValue(""); await expect( page.getByTestId("onboarding-avatar-preview-fallback"), ).toHaveText("MQ"); await expect(page.getByTestId("onboarding-avatar-error")).toHaveCount(0); }); test("first-run onboarding keeps the shell hidden and lands on welcome-everyone after profile setup", async ({ page, }) => { await seedActiveIdentity(page, FIRST_RUN_ALICE); await installMockBridge(page, undefined, { skipOnboardingSeed: true }); await page.goto("/"); await expect(page.getByTestId("onboarding-gate")).toBeVisible(); await expect(page.getByTestId("onboarding-page-1")).toBeVisible(); await expect(page.getByTestId("onboarding-display-name")).toHaveValue(""); await expectNoHomeSeenEntries(page); await page.getByTestId("onboarding-display-name").fill("Alice"); await completeProfileOnboarding(page); await expect(page.getByTestId("onboarding-gate")).toHaveCount(0); await expectWelcomeView(page); await expectStarterChannels(page); await expectWelcomeGuideIntro(page); }); function retryToast(page: Page, title: string) { return page .locator("[data-sonner-toast][data-removed='false']") .filter({ hasText: title }); } async function retryToastAction( page: Page, { command, title }: { command: string; title: string }, ) { const activeToast = retryToast(page, title); await expect(activeToast).toBeVisible(); await expect( activeToast.getByRole("button", { name: "Retry" }), ).toBeVisible(); const commandCountBeforeRetry = await page.evaluate( (retryCommand) => ( window as Window & { __BUZZ_E2E_COMMANDS__?: string[]; } ).__BUZZ_E2E_COMMANDS__?.filter((entry) => entry === retryCommand) .length ?? 0, command, ); await activeToast .getByRole("button", { name: "Retry" }) .evaluate((button) => (button as HTMLButtonElement).click()); await expect .poll(() => page.evaluate( ({ retryCommand }) => ( window as Window & { __BUZZ_E2E_COMMANDS__?: string[]; } ).__BUZZ_E2E_COMMANDS__?.filter((entry) => entry === retryCommand) .length ?? 0, { retryCommand: command, minimum: commandCountBeforeRetry + 1 }, ), ) .toBeGreaterThanOrEqual(commandCountBeforeRetry + 1); } async function expectRetryFailureRecreatesActionableToast( page: Page, { command, error, title }: { command: string; error: string; title: string }, ) { const activeToast = retryToast(page, title); await expect(activeToast).toContainText(error); await retryToastAction(page, { command, title }); await expect(activeToast).toHaveCount(1); await expect(activeToast).toContainText(error); await expect( activeToast.getByRole("button", { name: "Retry" }), ).toBeVisible(); } async function expectRetrySuccessDismissesToast( page: Page, { command, title }: { command: string; title: string }, ) { const activeToast = retryToast(page, title); await retryToastAction(page, { command, title }); await expect(activeToast).toHaveCount(0); } test("failed starter channel retries recreate actionable toasts", async ({ page, }) => { const starterError = "Mock starter channel setup failed."; await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge( page, { ensureStarterChannelsErrors: [starterError, starterError], }, { skipOnboardingSeed: true }, ); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await completeProfileOnboarding(page); await expectRetryFailureRecreatesActionableToast(page, { command: "ensure_starter_channels", error: starterError, title: "Couldn't set up starter channels", }); }); test("successful starter channel retry clears its actionable toast", async ({ page, }) => { const starterError = "Mock starter channel setup failed."; await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge( page, { ensureStarterChannelsErrors: [starterError], }, { skipOnboardingSeed: true }, ); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await completeProfileOnboarding(page); await expectRetrySuccessDismissesToast(page, { command: "ensure_starter_channels", title: "Couldn't set up starter channels", }); await expectWelcomeView(page); await expect(page.getByTestId("channel-general")).toBeVisible(); }); test("first-run onboarding shows setup loading until starter channel bootstrap completes", async ({ page, }) => { await seedActiveIdentity(page, BLANK_TYLER_IDENTITY); await installMockBridge( page, { createManagedAgentDelayMs: 9_000 }, { skipOnboardingSeed: true }, ); await page.goto("/"); await page.getByTestId("onboarding-display-name").fill("Morty QA"); await completeProfileOnboarding(page); const loadingGate = page.getByTestId("app-loading-gate"); await expect(page.getByTestId("onboarding-gate")).toHaveCount(0); await expect(loadingGate).toBeVisible(); await expect(loadingGate).toContainText("Setting up your community..."); // The boot gate is the theme-adaptive grainient with the flapping Buzz bee // as its hero. The mark must paint complete on the FIRST frame — a blank // gate reads as "nothing is loading" — so nothing about it may depend on // SMIL/scripted animation ( count stays 0); the wing flap is pure // CSS on HTML-level wing layers so it keeps running on the compositor even // while boot work hogs the main thread. await expect( loadingGate.getByTestId("setup-grainient-background"), ).toBeVisible(); const mark = loadingGate.locator(".buzz-mark"); await expect(mark).toBeVisible(); const gateTreatment = await loadingGate.evaluate((element) => { const markElement = element.querySelector(".buzz-mark"); const markSvgs = markElement ? Array.from(markElement.querySelectorAll("svg")) : []; const wing = element.querySelector(".bee-wing"); const wingStyles = wing instanceof SVGElement ? window.getComputedStyle(wing) : null; const wash = element.querySelector(".buzz-setup-grainient__wash"); const washStyles = wash instanceof HTMLElement ? window.getComputedStyle(wash) : null; return { animateElementCount: element.querySelectorAll("animate").length, // The document must match the OS scheme before the gate mounts (inline //