sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

🔧 chore: consolidate quality commands into single quality.md

Browse Source 
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:
Lorenz Hilpert
2025-12-02 12:56:20 +01:00
parent 5aded6ff8e
commit 46999cc04c
3 changed files with 188 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
.claude/commands/quality-bundle-analyze.md
View File

@@ -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)

201
.claude/commands/quality-coverage.md
View File

@@ -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
View 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