PreferenceDiscoveryChat Manual Test Checklist

Prerequisites

1. Start the dev server: npm run dev
2. Navigate to a plan creation flow where the PreferenceDiscoveryChat is rendered (Step 7)
3. Clear localStorage before each test session: localStorage.clear() in browser console

---

1. Capability Disclosure Banner

#	Test Case	Steps	Expected Result	Pass/Fail
1.1	Banner appears on start	Load the chat fresh	Blue "How this works" banner is visible	[ ]
1.2	Banner content correct	Read the banner	Lists 4 bullet points explaining capabilities	[ ]
1.3	Banner dismissible	Click the X button	Banner disappears	[ ]
1.4	Banner stays hidden	Dismiss, continue chat	Banner does not reappear after dismissal	[ ]
1.5	Banner hides after 2 messages	Answer 2 questions	Banner auto-hides after 2+ messages	[ ]

---

2. Prompt Guidance (Placeholder Text)

#	Test Case	Steps	Expected Result	Pass/Fail
2.1	Default placeholder	View input when question shown	Shows Type your answer or click an option above (e.g., "3-4 times a week")	[ ]
2.2	Open-ended placeholder	Reach an open-ended question	Shows Share anything else that might help (e.g., "I prefer morning workouts")	[ ]
2.3	Edit mode placeholder	Click a preference chip to edit	Shows Enter new value for [preference name]...	[ ]

---

3. "That's Not What I Meant" Button

#	Test Case	Steps	Expected Result	Pass/Fail
3.1	Button visible	After coach responds	Button appears in feedback area below message	[ ]
3.2	Button click action	Click the button	Sends "That's not what I meant. Let me clarify..." message	[ ]
3.3	Coach responds	After clicking	Coach acknowledges and asks for clarification	[ ]
3.4	Mobile view	Resize to mobile (<640px)	Shows only icon (no text)	[ ]
3.5	Desktop view	View on desktop	Shows icon + "That's not what I meant" text	[ ]

---

4. Touch Target Sizes (WCAG 2.2)

#	Test Case	Steps	Expected Result	Pass/Fail
4.1	Thumbs up button	Inspect element	Min 24x24px (check computed styles)	[ ]
4.2	Thumbs down button	Inspect element	Min 24x24px	[ ]
4.3	Regenerate button	Inspect element	Min 24x24px	[ ]
4.4	Capability dismiss X	Inspect element	Min 24x24px	[ ]
4.5	All buttons tappable on mobile	Test on mobile/simulator	Easy to tap without accidental clicks	[ ]

---

5. Home/End Keyboard Navigation

#	Test Case	Steps	Expected Result	Pass/Fail
5.1	Home key	Have several messages, scroll down, press Home	Scrolls to top of conversation	[ ]
5.2	End key	Scroll up, press End	Scrolls to bottom of conversation	[ ]
5.3	Keyboard hints	Look at input area	Shows "↑↓ navigate options • Enter select • Home/End scroll"	[ ]
5.4	Arrow key navigation	Press ↓ with options visible	Focus moves through option buttons	[ ]
5.5	Enter to select	Focus option, press Enter	Option is selected/submitted	[ ]
5.6	Escape to cancel edit	Start editing a preference, press Escape	Edit mode cancelled	[ ]

---

6. Message Container Accessibility

#	Test Case	Steps	Expected Result	Pass/Fail
6.1	role="log" present	Inspect messages container	Has role="log" attribute	[ ]
6.2	aria-live="polite"	Inspect messages container	Has aria-live="polite"	[ ]
6.3	Screen reader announcement	Use VoiceOver/NVDA, new message appears	Message is announced	[ ]
6.4	Progress bar accessibility	Inspect progress bar	Has role="progressbar" with aria-valuenow	[ ]

---

7. Session Persistence (localStorage)

#	Test Case	Steps	Expected Result	Pass/Fail
7.1	Session saved	Answer a question, check localStorage	Key mo_preference_chat_[planId] exists	[ ]
7.2	Session restored	Refresh page	Conversation restored with previous messages	[ ]
7.3	Preferences restored	Refresh page	Preference chips show previously captured values	[ ]
7.4	Session cleared on complete	Complete all questions	localStorage key removed	[ ]
7.5	24h expiry	Manually edit timestamp to >24h ago, refresh	Session not restored, starts fresh	[ ]

---

8. Smart Auto-Scroll

#	Test Case	Steps	Expected Result	Pass/Fail
8.1	Auto-scroll on new message	Send a message	Scrolls to bottom automatically	[ ]
8.2	Pause on user scroll	Scroll up manually	Auto-scroll pauses	[ ]
8.3	Scroll-to-bottom button appears	Scroll up	Floating button appears at bottom-right	[ ]
8.4	Button click scrolls down	Click the button	Scrolls to latest message	[ ]
8.5	Button disappears at bottom	Scroll to bottom or click button	Button disappears	[ ]

---

9. Edit Previous Answers

#	Test Case	Steps	Expected Result	Pass/Fail
9.1	Preference chips visible	Answer questions	Chips appear at bottom showing preferences	[ ]
9.2	Click to edit	Click a preference chip	Edit mode activates, input pre-filled	[ ]
9.3	Edit indicator shown	In edit mode	Yellow banner shows "Editing: [key]"	[ ]
9.4	Cancel edit	Click X on edit banner	Edit mode cancelled, input cleared	[ ]
9.5	Submit edit	Type new value, submit	New value sent to AI for processing	[ ]
9.6	Chips not editable when complete	Complete the flow	Chips are no longer clickable	[ ]

---

10. Existing Features (Regression)

#	Test Case	Steps	Expected Result	Pass/Fail
10.1	Quick-select options work	Click an option button	Message sent, AI responds	[ ]
10.2	Multi-select works	On multi-select question, select multiple	Can select multiple, confirm button works	[ ]
10.3	Free-form input works	Type custom response	AI processes and extracts preferences	[ ]
10.4	Undo button works	Click "Undo last answer"	Previous answer undone	[ ]
10.5	Thumbs up/down works	Click feedback buttons	Visual feedback, state persists	[ ]
10.6	Regenerate works	Click regenerate	AI regenerates response	[ ]
10.7	Progress bar updates	Answer questions	Progress bar increases	[ ]
10.8	Completion state	Answer all questions	Shows "Preferences captured!" success state	[ ]

---

Test Session Notes

Date: Tester: Browser/Device: Notes: