mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Jordan Ritter
626b86c23b
Replace TODO placeholders in all 73 QA checklist files across 17 showcase packages with specific, actionable test steps derived from reading the actual demo page source code. Each checklist now references real data-testid selectors, hook names, expected UI states, and interaction flows. Add showcase/QA-COVERAGE.md with a comprehensive matrix showing coverage across manual QA, Vitest unit tests, Playwright E2E (smoke and interaction), per-package E2E, aimock fixtures, and CI automation for all 9 demos plus the Sales Dashboard starter hero.
2.1 KiB
2.1 KiB
QA: Tool Rendering — Claude Agent SDK (Python)
Prerequisites
- Demo is deployed and accessible
- Agent backend is healthy (check /api/health)
Test Steps
1. Basic Functionality
- Navigate to the tool-rendering demo page
- Verify the chat interface loads in a centered full-height layout
- Verify the chat input placeholder "Type a message" is visible
- Send a basic message
- Verify the agent responds
2. Feature-Specific Checks
Suggestions
- Verify "Weather in San Francisco" suggestion button is visible
- Verify "Weather in New York" suggestion button is visible
- Verify "Weather in Tokyo" suggestion button is visible
- Click a weather suggestion and verify it populates the input or sends the message
Weather Card Rendering (useRenderTool)
- Type "What's the weather in San Francisco?"
- Verify loading state shows "Retrieving weather..." with a spinner
- Verify the WeatherCard renders (
data-testid="weather-card") with:- City name displayed (
data-testid="weather-city") - Temperature in both Celsius and Fahrenheit
- Humidity percentage (
data-testid="weather-humidity") - Wind speed in mph (
data-testid="weather-wind") - Feels-like temperature (
data-testid="weather-feels-like") - Conditions text with appropriate weather icon (sun/rain/cloud)
- City name displayed (
- Verify the card background color matches the weather condition theme:
- Clear/Sunny: #667eea (blue-purple)
- Rain/Storm: #4A5568 (dark gray)
- Cloudy: #718096 (medium gray)
- Snow: #63B3ED (light blue)
Multiple Weather Queries
- Ask about weather in a second city
- Verify a second WeatherCard renders without breaking the first
- Verify each card shows the correct city name
3. Error Handling
- Send an empty message (should be handled gracefully)
- Verify no console errors during normal usage
Expected Results
- Chat loads within 3 seconds
- Agent responds within 10 seconds
- Weather cards render with all data fields populated
- Weather icon and theme color match the conditions
- No UI errors or broken layouts