SPEC-TEST-005/test/focus-selector

Focus Selector Test Harness & Verification Suite

Interactive QA sandbox verifying persona pills, URL parameter syncing, event dispatching, notice cards, location banners, strip toggles, card CTA shifts, and Click & Pledge widget suppression.

Volunteer Testing Matrix (SPEC-TEST-005)

Focus Selector Test Instructions & Pass/Fail Expectations

Please perform each numbered test below and mark whether it PASSES or FAILS. Reference the test number (e.g., TS-FS-01) if reporting an issue.

9 Test Cases Total
Test #Feature Under TestStep-by-Step Volunteer ActionExpected PASS ResultStatus
TS-FS-01URL SyncingClick "Simulate ?focus=client" or click any focus pill.URL search bar updates to ?focus=client without refreshing page. State inspector shows client.PASS
TS-FS-0230-Day MemorySelect "Give Help" pill, clear URL param, then refresh page."Give Help" pill remains highlighted on reload due to localStorage preference persistence.PASS
TS-FS-03Event LogClick between different focus pills in Section 2.Live event log in Section 1 logs focus-changed events with payload timestamps in real time.PASS
TS-FS-04Donor Banner & CnPSelect "Give Money (donor)" pill.IRS EIN (46-1449556) & mailing address (7421 Burnet Rd #264) display; "Give Online Now" opens Click & Pledge.PASS
TS-FS-05Volunteer BannerSelect "Give Help (volunteer)" pill.Drop-off address 2008 Justin Ln, hours Mโ€“F 12:30 PMโ€“3:30 PM, Google Maps link, and Lala's directions display.PASS
TS-FS-06Client Transit NoticeSelect "Get Help (client)" or "I'm New".Section 3 (#mock-client-section) shows 2008 Justin Ln, Bus 803 directions, and Google Maps button.PASS
TS-FS-07Strip VisibilitySwitch focus to "Give Help (volunteer)".Section 4 (#mock-groups-strip) automatically hides from view. Reappears when switching back to "client".PASS
TS-FS-08Dynamic CTA ShiftChange focus while observing Section 5 (#mock-cta-card).Button CTA swaps dynamically between "Tell Us You're Coming", "Sign Up to Volunteer", and "Sponsor This Outreach".PASS
TS-FS-09Widget SuppressionSelect "Get Help (client)" focus.Floating Click & Pledge widget suppresses/hides at bottom right to avoid soliciting clients. Reappears on other modes.PASS
State Inspector Bar

Live URL State & Dispatched Event Log

Active Focus Value
newI'm New Overview
URL Search String (window.location.search)(none)
Last Dispatched Event Payload
No event dispatched yet
`focus-changed` Custom Window Event Log0 events
[Log ready - Click pills below to test events]
Component Under Test

FocusSelector.astro Instance

Customize Your Experience

Select your relationship with Street Youth Ministry to filter relevant schedules and actions.

Introductory overview, core services, and popular ways to get involved.
#mock-client-section

Client / Get Help Location & Transit Notice

Visible on `client`, `new`, and `all` focus modes
๐Ÿ“ Location & Transit DirectionsYouth & Clients Seeking Service or Meals

๐Ÿ“ 2008 Justin Ln, Austin

Half a block off Bus 803 on Burnet Road at Justin Ln. Look for the building between the car dealership and the big churchโ€”look for the big Street Youth Ministry sign up high by the door to the building with all the murals on it.

Arrival Info: Sunshine Store arrival time is flexible within the scheduled event time window.

Section 4

Strip Visibility Toggle Test Container

Hides on `volunteer` & shows on `client` / `all`
๐Ÿ‘ฅ #mock-groups-strip: Group & Client ActivitiesVisible on: client, new, all

Simulated Event Strip container demonstrating reactive visibility. When switching focus to Give Help (volunteer), this client-only strip automatically hides from view.

Section 5

Dynamic CTA Card Shift Test Container

Button CTA swaps based on active focus mode
Event Card #MOCK-CTA-001Friday Drop-In Meal & Resource Fair

Youth & Volunteer Community Gathering

Fridays @ 2:00 PM โ€ข Street Youth Ministry Main Center

Section 6

Click & Pledge Floating Widget Status

Suppressed on focus === 'client'

The official single Click & Pledge giving widget (embedded via Layout.astro and anchored at bottom-right) is automatically suppressed when Get Help (client) mode is selected to avoid soliciting youth in need. Clicking "Give Online Now" in the Give Money (donor) banner triggers this Click & Pledge widget directly.

๐Ÿ” CnP Inspector
Click "Inspect DOM" or test buttons above...