Files
buzz/desktop/tests/e2e/identity-key-help.spec.ts
klopez4212 81fba7bda4 Refresh desktop onboarding flow (#7528)
## Summary
- apply the refreshed card layout across desktop onboarding
- update identity backup, recovery, and key presentation flows
- clarify AI connection choices and default model settings
- simplify the backup ceremony from creation through optional
verification
- bring the harness and provider setup flow forward with validation,
preserved state, and consistent navigation
- fix action alignment and stray card scrolling in the refreshed layout

## Validation
- pre-push desktop lint, typecheck, frontend tests, and native tests
passed
- focused onboarding Playwright coverage passed
- manually reviewed the refreshed onboarding and backup flow in the
native app
- just ci passed all sections except one unchanged process-cleanup
timing test; its exact rerun passed

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: Princess Donut <b238ea756dee4d98afa5883fc7f1de61eeabe65bf700e3a5a5a80db5e42e2c2b@buzz.block.builderlab.xyz>
Signed-off-by: Clay Delk <clay.delk@gmail.com>
Co-authored-by: Princess Donut <b238ea756dee4d98afa5883fc7f1de61eeabe65bf700e3a5a5a80db5e42e2c2b@buzz.block.builderlab.xyz>
Co-authored-by: Clay Delk <clay.delk@gmail.com>
2026-09-15 05:58:16 -04:00

89 lines
3.1 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { expect, test } from "@playwright/test";
import { waitForAnimations } from "../helpers/animations";
import { installMockBridge } from "../helpers/bridge";
const HELP_SEEN_KEY = "buzz.machine-onboarding.identity-key-help-seen.v1";
test("identity key help explains the first-run choice", async ({ page }) => {
await installMockBridge(page, undefined, {
skipCommunitySeed: true,
skipOnboardingSeed: true,
});
await page.goto("/");
const trigger = page.getByTestId("identity-key-help-trigger");
// No initial opacity-0 assertion: on a slow runner the 2s reveal timer can
// fire before the first assertion runs, failing the test for the wrong
// reason. The reveal + persistence assertions below carry the coverage.
await expect(trigger).toHaveCSS("opacity", "1", { timeout: 5000 });
await expect
.poll(() =>
page.evaluate((key) => localStorage.getItem(key), HELP_SEEN_KEY),
)
.toBe("true");
await page.setViewportSize({ width: 720, height: 620 });
await trigger.click();
const dialog = page.getByTestId("identity-key-help-dialog");
await expect(dialog).toBeVisible();
await waitForAnimations(page);
await expect(
dialog.getByRole("heading", { name: "What’s an identity key?" }),
).toBeVisible();
await expect(dialog).toHaveClass(/w-full/);
await expect(page.getByTestId("dialog-overlay")).toHaveCount(0);
const dialogBounds = await dialog.boundingBox();
expect(dialogBounds).not.toBeNull();
expect(dialogBounds?.x).toBeGreaterThanOrEqual(0);
expect(
(dialogBounds?.x ?? 0) + (dialogBounds?.width ?? 0),
).toBeLessThanOrEqual(720);
await page.getByTestId("onboarding-back").click();
await expect(dialog).not.toBeVisible();
await expect(trigger).toHaveCSS("opacity", "1");
await page.reload();
await expect(page.getByTestId("identity-key-help-trigger")).toHaveCSS(
"opacity",
"1",
);
});
test("identity key help stays readable when the app resolves dark mode", async ({
page,
}) => {
await page.emulateMedia({ colorScheme: "dark" });
await installMockBridge(page, undefined, {
skipCommunitySeed: true,
skipOnboardingSeed: true,
});
await page.goto("/");
// Fresh profiles follow the system scheme, so the emulated dark scheme is
// the first-run repro: the app resolves the dark theme while onboarding.
await expect
.poll(() =>
page.evaluate(() => document.documentElement.classList.contains("dark")),
)
.toBe(true);
const trigger = page.getByTestId("identity-key-help-trigger");
await expect(trigger).toHaveCSS("opacity", "1", { timeout: 5000 });
await trigger.click();
const dialog = page.getByTestId("identity-key-help-dialog");
await expect(dialog).toBeVisible();
await waitForAnimations(page);
// The textured powder card is baked light in both themes, so the dialog pins
// the neutral onboarding theme to its light variant. Without the pin the
// dark theme flips --foreground to near-white and the title disappears
// against the white card.
await expect(
dialog.getByRole("heading", { name: "What’s an identity key?" }),
).toHaveCSS("color", "rgb(23, 23, 23)");
});