Code Quality

​

Overview

​

SonarCloud Integration

​

Configuration

<properties>
  <sonar.host.url>https://sonarcloud.io</sonar.host.url>
  <sonar.organization>raulherediahorcajo</sonar.organization>
  <sonar.projectKey>raulHerediaHorcajo_product-distribution</sonar.projectKey>
  <sonar.sources>src/main/</sonar.sources>
  <sonar.tests>src/test/</sonar.tests>
  <sonar.coverage.jacoco.xmlReportPaths>target/site/jacoco/jacoco.xml</sonar.coverage.jacoco.xmlReportPaths>
</properties>

​

Maven Plugin

<plugin>
  <groupId>org.sonarsource.scanner.maven</groupId>
  <artifactId>sonar-maven-plugin</artifactId>
  <version>5.5.0.6356</version>
</plugin>

​

Analysis Execution

mvn -B compile sonar:sonar

mvn -B clean verify sonar:sonar

​

Metrics Tracked

• Code Coverage: Percentage of code covered by tests
• Bugs: Potential runtime errors
• Vulnerabilities: Security issues
• Code Smells: Maintainability issues
• Duplications: Repeated code blocks
• Technical Debt: Estimated time to fix all issues

​

Code Coverage with JaCoCo

​

Maven Configuration

<plugin>
  <groupId>org.jacoco</groupId>
  <artifactId>jacoco-maven-plugin</artifactId>
  <version>0.8.12</version>
  <executions>
    <execution>
      <goals>
        <goal>prepare-agent</goal>
      </goals>
    </execution>
    <execution>
      <id>report</id>
      <goals>
        <goal>report</goal>
      </goals>
    </execution>
  </executions>
</plugin>

​

How It Works

1. prepare-agent: Instruments Java classes during test execution
2. report: Generates coverage reports in multiple formats
3. XML Report: Used by SonarCloud for coverage analysis
4. HTML Report: Human-readable coverage report

​

Report Location

backend/target/site/jacoco/
├── jacoco.xml          # XML format for SonarCloud
├── index.html          # HTML coverage report
└── jacoco.csv          # CSV format for analysis

​

Running Locally

cd backend
mvn clean verify

# View HTML report
open target/site/jacoco/index.html

​

Coverage Goals

• Minimum: 70% overall coverage
• Target: 80%+ for critical business logic
• Exclusions: DTOs, configuration classes, main methods

​

Frontend Code Quality

​

ESLint

• Based on Angular ESLint rules
• TypeScript ESLint parser (v8.46.4)
• Prettier integration via eslint-config-prettier

{
  "angular-eslint": "21.0.1",
  "eslint": "^9.39.1",
  "eslint-config-prettier": "^10.1.8",
  "typescript-eslint": "8.46.4"
}

cd frontend
npm run lint

• No unused variables
• Consistent naming conventions
• Proper TypeScript types
• Angular best practices

​

Prettier

{
  "prettier": "^3.7.3"
}

src/**/*.{ts,html,scss,json}

# Format all files
npm run format

# Check formatting without modifying
npm run format:check

​

Build Verification

• TypeScript compilation
• Template syntax
• Dependency resolution
• Production optimizations

npm run build

​

Quality Gates

​

PR Quality Gate

1. Frontend Checks
   • ESLint: No errors
   • Prettier: All files formatted
   • Build: Successful compilation
2. Backend Checks
   • Unit Tests: All passing
   • Integration Tests: All passing
   • SonarCloud: Quality gate passed
3. Data Checks
   • JSON Syntax: Valid
   • Structure: Correct files and naming
   • Versions: Consecutive numbering

​

SonarCloud Quality Gate

• Coverage: No decrease from baseline
• Duplications: < 3% on new code
• Maintainability Rating: A on new code
• Reliability Rating: A on new code
• Security Rating: A on new code

​

Setting Up SonarCloud

​

Initial Setup

1. Create SonarCloud Account
   • Visit sonarcloud.io
   • Sign in with GitHub
2. Create Organization
   • Click + → Create new organization
   • Link GitHub account
   • Choose organization name
3. Import Repository
   • Click + → Analyze new project
   • Select repository
   • Choose analysis method: GitHub Actions
4. Generate Token
   • Go to My Account → Security
   • Generate new token
   • Copy token value
5. Configure GitHub Secret
   • Go to GitHub repository → Settings → Secrets and variables → Actions
   • Click New repository secret
   • Name: SONAR_TOKEN
   • Value: Paste token

​

Update pom.xml

<properties>
  <sonar.organization>your-organization</sonar.organization>
  <sonar.projectKey>your-organization_your-repo</sonar.projectKey>
</properties>

​

Verify Setup

1. Push changes to trigger workflow
2. Check GitHub Actions for successful execution
3. Visit SonarCloud dashboard to view results

​

Code Quality Metrics

​

Backend (SonarCloud)

• Reliability: Bug count and severity
• Security: Vulnerability count and severity
• Maintainability: Code smells and technical debt
• Coverage: Test coverage percentage
• Duplications: Duplicated code percentage

​

Frontend (ESLint)

• Errors: Must be fixed before merge
• Warnings: Should be addressed
• Info: Suggestions for improvement

​

Local Development

​

Backend Quality Checks

cd backend

# Run tests with coverage
mvn clean verify

# View coverage report
open target/site/jacoco/index.html

# Run Sonar analysis locally (requires token)
export SONAR_TOKEN=your_token
mvn sonar:sonar

​

Frontend Quality Checks

cd frontend

# Install dependencies
npm ci

# Run linter
npm run lint

# Fix auto-fixable issues
npm run lint -- --fix

# Check formatting
npm run format:check

# Format all files
npm run format

# Build project
npm run build

​

Best Practices

​

Writing Quality Code

1. Follow SOLID Principles
   • Single Responsibility
   • Open/Closed
   • Liskov Substitution
   • Interface Segregation
   • Dependency Inversion
2. Write Tests First
   • TDD approach when possible
   • Cover edge cases
   • Mock external dependencies
3. Keep It Simple
   • Avoid complex conditionals
   • Extract methods for clarity
   • Use meaningful names
4. Document When Necessary
   • Public APIs
   • Complex algorithms
   • Business logic decisions

​

Maintaining Quality

1. Regular Code Reviews
   • Check SonarCloud results
   • Review test coverage
   • Verify naming conventions
2. Address Technical Debt
   • Prioritize high-severity issues
   • Refactor incrementally
   • Update dependencies regularly
3. Monitor Trends
   • Track coverage over time
   • Watch for increasing complexity
   • Identify problematic areas

​

Troubleshooting

​

SonarCloud Token Issues

• Verify SONAR_TOKEN secret is set correctly
• Check token hasn’t expired
• Ensure token has analysis permissions

​

Coverage Not Reported

• Verify JaCoCo plugin is configured
• Check jacoco.xml is generated in correct location
• Ensure sonar.coverage.jacoco.xmlReportPaths property is set
• Run mvn clean verify to regenerate reports

​

ESLint Errors

• Run npm run lint -- --fix to auto-fix
• Check ESLint configuration
• Update @angular-eslint if using new Angular features

​

Prettier Conflicts

• Ensure eslint-config-prettier is installed
• Add to ESLint extends: extends: ['prettier']
• Run Prettier after ESLint

​

Additional Resources

• SonarCloud Documentation
• JaCoCo Documentation
• ESLint Rules
• Prettier Options
• Angular Style Guide