Тестирование асинхронной службы http - объем ошибок

Question

Я пытаюсь выполнить модульное тестирование асинхронной службы http.

Мой сервис:

@Injectable()
export class MenuService {
  url = 'http://localhost:8080/rest/menu';

  constructor(private httpClient: HttpClient) {
  }

  async getMenus() {
    return this.httpClient.get<MenuData[]>(this.url).toPromise();
  }
}

Мой тест

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

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

    service = TestBed.get(MenuService);
    httpMock = TestBed.get(HttpTestingController);
  });

  it('should get all menus', async () => {

    const menus = service.getMenus().then((data: MenuData[]) => {
      expect(data.length).toBe(2);
    });

    const req = httpMock.expectOne('http://localhost:8080/rest/menu', 'call to api');
    expect(req.request.method).toEqual('GET');

    req.flush([<MenuData>{id: 1, name: 'Test', discreteSubMenus: false, subMenus: false}]);
  });

  afterEach(() => {
    httpMock.verify();
  });
});

Результаты теста выглядят следующим образом

Это результат теста, если я изменю async getMenus() на

 getMenus(): Observable<MenuData[]> {
    return this.httpClient.get<MenuData[]>(this.url);
  }

Что выглядит правильнее.Потому что тест MenuService не прошел, а не весь тест.Как я могу изменить свой тестовый код для правильной проверки асинхронного метода?

Answer 1

Для написания сервисов для бэкэнда я всегда буду использовать Observables, если у меня есть выбор.

Вы можете изменить свой Service метод на

getMenus(): Observable<MenuData[]> {
    return this.httpClient.get<MenuData[]>(this.url);
  }

И ваш метод тестированияизменяется на

      it('should get all menus', async () => {

       //Prepare Mock Menu Data
       let mockMenu = [<MenuData>{id: 1, name: 'Test', discreteSubMenus: false, subMenus: false}];

        const menus = service.getMenus().subscribe((data: MenuData[]) => {
          expect(data.length).toBe(2);
          // Other asserts about the received response here
        });  

        // Asserts of the api call here    
        const req = httpMock.expectOne('http://localhost:8080/rest/menu', 'call to api');
        expect(req.request.method).toEqual('GET');    
        req.flush(mockMenu);
      });