Angular, популярная платформа JavaScript, предоставляет надежные возможности тестирования, позволяющие гарантировать качество и надежность ваших приложений. Когда дело доходит до модульного тестирования компонентов Angular, включающих HTTP-запросы, важно имитировать эти запросы, чтобы изолировать компонент и тестировать его изолированно. В этой статье мы рассмотрим различные методы имитации HTTP-запросов с использованием Jasmine, мощной среды тестирования, обычно используемой с Angular. Мы углубимся в примеры кода и объясним каждый метод в разговорной форме, чтобы помочь вам стать мастером модульного тестирования Angular.

Метод 1: шпионим за HttpClient
Простой способ имитировать HTTP-запрос — шпионить за сервисом Angular HttpClient. Используя функцию jasmine.createSpyObj, мы можем создать шпионский объект для службы HttpClientи имитировать его методы, такие как get, postи т. д. Таким образом, мы можем контролировать поведение HTTP-запроса и возвращать специальные ответы для целей тестирования.

// Create a spy object for HttpClient
const httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
// Mock the HTTP request
httpClientSpy.get.and.returnValue(of({ data: 'mocked response' }));
// Inject the spy object into your component or service
const myService = new MyService(httpClientSpy);
// Test the component or service
myService.getData().subscribe(response => {
  expect(response.data).toBe('mocked response');
});

Метод 2: используйте HttpTestingController
Angular предоставляет класс HttpTestingControllerдля имитации HTTP-запросов и обработки их ответов. Вставив HttpTestingControllerв свой тестовый файл, вы можете перехватывать HTTP-запросы, определять ожидаемые ответы и проверять, что запросы были выполнены должным образом.

// Inject HttpTestingController
let httpTestingController: HttpTestingController;
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    providers: [MyService],
  });
  httpTestingController = TestBed.inject(HttpTestingController);
});
// Mock the HTTP request
const requestData = { id: 1 };
myService.getData(requestData).subscribe(response => {
  expect(response.data).toBe('mocked response');
});
const req = httpTestingController.expectOne('/api/data/1');
expect(req.request.method).toBe('GET');
req.flush({ data: 'mocked response' });
httpTestingController.verify();

Метод 3. Создайте тестовый перехватчик HTTP.
Еще один мощный метод имитации HTTP-запросов в Angular — создание тестового перехватчика HTTP. Такой подход позволяет перехватывать исходящие запросы, изменять их и возвращать индивидуальные ответы. Используя этот метод, вы можете легко имитировать HTTP-запросы в нескольких тестах, не изменяя существующую кодовую базу.

// Create a test HTTP interceptor
@Injectable()
export class TestInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.url === '/api/data') {
      return of(new HttpResponse({ body: { data: 'mocked response' } }));
    }
    return next.handle(request);
  }
}
// Register the interceptor in your test module
TestBed.configureTestingModule({
  imports: [HttpClientTestingModule],
  providers: [
    MyService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TestInterceptor,
      multi: true,
    },
  ],
});
// Test the component or service
myService.getData().subscribe(response => {
  expect(response.data).toBe('mocked response');
});

В этой статье мы рассмотрели три эффективных метода имитации HTTP-запросов в модульных тестах Angular с использованием Jasmine. Следя за HttpClient, используя HttpTestingControllerили создавая собственный тестовый HTTP-перехватчик, вы можете легко имитировать HTTP-запросы и тестировать свои компоненты Angular изолированно. Использование этих методов поможет вам писать более надежные и надежные тесты, гарантируя качество ваших приложений Angular.