Angular Testing Guide: Unit Tests with TestBed, Component Tests, and Playwright E2E

ng test                  <span class="hljs-comment"># Run unit tests (Karma, watch mode)
ng <span class="hljs-built_in">test --no-watch       <span class="hljs-comment"># Single run (CI)
ng <span class="hljs-built_in">test --code-coverage  <span class="hljs-comment"># With Istanbul coverage
ng e2e                   <span class="hljs-comment"># E2E tests (requires e2e setup)

// src/app/components/user-card/user-card.component.ts
@Component({
  selector: 'app-user-card',
  template: `
    <div class="user-card">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
      <button (click)="onDelete()">Delete</button>
    </div>
  `,
})
export class UserCardComponent {
  @Input() user!: { id: string; name: string; email: string };
  @Output() delete = new EventEmitter<string>();

  onDelete() {
    this.delete.emit(this.user.id);
  }
}

// src/app/components/user-card/user-card.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserCardComponent } from './user-card.component';

describe('UserCardComponent', () => {
  let component: UserCardComponent;
  let fixture: ComponentFixture<UserCardComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UserCardComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(UserCardComponent);
    component = fixture.componentInstance;
    
    // Set required input
    component.user = { id: '1', name: 'Alice', email: 'alice@example.com' };
    fixture.detectChanges();  // triggers ngOnInit and initial rendering
  });

  it('displays the user name', () => {
    const h2 = fixture.nativeElement.querySelector('h2');
    expect(h2.textContent).toBe('Alice');
  });

  it('displays the user email', () => {
    const p = fixture.nativeElement.querySelector('p');
    expect(p.textContent).toBe('alice@example.com');
  });

  it('emits delete event with user id on button click', () => {
    const deleteSpy = jasmine.createSpy('delete');
    component.delete.subscribe(deleteSpy);

    fixture.nativeElement.querySelector('button').click();
    fixture.detectChanges();

    expect(deleteSpy).toHaveBeenCalledWith('1');
  });
});

// Standalone component (no NgModule)
@Component({
  standalone: true,
  selector: 'app-badge',
  imports: [CommonModule],
  template: `<span [class]="'badge badge--' + variant">{{ label }}</span>`,
})
export class BadgeComponent {
  @Input() label = '';
  @Input() variant: 'success' | 'warning' | 'error' = 'success';
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [BadgeComponent],  // Import, not declare standalone components
  }).compileComponents();
  
  // ... rest of setup
});

// src/app/services/user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }

  getUserById(id: string): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { UserService } from './user.service';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UserService],
    });

    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

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

  it('returns users from GET /api/users', () => {
    const mockUsers = [{ id: '1', name: 'Alice', email: 'alice@example.com' }];
    
    service.getUsers().subscribe(users => {
      expect(users).toEqual(mockUsers);
    });

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

  it('handles HTTP errors', () => {
    service.getUsers().subscribe({
      error: (error) => {
        expect(error.status).toBe(404);
      },
    });

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

import { fakeAsync, tick, flush } from '@angular/core/testing';

it('shows success message after 2 seconds', fakeAsync(() => {
  component.submitForm();
  
  // No observable yet — we're in fakeAsync
  expect(component.showSuccess).toBe(false);
  
  tick(2000);  // advance 2 seconds
  fixture.detectChanges();
  
  expect(component.showSuccess).toBe(true);
}));

it('debounces search input', fakeAsync(() => {
  component.searchTerm = 'angular';
  
  // Search is debounced by 300ms
  tick(299);
  expect(mockSearchService.search).not.toHaveBeenCalled();
  
  tick(1);  // total: 300ms
  expect(mockSearchService.search).toHaveBeenCalledWith('angular');
}));

it('resolves all pending timers', fakeAsync(() => {
  component.loadData();
  flush();  // resolves all timers
  fixture.detectChanges();
  expect(component.data).toBeTruthy();
}));

import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

describe('LoginComponent', () => {
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([
          { path: 'dashboard', component: DashboardComponent },
        ]),
      ],
      declarations: [LoginComponent],
    }).compileComponents();

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

  it('navigates to dashboard after successful login', fakeAsync(async () => {
    const navigateSpy = spyOn(router, 'navigate');
    
    component.email = 'alice@example.com';
    component.password = 'password123';
    
    await component.onSubmit();
    
    expect(navigateSpy).toHaveBeenCalledWith(['/dashboard']);
  }));
});

npm install --save-dev @playwright/test
npx playwright install

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:4200',
  },
  webServer: {
    command: 'ng serve',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
});

// e2e/users.spec.ts
import { test, expect } from '@playwright/test';

test('displays user list on the users page', async ({ page }) => {
  await page.goto('/users');
  
  await expect(page.getByTestId('user-list')).toBeVisible();
  await expect(page.getByTestId('user-card')).toHaveCount(3);  // seeded data
});

test('creates a new user', async ({ page }) => {
  await page.goto('/users');
  
  await page.getByTestId('create-user-btn').click();
  await page.getByLabel('Name').fill('Bob Smith');
  await page.getByLabel('Email').fill('bob@example.com');
  await page.getByTestId('submit-btn').click();
  
  await expect(page.getByText('Bob Smith')).toBeVisible();
});