136 lines
4.4 KiB
Markdown
136 lines
4.4 KiB
Markdown
# CLQMS Frontend - Task Completion Checklist
|
|
|
|
## When Completing a Task
|
|
|
|
### 1. Code Quality
|
|
- [ ] Code follows project conventions (camelCase, 2-space indent, semicolons)
|
|
- [ ] Components use Svelte 5 runes (`$state`, `$derived`, `$effect`, `$props`)
|
|
- [ ] All exported functions have JSDoc comments
|
|
- [ ] Imports are ordered correctly (Svelte, $lib, external)
|
|
- [ ] No hardcoded values (use environment variables or constants)
|
|
- [ ] Error handling is properly implemented
|
|
- [ ] Loading states are shown for async operations
|
|
- [ ] Toast notifications for user feedback
|
|
|
|
### 2. Testing (when test framework is configured)
|
|
- [ ] Unit tests written for new functions
|
|
- [ ] Component tests written for new components
|
|
- [ ] All tests pass: `pnpm test`
|
|
- [ ] Test coverage is adequate
|
|
|
|
### 3. Linting and Formatting (when configured)
|
|
- [ ] Run linter: `pnpm run lint`
|
|
- [ ] Fix any linting errors
|
|
- [ ] Run formatter: `pnpm run format`
|
|
- [ ] No linting or formatting errors
|
|
|
|
### 4. Build Verification
|
|
- [ ] Production build succeeds: `pnpm run build`
|
|
- [ ] No build errors or warnings
|
|
- [ ] Preview build works: `pnpm run preview`
|
|
- [ ] Application runs without console errors
|
|
|
|
### 5. Manual Testing
|
|
- [ ] Feature works as expected in dev environment
|
|
- [ ] Navigation works correctly
|
|
- [ ] Forms validate properly
|
|
- [ ] Error messages are clear
|
|
- [ ] Loading states display correctly
|
|
- [ ] Toast notifications appear for success/error
|
|
- [ ] Responsive design works on mobile/tablet
|
|
- [ ] Accessibility: keyboard navigation, ARIA labels
|
|
|
|
### 6. Documentation
|
|
- [ ] API endpoints documented in comments
|
|
- [ ] Complex logic explained in comments
|
|
- [ ] New components documented
|
|
- [ ] README updated (if needed)
|
|
- [ ] Implementation plan updated (if applicable)
|
|
|
|
### 7. Security Considerations
|
|
- [ ] No sensitive data exposed to client
|
|
- [ ] API calls use proper authentication
|
|
- [ ] User input is validated
|
|
- [ ] XSS vulnerabilities checked
|
|
- [ ] CSRF protection (if applicable)
|
|
|
|
### 8. Performance
|
|
- [ ] No unnecessary re-renders
|
|
- [ ] Large lists use pagination
|
|
- [ ] Images are optimized (if applicable)
|
|
- [ ] Bundle size impact is minimal
|
|
|
|
### 9. Browser Compatibility
|
|
- [ ] Works in modern browsers (Chrome, Firefox, Edge, Safari)
|
|
- [ ] Feature detection used for newer APIs (if needed)
|
|
- [ ] Polyfills considered (if needed)
|
|
|
|
## Before Marking Task Complete
|
|
|
|
1. **Review Code**: Check all items in the checklist above
|
|
2. **Test Thoroughly**: Manual testing of all new/modified features
|
|
3. **Check Build**: Ensure production build succeeds
|
|
4. **Run Tests**: Ensure all tests pass (when test framework is configured)
|
|
5. **Run Linter**: Ensure no linting errors (when configured)
|
|
|
|
## Common Issues to Check
|
|
|
|
### API Issues
|
|
- Check API endpoints match backend documentation
|
|
- Verify request/response format
|
|
- Check error handling for failed requests
|
|
- Ensure 401 redirects to login work
|
|
|
|
### Svelte/Component Issues
|
|
- Check reactivity with `$state` and `$derived`
|
|
- Verify lifecycle hooks (`onMount`, `onDestroy`)
|
|
- Check prop passing between components
|
|
- Ensure event handlers work correctly
|
|
|
|
### Styling Issues
|
|
- Check responsive design (mobile, tablet, desktop)
|
|
- Verify DaisyUI component usage
|
|
- Check color scheme consistency
|
|
- Ensure accessibility (contrast, focus states)
|
|
|
|
### State Management Issues
|
|
- Verify store updates trigger UI updates
|
|
- Check localStorage handling (browser check)
|
|
- Ensure auth state is managed correctly
|
|
- Verify derived state calculations
|
|
|
|
## Git Commit Guidelines (if committing)
|
|
|
|
Follow conventional commits format:
|
|
- `feat: add new feature`
|
|
- `fix: fix bug`
|
|
- `docs: update documentation`
|
|
- `style: format code`
|
|
- `refactor: refactor code`
|
|
- `test: add tests`
|
|
- `chore: maintenance tasks`
|
|
|
|
Examples:
|
|
- `feat: add patient create form with validation`
|
|
- `fix: handle API errors properly in patient list`
|
|
- `docs: update API endpoint documentation`
|
|
- `refactor: extract form handling logic to utility function`
|
|
|
|
## When Tests Are Not Available
|
|
|
|
Currently, no test framework is configured. Until tests are added:
|
|
- Focus on manual testing
|
|
- Test all user flows
|
|
- Check edge cases (empty data, errors, network issues)
|
|
- Verify error handling
|
|
- Test responsive design
|
|
|
|
## Future: When Tests Are Added
|
|
|
|
Once Vitest and Playwright are configured:
|
|
- Add unit tests for new functions
|
|
- Add component tests for new components
|
|
- Add E2E tests for user flows
|
|
- Ensure test coverage is maintained
|
|
- Run tests before marking task complete
|