- Migrate from vanilla JavaScript SPA to Next.js 16 with App Router - Add server-side rendering for all pages (Home, Compare, Rankings) - Create individual school pages with dynamic routing (/school/[urn]) - Implement Chart.js and Leaflet map integrations - Add comprehensive SEO with sitemap, robots.txt, and JSON-LD - Set up Docker multi-service architecture (PostgreSQL, FastAPI, Next.js) - Update CI/CD pipeline to build both backend and frontend images - Fix Dockerfile to include devDependencies for TypeScript compilation - Add Jest testing configuration - Implement performance optimizations (code splitting, caching) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
7.3 KiB
7.3 KiB
QA Checklist - SchoolCompare Next.js Migration
Functionality Testing
Home Page
- Page loads with SSR (view source shows rendered HTML)
- Featured schools display correctly
- Search by school name filters results
- Search by postcode finds nearby schools
- Radius filter works with postcode search
- Local authority filter updates results
- School type filter updates results
- Pagination works correctly
- "Add to Compare" button adds schools to basket
- Comparison badge shows correct count
- School cards display all information (name, type, location, metrics)
- Trend indicators show correct direction (↗ ↘ →)
- Links to school detail pages work
- Empty state shows when no results
Individual School Pages
- School detail page loads with SSR
- URL format:
/school/{urn}works - School name and meta information display
- Latest results summary shows correctly
- Performance chart displays multi-year data
- All metrics sections render (Reading, Writing, Maths)
- Absence data shows if available
- Map displays school location
- Historical data table shows all years
- "Add to Compare" button works
- "In Comparison" state shows when already added
- Meta tags are correct (check view source)
- JSON-LD structured data validates
- 404 page shows for invalid URN
Compare Page
- Compare page loads with SSR
- URL format:
/compare?urns=...works - Selected schools load from URL
- Schools display in comparison grid
- Metric selector changes chart
- Performance chart displays all schools
- Comparison table shows correct values
- "Remove" button removes school from comparison
- "+ Add School" opens search modal
- School search modal works
- Maximum 5 schools enforced
- URL updates when schools added/removed
- Empty state shows when no schools selected
- Comparison persists in localStorage
- Sharing URL loads same comparison
Rankings Page
- Rankings page loads with SSR
- Default metric displays (RWM Expected)
- Metric selector updates rankings
- Area filter updates rankings
- Year filter updates rankings
- Rankings display in correct order
- Top 3 schools have special styling (medals)
- "Add to Compare" button works
- School links navigate to detail pages
- Rankings table is responsive
Navigation & Layout
- Navigation bar displays correctly
- Active page is highlighted in nav
- Comparison badge updates in real-time
- Footer displays correctly
- Logo links to home page
- Mobile menu works (if applicable)
Cross-Browser Testing
Desktop Browsers
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Mobile Browsers
- iOS Safari
- Android Chrome
- Samsung Internet
Responsive Design
Breakpoints
- Desktop (1280px+): Full layout
- Tablet (768px-1279px): Adjusted layout
- Mobile (<768px): Stacked layout
Components
- School cards adapt to screen size
- Charts are responsive
- Maps are responsive
- Tables scroll horizontally on mobile
- Navigation adapts to mobile
- Filters stack on mobile
Performance Testing
Lighthouse Scores (Target: 90+)
- Performance: ____
- Accessibility: ____
- Best Practices: ____
- SEO: ____
Core Web Vitals
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
Load Times
- Home page: < 2s
- School detail page: < 2s
- Compare page: < 2s
- Rankings page: < 2s
SEO Testing
- Sitemap generates correctly (
/sitemap.xml) - Robots.txt accessible (
/robots.txt) - Meta titles are unique per page
- Meta descriptions are descriptive
- Open Graph tags present
- Twitter Card tags present
- Canonical URLs set correctly
- JSON-LD structured data validates (use Google Rich Results Test)
- School pages indexed in Google (post-launch)
Accessibility Testing
WCAG 2.1 AA Compliance
- Keyboard navigation works
- Focus indicators visible
- Color contrast ratios meet standards
- Alt text on images (if any)
- ARIA labels on interactive elements
- Form labels present
- Headings in logical order
- No accessibility errors in axe DevTools
- No accessibility errors in WAVE
Screen Reader Testing
- Page structure makes sense
- All interactive elements announced
- Navigation is clear
Data Integration Testing
API Integration
- All API endpoints respond correctly
- Error handling works (try invalid URN)
- Loading states display
- Data formats correctly
- Caching works (check Network tab)
Edge Cases
- Schools with null data values display "-"
- Schools with no yearly data handled
- Schools with no location don't break map
- Empty search results show empty state
- Invalid postcode shows error
Security Testing
- HTTPS enabled (production)
- Security headers present (X-Frame-Options, etc.)
- No API keys exposed in client code
- CORS configured correctly
- XSS prevention (try injecting scripts)
- No console errors or warnings
State Management Testing
URL State
- Filter changes update URL
- Browser back/forward buttons work
- Sharing URLs preserves state
- Page refresh preserves filters
LocalStorage
- Comparison basket persists across sessions
- Invalid data in localStorage handled gracefully
Error Handling
- 404 page displays for invalid routes
- API errors show user-friendly messages
- Network errors handled gracefully
- Invalid data doesn't crash app
- Error boundaries catch React errors
Integration Testing
User Flows
- Flow 1: Search → View School → Add to Compare → Go to Compare Page
- Flow 2: Browse Home → Add Multiple Schools → Compare → Remove School
- Flow 3: View Rankings → Click School → View Details → Add to Compare
- Flow 4: Search by Postcode → View Map → Click School → View Details
- Flow 5: Filter by Area & Type → View Results → Paginate
Build & Deployment Testing
npm run buildsucceeds without errorsnpm run lintpassesnpm testpasses- Production build runs correctly
- Docker image builds successfully (if using Docker)
- Environment variables load correctly
Documentation Review
- README.md is complete and accurate
- DEPLOYMENT.md covers all deployment options
- Environment variables documented
- API integration documented
Final Checks
- All console errors resolved
- All console warnings reviewed
- No TODO comments in production code
- Version numbers updated
- Change log updated (if applicable)
- Git repository clean
- All tests passing
Sign-Off
| Role | Name | Date | Signature |
|---|---|---|---|
| Developer | |||
| QA Lead | |||
| Product Owner | |||
| Tech Lead |
Notes
Add any additional notes or issues discovered during QA: