Angular Testing

Angular Testing - Quick Reference

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: angular, topic: testing for comprehensive documentation.

Standalone Component Testing

import { ComponentFixture, TestBed } from '@angular/core/testing';

describe('UserListComponent', () => {
  let component: UserListComponent;
  let fixture: ComponentFixture<UserListComponent>;
  let userService: jasmine.SpyObj<UserService>;

  beforeEach(async () => {
    const spy = jasmine.createSpyObj('UserService', ['getUsers']);

    await TestBed.configureTestingModule({
      imports: [UserListComponent],
      providers: [{ provide: UserService, useValue: spy }],
    }).compileComponents();

    fixture = TestBed.createComponent(UserListComponent);
    component = fixture.componentInstance;
    userService = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should load users', () => {
    const mockUsers = [{ id: 1, name: 'Alice' }];
    userService.getUsers.and.returnValue(of(mockUsers));

    component.loadUsers();

    expect(component.users()).toEqual(mockUsers);
    expect(component.count()).toBe(1);
  });
});

Service Testing

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';

describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        UserService,
        provideHttpClient(),
        provideHttpClientTesting(),
      ],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify(); // Ensure no outstanding requests
  });

  it('should fetch users', () => {
    const mockUsers = [{ id: 1, name: 'Alice' }];

    service.getUsers().subscribe(users => {
      expect(users).toEqual(mockUsers);
    });

    const req = httpMock.expectOne('/api/users');
    expect(req.request.method).toBe('GET');
    req.flush(mockUsers);
  });

  it('should handle 404', () => {
    service.getById(999).subscribe({
      error: (err) => expect(err.message).toContain('not found'),
    });

    const req = httpMock.expectOne('/api/users/999');
    req.flush(null, { status: 404, statusText: 'Not Found' });
  });
});

Testing Signals

it('should update signal value', () => {
  component.count.set(5);
  expect(component.count()).toBe(5);
  expect(component.double()).toBe(10);
});

it('should compute derived values', () => {
  component.users.set([{ id: 1, name: 'A' }, { id: 2, name: 'B' }]);
  expect(component.count()).toBe(2);
});

Testing Forms

it('should validate required fields', () => {
  component.form.controls.name.setValue('');
  expect(component.form.controls.name.hasError('required')).toBeTrue();

  component.form.controls.name.setValue('Alice');
  expect(component.form.controls.name.valid).toBeTrue();
});

it('should submit valid form', () => {
  component.form.patchValue({ name: 'Alice', email: 'alice@test.com' });
  expect(component.form.valid).toBeTrue();
});

Testing Guards

import { TestBed } from '@angular/core/testing';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

describe('authGuard', () => {
  it('should allow authenticated users', () => {
    TestBed.configureTestingModule({
      providers: [{ provide: AuthService, useValue: { isAuthenticated: () => true } }],
    });

    const result = TestBed.runInInjectionContext(() =>
      authGuard({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot)
    );

    expect(result).toBeTrue();
  });
});

Anti-Patterns