congiuluc/testing-frontend-angular

Frontend Testing (Angular)

When to Use

• Testing Angular standalone components (rendering, interaction, accessibility)
• Testing services with HttpClient
• Testing pipes and directives
• Mocking HTTP calls with HttpTestingController
• Writing integration tests for pages/features
• Verifying reactive form validation and submission

Official Documentation

• Angular Testing Guide
• Jasmine
• Angular TestBed
• HttpTestingController

Core Rule

Every feature must have corresponding tests before it is considered complete.

Procedure

1. Follow Angular testing reference for patterns and conventions
2. Review component test sample
3. Use TestBed.configureTestingModule() for component setup
4. Use HttpTestingController for HTTP mocking — no real network calls
5. Query elements by accessible role/label — use fixture.nativeElement.querySelector
6. Test: rendering, interaction, accessibility, edge cases, error states
7. Verify tests are deterministic
8. Run ng test --no-watch --code-coverage locally before committing

Test Structure

tests/
  web-app.tests/
    components/          # Shared component tests
    features/            # Feature-specific tests
    services/            # Service tests
    pipes/               # Pipe tests
    setup.ts             # Test configuration

Naming Convention

• Test file: {component-name}.component.spec.ts
• Test suite: describe('{ComponentName}', () => { ... })
• Test case: it('should {expected behavior}', ...)

Key Patterns

• Component setup: TestBed.configureTestingModule({ imports: [ComponentUnderTest] })
• HTTP mocking: TestBed.inject(HttpTestingController)
• Detect changes: fixture.detectChanges()
• Query by role: fixture.nativeElement.querySelector('[role="button"]')
• Form testing: Set form values → call detectChanges() → assert state