Интеграционное тестирование

Интеграционное тестирование проверяет взаимодействие компонентов и сервисов в рамках приложения. В Angular для этих целей используется TestBed, предоставляющий инфраструктуру для создания тестового окружения.

Настройка TestBed

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';

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

TestBed.configureTestingModule позволяет объявить компоненты, директивы, пайпы и подключить необходимые модули. После компиляции компонентов создаются экземпляры для тестирования.

Создание компонента в тесте

let fixture: ComponentFixture<AppComponent>;
let component: AppComponent;

beforeEach(() => {
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

Метод detectChanges() инициирует жизненный цикл компонента, вызывая ngOnInit, ngAfterViewInit и другие хуки, что важно для интеграционных тестов.

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

Интеграционные тесты фокусируются на взаимодействии компонентов и сервисов. Примеры проверок:

  • Вызов методов сервисов и обработка ответов С помощью HttpTestingController можно симулировать HTTP-запросы:

    const req = httpMock.expectOne('api/data');
req.flush({ value: 42 });
expect(component.data.value).toBe(42);

  • Проверка DOM после изменений состояния

    component.show = true;
fixture.detectChanges();
const element = fixture.nativeElement.querySelector('.panel');
expect(element).toBeTruthy();

  • Тестирование событий

    const button = fixture.nativeElement.querySelector('button');
button.click();
fixture.detectChanges();
expect(component.clicked).toBeTrue();

Практические рекомендации

  • Использовать async и fakeAsync для управления асинхронными операциями.
  • Разделять интеграционные тесты по функциональным блокам для удобства поддержки.
  • Минимизировать использование реальных HTTP-запросов, отдавая предпочтение мокам (HttpClientTestingModule).

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

Оглавление