800-angular-testing

Angular Testing Best Practices

• Component Testing Setup: Use TestBed to configure the test environment for components.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from '../hero.service';
import { of } from 'rxjs';

describe('HeroDetailComponent', () => {
  let component: HeroDetailComponent;
  let fixture: ComponentFixture<HeroDetailComponent>;
  let mockHeroService: jasmine.SpyObj<HeroService>;
  
  beforeEach(() => {
    mockHeroService = jasmine.createSpyObj(['getHero', 'updateHero']);
    
    TestBed.configureTestingModule({
      imports: [HeroDetailComponent], // For standalone component
      providers: [
        { provide: HeroService, useValue: mockHeroService }
      ]
    });
    
    fixture = TestBed.createComponent(HeroDetailComponent);
    component = fixture.componentInstance;
  });
  
  it('should create', () => {
    expect(component).toBeTruthy();
  });
  
  // More tests...
});

• Testing Signal Inputs: Test signal inputs by directly setting them.

it('should display hero name', () => {
  // Arrange
  const testHero = { id: 1, name: 'SuperDude' };
  component.hero.set(testHero); // Set the signal input directly
  
  // Act
  fixture.detectChanges();
  
  // Assert
  const nameElement = fixture.debugElement.query(By.css('h2'));
  expect(nameElement.nativeElement.textContent).toContain('SUPERDUDE');
});

• Testing Computed Values: Test computed values and their reactivity.

it('should compute full name correctly', () => {
  // Arrange
  component.firstName.set('John');
  component.lastName.set('Doe');
  
  // Assert
  expect(component.fullName()).toBe('John Doe');
  
  // Act - update a dependency
  component.firstName.set('Jane');
  
  // Assert - computed value should update
  expect(component.fullName()).toBe('Jane Doe');
});

• Testing Effects: Test that effects perform the expected actions when signals change.

it('should load user data when userId changes', fakeAsync(() => {
  // Arrange
  const testUser = { id: '123', name: 'Test User' };
  mockUserService.getUser.and.returnValue(Promise.resolve(testUser));
  
  // Act - trigger the effect by setting userId
  component.userId.set('123');
  tick(); // Process the async operation
  
  // Assert
  expect(mockUserService.getUser).toHaveBeenCalledWith('123');
  expect(component.user()).toEqual(testUser);
}));

• Testing Template Interaction: Test user interactions with the component.

it('should call save method when save button is clicked', () => {
  // Arrange
  spyOn(component, 'save');
  const testHero = { id: 1, name: 'SuperDude' };
  component.hero.set(testHero);
  fixture.detectChanges();
  
  // Act
  const saveButton = fixture.debugElement.query(By.css('button.save'));
  saveButton.triggerEventHandler('click', null);
  
  // Assert
  expect(component.save).toHaveBeenCalled();
});

• Testing Outputs: Test that outputs emit the expected values.

it('should emit heroChange when save is called', () => {
  // Arrange
  const testHero = { id: 1, name: 'SuperDude' };
  component.hero.set(testHero);
  let emittedHero: Hero | undefined;
  component.heroChange.subscribe((hero: Hero) => emittedHero = hero);
  
  // Act
  component.save();
  
  // Assert
  expect(emittedHero).toEqual(testHero);
});

• Testing Router Integration: Test components that interact with the router.

import { RouterTestingHarness } from '@angular/router/testing';

it('should load hero details based on route parameter', async () => {
  // Arrange
  const testHero = { id: 42, name: 'Test Hero' };
  mockHeroService.getHero.and.returnValue(of(testHero));
  
  // Create router testing harness
  const harness = await RouterTestingHarness.create();
  
  // Act - navigate to route with parameter
  await harness.navigateByUrl('/heroes/42');
  
  // Get the instantiated component
  const component = await harness.getComponentInstance<HeroDetailComponent>();
  
  // Assert
  expect(component.id()).toBe('42'); // Input binding should work
  expect(mockHeroService.getHero).toHaveBeenCalledWith(42);
  expect(component.hero()).toEqual(testHero);
});