Angular Testing Patterns

Angular Testing Patterns

Test Angular components, services, directives, and pipes with TestBed, ComponentFixture, fakeAsync, and service mocks

When to Use

• Writing unit tests for Angular components with shallow or deep rendering
• Mocking service dependencies in component and service tests
• Testing asynchronous code (HTTP, timers, observables) with fakeAsync + tick
• Using spectator to reduce TestBed boilerplate for component tests
• Testing standalone components without NgModule ceremony

Instructions

1. Use TestBed.configureTestingModule({ imports: [MyStandaloneComponent] }) for standalone components — import, not declare.
2. Mock services with { provide: MyService, useValue: mockService } in the providers array. Define mocks as jasmine.createSpyObj (Jasmine) or jest.fn() (Jest) objects.
3. Always call fixture.detectChanges() after setup and after state mutations to trigger change detection before asserting on the DOM.
4. Use fakeAsync + tick() for timer-based code. Use fakeAsync + flush() for promise-based code. Use fakeAsync + flushMicrotasks() for microtasks.
5. Query DOM elements with fixture.debugElement.query(By.css('selector')) or fixture.nativeElement.querySelector(). Prefer By.css — it returns a DebugElement with Angular context.
6. Test outputs by subscribing to the EventEmitter or signal output directly: component.myOutput.subscribe(spy).
7. For HTTP services, use HttpClientTestingModule and HttpTestingController to verify requests and flush mock responses.
8. Use the spectator library (@ngneat/spectator) to reduce boilerplate — it wraps TestBed and adds ergonomic query helpers.

// product-card.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { signal } from '@angular/core';
import { ProductCardComponent } from './product-card.component';
import { CartService } from '../cart.service';

describe('ProductCardComponent', () => {
  let component: ProductCardComponent;
  let fixture: ComponentFixture<ProductCardComponent>;
  let mockCartService: jasmine.SpyObj<CartService>;

  beforeEach(async () => {
    mockCartService = jasmine.createSpyObj('CartService', ['addItem']);

    await TestBed.configureTestingModule({
      imports: [ProductCardComponent], // standalone component
      providers: [{ provide: CartService, useValue: mockCartService }],
    }).compileComponents();

    fixture = TestBed.createComponent(ProductCardComponent);
    component = fixture.componentInstance;

    // Set required signal input
    fixture.componentRef.setInput('product', {
      id: '1',
      name: 'Widget',
      price: 9.99,
    });

    fixture.detectChanges();
  });

  it('should display the product name', () => {
    const heading = fixture.debugElement.query(By.css('h2'));
    expect(heading.nativeElement.textContent).toBe('Widget');
  });

  it('should emit addToCart when button clicked', () => {
    const addSpy = jasmine.createSpy();
    component.addToCart.subscribe(addSpy);

    fixture.debugElement.query(By.css('button')).nativeElement.click();
    expect(addSpy).toHaveBeenCalledWith({ id: '1', name: 'Widget', price: 9.99 });
  });
});

// product.service.spec.ts — HTTP service test
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { ProductService } from './product.service';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ProductService],
    });
    service = TestBed.inject(ProductService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => httpMock.verify()); // assert no pending requests

  it('should fetch products', () => {
    const mockProducts = [{ id: '1', name: 'Widget', price: 9.99 }];
    let result: Product[] | undefined;

    service.getProducts().subscribe((p) => (result = p));

    const req = httpMock.expectOne('/api/products');
    expect(req.request.method).toBe('GET');
    req.flush(mockProducts);

    expect(result).toEqual(mockProducts);
  });
});

// async test with fakeAsync
import { fakeAsync, tick } from '@angular/core/testing';

it('should debounce search input', fakeAsync(() => {
  component.searchControl.setValue('widget');
  tick(300); // advance timer by 300ms (debounce time)
  fixture.detectChanges();

  expect(mockSearchService.search).toHaveBeenCalledWith('widget');
}));

// spectator usage — reduces boilerplate significantly
import { createComponentFactory, Spectator } from '@ngneat/spectator';

describe('ProductCardComponent', () => {
  let spectator: Spectator<ProductCardComponent>;
  const createComponent = createComponentFactory({
    component: ProductCardComponent,
    mocks: [CartService],
  });

  beforeEach(() => {
    spectator = createComponent({ props: { product: mockProduct } });
  });

  it('shows product name', () => {
    expect(spectator.query('h2')).toHaveText('Widget');
  });

  it('calls addItem on click', () => {
    spectator.click('button');
    expect(spectator.inject(CartService).addItem).toHaveBeenCalled();
  });
});

Details

Setting signal inputs in tests: Signal inputs (input()) cannot be set directly via component.myInput = value because they are read-only signals. Use fixture.componentRef.setInput('inputName', value) instead — this is the supported API for setting signal inputs in tests.

compileComponents() requirement: In tests that use templateUrl or styleUrls, call await TestBed.configureTestingModule({...}).compileComponents() to compile the external resources asynchronously. For inline templates, it is not strictly required but harmless.

Testing OnPush components: OnPush components only update when inputs change, an async pipe resolves, or signals emit. In tests, fixture.detectChanges() triggers a change detection cycle. If you mutate state without changing a signal or input reference, the template won't update. Set signal values with .set() and call fixture.detectChanges() afterward.

Test isolation: Each TestBed.configureTestingModule call in beforeEach creates a fresh Angular testing environment. Avoid sharing mutable state across tests — reset spies in afterEach if reused.

Avoiding real HTTP calls: Always provide HttpClientTestingModule or mock the service. HttpTestingController.verify() in afterEach ensures no unexpected HTTP requests were made.

Signal stores in tests: Provide a test version of the store or override state with patchState if the store is provided in the component.

Source

https://angular.dev/guide/testing

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.