Testing Pipes, Guards, and Interceptors

Pipes are plain classes, so their transform method can be tested without TestBed at all.

Basic Pipe Test

import { FileSizePipe } from './file-size.pipe';

describe('FileSizePipe', () => {
  let pipe: FileSizePipe;

  beforeEach(() => {
    pipe = new FileSizePipe();
  });

  it('should format bytes', () => {
    expect(pipe.transform(0)).toBe('0 Bytes');
    expect(pipe.transform(1024)).toBe('1 KB');
    expect(pipe.transform(1048576)).toBe('1 MB');
    expect(pipe.transform(1073741824)).toBe('1 GB');
  });

  it('should handle decimal values', () => {
    expect(pipe.transform(1536)).toBe('1.5 KB');
  });
});

Testing Pipes with TestBed

For pipes that inject dependencies:

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

describe('CurrencyConvertPipe with TestBed', () => {
  let pipe: CurrencyConvertPipe;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        CurrencyConvertPipe,
        { provide: ExchangeRateService, useValue: mockRateService },
      ],
    });
    pipe = TestBed.inject(CurrencyConvertPipe);
  });

  it('should convert currency', () => {
    expect(pipe.transform(100, 'USD', 'EUR')).toBe(85);
  });
});

Guard functions and interceptors can be tested with fake route state and HttpTestingController.

Testing a Guard

import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { authGuard } from './auth.guard';
import { AuthService } from './auth.service';

describe('authGuard', () => {
  let authService: jasmine.SpyObj<AuthService>;
  let router: Router;

  beforeEach(() => {
    authService = jasmine.createSpyObj('AuthService', ['isLoggedIn']);

    TestBed.configureTestingModule({
      providers: [
        { provide: AuthService, useValue: authService },
      ],
    });

    router = TestBed.inject(Router);
  });

  it('should allow navigation when logged in', () => {
    authService.isLoggedIn = true;

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

    expect(result).toBe(true);
  });

  it('should redirect when not logged in', () => {
    authService.isLoggedIn = false;
    spyOn(router, 'createUrlTree').and.returnValue({} as any);

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

    expect(router.createUrlTree).toHaveBeenCalledWith(['/login'], {
      queryParams: { returnUrl: undefined },
    });
  });
});

Testing an Interceptor

import { TestBed } from '@angular/core/testing';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { authInterceptor } from './auth.interceptor';

describe('authInterceptor', () => {
  let http: HttpClient;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideHttpClient(withInterceptors([authInterceptor])),
        provideHttpClientTesting(),
      ],
    });

    http = TestBed.inject(HttpClient);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();
  });

  it('should add auth header', () => {
    http.get('/api/users').subscribe();

    const req = httpMock.expectOne('/api/users');
    expect(req.request.headers.get('Authorization')).toBe('Bearer token123');

    req.flush([]);
  });
});