Блог

В приложении Angular 9 у меня есть компонент, который в

 ngOnInit(): void {
  this.records$ = this.service.loadRecords();
}
  

loadReords() возвращает наблюдаемый, который начинается с null и следующий после завершения Http-запроса, выдает список записей.

В шаблоне есть условия, чтобы, если records$ значение равно null, так называемый «загрузочный» div был виден при изменении списка записей — таблицы записей.

Когда я пытаюсь протестировать его (e2e) с помощью транспортира, после page.navigateTo(); чего возвращается:

 navigateTo(): Promise<unknown> {
 return browser.get(`${browser.baseUrl}${this.url}`) as Promise<unknown>;
}
  

Я могу просмотреть страницу, которая завершена (записи уже загружены — даже вызов прокси-API для этих записей намеренно задерживается).

Как я могу просмотреть страницу, которая отображается с фазой загрузки — до records$ загрузки потока?

Есть ли какая-то конкретная причина, по которой вы используете для этого тест e2e вместо более изолированного теста? Последнее позволит вам следить за методом службы и добавлять задержку, чтобы вы могли делать свои утверждения во время состояния загрузки:

 describe('MyComponent', ()=>{
  let fixture: ComponentFixture<MyComponent>;
  let comonent: MyComponent;
  let myService: MyService;
  
  beforeEach(()=>{
    TestBed.configureTestingModule({
       declarations: [MyComponent]
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });

  it('should show the loading <div>', fakeAsync(() => {
    // set up the fake service method with a delay
    const simulatedDelayMS = 500;
    const recordsStub = [{foo: 'bar'}, {foo: 'baz'}, {foo: 'qux'}];
    const recordsStubWithDelay$ = of(recordsStub).pipe(delay(simulatedDelayMS));
    spyOn(myService, 'loadRecords').and.returnValue(recordsStubWithDelay$);

    // perform the first change detection run
    fixture.detectChanges();
    const getLoadingDiv = () => fixture.debugElement.query(By.css('div.loading'))).nativeElement;

    // the <div> should be displayed
    expect(getLoadingDiv()).not.toBeNull();

    // simulate the enough time passing for the data to finish loading
    tick(1000);
    
    // the <div> should no longer be displayed
    expect(getLoadingDiv()).toBeNull();
  }));
})