Angular Testing Course

This project demonstrates a comprehensive approach to testing Angular applications while improving code quality and maintaining consistent commit standards.

Overview

The Angular Testing Course repository showcases best practices for:

• Unit testing services and components.
• Integrating Jest as the primary testing framework.
• Ensuring code quality through linting and formatting tools.
• Enforcing commit message standards using Git hooks.

---

Test report

Run npm run test:coverage

• Console

• HTML report

---

Features

1. Testing Framework: Jest

• Replaces the default Angular testing setup with Jest, a faster and more flexible JavaScript testing framework.
• Supports features like snapshot testing, powerful mocking, and easy integration with TypeScript.

2. Linting and Formatting

• Utilizes ESLint for linting.
• Integrates Prettier to ensure consistent code formatting.
• Adds custom ESLint plugins:
  • eslint-plugin-simple-import-sort: Automatically sorts imports.
  • eslint-plugin-unused-imports: Identifies and removes unused imports.

3. Commit Standards

• Enforces commit message conventions using Commitlint.
• Configured with the Conventional Commits standard via @commitlint/config-conventional.
• Git hooks are managed with Husky, ensuring linting, formatting, and commit validation before each push.

---

Setup

Install Dependencies

npm install

Start Development Server

ng serve

---

Scripts

Testing

• Run Unit Tests:

  npm test

• Run Tests in Watch Mode:

  npm run test:watch

• Run Tests in CI Mode:

  npm run test:ci

Code Quality

• Lint Code:

  npm run lint

• Format Code:

  npm run format

Husky and Commitlint

• Enable Husky:

  npm run enabled-husky

• Prepare Commit Hooks:

  npm run prepare

---

Testing Libraries

1. Jest:

• Fast and efficient testing framework with an Angular preset for seamless integration.
  • Packages Installed:
    • jest
    • jest-preset-angular
    • @types/jest

2. Angular Testing Tools:

• Supports unit tests with Angular's testing modules and Karma for legacy compatibility.
  • Packages Installed:
    • @angular-devkit/build-angular
    • @angular/cli

---

Quality and Standards Tools

1. Linting and Formatting

• ESLint:
  • Core linter for detecting issues in TypeScript and JavaScript files.
  • Custom plugins:
    • eslint-config-prettier: Prevents Prettier and ESLint from conflicting.
    • eslint-plugin-prettier: Integrates Prettier rules into ESLint.
    • eslint-plugin-simple-import-sort: Automatically organizes imports.
    • eslint-plugin-unused-imports: Removes unused imports.
• Prettier:
  • Enforces a consistent code style across the project.

2. Commit Standards

• Husky:
  • Configures Git hooks to run linting, formatting, and commit validation tasks.
• Commitlint:
  • Enforces Conventional Commits to maintain clean and readable commit history.
  • Configuration:
    • @commitlint/cli
    • @commitlint/config-conventional
• Lint-staged:
  • Runs linting and formatting checks only on staged files before commits.

---

Resources

• Angular Testing Guide
• Jest Documentation
• ESLint Documentation
• Prettier Documentation
• Commitlint Documentation
• Husky Documentation

---

License

This project is licensed under the MIT License. See the LICENSE file for details.