ff7f5487e6
- 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>
252 lines
7.3 KiB
Markdown
252 lines
7.3 KiB
Markdown
# 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 build` succeeds without errors
|
|
- [ ] `npm run lint` passes
|
|
- [ ] `npm test` passes
|
|
- [ ] 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:
|
|
|
|
_______________________________________________
|
|
_______________________________________________
|
|
_______________________________________________
|
|
_______________________________________________
|