mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
🔧 chore: consolidate quality commands into single quality.md
Merge quality-bundle-analyze.md and quality-coverage.md into a unified quality.md command with subcommand support (bundle, coverage).
This commit is contained in:
@@ -1,129 +0,0 @@
|
|||||||
# /quality:bundle-analyze - Analyze Bundle Sizes
|
|
||||||
|
|
||||||
Analyze production bundle sizes and provide optimization recommendations. Project thresholds: 2MB warning, 5MB error.
|
|
||||||
|
|
||||||
## Tasks
|
|
||||||
|
|
||||||
### 1. Run Production Build
|
|
||||||
```bash
|
|
||||||
# Clean previous build
|
|
||||||
rm -rf dist/
|
|
||||||
|
|
||||||
# Build for production
|
|
||||||
npm run build-prod
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Analyze Bundle Output
|
|
||||||
```bash
|
|
||||||
# List bundle files with sizes
|
|
||||||
ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'
|
|
||||||
|
|
||||||
# Get total bundle size
|
|
||||||
du -sh dist/apps/isa-app/browser/
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Identify Large Files
|
|
||||||
Parse build output and identify:
|
|
||||||
- Main bundle size
|
|
||||||
- Lazy-loaded chunk sizes
|
|
||||||
- Vendor chunks
|
|
||||||
- Files exceeding thresholds:
|
|
||||||
- **Warning**: > 2MB
|
|
||||||
- **Error**: > 5MB
|
|
||||||
|
|
||||||
### 4. Analyze Dependencies
|
|
||||||
```bash
|
|
||||||
# Check for duplicate dependencies
|
|
||||||
npm ls --depth=0 | grep -E "UNMET|deduped"
|
|
||||||
|
|
||||||
# Show largest node_modules packages
|
|
||||||
du -sh node_modules/* | sort -rh | head -20
|
|
||||||
```
|
|
||||||
|
|
||||||
### 5. Source Map Analysis
|
|
||||||
Use source maps to identify large contributors:
|
|
||||||
```bash
|
|
||||||
# Install source-map-explorer if needed
|
|
||||||
npm install -g source-map-explorer
|
|
||||||
|
|
||||||
# Analyze main bundle
|
|
||||||
source-map-explorer dist/apps/isa-app/browser/main.*.js
|
|
||||||
```
|
|
||||||
|
|
||||||
### 6. Generate Recommendations
|
|
||||||
Based on analysis, provide actionable recommendations:
|
|
||||||
|
|
||||||
**If bundle > 2MB:**
|
|
||||||
- Identify heavy dependencies to replace or remove
|
|
||||||
- Suggest lazy loading opportunities
|
|
||||||
- Check for unused imports
|
|
||||||
|
|
||||||
**Code Splitting Opportunities:**
|
|
||||||
- Large feature modules that could be lazy-loaded
|
|
||||||
- Heavy libraries that could be dynamically imported
|
|
||||||
- Vendor code that could be split into separate chunks
|
|
||||||
|
|
||||||
**Dependency Optimization:**
|
|
||||||
- Replace large libraries with smaller alternatives
|
|
||||||
- Remove unused dependencies
|
|
||||||
- Use tree-shakeable imports
|
|
||||||
|
|
||||||
**Build Configuration:**
|
|
||||||
- Enable/optimize compression
|
|
||||||
- Check for source maps in production (should be disabled)
|
|
||||||
- Verify optimization flags
|
|
||||||
|
|
||||||
### 7. Comparative Analysis
|
|
||||||
If previous build data exists:
|
|
||||||
```bash
|
|
||||||
# Compare with previous build
|
|
||||||
# (Requires manual tracking or CI/CD integration)
|
|
||||||
echo "Current build: $(du -sh dist/apps/isa-app/browser/ | awk '{print $1}')"
|
|
||||||
```
|
|
||||||
|
|
||||||
### 8. Generate Report
|
|
||||||
Create formatted report with:
|
|
||||||
- Total bundle size with threshold status (✅ < 2MB, ⚠️ 2-5MB, ❌ > 5MB)
|
|
||||||
- Main bundle and largest chunks
|
|
||||||
- Top 10 largest dependencies
|
|
||||||
- Optimization recommendations prioritized by impact
|
|
||||||
- Lazy loading opportunities
|
|
||||||
|
|
||||||
## Output Format
|
|
||||||
```
|
|
||||||
Bundle Analysis Report
|
|
||||||
======================
|
|
||||||
|
|
||||||
Total Size: X.XX MB [STATUS]
|
|
||||||
Main Bundle: X.XX MB
|
|
||||||
Largest Chunks:
|
|
||||||
- chunk-name.js: X.XX MB
|
|
||||||
- ...
|
|
||||||
|
|
||||||
Largest Dependencies:
|
|
||||||
1. dependency-name: X.XX MB
|
|
||||||
...
|
|
||||||
|
|
||||||
Recommendations:
|
|
||||||
🔴 Critical (> 5MB):
|
|
||||||
- [Action items]
|
|
||||||
|
|
||||||
⚠️ Warning (2-5MB):
|
|
||||||
- [Action items]
|
|
||||||
|
|
||||||
✅ Optimization Opportunities:
|
|
||||||
- [Action items]
|
|
||||||
|
|
||||||
Lazy Loading Candidates:
|
|
||||||
- [Feature modules]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Error Handling
|
|
||||||
- Build failures: Show error and suggest fixes
|
|
||||||
- Missing tools: Offer to install (source-map-explorer)
|
|
||||||
- No dist folder: Run build first
|
|
||||||
|
|
||||||
## References
|
|
||||||
- CLAUDE.md Build Configuration section
|
|
||||||
- Angular build optimization: https://angular.dev/tools/cli/build
|
|
||||||
- package.json (build-prod script)
|
|
||||||
@@ -1,201 +0,0 @@
|
|||||||
# /quality:coverage - Generate Test Coverage Report
|
|
||||||
|
|
||||||
Generate comprehensive test coverage report with recommendations for improving coverage.
|
|
||||||
|
|
||||||
## Parameters
|
|
||||||
- `library-name` (optional): Specific library to analyze. If omitted, analyzes all libraries.
|
|
||||||
|
|
||||||
## Tasks
|
|
||||||
|
|
||||||
### 1. Run Coverage Analysis
|
|
||||||
```bash
|
|
||||||
# Single library
|
|
||||||
npx nx test [library-name] --skip-nx-cache --coverage
|
|
||||||
|
|
||||||
# All libraries (if no library specified)
|
|
||||||
npm run ci # Runs all tests with coverage
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Parse Coverage Report
|
|
||||||
Coverage output typically in:
|
|
||||||
- `coverage/libs/[domain]/[layer]/[name]/`
|
|
||||||
- Look for `coverage-summary.json` or text output
|
|
||||||
|
|
||||||
Extract metrics:
|
|
||||||
- **Line coverage**: % of executable lines tested
|
|
||||||
- **Branch coverage**: % of conditional branches tested
|
|
||||||
- **Function coverage**: % of functions called in tests
|
|
||||||
- **Statement coverage**: % of statements executed
|
|
||||||
|
|
||||||
### 3. Identify Uncovered Code
|
|
||||||
Parse coverage report to find:
|
|
||||||
- **Uncovered files**: Files with 0% coverage
|
|
||||||
- **Partially covered files**: < 80% coverage
|
|
||||||
- **Uncovered lines**: Specific line numbers not tested
|
|
||||||
- **Uncovered branches**: Conditional paths not tested
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# List files with coverage below 80%
|
|
||||||
# (Parse from coverage JSON output)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Categorize Coverage Gaps
|
|
||||||
|
|
||||||
**Critical (High Risk):**
|
|
||||||
- Service methods handling business logic
|
|
||||||
- Data transformation functions
|
|
||||||
- Error handling code paths
|
|
||||||
- Security-related functions
|
|
||||||
- State management store actions
|
|
||||||
|
|
||||||
**Important (Medium Risk):**
|
|
||||||
- Component public methods
|
|
||||||
- Utility functions
|
|
||||||
- Validators
|
|
||||||
- Pipes and filters
|
|
||||||
- Guard functions
|
|
||||||
|
|
||||||
**Low Priority:**
|
|
||||||
- Getters/setters
|
|
||||||
- Simple property assignments
|
|
||||||
- Console logging
|
|
||||||
- Type definitions
|
|
||||||
|
|
||||||
### 5. Generate Recommendations
|
|
||||||
|
|
||||||
For each coverage gap, provide:
|
|
||||||
- **File and line numbers**
|
|
||||||
- **Risk level** (Critical/Important/Low)
|
|
||||||
- **Suggested test type** (unit/integration)
|
|
||||||
- **Test approach** (example test scenario)
|
|
||||||
|
|
||||||
Example:
|
|
||||||
```
|
|
||||||
📍 libs/oms/data-access/src/lib/services/order.service.ts:45-52
|
|
||||||
🔴 Critical - Business Logic
|
|
||||||
❌ 0% coverage - Error handling path
|
|
||||||
|
|
||||||
Recommended test:
|
|
||||||
it('should handle API error when fetching order', async () => {
|
|
||||||
// Mock API to return error
|
|
||||||
// Call method
|
|
||||||
// Verify error handling
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### 6. Calculate Coverage Trends
|
|
||||||
If historical data available:
|
|
||||||
- Compare with previous coverage percentage
|
|
||||||
- Show improvement/regression
|
|
||||||
- Identify files with declining coverage
|
|
||||||
|
|
||||||
### 7. Generate HTML Report
|
|
||||||
```bash
|
|
||||||
# Open coverage report in browser (if available)
|
|
||||||
open coverage/libs/[domain]/[layer]/[name]/index.html
|
|
||||||
```
|
|
||||||
|
|
||||||
### 8. Create Coverage Summary Report
|
|
||||||
|
|
||||||
**Overall Metrics:**
|
|
||||||
```
|
|
||||||
Coverage Summary for [library-name]
|
|
||||||
====================================
|
|
||||||
|
|
||||||
Line Coverage: XX.X% (XXX/XXX lines)
|
|
||||||
Branch Coverage: XX.X% (XXX/XXX branches)
|
|
||||||
Function Coverage: XX.X% (XXX/XXX functions)
|
|
||||||
Statement Coverage: XX.X% (XXX/XXX statements)
|
|
||||||
|
|
||||||
Target: 80% (Recommended minimum)
|
|
||||||
Status: ✅ Met / ⚠️ Below Target / 🔴 Critical
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files Needing Attention:**
|
|
||||||
```
|
|
||||||
🔴 Critical (< 50% coverage):
|
|
||||||
1. service-name.service.ts - 35% (business logic)
|
|
||||||
2. data-processor.ts - 42% (transformations)
|
|
||||||
|
|
||||||
⚠️ Below Target (50-79% coverage):
|
|
||||||
3. component-name.component.ts - 68%
|
|
||||||
4. validator.ts - 72%
|
|
||||||
|
|
||||||
✅ Well Covered (≥ 80% coverage):
|
|
||||||
- Other files maintaining good coverage
|
|
||||||
```
|
|
||||||
|
|
||||||
**Top Priority Tests to Add:**
|
|
||||||
1. [File:Line] - [Description] - [Risk Level]
|
|
||||||
2. ...
|
|
||||||
|
|
||||||
### 9. Framework-Specific Notes
|
|
||||||
|
|
||||||
**Vitest:**
|
|
||||||
- Coverage provider: v8 or istanbul
|
|
||||||
- Config in `vitest.config.ts`
|
|
||||||
- Coverage thresholds configurable
|
|
||||||
|
|
||||||
**Jest:**
|
|
||||||
- Coverage collected via `--coverage` flag
|
|
||||||
- Config in `jest.config.ts`
|
|
||||||
- Coverage directory: `coverage/`
|
|
||||||
|
|
||||||
### 10. Set Coverage Thresholds (Optional)
|
|
||||||
Suggest adding to test config:
|
|
||||||
```typescript
|
|
||||||
// vitest.config.ts
|
|
||||||
coverage: {
|
|
||||||
thresholds: {
|
|
||||||
lines: 80,
|
|
||||||
functions: 80,
|
|
||||||
branches: 80,
|
|
||||||
statements: 80
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Output Format
|
|
||||||
```
|
|
||||||
Test Coverage Report
|
|
||||||
====================
|
|
||||||
|
|
||||||
Library: [name]
|
|
||||||
Test Framework: [Vitest/Jest]
|
|
||||||
Generated: [timestamp]
|
|
||||||
|
|
||||||
📊 Coverage Metrics
|
|
||||||
-------------------
|
|
||||||
Lines: XX.X% ████████░░ (XXX/XXX)
|
|
||||||
Branches: XX.X% ███████░░░ (XXX/XXX)
|
|
||||||
Functions: XX.X% █████████░ (XXX/XXX)
|
|
||||||
Statements: XX.X% ████████░░ (XXX/XXX)
|
|
||||||
|
|
||||||
🎯 Target: 80% | Status: [✅/⚠️/🔴]
|
|
||||||
|
|
||||||
🔍 Coverage Gaps
|
|
||||||
----------------
|
|
||||||
[Categorized list with priorities]
|
|
||||||
|
|
||||||
💡 Recommendations
|
|
||||||
------------------
|
|
||||||
[Prioritized list of tests to add]
|
|
||||||
|
|
||||||
📈 Next Steps
|
|
||||||
-------------
|
|
||||||
1. Focus on critical coverage gaps first
|
|
||||||
2. Add tests for business logic in [files]
|
|
||||||
3. Consider setting coverage thresholds
|
|
||||||
4. Re-run: npx nx test [library-name] --skip-nx-cache --coverage
|
|
||||||
```
|
|
||||||
|
|
||||||
## Error Handling
|
|
||||||
- No coverage data: Ensure `--coverage` flag used
|
|
||||||
- Missing library: Verify library name is correct
|
|
||||||
- Coverage tool not configured: Check test config for coverage setup
|
|
||||||
|
|
||||||
## References
|
|
||||||
- docs/guidelines/testing.md
|
|
||||||
- CLAUDE.md Testing Framework section
|
|
||||||
- Vitest coverage: https://vitest.dev/guide/coverage
|
|
||||||
- Jest coverage: https://jestjs.io/docs/configuration#collectcoverage-boolean
|
|
||||||
188
.claude/commands/quality.md
Normal file
188
.claude/commands/quality.md
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
---
|
||||||
|
allowed-tools: Read, Write, Edit, Bash, Grep, Glob
|
||||||
|
argument-hint: bundle | coverage [library-name] | --all
|
||||||
|
description: Analyze code quality: bundle sizes, test coverage, with optimization recommendations
|
||||||
|
---
|
||||||
|
|
||||||
|
# /quality - Code Quality Analysis
|
||||||
|
|
||||||
|
Comprehensive quality analysis including bundle sizes and test coverage.
|
||||||
|
|
||||||
|
## Subcommands
|
||||||
|
|
||||||
|
- `bundle` - Analyze production bundle sizes
|
||||||
|
- `coverage [library-name]` - Test coverage analysis
|
||||||
|
- No argument - Run both analyses
|
||||||
|
- `[library-name]` - Coverage for specific library
|
||||||
|
|
||||||
|
## Bundle Analysis
|
||||||
|
|
||||||
|
### 1. Run Production Build
|
||||||
|
```bash
|
||||||
|
# Clean previous build
|
||||||
|
rm -rf dist/
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
npm run build-prod
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Analyze Bundle Output
|
||||||
|
```bash
|
||||||
|
# List bundle files with sizes
|
||||||
|
ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'
|
||||||
|
|
||||||
|
# Get total bundle size
|
||||||
|
du -sh dist/apps/isa-app/browser/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Identify Large Files
|
||||||
|
Parse build output and identify:
|
||||||
|
- Main bundle size
|
||||||
|
- Lazy-loaded chunk sizes
|
||||||
|
- Vendor chunks
|
||||||
|
- Files exceeding thresholds:
|
||||||
|
- **Warning**: > 2MB
|
||||||
|
- **Error**: > 5MB
|
||||||
|
|
||||||
|
### 4. Analyze Dependencies
|
||||||
|
```bash
|
||||||
|
# Check for duplicate dependencies
|
||||||
|
npm ls --depth=0 | grep -E "UNMET|deduped"
|
||||||
|
|
||||||
|
# Show largest node_modules packages
|
||||||
|
du -sh node_modules/* | sort -rh | head -20
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. Source Map Analysis (Optional)
|
||||||
|
```bash
|
||||||
|
# Install source-map-explorer if needed
|
||||||
|
npm install -g source-map-explorer
|
||||||
|
|
||||||
|
# Analyze main bundle
|
||||||
|
source-map-explorer dist/apps/isa-app/browser/main.*.js
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Bundle Recommendations
|
||||||
|
|
||||||
|
**If bundle > 2MB:**
|
||||||
|
- Identify heavy dependencies to replace or remove
|
||||||
|
- Suggest lazy loading opportunities
|
||||||
|
- Check for unused imports
|
||||||
|
|
||||||
|
**Code Splitting Opportunities:**
|
||||||
|
- Large feature modules that could be lazy-loaded
|
||||||
|
- Heavy libraries that could be dynamically imported
|
||||||
|
|
||||||
|
**Dependency Optimization:**
|
||||||
|
- Replace large libraries with smaller alternatives
|
||||||
|
- Remove unused dependencies
|
||||||
|
- Use tree-shakeable imports
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Coverage Analysis
|
||||||
|
|
||||||
|
### 1. Run Coverage Analysis
|
||||||
|
```bash
|
||||||
|
# Single library
|
||||||
|
npx nx test [library-name] --skip-nx-cache --coverage
|
||||||
|
|
||||||
|
# All libraries (if no library specified)
|
||||||
|
npm run ci # Runs all tests with coverage
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Parse Coverage Report
|
||||||
|
Coverage output in: `coverage/libs/[domain]/[layer]/[name]/`
|
||||||
|
|
||||||
|
Extract metrics:
|
||||||
|
- **Line coverage**: % of executable lines tested
|
||||||
|
- **Branch coverage**: % of conditional branches tested
|
||||||
|
- **Function coverage**: % of functions called in tests
|
||||||
|
- **Statement coverage**: % of statements executed
|
||||||
|
|
||||||
|
### 3. Identify Uncovered Code
|
||||||
|
Parse coverage report to find:
|
||||||
|
- **Uncovered files**: Files with 0% coverage
|
||||||
|
- **Partially covered files**: < 80% coverage
|
||||||
|
- **Uncovered lines**: Specific line numbers not tested
|
||||||
|
- **Uncovered branches**: Conditional paths not tested
|
||||||
|
|
||||||
|
### 4. Categorize Coverage Gaps
|
||||||
|
|
||||||
|
**Critical (High Risk):**
|
||||||
|
- Service methods handling business logic
|
||||||
|
- Data transformation functions
|
||||||
|
- Error handling code paths
|
||||||
|
- Security-related functions
|
||||||
|
- State management store actions
|
||||||
|
|
||||||
|
**Important (Medium Risk):**
|
||||||
|
- Component public methods
|
||||||
|
- Utility functions
|
||||||
|
- Validators and guards
|
||||||
|
|
||||||
|
**Low Priority:**
|
||||||
|
- Getters/setters
|
||||||
|
- Simple property assignments
|
||||||
|
|
||||||
|
### 5. Generate Recommendations
|
||||||
|
|
||||||
|
For each coverage gap provide:
|
||||||
|
- **File and line numbers**
|
||||||
|
- **Risk level** (Critical/Important/Low)
|
||||||
|
- **Suggested test type** (unit/integration)
|
||||||
|
- **Test approach** (example test scenario)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Output Formats
|
||||||
|
|
||||||
|
### Bundle Report
|
||||||
|
```
|
||||||
|
Bundle Analysis Report
|
||||||
|
======================
|
||||||
|
|
||||||
|
Total Size: X.XX MB [STATUS]
|
||||||
|
Main Bundle: X.XX MB
|
||||||
|
Largest Chunks:
|
||||||
|
- chunk-name.js: X.XX MB
|
||||||
|
|
||||||
|
Largest Dependencies:
|
||||||
|
1. dependency-name: X.XX MB
|
||||||
|
|
||||||
|
Recommendations:
|
||||||
|
- [Prioritized action items]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Coverage Report
|
||||||
|
```
|
||||||
|
Coverage Summary for [library-name]
|
||||||
|
====================================
|
||||||
|
|
||||||
|
Line Coverage: XX.X% (XXX/XXX lines)
|
||||||
|
Branch Coverage: XX.X% (XXX/XXX branches)
|
||||||
|
Function Coverage: XX.X% (XXX/XXX functions)
|
||||||
|
|
||||||
|
Target: 80% (Recommended minimum)
|
||||||
|
Status: [Met/Below Target/Critical]
|
||||||
|
|
||||||
|
Files Needing Attention:
|
||||||
|
[Categorized list with priorities]
|
||||||
|
|
||||||
|
Top Priority Tests to Add:
|
||||||
|
[Prioritized recommendations]
|
||||||
|
```
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
- **Build failures**: Show error and suggest fixes
|
||||||
|
- **Missing tools**: Offer to install (source-map-explorer)
|
||||||
|
- **No coverage data**: Ensure `--coverage` flag used
|
||||||
|
- **Missing library**: Verify library name is correct
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- CLAUDE.md Build Configuration section
|
||||||
|
- docs/guidelines/testing.md
|
||||||
|
- Angular build optimization: https://angular.dev/tools/cli/build
|
||||||
|
- Vitest coverage: https://vitest.dev/guide/coverage
|
||||||
Reference in New Issue
Block a user