Docs
20.5-Code-Quality-Coverage
20.5 Code Quality & Coverage
Overview
Code quality and test coverage are essential metrics for maintaining healthy, maintainable codebases. This section covers static analysis, linting, coverage measurement, and quality gates.
The Quality Triangle
┌─────────────────┐
│ Code Quality │
│ Triangle │
└────────┬────────┘
│
┌──────────────┼──────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Static │ │ Testing │ │ Runtime │
│ Analysis │ │ Coverage │ │ Monitor │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
┌────────┴────────┐ │ ┌────────┴────────┐
│ • Linting │ │ │ • Error Track │
│ • Type Check │ │ │ • Performance │
│ • Complexity │ │ │ • Usage Metrics │
└─────────────────┘ │ └─────────────────┘
│
┌────────────┴────────────┐
│ • Line Coverage │
│ • Branch Coverage │
│ • Function Coverage │
│ • Statement Coverage │
└─────────────────────────┘
Coverage Types
Coverage Metrics Explained
┌────────────────────────────────────────────────────────────────────┐
│ Coverage Metrics │
├───────────────┬─────────────────────┬──────────────────────────────┤
│ Metric │ What It Measures │ Example │
├───────────────┼─────────────────────┼──────────────────────────────┤
│ Line │ Lines executed │ 80/100 lines = 80% │
│ Statement │ Statements run │ Finer than line (multi-line) │
│ Branch │ Decision paths │ Both if/else tested │
│ Function │ Functions called │ All functions invoked │
│ Condition │ Boolean conditions │ Each && || operand tested │
└───────────────┴─────────────────────┴──────────────────────────────┘
Coverage Visualization
function calculateDiscount(price, memberLevel) {
let discount = 0; // Line 1: ✓ Covered
if (price > 100) {
// Line 2: Branch A ✓
if (memberLevel === 'gold') {
// Line 3: Branch B1 ✓
discount = 0.2; // Line 4: ✓ Covered
} else if (memberLevel === 'silver') {
// Line 5: Branch B2 ✗
discount = 0.15; // Line 6: ✗ NOT Covered
} else {
// Line 7: Branch B3 ✗
discount = 0.1; // Line 8: ✗ NOT Covered
}
} // Line 9: Branch A-else ✓
return price * (1 - discount); // Line 10: ✓ Covered
}
// Test only covers: gold member with price > 100
// Missing: silver, regular members, price <= 100
Coverage Report:
┌──────────────────────────────────────────────────────────────┐
│ │
│ calculateDiscount.js │
│ │
│ Statements: ████████████░░░░░░░░ 60% │
│ Branches: ██████░░░░░░░░░░░░░░ 33% │
│ Functions: ████████████████████ 100% │
│ Lines: ████████████░░░░░░░░ 60% │
│ │
│ Uncovered Lines: 6, 8 │
│ Uncovered Branches: 5 → 6, 7 → 8 │
│ │
└──────────────────────────────────────────────────────────────┘
ESLint Configuration
Recommended Setup
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
extends: ['eslint:recommended'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
// Possible Errors
'no-console': 'warn',
'no-debugger': 'error',
'no-duplicate-case': 'error',
'no-empty': 'error',
'no-extra-semi': 'error',
// Best Practices
curly: ['error', 'all'],
eqeqeq: ['error', 'always'],
'no-eval': 'error',
'no-implied-eval': 'error',
'no-return-await': 'error',
// Variables
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'no-use-before-define': 'error',
// Stylistic
indent: ['error', 4],
quotes: ['error', 'single'],
semi: ['error', 'always'],
'comma-dangle': ['error', 'never'],
// ES6
'prefer-const': 'error',
'prefer-arrow-callback': 'error',
'no-var': 'error',
},
};
ESLint Rule Categories
┌───────────────────────────────────────────────────────────────────┐
│ ESLint Rule Categories │
├────────────────────┬──────────────────────────────────────────────┤
│ Category │ Examples │
├────────────────────┼──────────────────────────────────────────────┤
│ Possible Errors │ no-dupe-args, no-unreachable, valid-typeof │
│ Best Practices │ eqeqeq, no-eval, no-multi-spaces │
│ Variables │ no-unused-vars, no-shadow, no-undef │
│ Stylistic Issues │ indent, quotes, semi, comma-spacing │
│ ECMAScript 6 │ prefer-const, no-var, arrow-spacing │
│ Deprecated │ no-native-reassign → no-global-assign │
└────────────────────┴──────────────────────────────────────────────┘
Prettier Integration
Prettier + ESLint Configuration
// .prettierrc.js
module.exports = {
printWidth: 80,
tabWidth: 4,
useTabs: false,
semi: true,
singleQuote: true,
quoteProps: 'as-needed',
trailingComma: 'none',
bracketSpacing: true,
arrowParens: 'always',
endOfLine: 'lf',
};
// .eslintrc.js - Add Prettier
module.exports = {
extends: [
'eslint:recommended',
'prettier', // Disables conflicting rules
],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error',
},
};
Jest Coverage Configuration
Setting Up Coverage
// jest.config.js
module.exports = {
collectCoverage: true,
coverageDirectory: 'coverage',
coverageReporters: [
'text', // Console output
'text-summary', // Summary in console
'lcov', // HTML report + lcov.info
'json', // JSON report
'clover', // Clover XML
],
collectCoverageFrom: [
'src/**/*.js',
'!src/**/*.test.js',
'!src/**/*.spec.js',
'!src/**/index.js',
'!src/**/__mocks__/**',
],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
'./src/critical/**/*.js': {
branches: 100,
functions: 100,
lines: 100,
statements: 100,
},
},
coveragePathIgnorePatterns: ['/node_modules/', '/vendor/'],
};
Coverage Report Example
┌─────────────────────────────────────────────────────────────────────────────┐
│ Coverage Summary │
├──────────────────────┬────────┬────────┬────────┬────────┬─────────────────┤
│ File │ % Stmts │ % Branch │ % Funcs │ % Lines │ Uncovered │
├──────────────────────┼──────────┼──────────┼─────────┼─────────┼─────────────┤
│ All files │ 85.71 │ 75.00 │ 100.00 │ 85.71 │ │
│ src/ │ 85.71 │ 75.00 │ 100.00 │ 85.71 │ │
│ calculator.js │ 100.00 │ 100.00 │ 100.00 │ 100.00 │ │
│ validator.js │ 71.43 │ 50.00 │ 100.00 │ 71.43 │ 15,22 │
│ utils.js │ 80.00 │ 66.67 │ 100.00 │ 80.00 │ 28 │
└──────────────────────┴──────────┴──────────┴─────────┴─────────┴─────────────┘
Code Complexity Metrics
Cyclomatic Complexity
┌────────────────────────────────────────────────────────────────────┐
│ Cyclomatic Complexity │
├────────────────────────────────────────────────────────────────────┤
│ │
│ Complexity = Edges - Nodes + 2 │
│ │
│ Or simply: │
│ Complexity = 1 + (number of decision points) │
│ │
│ Decision points: if, else if, for, while, &&, ||, ?, catch │
│ │
├────────────────────────────────────────────────────────────────────┤
│ Complexity Score │ Risk Level │ Recommendation │
├────────────────────┼───────────────┼───────────────────────────────┤
│ 1-4 │ Low │ ✓ Simple, well-testable │
│ 5-7 │ Moderate │ ~ Consider simplifying │
│ 8-10 │ High │ ⚠ Needs refactoring │
│ 11+ │ Very High │ ✗ High risk, split function │
└────────────────────┴───────────────┴───────────────────────────────┘
Complexity Example
// Complexity: 7 (High - needs refactoring)
function processOrder(order) {
if (!order) return null; // +1
if (!order.items || order.items.length === 0) {
// +1 +1 (||)
return { error: 'No items' };
}
let total = 0;
for (const item of order.items) {
// +1
if (item.quantity > 0 && item.price > 0) {
// +1 +1 (&&)
total += item.quantity * item.price;
}
}
return { total, itemCount: order.items.length };
}
// Refactored: Split into smaller functions
function validateOrder(order) {
// Complexity: 2
if (!order) return { valid: false, error: 'No order' };
if (!order.items?.length) return { valid: false, error: 'No items' };
return { valid: true };
}
function calculateTotal(items) {
// Complexity: 2
return items.reduce((sum, item) => {
const validItem = item.quantity > 0 && item.price > 0;
return sum + (validItem ? item.quantity * item.price : 0);
}, 0);
}
function processOrderRefactored(order) {
// Complexity: 2
const validation = validateOrder(order);
if (!validation.valid) return { error: validation.error };
return {
total: calculateTotal(order.items),
itemCount: order.items.length,
};
}
Quality Gates
CI/CD Quality Gate Configuration
# .github/workflows/quality.yml
name: Quality Gate
on: [push, pull_request]
jobs:
quality:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install Dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Type Check
run: npm run typecheck
- name: Unit Tests
run: npm run test:coverage
- name: Coverage Check
run: |
coverage=$(cat coverage/coverage-summary.json | jq '.total.lines.pct')
if (( $(echo "$coverage < 80" | bc -l) )); then
echo "Coverage $coverage% is below 80% threshold"
exit 1
fi
- name: Complexity Check
run: npm run complexity -- --max 10
- name: Security Audit
run: npm audit --production
Quality Gate Thresholds
┌────────────────────────────────────────────────────────────────────┐
│ Quality Gate Thresholds │
├──────────────────────┬─────────────────────────────────────────────┤
│ Metric │ Threshold │
├──────────────────────┼─────────────────────────────────────────────┤
│ Code Coverage │ ≥ 80% (lines, branches, functions) │
│ Critical Coverage │ 100% for payment, security modules │
│ Cyclomatic Complexity│ ≤ 10 per function │
│ Cognitive Complexity │ ≤ 15 per function │
│ Duplicate Code │ ≤ 3% of codebase │
│ Technical Debt Ratio │ ≤ 5% │
│ Security Vulns │ 0 high/critical │
│ Lint Errors │ 0 │
└──────────────────────┴─────────────────────────────────────────────┘
Static Analysis Tools
Tool Comparison
┌────────────────────────────────────────────────────────────────────────────┐
│ Static Analysis Tools │
├────────────────┬────────────────────────────────────────────────────────────┤
│ Tool │ Purpose │
├────────────────┼────────────────────────────────────────────────────────────┤
│ ESLint │ Code style, potential errors, best practices │
│ Prettier │ Code formatting, consistent style │
│ TypeScript │ Type checking, catch type errors at compile time │
│ SonarQube │ Comprehensive quality (complexity, duplication, security) │
│ Husky │ Git hooks (pre-commit, pre-push checks) │
│ lint-staged │ Run linters on staged files only │
│ commitlint │ Enforce commit message conventions │
│ depcheck │ Find unused/missing dependencies │
│ npm audit │ Security vulnerability scanning │
│ Snyk │ Deep security analysis │
└────────────────┴────────────────────────────────────────────────────────────┘
Pre-commit Hooks
Husky + lint-staged Setup
// package.json
{
"scripts": {
"prepare": "husky install",
"lint": "eslint src/**/*.js",
"format": "prettier --write src/**/*.js",
"test": "jest",
"test:coverage": "jest --coverage"
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
],
"*.{json,md}": [
"prettier --write"
]
}
}
// .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
// .husky/pre-push
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run test:coverage
Pre-commit Flow
┌─────────────────────────────────────────────────────────────────────┐
│ Pre-commit Hook Flow │
└────────────────────────────────┬────────────────────────────────────┘
│
▼
┌───────────────────────┐
│ git commit -m "" │
└───────────┬───────────┘
│
▼
┌─────────────────────────────────┐
│ Husky intercepts commit │
└───────────────┬─────────────────┘
│
▼
┌─────────────────────────────────┐
│ lint-staged runs on │
│ staged files only │
└───────────────┬─────────────────┘
│
┌─────────────────────┼─────────────────────┐
│ │ │
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ ESLint Fix │ │ Prettier │ │ Jest (fast) │
└───────┬───────┘ └───────┬───────┘ └───────┬───────┘
│ │ │
└─────────────────┬─┴───────────────────┘
│
▼
┌───────────────────┐
┌─────│ All Passed? │─────┐
│ └───────────────────┘ │
│ Yes │ No
▼ ▼
┌───────────────────┐ ┌───────────────────┐
│ Commit Succeeds │ │ Commit Blocked │
└───────────────────┘ │ Fix Issues First │
└───────────────────┘
Code Metrics Dashboard
Tracking Quality Over Time
// Simple quality metrics tracker
class QualityDashboard {
constructor() {
this.history = [];
}
recordSnapshot(metrics) {
this.history.push({
timestamp: new Date().toISOString(),
...metrics,
});
}
getTrend(metric) {
const values = this.history.map((h) => h[metric]).filter((v) => v != null);
if (values.length < 2) return 'stable';
const recent = values.slice(-5);
const avg = recent.reduce((a, b) => a + b, 0) / recent.length;
const current = values[values.length - 1];
if (current > avg * 1.05) return 'improving';
if (current < avg * 0.95) return 'declining';
return 'stable';
}
generateReport() {
const latest = this.history[this.history.length - 1];
return {
snapshot: latest,
trends: {
coverage: this.getTrend('coverage'),
complexity: this.getTrend('complexity'),
issues: this.getTrend('issues'),
},
};
}
}
Best Practices
Coverage Best Practices
┌────────────────────────────────────────────────────────────────────┐
│ Coverage Best Practices │
├────────────────────────────────────────────────────────────────────┤
│ │
│ ✓ DO: │
│ • Set meaningful thresholds (80% is a good baseline) │
│ • Require 100% coverage for critical code paths │
│ • Focus on branch coverage, not just line coverage │
│ • Review uncovered code - it might be dead code │
│ • Use coverage to find untested edge cases │
│ • Track coverage trends over time │
│ │
│ ✗ DON'T: │
│ • Chase 100% coverage blindly (diminishing returns) │
│ • Write tests just to increase coverage │
│ • Ignore coverage for "simple" code │
│ • Exclude files without justification │
│ • Treat coverage as the only quality metric │
│ • Measure coverage without running in CI │
│ │
├────────────────────────────────────────────────────────────────────┤
│ │
│ Remember: Coverage shows what's tested, not how well it's tested │
│ │
└────────────────────────────────────────────────────────────────────┘
Code Quality Checklist
Pre-Commit Checklist:
┌───────────────────────────────────────────────────────────────────┐
│ □ Code passes all linting rules │
│ □ Code is properly formatted │
│ □ All existing tests pass │
│ □ New code has appropriate test coverage │
│ □ No console.log or debugger statements │
│ □ No TODO comments without issue references │
│ □ Types are properly defined (if using TypeScript) │
│ □ Complex functions are documented │
│ □ No security vulnerabilities introduced │
│ □ Dependencies are up to date │
└───────────────────────────────────────────────────────────────────┘
Key Takeaways
- •Coverage is a guide, not a goal - Focus on meaningful tests
- •Automate quality checks - Use pre-commit hooks and CI/CD
- •Monitor complexity - Keep functions simple and focused
- •Use multiple metrics - Coverage, complexity, duplication, security
- •Track trends - Quality should improve or stay stable
- •Fail fast - Catch issues before they reach production
- •Balance strictness - Too strict blocks progress, too loose allows bugs
Files in This Section
- •
README.md- This documentation - •
examples.js- Coverage, linting, quality gate examples - •
exercises.js- Practice implementing quality tools