UI workflow

Scenario

Notification Center

A bell icon with a live unread-count badge, backed by Server-Sent Events. Open the dropdown, mark items read individually or all at once, and watch the badge react.

How this works

  • · The live feed is Server-Sent Events (GET /api/scenarios/notifications-feed, text/event-stream) — a real one-way streaming connection, not a polling loop your test has to fake.
  • · The first notification arrives about 1.2s after the page opens so the badge has something to show almost immediately, then roughly every 6s after that, picked randomly from a fixed message list.
  • · Nothing is persisted — refresh the page and the feed (and the unread count) starts over from zero. This is the one UI scenario with no seed/reset endpoint, because there is no state to seed.

What you'll practice

  • A live-updating unread-count badge (Server-Sent Events under the hood) — assert on a number that changes on its own
  • Opening a dropdown panel and reading content that arrived after the page loaded
  • Marking a single item read vs. "mark all read", and watching the badge count react
  • The badge, panel, and per-item state are independent — a good target for testing several small pieces of state that interact
  1. 1 Inbox