testing-guidelines

Testing Guidelines

This document covers testing patterns and best practices for Angular 22+ development in Fundamental NGX.

Table of Contents

• Test Commands
• Test Writing Guidelines
• Testing Signal-Based Components
• Testing DI Patterns
• Testing Async Operations
• ESLint Compliance in Tests
• Common Validation Pitfalls

---

Test Commands

# Run all tests in a library
nx test <library>

# Run specific test file
nx run <library>:test --testfile=<filename>.spec.ts

# Examples
nx run cdk:test --testfile=line-clamp.directive.spec.ts
nx run core:test --testfile=button.component.spec.ts
nx run platform:test --testfile=table.component.spec.ts

# Watch mode (recommended during development)
nx test <library> --watch

# Run affected tests only
nx affected:test

# Lint specific library
nx run <library>:lint

---

Test Writing Guidelines

Focus on User Scenarios, Not Edge Cases

When writing tests, ask: "Can this actually happen in a real Angular application?"

✅ Write tests for

• User interactions (clicks, inputs, keyboard)
• Valid configuration options
• Component lifecycle (mount, update, unmount)
• Accessibility requirements
• Realistic error scenarios (unsupported enum values, optional services missing)

❌ Don't write tests for

• TypeScript-prevented scenarios (undefined for required parameters)
• Angular DI-prevented scenarios (missing required dependencies)
• Implementation details (internal signal updates, private methods)
• Impossible states (null values in non-nullable fields)

Example: Realistic vs Unrealistic Tests

// ✅ GOOD - Tests realistic user scenario
it('should fallback to cozy when unsupported density is provided', () => {
    const observer = new ContentDensityObserver(injector, {
        supportedContentDensity: [ContentDensityMode.COZY],
        defaultContentDensity: ContentDensityMode.COMPACT // User might try this
    });
    expect(observer.value).toBe(ContentDensityMode.COZY); // Fallback works
});

// ❌ BAD - Tests impossible scenario (TypeScript prevents this)
it('should handle undefined defaultContentDensity', () => {
    const observer = new ContentDensityObserver(injector, {
        defaultContentDensity: undefined // TypeScript won't allow this!
    });
    expect(observer.value).toBe(ContentDensityMode.COZY);
});