evOo-local/apps/web/e2e/notification-settings.spec.ts
Claude 7185dcdd3c
feat(web): notification settings, and sign-out stops this browser's push
Users had no way to turn on push for a browser, set quiet hours or opt out of nudges.

Settings gains a compact Notifications section: a switch for push on this device (only where
web push works: a secure context outside the desktop app), quiet hours with from/to times
(22:00-07:00 when first turned on) and a switch for nudges. Changes save in order as they are
made. A browser that blocked notifications says so instead of offering a dead switch. Logging
out unregisters the browser first, so a shared computer stops receiving the account's pushes.

The E2E stubs the Push API (headless Chromium has no push service), walks all three controls,
checks they survive a reload and captures the notification-settings screenshot.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u
2026-10-03 13:34:38 +00:00

113 lines
4.5 KiB
TypeScript

/**
* E2E: Settings → Notifications turns push on for this browser (the Push API is stubbed: headless
* Chromium has no push service), sets quiet hours and switches nudges off; all of it survives a
* reload.
*/
import { expect, type Page, test } from "@playwright/test";
import { captureScreenshot, completeOnboarding, openUserSettings, rpc, signup } from "./helpers";
const ENDPOINT = "https://push.example.test/e2e-device";
/** A fake service worker registration whose push subscription lives in sessionStorage. */
async function stubPushApi(page: Page, endpoint: string) {
await page.addInitScript((pushEndpoint) => {
const storageKey = "e2e:push-subscription";
const current = () => {
const stored = sessionStorage.getItem(storageKey);
if (!stored) return null;
const saved = JSON.parse(stored) as { serverKey: number[] };
return {
endpoint: pushEndpoint,
options: { applicationServerKey: new Uint8Array(saved.serverKey).buffer },
toJSON: () => ({
endpoint: pushEndpoint,
keys: { p256dh: `B${"A".repeat(86)}`, auth: "A".repeat(22) },
}),
unsubscribe: async () => {
sessionStorage.removeItem(storageKey);
return true;
},
};
};
const registration = {
scope: `${location.origin}/`,
pushManager: {
getSubscription: async () => current(),
subscribe: async (options: { applicationServerKey: Uint8Array }) => {
sessionStorage.setItem(
storageKey,
JSON.stringify({ serverKey: [...new Uint8Array(options.applicationServerKey)] }),
);
return current();
},
},
};
Object.defineProperty(navigator, "serviceWorker", {
configurable: true,
value: {
register: async () => registration,
getRegistration: async () => registration,
ready: Promise.resolve(registration),
},
});
if (!("PushManager" in window)) {
Object.defineProperty(window, "PushManager", { configurable: true, value: class {} });
}
}, endpoint);
}
test("notification settings: push on this device, quiet hours and nudges", async ({
page,
}, testInfo) => {
await page.context().grantPermissions(["notifications"]);
await stubPushApi(page, ENDPOINT);
await signup(page, `notifications-${Date.now()}@rakazo.test`, "password12", "Push Tester");
await completeOnboarding(page);
let settings = await openUserSettings(page, "notifications");
const panel = settings.getByTestId("notification-settings");
const push = panel.getByTestId("notification-push-switch");
await expect(push).not.toBeChecked();
const subscribed = page.waitForRequest("**/rpc/notifications/webPush/subscribe");
await push.click();
expect((await subscribed).postDataJSON()).toMatchObject({ json: { endpoint: ENDPOINT } });
await expect(push).toBeChecked();
const quiet = panel.getByTestId("notification-quiet-hours-switch");
await expect(quiet).not.toBeChecked();
await quiet.click();
await expect(quiet).toBeChecked();
const start = panel.getByTestId("notification-quiet-hours-start");
await expect(start).toHaveValue("22:00");
await expect(panel.getByTestId("notification-quiet-hours-end")).toHaveValue("07:00");
const saved = page.waitForResponse(
(response) =>
response.url().includes("/rpc/notifications/settings/update") &&
response.request().postData()?.includes("23:30") === true,
);
await start.fill("23:30");
await saved;
const nudges = panel.getByTestId("notification-nudges-switch");
await expect(nudges).toBeChecked();
await nudges.click();
await expect(nudges).not.toBeChecked();
await expect
.poll(() => rpc<{ nudges: boolean }>(page, "notifications/settings/get", null))
.toMatchObject({ nudges: false, quietHours: { start: "23:30", end: "07:00" } });
await captureScreenshot(page, testInfo, "notification-settings");
await page.reload();
settings = await openUserSettings(page, "notifications");
await expect(settings.getByTestId("notification-push-switch")).toBeChecked();
await expect(settings.getByTestId("notification-quiet-hours-start")).toHaveValue("23:30");
await expect(settings.getByTestId("notification-nudges-switch")).not.toBeChecked();
const unsubscribed = page.waitForRequest("**/rpc/notifications/webPush/unsubscribe");
await settings.getByTestId("notification-push-switch").click();
expect((await unsubscribed).postDataJSON()).toMatchObject({ json: { endpoint: ENDPOINT } });
await expect(settings.getByTestId("notification-push-switch")).not.toBeChecked();
});