Юнит-тестирование компонентов

Юнит-тестирование в Angular осуществляется с помощью Jasmine и Karma, интегрированных через Angular CLI. Тестирование компонентов обеспечивает проверку их логики и взаимодействий без запуска приложения целиком.

Создание тестового модуля

Каждый компонент в Angular имеет файл *.spec.ts. Для тестирования необходимо создать тестовый модуль через TestBed:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyComponent } from './my.component';

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

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

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

TestBed позволяет эмулировать Angular среду: модули, зависимости, шаблоны, что делает тесты изолированными и предсказуемыми.

Тестирование свойств и методов

Проверка методов компонента осуществляется напрямую:

it('should increment counter', () => {
  component.counter = 0;
  component.increment();
  expect(component.counter).toBe(1);
});

Для проверки реактивных форм и событий можно использовать fixture.debugElement:

import { By } from '@angular/platform-browser';

it('should update title on button click', () => {
  const button = fixture.debugElement.query(By.css('button'));
  button.triggerEventHandler('click', null);
  fixture.detectChanges();
  expect(component.title).toBe('Updated');
});

Тестирование шаблонов и анимаций

Angular позволяет проверять DOM-состояние после применения изменений:

it('should render title in h1', () => {
  component.title = 'Hello Angular';
  fixture.detectChanges();
  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h1')?.textContent).toContain('Hello Angular');
});

Для анимаций важно отключать их в тестовой среде, чтобы избежать асинхронных коллизий:

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

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

Это делает тесты детерминированными и ускоряет их выполнение.

Мокинг зависимостей

Сервисы и внешние зависимости рекомендуется подменять заглушками (spy objects) для изоляции тестов:

const mockService = jasmine.createSpyObj('DataService', ['getData']);
mockService.getData.and.returnValue(of([1,2,3]));

TestBed.configureTestingModule({
  declarations: [ MyComponent ],
  providers: [{ provide: DataService, useValue: mockService }]
});

Это позволяет тестировать компонент в контролируемой среде, без необходимости подключать реальные сервисы.

Временные функции анимаций и юнит-тестирование компонентов в Angular обеспечивают гибкость интерфейса и надёжность логики приложения, создавая основу для качественных, масштабируемых проектов.

Оглавление